4. 草图与线框图：从想法到纸笔的快速落地
说实话，很多设计师一上来就打开 Figma 开始拖组件。我见过太多这样的场景了——对着空白画布发呆半小时，然后删了又建、建了又删。为什么？因为脑子里的想法还没成型，就被工具绑架了。
这一章，咱们聊聊怎么用最原始的工具——纸和笔，先把想法快速“倒”出来。然后再把这些粗糙的草图，一步步变成规范的线框图。
4.1 快速草图技巧：别让工具限制你的脑洞
我个人的习惯是，接到需求后第一件事不是开电脑，而是拿一支笔和一张 A4 纸。为什么？因为纸笔的反馈速度是 0 延迟。你脑子里闪过一个布局，手就能同步画出来。
4.1.1 草图的核心原则：快、丑、多
- 快：每个页面不超过 3 分钟。别纠结线条直不直，没人看你的素描功底。
- 丑：允许自己画得难看。重点是记录布局逻辑，不是艺术创作。
- 多：同一个页面至少画 3 个不同版本。横向对比才能找到最优解。
4.1.2 常用的草图符号
你不需要会画画，记住这几个符号就够了：
| 符号 | 表示内容 | 画法 |
|---|---|---|
| 矩形框 | 图片/视频/卡片 | 画个框，里面打个叉 |
| 横线 | 文本行 | 画几条平行线，长短不一 |
| 圆圈 | 头像/图标/按钮 | 画个圈，里面写个字母 |
| 箭头 | 页面跳转/交互流向 | 从 A 画到 B |
嗯，就这么简单。我曾经在做一个电商 App 时，用这套符号半小时画了 12 个页面草图。后来跟产品经理对需求，他拿着草图直接说“这个逻辑有问题”，当场改掉，省了后面 Figma 里改来改去的时间。
4.2 低保真线框图（Lo-Fi）绘制规范
草图是给自己看的，线框图是给别人看的。当你把草图拿给开发或产品看时，他们需要更清晰的表达。这就是 Lo-Fi 线框图的用武之地。
4.2.1 Lo-Fi 的三大特征
- 无颜色：只用灰度（黑、白、灰）。颜色会分散注意力，让人过早讨论“这个按钮好不好看”。
- 无真实内容：用“Lorem ipsum”或“标题文本”代替真实文案。重点是布局，不是文案。
- 无细节样式：不要画阴影、渐变、圆角大小。用简单的矩形和线条就够了。
4.2.2 绘制规范清单
我建议你建立自己的 Lo-Fi 组件库，包含以下基础元素：
- 导航栏：顶部一条横线，高度 56px 或 64px，左侧 logo 占位，右侧菜单项。
- 内容卡片：矩形框，带 4px 圆角（用矩形工具画，别纠结圆角大小）。
- 表单输入框：矩形框，左侧标签，右侧输入区域。
- 按钮：圆角矩形，内部写“按钮”二字。
- 图标占位：正方形或圆形，内部画个叉或写个字母。
4.3 使用 Figma / Sketch 绘制线框图
纸笔草图确认方向后，就该进工具了。我个人更推荐 Figma，因为它的协作能力和组件复用机制太强了。但 Sketch 的用户也别急，逻辑是一样的。
4.3.1 建立你的 Lo-Fi 组件库
别每次都从头画。花 30 分钟建一套基础组件，后面能省 10 倍时间。
// 以 Figma 为例，建议创建的组件：
// 1. 按钮（Primary / Secondary / Disabled）
// 2. 输入框（Default / Focus / Error）
// 3. 导航栏（顶部 / 底部 / 侧边）
// 4. 卡片（图片+标题+描述）
// 5. 列表项（单行 / 双行 / 带图标）
// 6. 弹窗（Alert / Modal / Toast）
4.3.2 绘制步骤
- 先画框架：用 Auto Layout 建立页面整体结构。比如顶部导航 + 内容区 + 底部 Tab。
- 再填内容：从组件库拖出卡片、列表、按钮，填充到内容区。
- 最后连线：用 Figma 的“原型”模式，把页面之间的跳转连起来。这样你就能直接点击预览交互流程。
我记得有一次做多端项目，Web、Pad、手机三端同时画。我用 Figma 的组件变体功能，一套组件同时适配三个尺寸，改一个地方三端同步更新。那感觉，真爽。
4.4 多屏适配的布局策略
现在用户手里的屏幕尺寸五花八门。从 320px 宽的 iPhone SE 到 2560px 宽的 4K 显示器，你的设计必须能“撑得住”。
4.4.1 三种主流布局策略
| 策略 | 适用场景 | 实现方式 | 优点 | 缺点 |
|---|---|---|---|---|
| 固定宽度 | 移动端 App | 设置固定 px 值 | 设计可控，像素级精准 | 大屏两侧留白，浪费空间 |
| 流式布局 | Web 后台 / 仪表盘 | 百分比宽度 + min/max | 充分利用屏幕空间 | 内容可能被拉变形 |
| 响应式断点 | 官网 / 电商 / 内容型 | CSS Media Queries | 不同尺寸不同布局，体验最佳 | 设计稿数量翻倍 |
4.4.2 我的断点选择建议
别被那些“标准断点”忽悠了。你应该根据你的用户数据来定。如果不知道用户数据，先用这套通用断点：
- 手机竖屏：320px - 428px
- 手机横屏 / 小平板：428px - 768px
- 平板竖屏：768px - 1024px
- 桌面：1024px - 1440px
- 大屏：1440px+
4.5 本章知识结构图
下面这张图帮你理清从草图到线框图的完整流程：
4.6 本章小结
说白了，从想法到线框图，就是一条“从模糊到清晰”的路。草图让你快速试错，Lo-Fi 让你跟团队对齐，工具让你高效产出，多屏策略让你覆盖所有用户。
我见过太多设计师在 Lo-Fi 阶段就纠结“这个按钮是 40px 还是 44px”，结果花了一上午调像素，最后发现整个页面布局都要推翻。别这样。先画对，再画细。这是我从无数次返工中学到的教训。