学习目标
- 把客户任务转为清晰页面和导航结构。
- 检查不同设备上的无障碍和完整互动。
明确页面支持什么决策
列出受众、待答问题及下一行动。服务页可能应先说明适用性、流程、限制和联系方式，而不是装饰开场。用有意义标题组织简明具体内容。决定本页放什么，以及什么需要清晰链接到其他解释。
建立易懂路径
采用一致导航及描述目的地的链接。显示当前位置和实用返回方式。关键操作不能只靠颜色区分。表单应有可见标签、所需信息说明，以及字段旁可纠正的错误。成功提交后应说明下一步。
考虑不同能力与环境
人们可能用键盘、辅助技术、放大或强光下的小屏。检查可读对比度、合理焦点顺序及传达用途的替代文字。空间不足或文字放大时应允许重排。自动检查能找部分问题，不能证明真人能完成任务。
把性能和维护纳入设计
使用适当尺寸图片、稳定布局空间和必要互动。避免遮挡内容或使导航难以预期的效果。指定价格、服务范围及联系方式更新人。测试真实长度、语言方向和错误状态。换成实际内容后，设计仍应可用。
任务驱动的设计循环
审查完整旅程，而非单独批准画面。
理解
识别用户任务及所需信息。
组织
建立清晰内容与导航。
构建
实现无障碍、响应式互动。
评估
观察完成情况、排除障碍、保持准确。
对照表
| 领域 | 问题 | 证据 |
|---|---|---|
| 内容 | 访客能判断服务适合吗？ | 准确范围和易懂标题 |
| 互动 | 不用鼠标能完成任务吗？ | 键盘路径、可见焦点、可纠正错误 |
| 响应布局 | 窄屏仍有完整信息吗？ | 真实移动及放大文字检查 |
| 性能 | 主要信息出现是否可预期？ | 稳定布局与适当媒体 |
看似完整的联系表单
虚构企业的漂亮咨询页只用红边表示错误。
- 键盘检查发现用户无法识别缺什么信息。
- 团队添加标签、说明性错误及清晰焦点路径。
- 在大小屏测试纠错、提交确认及承诺跟进。
改善在于任务完成及易懂反馈，而非新颜色。完整无障碍评估可能需要更多检查。
行动清单
- 写明任务和下一行动。
- 使用有意义标题及链接文字。
- 检查键盘流与纠错。
- 测试窄布局及放大文字。
- 指定内容和维护责任人。
常见误区
批准空模板
仅适合短演示文字的布局可能遇到实际翻译、图片就失败。
把自动分数当作整体体验
高分不证明导航、措辞或复杂互动对所有用户有效。
常见问题
响应设计就是缩小桌面页吗？
不是。应调整布局和互动，同时保留关键信息及可用阅读、焦点顺序。
无障碍可只在最后添加吗？
可以后期修补，但在整个设计开发期间处理内容、结构和互动更容易。
