01
界定问题
开始绘制之前，先明确问题、受众与真正的约束。
- 由人作出的决策
- 问题、范围、成功标准，以及不纳入范围的内容。
- AI 支持
- 收集背景，整理和综合已有资料。
- 依据
- 书面的问题陈述与验收标准。
工作方法
我的工作方式，一步一步展开。
我用系统的方法工作，让直觉能够被解释、检验和改进，同时保留其中的人性。
我不会把这些阶段当作固定配方，而是用它们释放注意力。当重复性工作有了结构，我就能把更多时间用于倾听、理解，以及作出真正改变产品的决策。
每个阶段都会留下依据和理由。这样，我可以与他人讨论工作，数月后重新接手，并诚实地区分已知、假设和仍待验证的内容。
六个阶段
02
研究
用实际背景和人的需求检验最初的印象。
- 由人作出的决策
- 需要了解什么、与谁核实，以及哪种 UX 研究方法能够提供帮助。
- AI 支持
- 准备访谈提纲、整理获准使用的资料，并检查来源。这不能替代真实参与者。
- 依据
- 问题、所选方法与可追溯来源的发现。我会区分观察、解释和仍待验证的假设。
03
系统
建立字体、色彩、间距和组件的基础，使产品增长后仍然易于维护。
- 由人作出的决策
- 艺术方向、信息层级、字体尺度，以及动效的特征。
- AI 支持
- 搭建变量和组件状态，并检查对比度。
- 依据
- 定义了全部状态的设计令牌与组件集合。
04
原型
使用系统实例组装界面，从第一天起就能浏览操作。
- 由人作出的决策
- 构图、流程，以及编程前需要测试的内容。
- AI 支持
- 组装变体、适配不同屏幕尺寸，并记录状态。
- 依据
- 能够浏览操作，并适配约定屏幕尺寸的原型。
05
设计交付
让 Figma 组件与代码实现之间保持清晰可辨的对应关系。
- 由人作出的决策
- 哪些属于必须遵守的约定，哪些可以由实现方式决定。
- AI 支持
- 结构化读取设计、生成组件与测试。
- 依据
- 在代码中保留设计系统层级的组件。
06
验证
在浏览器中测试结果，并审查自动化测试无法判断的部分。
- 由人作出的决策
- 可接受的质量门槛，以及需要说明的遗留问题。
- AI 支持
- 测试、无障碍审查与性能测量。
- 依据
- 通过的测试套件、经验证的对比度，以及设计与浏览器结果的比较。
AI 的作用
明确记录判断与执行之间的边界。
人来决定什么
我明确问题、优先级与质量标准。AI 可以提出不同方案，但必须由我判断它们是否符合用户需要，并承担最终决策的责任。
AI 执行什么
我用 AI 探索变体、准备组件、审查代码和提出测试建议。我会提供明确的背景与边界，然后把结果与设计和预期行为进行比较。
如何保持控制
我会记录每个工具可以做什么、哪些操作需要我的批准，以及如何检查结果。对于重要决策，我会寻求独立审查，并保留修改的原因。
原则
先系统，后界面
我希望好的决策可以重复使用。因此，我把界面与共享组件、状态和规则联系起来，并在新需求出现时重新检查系统。
依据优于断言
我尽量展示结果是如何形成的：原型、组件与已有检查。同时也说明哪些部分仍在开发，或者尚未得到验证。
美感也有功能
我关注字体、留白和动效，因为它们会影响人对界面的理解。如果某个效果分散注意力，或构图妨碍阅读，即使视觉上喜欢，我也会重新考虑。
删去没有帮助的步骤
我根据问题调整方法，记录有助于工作和学习的内容，不增加团队并不需要的步骤。
查看实际应用
在每个案例中，我说明哪些方法得以应用、作出了哪些决策，以及哪些问题仍待验证。