画第一张界面草图
02-02 画第一张界面草图
Section titled “02-02 画第一张界面草图”这一课让项目有可见形状。项目说明写的是目标和边界，界面草图画的是用户打开工具后会看见什么、点哪里、结果出现在哪里。
草图可以很粗，用纸画、白板画、文字画都可以。第一张草图的价值，是让学员和 AI 对“页面长什么样”有共同画面。
这一课的成果是一张「第一版界面草图」。
- 能根据使用者故事画出界面区域。
- 能标出输入区、按钮、结果区、提示区。
- 能用文字描述界面布局。
- 能让 AI 根据草图提出页面结构建议。
- 能保存草图和界面说明。
- 建议时长：20 到 30 分钟。
- 可以用纸笔实拍，也可以用纯文本框图。
- 用课程主项目画出一个最小页面。
- 讲清草图服务于协作，画得粗也能用。
- 收尾让 AI 把草图转成页面结构说明。
- 使用者故事。
- 项目说明。
- 纸笔或白板工具。
- AI 工作台工具。
可以这样开场：
“很多人一听界面设计就紧张，觉得要会审美、会设计软件。第一张界面草图很朴素，它只需要回答：用户从哪里输入，点哪个按钮，结果在哪里出现。”
以 CSV 转 Markdown 小工具为例，界面可以分成四块：
- 标题区：告诉用户这个工具做什么。
- 输入区：粘贴 CSV。
- 操作区：转换、清空、复制。
- 结果区：显示 Markdown。
- 提示区：告诉用户输入格式或错误原因。
可以用文字画一个草图：
+----------------------------------+| CSV 转 Markdown 小工具 || 把表格内容粘贴进来，生成可复制结果 |+----------------------------------+| 输入 CSV || [ ] || [ ] |+----------------------------------+| [转换] [清空] |+----------------------------------+| Markdown 结果 || [ ] || [复制结果] |+----------------------------------+| 提示：第一行会作为表头 |+----------------------------------+这里要讲一个关键观念：
“草图的目的，是让行动路线清楚。用户打开、输入、点击、得到结果，这条路线能走通，第一版就有了形状。”
让 AI 根据草图输出页面结构建议时，要让它说明每个区域的用途，同时控制视觉复杂度。
最后收束：
“界面草图像木匠的铅笔线。线画得简单，但它能告诉我们下一刀该从哪里下。”
屏幕演示流程
Section titled “屏幕演示流程”- 打开使用者故事。
- 找到用户动作：打开、输入、点击、复制。
- 在纸上或文档里画出四个区域。
- 给每个区域写一句用途。
- 把草图发给 AI。
- 让 AI 转成页面结构建议。
- 保存草图和结构说明到
assets或项目说明。
给 AI 的协作卡
Section titled “给 AI 的协作卡”这是我的第一版界面草图：【粘贴文字草图或截图说明】
请帮我做三件事：1. 复述这个界面包含哪些区域2. 说明每个区域服务于使用者故事里的哪个动作3. 给出第一版页面结构建议
请保持简单，优先让用户能完成输入、转换、复制结果。界面草图检查单
Section titled “界面草图检查单”- 标题区已标出。
- 输入区已标出。
- 主要按钮已标出。
- 结果区已标出。
- 提示区已标出。
- 使用者动作能连起来。
- AI 已复述界面结构。
让学员为自己的主项目画第一张界面草图。
要求：
- 至少包含输入区、动作按钮、结果区。
- 用文字说明每个区域的用途。
- 让 AI 复述草图并提出结构建议。
- 学员纠结好不好看：先让流程能走通。
- 区域太多：第一版只保留完成主动作需要的区域。
- 按钮太多：先保留一个主按钮。
- AI 提出复杂布局：要求它回到第一版功能和使用者故事。
完成主项目第一版界面草图。
提交内容：
- 草图截图或文字框图。
- AI 的结构复述。
- 界面草图检查单。
- 第 1 页：草图是给项目画第一条铅笔线
- 第 2 页：输入、按钮、结果、提示
- 第 3 页：文字框图示例
- 第 4 页：让 AI 复述界面
- 第 5 页：界面草图检查单