设计方法之原型设计

原型设计Prototyping

优点：

1.直观展示产品的设计思路，深入定义解决方案，加深对产品的理解 

2.代入产品与用户交互的情景，对预设交互方式进行可行性测试，检验使用顺序、场景等方案

 3.快速迭代改进并细化交互行为，缩短产品上市时间

流程：

点子/灵感设计（Idea）：产品亮点，核心竞争力，创新的架构/交互形式

概念设计（Concept）：明确使用场景，收集素材，构思可交付内容

功能图（Functional Map）:满足目标用户需求的主要功能概要及优先级排序

架构图（Framework）：框架细化至内容，梳理信息与布局

流程图（Flow Chart）：信息传递途径，页面流，关键任务操作流程

UI流程（UI Flow）：UI模式和组件等页面元素细节的交互详情，说明限制（范围值/极限值）和状态（默认/常见/特殊）

线框图（Wireframe）：动作脚本中概念模型转化成的视觉模型，在故事板的基础上绘制

原型（Prototype）：产品功能和内容的示意图，包含静态页面样式和动态操作效果，基本形式包括纸质原型、位图原型、可执行的交互式文件

1.低保真原型（Low-fidelity Prototype）：

特点：无颜色，无截图，主要展示信息布局、内容层次、操作流程

可用红色标注操作方式反馈，蓝色标注界面布局说明文字

利于测试新表单配置或新UI方法的屏幕流程、页面跳转，快速并专注于当前任务，不被无关设计方面干扰。

2.高保真原型（High-fidelity Prototype）/视觉稿（Mockup）：

利于获得拟用视觉设计中颜色、布局或字体的细节反馈；测试交互有效性以及用户界面中的交互动画。

注：可添加原型变更日记提高效率，如日期、版本号、变更内容及原因等

文档内容及输出成果：

1.目录：各元素（模板）

2.目标人群说明

用户定位分析

3.需求分析

思维导图及架构分析

4.功能概述

流程图及功能点分析

5.交互优化，完善功能

交互界面与元素说明

6.线框图、界面

原型图与视觉效果说明

7.界面间关系、跳转逻辑

交互说明或动态演示Demo

Meowmaid阅读笔记汇总整理

主要来源于《DELFT DESIGN GUIDE （戴尔夫设计指南）》《ABOUT FACE 4 （交互设计精髓）》《不止情感设计（Inside Emotional Design）》《破茧成蝶：用户体验设计师的成长之路》等

Thank you for your time~