设计方法之原型设计

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
2155 1 9 2017-02-25

Image title

原型设计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~


全部评论:1条

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票