01
从任务选择模式
模式是针对重复问题的解决思路。先说明任务、信息量和使用环境，再比较模式，避免从喜欢的组件倒推需求。
查看正反案例
正向案例
批量处理订单时使用可筛选表格，便于比较与多选。
反向案例
因为卡片好看，把需要横向比较的几十个字段都做成卡片。
动手练习
描述一个任务，写出两种模式及各自的使用代价。
Designing Interfaces
Patterns for effective interaction design
按任务选择设计模式。
已学 0 / 6 个主题
6 个主题学习内容
02
提供稳定的导航结构
导航应该让用户建立空间感。层级、名称、位置与返回方式需要一致，并在跨页面时保留必要上下文。
查看正反案例
正向案例
详情页保留筛选后的列表入口，返回后恢复滚动位置。
反向案例
查看详情后只能回首页，用户需要重新执行全部筛选。
动手练习
完成一次列表到详情再返回的任务，检查上下文损失。
03
按需展示复杂性
先呈现当前任务必需的内容，再让用户主动展开深入选项。隐藏的内容仍应有清楚入口和可理解的名称。
查看正反案例
正向案例
基础搜索旁提供“高级筛选”，展开后能看见已生效的条件。
反向案例
把高级功能彻底藏起来，没有任何入口提示。
动手练习
区分常用设置与偶发设置，并为后者设计明确入口。
04
把表单视为对话
表单不只是字段集合，还包括填写顺序、说明、校验和恢复。字段组织应贴近用户完成任务的思路。
查看正反案例
正向案例
收货信息先问地址，再呈现该地址可用的配送方式。
反向案例
先让用户选择配送方式，最后才发现地址不支持。
动手练习
按真实决策顺序重新排列一个表单。
05
让数据展示支持判断
图表、表格和列表应服务于具体问题。比较、查找异常和查看趋势所需要的结构并不相同。
查看正反案例
正向案例
库存预警列表优先展示缺货风险与补货行动，并支持排序。
反向案例
用装饰图表展示全部库存，却无法找到需要处理的商品。
动手练习
为一张表写下用户需要回答的问题，再删去无关字段。
06
考虑模式之间的衔接
单个控件可用，不代表完整流程顺畅。检查选择、编辑、提交与回到上一步之间，信息和状态是否连续。
查看正反案例
正向案例
修改设置后保留当前分组，并在原位置显示结果。
反向案例
每次保存都回到页面顶部，迫使用户重新寻找刚才的区域。
动手练习
画出页面之间的状态传递，标出不应丢失的信息。
把阅读变成一次实践
从一个小任务开始
选一个需要多步完成的任务，画出两种不同的导航或表单方案。写明各自的适用情境，再制作可点击流程进行比较。
关联文章接着读什么
十大可用性原则
用十条原则检查界面。
UX 中的五个视觉设计原则
理清比例、层级与对比。