业务原型图绘制技巧
原型图是需求从文字到视觉化的第一步。它不需要精美的视觉设计，但必须清晰传达页面结构、功能布局和交互逻辑。本节以一个教育平台小闭环项目为例，演示如何使用Figma绘制业务原型图。
绘制工作流
确定页面类型 → 创建布局参考线 → 填充功能元素 → 组合复用 → 细节调整
text
第一步：创建页面布局
在Figma中，首先为不同类型的页面建立布局参考线：
首页布局
- 内容宽度参考线（如1440px）
- 顶部导航栏
- 底部Footer
详情页布局
- 继承首页布局
- 增加右侧分栏（宽度280px）
列表页布局
- 顶部搜索/筛选区域
- 下方内容列表区
操作技巧：使用Figma的参考线（Guides）功能，通过Alt拖动来创建对称参考线。布局参考线可以在后续删除。
第二步：首页原型图绘制
顶部导航
[Logo图标] [首页] [学习] [社区] [关于我们] [用户头像]
text
使用Figma的自动布局（Auto Layout）实现水平分布，选中多个元素后在顶部工具栏选择"水平分布"。
全屏轮播Banner
宽度：1920px（占满全屏）
高度：450px
内容：标题 + 描述文字 + CTA按钮
控制：左右箭头 + 页码指示器（如 01/05）
text
轮播图可能遮挡后面的导航栏，通过调整图层顺序（Order → Send to Back）解决。设置半透明度可以同时看到参考线。
内容展示区
课程案例展示（左文右图或图标+文字+按钮）：
[图标] [标题]
[描述文字]
[了解更多 →]
text
绘制一个后，使用Group（Cmd+G）组合，然后复制多份。设计师看到线框图就能理解每个区块的功能。
课程推荐卡片（上图下文）：
[图片占位]
[课程标题]
[讲师名 · 前端]
[¥199 | 1280人学习]
text
第三步：列表页原型图
列表页的核心是课程卡片，可以复用首页的图文卡片结构：
[搜索栏] [分类筛选]
[课程卡片1] [课程卡片2] [课程卡片3]
[课程卡片4] [课程卡片5] [课程卡片6]
text
登录/注册入口：在导航栏右侧添加"登录/注册"按钮。
Figma核心操作速查
| 操作 | 快捷键 | 用途 |
|---|---|---|
| 组合 | Cmd+G | 将多个元素组合为一个整体 |
| 取消组合 | Cmd+Shift+G | 拆解组合 |
| 复制 | Cmd+D | 快速复制选中元素 |
| 文字工具 | T | 添加文字 |
| 矩形工具 | R | 添加占位框 |
| 发送到最后 | 右键 → Order → Send to Back | 调整图层顺序 |
| 均匀分布 | 选中多个 → 顶部工具栏 | 水平/垂直等间距排列 |
原型图设计原则
- 不需要对齐到像素：原型图的目的是传达结构和功能，设计师看到后就知道要做什么
- 善用Group和复制：相似结构组合后复制，效率翻倍
- 用占位符代替真实内容：图片用矩形框、文字用线段或简短文字
- 保持一致的命名：Frame命名清晰（如"首页"、"详情页"、"列表页"）
- Master模板复用：通用部分（如导航栏、Footer）放到Master模板中，所有页面共享
AI辅助原型设计工具（2026补充）
| 工具 | 价格 | 特点 | 适用场景 |
|---|---|---|---|
| Figma Wireframe Designer插件 | 免费 | AI生成线框图 | 快速出原型 |
| 即时设计 | 免费 | 国产Figma替代品，AI功能 | 国内团队 |
| Mockplus | 免费版可用 | 交互原型，组件库丰富 | 产品经理 |
| v0.dev | 免费额度 | 文字描述生成UI | 前端开发者 |
AI辅助设计工作流：先用Figma手动绘制核心页面结构，再用AI工具（如Wireframe Designer）快速填充细节，最后手动调整交互逻辑。
↑