T/CES 154-2022 电力企业移动应用界面设计指南

《电力企业移动应用界面设计指南》（T/CES 154-2022）主要内容总结

本指南旨在为电力企业移动应用界面设计提供标准化指导，确保界面的一致性和用户体验。标准分为视觉设计要求和交互设计要求两大部分，覆盖了从信息结构到具体交互元素的设计规范。以下总结尽可能详细，结构丰富，分为主要章节进行阐述。文档中包含多个图片，我会在相关描述中嵌入原始图片标签，确保紧邻上下文，以增强理解。

1. ​​范围和规范性引用​​

• ​​范围​​：该标准规定了电力企业移动应用的界面设计要求和交互设计要求，适用于所有电力企业移动应用的设计过程。目标是通过统一的设计规范，提高界面的可用性和用户体验。例如，设计需考虑用户任务、设备特性和使用环境。
• ​​规范性引用文件​​：引用了多项国家标准和国际标准，包括GB/T 18976（以人为中心的交互系统设计过程）、GB/T 18978.11（视觉显示终端办公人类功效学要求）、ISO 9241-210（交互系统的以人为中心的设计）等，确保设计符合工效学和可用性准则。这些引用为设计提供了理论基础。

2. ​​术语和定义​​

• 定义了关键术语，确保设计语言的一致性：
  • ​​用户​​：与产品交互的个体。
  • ​​使用场景​​：用户、任务、设备及物理/社会环境。
  • ​​可用性​​：以有效性、效率和满意度为指标的产品使用程度。
  • ​​用户体验​​：用户对产品使用或预期使用的看法和回应。
  • ​​容器​​：能放置其他控件的控件（如对话框或画布）。
  • ​​移动应用​​：运行在智能手机、平板电脑等移动设备上的应用程序。
  • ​​信息结构​​：信息统筹、规划和设计的整体思路。
  • ​​模态提示​​：用户必须操作后才能继续的提示（如删除确认）。
  • ​​非模态提示​​：短暂显示后自动消失的提示，不中断用户操作。

3. ​​视觉设计要求​​

视觉设计部分聚焦于界面元素的布局、图标、色彩和文本，强调结构清晰和一致性。

• ​​4.1 信息结构​​

  • 分为导航、内容和交互三个子部分：
    • ​​导航​​：要求使用对等或层级结构（如树状），确保用户能轻松切换页面。导航控件包括全局导航（同级别页面切换）、大纲导航（内容间切换）、选项导航（水平选项切换）等。设计需提供标识元素（如后退按钮），帮助用户定位当前位置。
    • ​​内容​​：根据场景分为展示、编辑和交互类型。展示内容应全屏查看；编辑内容需减少导航元素，支持撤销功能；交互内容需平衡导航和操作元素，相似内容分组放置。
    • ​​交互​​：交互控件需匹配操作类型（如按钮用于即时操作、日期选择器用于时间修改）。容器控件（如画布或对话框）应高效承载内容组合。
      

   

  

   

  （图2和图3展示了辅助图标的基本形状和设计示例，需确保图标一致性和易于识别。）

• ​​4.2 布局​​

  • ​​布局适应​​：要求定义不同视觉状态以响应窗口变化（如设备旋转）。内容需保持清晰和聚焦，避免不必要的布局变化。响应式设计包括修改元素位置、调整边距大小、或折叠/拆分界面结构（如图A.1）。排版以基线网格为单位，元素尺寸遵循整数倍；边距统一，内容丰满无大面积空白，元素左对齐。
    

  （图A.1展示了响应式布局的调整方案，如重新定位元素以优化设备空间。）

  • ​​设计单位​​：需提供高分辨率图像，适配不同设备倍率（如iPhone的@3x、Android的xxhdpi）。设计单位用逻辑像素（iOS用pt、Android用dp、Harmony用vp），确保资源图按倍率准备。

• ​​4.3 图标​​

  • ​​应用图标​​：要求简洁易识别，避免文字或照片。使用图标栅格系统（如图1），元素尺寸不超过大圆范围。图标在深/浅色背景下测试可用性。
    

  （图1显示了图标栅格系统，用于规范图标尺寸和对齐。）

  • ​​辅助图标​​：包括功能性和示意性图标（如图2和图3）。设计需纯色无阴影，尺寸一致（圆形、正方形等基本形状），线条角度基于网格（1:1或1:4），曲线为1/4或1/8圆弧。避免与系统图标混淆，设计选中/未选中状态。

• ​​4.4 色彩​​

  • 定义主题色（用于品牌）、中性色（背景/分割）和功能色（强调元素）。颜色不宜超过3种，文本和分割线按层级设置透明度。避免仅用颜色区分元素（如用形状辅助）。色环图（如图A.2）指导色彩选择，结合用户需求和趋势。
    

  （图A.2提供色环参考，用于建立专用色彩库。）

