4、人机交互界面设计标准：GB/T 18978（ISO 9241）系列中关于界面设计、交互原则、信息呈现的关键要求
GB/T 18978（等同采用 ISO 9241）是UI设计领域最权威的人机交互工效学标准族。该标准并非单一文件，而是覆盖从硬件输入设备到软件交互界面、从视觉显示到交互循环的完整体系。对于UI设计师而言，最核心的部分集中在 GB/T 18978-110（对话原则）、GB/T 18978-112（信息呈现） 以及 GB/T 18978-125（视觉信息编码） 等子标准中。这些标准共同回答了三个根本问题：如何让用户理解系统状态、如何让操作符合用户预期、如何让信息传递不失真。本章将聚焦于界面设计、交互原则与信息呈现三大维度，提炼出可直接落地的设计约束与检查清单。
上图展示了GB/T 18978在UI设计中的整体作用框架。三个支柱（界面设计、交互原则、信息呈现）并非孤立存在，而是通过可用性目标（有效性、效率、满意度）形成闭环。设计师在落地时，需要将标准条款转化为具体的UI规格说明，例如将“一致性”转化为“所有删除操作必须二次确认”这样的可执行规则。
4.1 界面设计：任务适配与一致性约束
4.1.1 核心原理：界面是任务的映射
GB/T 18978-110（对话原则）第7条明确指出：界面必须适合任务，即界面结构、输入方式、信息展示应与用户的工作流程和心理模型对齐。这意味着设计师不能仅从视觉美观出发，而应从任务分析入手。例如，一个ERP系统的库存盘点界面，如果按照功能模块（表单、报表、设置）组织，而不是按照“盘点任务流”（扫描→核对→差异处理→提交）组织，就会导致用户频繁切换界面，增加认知负荷。
4.1.2 判断方法：一致性审计清单
一致性是界面设计中最容易被量化检查的维度。标准要求内部一致性（同一产品内）和外部一致性（与平台惯例一致）。操作流程如下：
- 建立组件清单：列出所有按钮、对话框、列表、表单控件的使用场景。
- 定义交互模式：例如“保存”快捷键统一为Ctrl+S，“删除”操作统一为“选中→点击删除→弹窗确认”。
- 逐屏比对：检查相同语义的控件是否使用相同视觉样式和位置。
- 平台惯例对照：例如在Web端，面包屑导航通常位于页面顶部；在移动端，返回手势通常从屏幕左缘滑入。
| 一致性维度 | 检查要点 | 常见违规示例 |
|---|---|---|
| 视觉一致性 | 相同层级文字字号、按钮颜色、间距是否统一 | 同是“确定”按钮，一处为蓝色实心，另一处为灰色描边 |
| 交互一致性 | 相同操作的手势、快捷键、点击区域大小是否一致 | 列表删除在A页面为左滑，在B页面为长按 |
| 语义一致性 | 相同图标/标签是否表达相同含义 | “垃圾桶”图标在A处表示删除，在B处表示清空缓存 |
4.1.3 案例拆解：企业后台的“批量操作”一致性改造
背景与约束：某SaaS后台的订单管理模块，原有“批量退款”功能在订单列表页通过勾选复选框后点击顶部按钮触发；而在售后管理模块，“批量退款”却隐藏在每条记录的右键菜单中。用户投诉“找不到批量退款入口”，客服工单量月增15%。
分析过程：通过用户录屏回放发现，用户在售后模块尝试了3次以上才找到入口。对照GB/T 18978-110的“一致性”与“任务适合性”原则，问题在于：相同业务语义（批量退款）在不同模块使用了完全不同的交互路径。
实际操作步骤：
- 将“批量退款”统一为“勾选→顶部工具栏出现操作按钮”的模式。
- 在售后模块的列表页增加复选框列，并固定顶部操作栏。
- 在右键菜单中保留“批量退款”作为快捷方式，但视觉上弱化（改为灰色小字）。
结果对比：改造后，该功能的用户查找时间从平均45秒降至8秒，相关工单量下降70%。风险与代价：部分老用户习惯了右键菜单，初期有短暂不适应，通过气泡提示引导后平稳过渡。
4.2 交互原则：反馈、状态与用户控制
4.2.1 核心原理：可感知的响应循环
GB/T 18978-110提出了7条对话原则，其中“适合用户控制”和“适合错误处理”对交互设计影响最深。标准要求系统对用户的每个操作都提供明确反馈，且反馈时间需符合预期：0.1秒内响应（如按钮按下效果）、1秒内显示操作结果（如页面跳转）、5秒以上需显示进度条或加载动画。同时，用户必须能够随时中断或撤销当前操作。
4.2.2 操作流程：反馈机制设计四步法
- 步骤1：定义操作类型——区分“瞬时操作”（点击按钮）、“短时操作”（保存文件）和“长时操作”（批量导入）。
- 步骤2：匹配反馈形式——瞬时操作用视觉按压效果；短时操作用Toast提示；长时操作用进度条+百分比。
- 步骤3：设置撤销边界——明确哪些操作可撤销（如编辑文字）、哪些不可撤销（如提交订单），并在UI中明示。
- 步骤4：异常状态覆盖——设计网络断开、超时、并发冲突时的提示文案与恢复路径。
4.2.3 实战场景：表单提交的“防丢失”设计
某医疗问诊App的复诊表单填写页面，用户填写5分钟后点击提交，因网络波动导致提交失败。初始现象：系统直接提示“提交失败”，用户返回上一页后发现已填写内容全部丢失，用户愤怒卸载App。
关键输入数据：该页面日均填写量2000次，因网络问题导致的丢失率约3%。分析判断：根据GB/T 18978-110的“错误处理”原则，系统应保留用户输入数据，并提供恢复路径。
实际操作步骤：
- 在表单页启用本地自动保存（每30秒存入localStorage）。
- 提交失败时，弹出对话框：“网络异常，您的草稿已保存，是否重试？”
- 提供“查看草稿”入口，用户可恢复至上次保存点。
结果对比：数据丢失率降至0.2%，用户投诉率下降90%。复盘经验：反馈不仅是“告诉用户发生了什么”，更是“帮用户从错误中恢复”。
4.3 信息呈现：编码、密度与可读性
4.3.1 核心原理：视觉编码的工效学约束
GB/T 18978-112（信息呈现）和GB/T 18978-125（视觉信息编码）对信息呈现提出了量化要求。核心原则包括：信息最小化（只显示当前任务所需信息）、分组与层级（通过留白、边框、背景色区分信息块）、编码冗余（颜色不能作为唯一编码方式，需配合形状或文字）。例如，在数据可视化中，不能仅用红绿色区分涨跌，还需加上“▲”和“▼”符号。
4.3.2 判断方法：信息密度评估表
设计师可通过以下表格评估界面信息呈现是否达标：
| 评估维度 | 合格标准 | 检查方法 |
|---|---|---|
| 文字对比度 | 正文与背景对比度 ≥ 4.5:1（WCAG AA级） | 使用取色器计算对比度 |
| 字号 | 中文正文 ≥ 14px，辅助信息 ≥ 12px | 设计稿标注检查 |
| 点击区域 | 触屏目标 ≥ 44×44pt，鼠标目标 ≥ 24×24px | 开发后实测 |
| 信息层级 | 每屏不超过3个视觉层级 | 眯眼观察界面，看是否层次分明 |
| 编码冗余 | 颜色编码必须伴随形状/文字 | 将界面转为灰度图检查 |
4.3.3 案例拆解：工业监控大屏的信息降噪
背景与约束：某工厂的产线监控大屏，原本在一屏内显示所有设备的温度、压力、转速、能耗等200多个数据点，且全部用红黄绿三色状态灯表示。操作员反馈“眼睛看花了，但关键报警经常漏掉”。
初始现象与目标：报警响应时间平均为4分钟，目标缩短至1分钟内。
分析判断过程：通过眼动仪测试发现，操作员视线在屏幕上无规律扫视，因为所有数据点视觉权重相同。根据GB/T 18978-112的“信息层级”原则，应将信息分为“全局状态层”（顶部概览）、“设备详情层”（中部列表）和“异常聚焦层”（右侧弹窗）。
实际操作步骤：
- 将200个数据点按设备分组，默认只显示设备健康状态（正常/预警/报警）。
- 点击设备卡片后，才展开详细参数曲线。
- 报警时，除了颜色变化，还增加闪烁动画和蜂鸣提示，并在右侧固定区域显示报警列表。
结果对比：报警响应时间从4分钟降至45秒，误报率降低30%。风险与代价：初期操作员不习惯需要点击查看详情，通过一周培训后接受。