用途:在动笔设计前先规划要设计什么,梳理功能所需的全部屏幕、状态、入口点和边界情况,防止设计师在开发中途才发现缺失状态。
必要输入:正在设计的功能或任务;用户类型(谁执行该流程);平台(iOS / Android / Web / 多平台);起点(用户从哪里开始);已知边界情况(可选)。
输出结构:
- 流程概览:功能、用户、目标、入口点、成功出口、失败出口。
- 屏幕地图:编号、屏幕名称、类型(New/Modal/Drawer/Toast)、触发方式、备注。需覆盖的屏幕类型包括入口、主流程、加载、成功、错误(网络/校验/权限)、空、首次使用/引导、边界情况。
- 状态矩阵:按屏幕列出默认、加载、错误、空等状态,含触发条件、视觉变化和可用操作。
- 决策点:命名决策,标明“是”走哪个屏幕、“否”走哪个屏幕。
- 建议的 Figma 文件结构:功能名/ 下含 Cover、Flow Map、Happy Path、Error States、Empty States、Edge Cases、Handoff。
- 暂不设计的内容:明确列出范围外事项,防止范围蔓延。
质量检查:加载、错误、空三类状态是否全部覆盖;所有决策点是否都标明两个分支;入口点是否包含所有现实用户路径;范围外部分是否明确;Figma 文件结构是否与屏幕地图一致。
反模式:只规划主流程;流程地图与 Figma 文件结构不一致;定义屏幕却不指定所需状态;未记录入口和出口就开始设计;不把每一步与用户目标关联。
触发示例:“为 Figma 中的[功能]规划用户流程”“[功能]需要设计哪些屏幕?”“设计前先梳理[功能]的状态”“帮我组织[功能]的 Figma 文件结构”。
限制:资料未提供具体安装命令、收费方式、价格或平台支持细节,暂未提供。