usability

易用性

易用性不是凭直觉判断的——它是一项可衡量的质量标准。每次交互都必须无需费力思考即可完成。

范围

在以下情况下使用此技能：

• 评估网站或单个页面的易用性
• 设计或优化表单
• 设计错误状态和反馈机制
• 根据 Nielsen 的启发式原则进行启发式评估
• 希望通过提升易用性来提高转化率
• 需要让内容更易于浏览和阅读

原则

1. 别让我思考

每次交互都应无需费力思考即可完成。用户不会逐字阅读，而是快速浏览。用户不会做出最优选择，而是选择第一个可用路径。

2. 有效性优先于效率，效率优先于满意度

ISO 9241 的三项标准层层递进。首先，任务必须能够完成；然后，完成任务所需的精力要尽可能少；最后，用户要感到满意。

3. 约定俗成胜过标新立异

用户熟悉各种惯例（左上角的标志 = 首页、右上角的搜索框、购物车图标）。只有在有充分理由时，才打破这些惯例。

4. 美观易用效应

美观的界面会被认为更易用。美不是奢侈品，而是影响易用性的因素。

5. 容错是必备要求

用户会犯错。每次交互都必须具备容错能力，并提供清晰的反馈。

6. 可衡量性

易用性通过任务完成情况、错误率、任务用时和满意度评分来衡量。

规则

应做：保持一致

• 在所有页面中使用统一的字体、颜色、设计元素和写作规范。
• 确保类似的页面类型采用相同的布局。
• 使用一致的交互模式（相同的按钮样式、悬停效果和表单逻辑）。

应做：优化首屏内容

• 在无需滚动即可看到的区域中，展示最重要的信息、主要 CTA 和清晰的标题。
• 避免将“欢迎”作为第一个标题。改用以用户收益为导向的陈述。

应做：精简表单

• 只询问必填信息。每增加一个字段，转化率都会降低。
• 清楚标明必填字段。
• 使用清晰的字段标签，绝不能只用占位符作为标签。
• 直接在受影响的字段旁显示错误消息。
• 出错时保留已正确填写的字段。

应做：设计错误状态

• 创建带有后续导航的自定义 404 页面。
• 针对每项用户操作提供清晰的反馈（成功、错误、加载中）。
• 禁止视频或音频自动播放。
• 绝不显示没有后续操作指引的空状态。

应做：让内容易于浏览

• 使用小标题、列表、表格和视觉锚点来组织文本。
• 将每行长度限制为 8-10 个单词。
• 使用左对齐文本（网页上不要使用两端对齐）。
• 正文字号至少设为 18px。

不应做：引入不必要的复杂性

• 避免不必要的动画、框架和弹出窗口。
• 除链接外，避免使用下划线。
• 避免使用没有信息价值的通用图库照片。
• 避免隐藏或出乎意料的导航。

不应做：忽视加载时间

• 将加载时间控制在 3 秒以内。
• 使用描述性 URL。
• 优化图片和媒体，以便快速加载。

模式

启发式评估（Nielsen）

根据 10 项易用性启发式原则进行系统评估：系统状态可见性、系统与现实世界相匹配、用户控制权与自主权、一致性与标准、错误预防、识别而非回忆、灵活性与使用效率、美观且简约的设计、帮助用户识别并从错误中恢复、帮助与文档。详情请参阅 references/nielsen-heuristiken.md。

渐进式呈现

对于复杂内容：先只展示必要信息，再提供“了解更多”选项查看详情。示例：FAQ 折叠面板、可展开的产品详情、多步骤表单。

行内验证

对于字段数超过 3 个的表单：在字段失去焦点时立即验证输入内容。直接在字段旁显示成功提示（绿色勾号）和错误提示（红色文字，并给出修改建议）。

提升转化率的社会认同

在着陆页、产品页面和联系页面上：在 CTA 附近放置客户评价、评分、客户数量或 Logo。使用真实且可核实的表述。

反模式

难以理解的导航

导航中没有明显的链接，或只使用没有标签的隐晦图标。用户必须猜测点击后会跳转到哪里。**解决方案：**使用清晰、明确的链接标签。始终将图标与文字标签结合使用。

表单字段过多

字段太多、包含不必要的必填项，或多页表单没有进度指示。每增加一个字段，完成率就会降低约 5-10%。**解决方案：**只保留必要字段。多步骤表单应使用进度条。

媒体自动播放

用户访问页面时，视频或音频自动开始播放。**解决方案：**媒体始终以暂停状态加载。将播放按钮醒目地显示出来。

虚假可供性

元素看起来可以点击，实际上却不能（或反之）。**解决方案：**按钮看起来像按钮，链接看起来像链接。不要让装饰元素采用交互样式。

缺少方向指引的无限滚动页面

页面很长，却没有锚点链接或返回顶部按钮。**解决方案：**添加目录、粘性导航，并在滚动达到指定深度后显示返回顶部按钮。

检查清单

技术

• 加载时间少于 3 秒（Lighthouse）
• URL 具有描述性，不含晦涩的参数
• 没有不必要的动画或弹出窗口
• 自定义 404 页面带有后续导航
• 针对所有用户操作提供明确反馈
• 已在所有断点上测试响应式设计

内容和设计

• 正文的字体大小至少为 18px
• 对比度充足（最低为 4.5:1）
• 所有页面的设计保持一致
• 文本按便于浏览的版块组织

导航

• 主菜单功能正常且直观
• 层级超过 2 级时提供面包屑导航
• 链接样式保持一致
• Logo 链接到首页

表单

• 仅包含必要字段
• 必填字段有明确标记
• 直接在字段旁显示行内错误消息
• 出错时保留已正确填写的输入内容
• 提交后显示成功确认信息

测试

• 已依据 Nielsen 的启发式原则完成启发式评估
• 已在多种设备和浏览器上进行测试
• 已为关键转化元素规划 A/B 测试

交叉参考

• ux-design -- UX 设计作为总体学科
• accessibility -- 无障碍设计作为可用性的一个子集
• responsive-design -- 跨设备可用性的技术前提
• navigation-design -- 导航作为可用性的核心要素
• web-typography -- 提升可读性的排版规则
• landing-pages -- 着陆页上的转化优化