[!info] related notes

• 所属 MOC: ui-ux-moc
• 实践: ux-design-for-frontend · interaction-design

Fitts 定律与尼尔森可用性原则的前端应用

一句话回答

Fitts 定律说目标越大、距离越近，操作越快；尼尔森原则强调系统状态可见、一致性、错误预防等。在中后台里，它们直接指导按钮大小、布局密度、错误提示和操作确认的设计。

Fitts 定律

核心公式

常见的 Shannon 形式：MT = a + b × log₂(D / W + 1)。D 是到目标的移动距离，W 是沿移动方向的目标宽度，a、b 由设备和任务实验拟合。它估计指向动作时间，不包括所有阅读、搜索和决策时间。

简单理解：目标越大、离当前操作位置越近，用户操作越快。

在前端的应用

• 高频按钮要足够大：提交、保存、删除等核心操作按钮不能太小
• 按任务安排位置：缩短常用目标与当前操作位置的距离；右侧或底部并非 Fitts 定律推出的通用位置，需考虑设备、触达范围与流程
• 命令面板（Command Palette）：键盘可绕过指向操作；这是效率策略，不能仅用 Fitts 定律证明整体任务更快
• 侧边导航固定：稳定位置可减少寻找成本，主要体现一致性与学习效应
• 危险操作增加距离：删除按钮不要和编辑按钮挨太近，防止误触

尼尔森十大交互原则

1. 系统状态可见

• 加载态、提交态、错误态都要有明确反馈
• 路由切换时加进度条或骨架屏
• 长操作显示进度提示

2. 系统和现实世界匹配

• 用用户能理解的语言，不要用技术术语
• 错误提示说清楚”什么错了、怎么改”，不要只报错误码

3. 用户控制和自由

• 提供撤销/重做
• 表单支持草稿保存
• 弹窗和流程支持中途退出

4. 一致性和标准

• 同一操作在不同页面的行为一致
• 按钮样式、颜色语义统一
• 遵循目标平台惯例；确认与取消的顺序并非跨平台统一

5. 错误预防

• 根据输入时机校验，避免用户还没输入完就反复报错；提交时仍需完整校验
• 高成本、难撤销操作可用确认；可恢复操作也可用撤销，避免让所有动作都多点一次
• 是否禁用或隐藏取决于发现需求与权限语义；禁用时应解释原因

6. 识别而非回忆

• 已知选项可用选择或搜索建议减少记忆负担；大量选项不宜直接堆成下拉列表
• 历史记录和最近访问帮助用户快速定位
• 表单字段给示例和提示

7. 灵活性和使用效率

• 提供快捷键（如 Ctrl+S 保存）
• 高级用户可以用命令面板快速跳转
• 新手引导和老手快捷方式并存

8. 美学和极简设计

• 不要堆信息，按重要性分层
• 表格列可自定义显示/隐藏
• 仪表盘按角色定制

9. 帮助用户识别、诊断和恢复错误

• 错误提示具体到字段和操作
• 提供修复建议或一键重试
• 关键错误给工单或反馈入口

10. 帮助和文档

• 复杂功能旁加问号提示
• 设置页给功能说明链接
• 提供搜索帮助文档的入口

面试回答主线

如果问”你怎么考虑用户体验”

不要空谈理论，举项目里的实际例子：

比如我做全局错误边界和命令面板，本质上就是尼尔森原则里”系统状态可见”和”灵活性与效率”的落地。错误边界保证页面不会白屏，命令面板让高频操作可以键盘直达。这里分别体现反馈、恢复与效率；Fitts 定律更适合解释具体指向目标的距离和大小。

如果问”安全控制台要注意什么交互”

• 重要操作的确认反馈（防止误操作导致安全策略变更）
• 表单错误的可理解性（策略配置不能出错且用户要知道错在哪）
• 列表、筛选、状态标签的一致性（安全事件多，信息密度高）
• 实时状态变化时的可见性和可追溯性（告警、策略生效状态要清晰）

最短记忆方式

• Fitts = 大目标 + 近距离 = 快操作
• 尼尔森 = 状态可见、一致性、错误预防、识别而非回忆
• 落地 = 按钮大小、错误提示、快捷键、确认弹窗、加载反馈

边界与参考

这些原则帮助提出设计假设，不代替用户测试；可访问性还需检查键盘、语义、焦点与对比度，见 html-accessibility-basics。

• Nielsen Norman Group：10 Usability Heuristics
• Nielsen Norman Group：Fitts’s Law