产品 | 线框图、原型和视觉稿
2017-06-18 本文已影响256人
戰敭
一、线框图（Wireframe）
1. 主要特点：
- 呈现主体信息群
- 勾勒出结构和布局
- 用户交互界面的主视觉和描述
2. 详细解释：
- 线框图是一种低保真的静态图形，它勾勒出布局轮廓，但是缺少细节。可以把线框图理解为设计图的骨干与核心，它承载着最终产品所有重要的部分。绘制线框图，重点是「快」，可以使用手绘稿或用相关原型工具进行制作。
3. 何时使用：
- 线框图主要用于产品前期头脑风暴或需求沟通讨论阶段，非正式场合的团队内部交流等。用来激发思考和讨论，收集需求反馈等。
线框图（Wireframe）
线框图（Wireframe）
二、原型（Prototyping）
1. 主要特点：
- 包含完整的产品功能与交互流程
- 能够模拟最终产品的功能和交互
- 用于产品开发前期进行用户体验测试
2. 详细解释：
- 原型应该尽可能模拟最终产品，交互则应该精心模块化，尽量在体验上和最终产品保持一致。但是原型背后的逻辑不要依赖交互形式。减少制作原型的成本，加快开发速度。
3. 何时使用：
- 原型常用于做潜在用户测试。在正式介入开发阶段前，以最接近最终产品的形式考量产品可用性。原型的直观和易懂倒使它成为最高效的设计文档。
原型（Prototyping）
原型（Prototyping）
三、视觉稿（Mockup）
1. 主要特点：
- 表达信息框架，静态演示内容和功能
- 帮助团队成员以视觉的角度审阅项目
2. 详细解释：
- 视觉稿是高保真的静态设计图。通常来说，视觉稿就是视觉设计的草稿或终稿。在视觉稿定稿前，应与团队成员进行多方沟通和确认，以免造成沟通不足造成后期的返工。
3. 何时使用：
- 视觉稿主要用于开发阶段收集用户反馈，同时帮助团队成员以视觉的角度审阅项目。
视觉稿（Mockup）
视觉稿（Mockup）
四、总结对比
| 类型 | 保真度 | 时间成本 | 用途 | 特征 |
|---|---|---|---|---|
| 线框图（Wireframe） | 低 | 1 | 非正式场合的团队内部交流，收集需求反馈 | 手绘草图或黑白灰图型，呈现主体布局 |
| 原型（Prototyping） | 中/高 | 3 | 用于潜在用户测试和开发协作文档 | 包含完整的产品功能与交互流程 |
| 视觉稿（Mockup） | 高 | 2 | 收集视觉反馈，以视觉的角度审阅项目 | 静态的视觉设计稿 |