• ​​4.5 文本​​

  • ​​字体​​：推荐系统字体（iOS用苹方、Android用思源黑体），确保清晰易读。自定义字体需考虑版权。文本样式内置（如标题、正文）。
  • ​​表述​​：使用用户语言，避免专业术语；表述一致无歧义，从用户视角出发（如交互链接用主题色）。

4. ​​交互设计要求​​

交互设计部分涵盖登录、导航、列表、查询、消息和录入的具体场景，强调用户操作效率和反馈。

• ​​5.1 登录​​

  • ​​首次登录​​：引导页不超过5页，分功能介绍类或使用说明类。设计需图文结合或动画，信息主次清晰。
  • ​​人脸识别登录​​：需在设置中开启功能，界面包含扫描提示和确认按钮（如图4）。利用穿戴或皮肤特征优化体验。
    

  （图4展示了人脸识别登录界面，包含扫描区域和操作按钮。）

  • ​​手势登录​​：九宫格输入，设计错误反馈（如手势横摆）。入口在设置中开启。
  • ​​扫码登录​​：提供二维码（如图8），界面含扫码图标和登录确认，支持多设备登录。

• ​​5.2 导航​​

  • ​​标签导航​​：底部标签3-5个，含图标和文字（如图5）。切换时提供等待反馈（如转圈图标）。
    

  （图5为标签导航示例，用于频繁页面切换。）

  • ​​宫格导航​​：网格布局（如图6），用于二级界面。重要入口放大显示，增加翻转动效。
    

  （图6展示宫格导航，适合扁平化分类。）

  • ​​列表导航​​：用于条目多的场景，层级不超过3层，含展开动画。
  • ​​下拉菜单导航​​：按钮触发下拉列表（图标随操作变化），选中状态明确。

• ​​5.3 列表​​

  • ​​图文列表​​：瀑布流或卡片式（如图7），含刷新/加载提示。手势滑动支持编辑或进入详情。
    

  （图7为视频列表示例，吸引用户注意力。）

  • ​​纯文本列表​​：用于文档展示，避免分散注意力。
  • ​​纯图片列表​​：直观生动，上拉加载。
  • ​​视频列表​​：结合播放按钮，布局一致。

• ​​5.4 查询​​

  • ​​手动查询​​：搜索栏含智能匹配（如图8），无结果时推荐相关内容。
    

  （图8展示筛选查询界面，用于精确过滤。）

  • ​​筛选查询​​：二次精确查询，筛选项交互形式适配设备。
  • ​​定位查询​​：自动匹配位置，减少输入。
  • ​​语音查询​​：麦克风图标入口，长按操作。
  • ​​图片查询​​：拍照或扫描入口（如图13），结果直接显示。
    

  （图13为图像识别录入示例，用于快速信息获取。）

  • ​​智能识别查询​​：利用传感器（如定位），入口在界面提示。

• ​​5.5 消息​​

  • ​​推送消息​​：触发外在条件（邮件或短信），界面含消息列表（如图9）。用户可关闭推送，内容基于兴趣定制。
    

  （图9展示推送消息界面，提高用户参与度。）

  • ​​模态提示​​：重要警告（如删除数据），必须操作（如图10）。蒙版显示，文字简洁。
    

  （图10为模态提示示例，用于不可撤销操作。）

  • ​​非模态提示​​：短暂显示（2-3秒），自动消失（如图11）。不阻碍操作，文字简明。
    

  （图11为非模态提示，用于操作反馈。）

• ​​5.6 录入​​

  • ​​输入录入​​：键盘输入（如图12），含复制/粘贴功能。键盘自适应输入环境。
    

  （图12显示输入录入界面，支持多种编辑功能。）

  • ​​语音录入​​：麦克风图标启动，提示“请说话”。支持方言识别。
  • ​​图像识别录入​​：OCR或面部识别（如图13），辅助照明优化识别率。
  • ​​智能识别录入​​：传感器自动录入（如定位，如图14）。入口提示隐私选项。
    

  （图14为智能识别录入示例，用于便捷信息获取。）

5. ​​附录内容（资料性附录）​​

• ​​A.1 响应式布局​​：位置调整方案（如图A.1），充分利用设备空间。
• ​​A.2 设备倍率​​：对应表详见表A.1（如iPhone @3x倍率、Android xxhdpi 3倍），指导资源准备。
• ​​A.3 色环图​​：用于配色参考（如图A.2）。
• ​​A.4 控件名称​​：常见控件命名（如菜单为Menu、列表为List），确保设计一致性。
• ​​A.5 标准手势​​：表A.3定义手势（如轻点激活、双指开合缩放），优化触摸交互。

6. ​​整体总结​​

该指南为电力企业移动应用设计提供了全面框架：视觉设计强调结构清晰、一致性（如图标栅格和色彩系统），交互设计注重用户场景和效率（如登录多样化和查询智能化）。核心原则是以人为中心，提升可用性和用户体验。设计需遵循引用标准，并利用附录工具（如响应式布局和手势定义）实现最佳实践。整体上，标准促进了电力行业移动应用的规范化，支持高效、安全的用户操作。