从一个可见结果开始
先选一个能画出来的小结果，例如课程卡片，明确它应显示什么，一次只改变一个因素，持续建立直觉反馈。
要点
- 先明确最终画面
- 一次只改变一个因素
- 保留变化前后的对照
练习 画一张最小课程卡片，列出标题、图片和状态三个信息，不加入额外装饰。
按关系拆解布局
用横向、纵向和叠放关系解释布局，标出谁与谁对齐、谁可以伸缩。长标题和窄屏不是最后的补丁，而是检验布局关系是否清楚的条件。
要点
- 排列与层级
- 对齐与间距
- 固定与可伸缩部分
练习 为同一张卡片画正常标题与长标题两种状态，检查重要信息是否仍然完整。
先有重复，再抽组件
拿两张只有内容不同的卡片对照，识别共同结构与真正变化的数据。先把数据与表现分开，避免为暂时不存在的需求设计复杂配置。
要点
- 实际重复在哪里
- 哪些是内容差异
- 哪些行为必须一致
练习 列出两张卡片的共同结构与差异字段，用这份清单描述一个最小组件。
用状态解释交互
定义默认、操作中、完成与失败等真正需要的状态，给每次转换一个触发动作，并用动效帮助理解层次变化。
要点
- 当前状态是什么
- 什么动作会触发变化
- 失败后怎样继续
练习 为收藏按钮列出未收藏、已收藏两种状态，并说明再次点击与刷新后的行为。