02 · 手绘草图 → App 原型

速览

产出	移动端或桌面端界面原型
用时	20 到 40 分钟
类型	「Prototype」
前置	一张草图，画得丑没关系

场景

脑子里有个界面，说不清楚但能画出来。或者反过来——你能画个大概，但不会做视觉。

这个案例的关键认知是：草图承载的是结构和布局意图，不是美感。 一个圆圈加一个方块，它能读出「这里是头像，这里是内容卡片」。

怎么做

第 1 步 · 画

纸笔、iPad、任何画图工具都行。画的时候关注三件事：

• 有哪些块，各占多大面积
• 谁在上谁在下，谁在谁旁边
• 哪个是主要动作（画个圈标出来）

不用画图标，不用画文字，不用管比例精确。

第 2 步 · 存成文件

拍照或者导出成图片，存到项目目录里。

第 3 步 · 提示词

这是一张手绘的界面草图。

请按它的结构做一个移动端界面。

草图里的元素对应：
- [左上那个圆] = 用户头像
- [中间那几个横条] = 内容列表，每条是一个任务
- [底部那个方块] = 主行动按钮
- [右上角那个小图形] = 筛选入口

界面用途：[这个界面是干什么的]
使用场景：[用户在什么情况下打开它]

要求：
1. 布局按草图，不要自作主张重排。
2. 视觉按当前的设计系统。
3. 状态要全：空态、加载态、错误态、只有一条数据、很多条数据。
4. 用真实的示例内容，不要 Lorem ipsum，但示例数据要标注是示例。
5. 触摸目标不小于 44×44。

先只做这一屏。

为什么这么写

逐个说明草图元素对应什么，是最关键的一步。 不说的话它会自己猜，猜错了你要重来。花三十秒把对应关系列出来，比重生成两次划算。

「布局按草图，不要自作主张重排」 要写。它的默认倾向是把你的布局「改进」成更常见的形态，而你画那个草图就是因为你想要那个布局。

「先只做这一屏」 是为了控制范围。一次做五屏，你没法针对性地修。

验收清单

• [ ] 布局跟草图对得上
• [ ] 五个状态都做了
• [ ] 触摸目标够大（拇指点得到）
• [ ] 示例数据标注了是示例
• [ ] 在手机实际宽度下看过（375px 和 430px 都试）
• [ ] 主要动作一眼能找到
• [ ] 没有 Lorem ipsum 残留

变体

做完一屏之后扩展

基于这一屏的设计语言，做出这个流程的其余屏：
1. 点「新建」之后的表单页
2. 提交成功之后的反馈
3. 点某一条之后的详情页

保持组件、间距、动效跟第一屏完全一致。
每一屏同样要做全状态。

加交互

把这几屏连起来，做成可点击的原型：
- 点主行动按钮 → 表单页
- 表单提交 → 成功反馈 → 回到列表
- 点列表项 → 详情页，详情页有返回

转场用克制的滑动，不要弹跳。

从草图直接出图而不是界面

同样的做法也能用来出插画和海报。画一个很粗糙的形状，让它生成正式的图。这条路对不会画画的人特别有用——你只需要有构图意图。

常见问题

它把我的布局改了。

补一句更强的约束：「草图里元素的相对位置和面积比例是设计决策，不要优化它们。如果你认为某处有问题，先告诉我，不要直接改。」

做出来太像通用模板。

草图给的是结构，气质要靠设计系统给。先挑一个设计系统，或者做 案例 04 抽自己的。

草图太抽象，它认不出来。

两个办法：一是把元素对应关系写得更细；二是在草图上直接标注文字，它能读。

要做的是复杂的表单页。

表单单独说清楚：字段、校验规则、错误提示的时机。参考 Craft 里的 form-validation 那条：「按 form validation 的要求处理校验：说明什么时候校验、错误怎么传给辅助技术、规则住在哪一层」。

相关

• 进阶 · 图像与视频 — 草图输入的其他用法
• 进阶 · Craft — 状态覆盖和表单校验