交互原型 ——原型构建 Prototyping

研究小组 F组员：周芸 赵贵华 张罕日期： 2010 年 10 月11 日

目录

• 什么是原型及原型构建• 原型与模型的区别• 为什么要制作原型• 原型构建的类别 ( 低保真原型设计和高保真原型设计 )

以原型构建为核心的交互设计

什么是原型及原型构建

在交互设计中，一般把这样的帮助我们与未来产品进行交互，从而获得第一手体验，并发掘新思路的装置，称之为“原型”，这个构建与完善的过程，称之为“原型构建”。实际上原型可以是任何东西，从纸张式的情节串联图到复杂的软件，从粘合的纸模型到锻压的金属模型。总之，原型是设计的一种受限表示，用户可尝试与它交互并探索它的适用性。

原型与模型的区别

c. 构建原型往往是为了“推销”设计团队的想法与创意 . 而制作模型则更侧重于实际生产与制造 ; 原型要求快速构建 , 且是相对廉价的装置 , 它容许为解决关键问题而不用于拘泥于细节的推敲 , 而模型的制作颇费周章 , 要求面面俱到 , 重视细节的品质因而需要耗费大量的时间与金钱。

b. 原型聚焦于创意概念的各方面评估 , 是各种想法与研究结果的整合 , 而模型涉及到了整个产品 , 特别是有关与实际生产﹑制造及装配衔接的方案 ;

a. 在交互设计里 , 原型被认为是一个多方面研究创意概念的工具 , 而在工业设计的模型则被认为是为了测试与评估的第一个产品版本 ; 原型是创意概念的具体化 ,但并不是任何一件产品 , 而模型则与最终产品非常接近 ;

原型构建

快速机器人原型开发 发泡材料草模

模型

原型能够回答许多问题（测试方案的可行性，澄清含糊的需求，让用户测试﹑评估设计，检查设计方向是否正确）－— -“会说话的原型”

制作原型的主要目的是“快速制作每个东西以测试产品的某些方面”。

为什么要制作原型

原型就是设计的一种受限表示，用户可尝试与它交互并探索它的适用性。

在世界闻名的 IDEO 设计公司，设计团队对于原型构建有着相当宽容的态度，即便知道结果不是预想的，但他们还是会完成原型，因为这样便能更快修改，并发现不合理的地方。

“ 说不定还会有些额外的新发现！” IDEO 的设计师如是说。

一切设计都是从低保真开始的。在分析和评估没有开展前，我们应该保留所有设计过程的低保真原型，在后期迭代后，我们将把它逐渐转变为高保真原型。

原型构建的类别1. 低保真原型设计（ High-

Fidelity ） :

2. 高保真原型设计（ Low-Fidelity ） :

对产品简单的模拟 ,基本停留在产品的外部特征和功能构架上 . 与最终产品在外观和功能上差别较大。

高功能性 , 高互动性 ,忠实地展现产品 /界面主要或全部的功能和工作流程 ,具有完全的互动性 .虽尽可能地达到了实际产品的“样子” , 但它未必是可产品化的设计。

低保真原型与高保真原型比较：

基本原则快速原则，迭代原则，焦点原则，有限性原则

焦点原则：每个原型都必须切实解决一个被设计团队锁关注的焦点。为人物角色构建出原型，以解决这个目标人群定位的关键问题。

有限性原则：在原型构建过程中，我们基于不同的原因，需要构建不同的原型，不能指望在一个原型构建过程中解决所有的问题，认识到这种局限性，有利于设计团队的轻松工作，从而激发创意。

快速原则：快速构建原型可以尽可能多地找出问题，同时为后期的深入发掘赢得更多的可能性。我们需要学会快速地联想，并快速地视觉化，实物化。

迭代原则：迭代指的是，“重复操作直至获得明确而详细的结果的过程。”没有迭代就不会产生有序的复杂性。实际上，迭代允许通过简单结构的逐步积累形成复杂结构。在交互设计的原型构建中，我们允许通过的不断的调查﹑测试和调整设计来创造复杂的结构。交互设计，乃至设计的过程都是一个迭代的过程，设计师们一点点推敲，一点点深入直到把设计推到一个完善的过程。

设计流程

• 基本原则• 设计流程 < 资料 > IDEO ：如何帮你设计最好卖的产品？

• 原型制作和工具 < 案例 > iPhone手机原型设计工具介绍

IDEO ：如何帮你设计最好卖的产品？

< 资料 >

让客户扮演消费者

IDEO 创意流程

　　 IDEO所依靠的绝对不只是创意和灵感，还包含更多科学的流程和纪律。 IDEO认为，创意也是可以被管理、被流程化的。

　　 CEO布朗认为， IDEO 的创意流程主要有五个步骤：“观察”、“脑力激荡”、“快速制作原型”、“重复评估”、“改良原型和实际执行”。

　　除了前面提到的“观察”以外，“脑力激荡”是一个紧凑密集、搜集灵感和创意的过程，将观察人们所得的数据进行分析，多多益善。

　　在此期间，不要动辄驳斥任何构想，而是以别人的构想为基础，再提出自己的意见：不要说“但是”，要说“还有”。

　　

如果一张照片胜过千言万语，那么在 IDEO ，一个原型胜过千张照片。因此“快速制作原型”不但是一种创新的语言，更是沟通与说服的工具。

　　 IDEO使用的是一些价格便宜的模型制造工具。例如，用苹果计算机的 iMovies来模仿消费者的经历，用廉价的纸板搭建检查室或试衣间。重要的是，原型越早失败，就会越早找出问题所在，成功的速度就越快。

　　 随后，经过“重复评估”、“改良原型和实际执行”两个步骤， IDEO 设计的新产品或新服务最终上市。

原型制作和工具

原型制作交互设计分为两部分，一部分是形成思路或理念，第二部分就是将思路或理念体现到设计中。而设计其实就是制作各种不同的原型来体现在设计师脑中的理念。

原型法在交互设计中起到非常大的作用

想要达到以上作用，需要在设计的不同阶段运用不同的工具

1 ） 沟通设计思想：使用手绘， PPT ， Visio ，并用 Photoshop 或 Freehand来改进局部来表达思想

2 ） 多个方案的选取：使用 Visio 或 Flash ，配合 Photoshop

3 ） 树立专业形象： Flash 及其 ActionScript或者编程工具

工具

1 ） 快速和各方人员沟通设计思想

2 ） 在多个方案中进行有效的比较和改进意见的获取

3 ） 提高项目质量，并且树立专业形象

产品原型设计最基础的工作，就是结合批注、大量的说明以及流程图画框架图wireframe ，将自己的产品原型完整而准确的表述给 UI 、 UE、程序工程师，市场人员，并通过沟通会议，反复修改 prototype 直至最终确认，开始投入执行。

我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。

Visio ：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。

纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。

Word ：上手难度普通。可以画wireframe ，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。

PPT ：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达

Dreamweaver ：操作难度大，需要基础的 html 知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注

Axure 原型设计软件

Axure RP 能帮助网站需求设计者，快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。 Axure 的正确发音是“ Ack-Sure” ， RP 则是” RapidPrototyping” 快速原型的缩写。

用编程工具可以展示更为复杂和更为保真的原型，但是会牵涉到很多精力用来编码和调试 Bug 。没有较多开发经验的设计人员需要学习掌握其使用，否则关注软件的实现会多于交互设计本身，且一旦花了很多精力做好，就很难愿意因需求的变化，进行修改和调整。所以一定要方案基本上通过中保真原型定好后，再做高保真的原型。

最理想的状态是软件是用什么工具开发的，就用什么工具来做交互的高保真原型。

< 案例 >iPhone 手机原型设计工具介

绍

手绘 iphone苹果手机 UI 图标

可绘制简单线框图（ Illustration ）和手绘风格线框图（ Pencil ）两种风格的原型。组件都可以任意拖动，放到合适的位置。但是由于是在线软件，可能在安全保障上会有些欠缺，而且有些类似于沙盘的形式，不知道什么时候还会消失。优点是可以协同创作。

http://iphonemockup.lkmc.ch/

一、 iPhone Mockup

二、 Balsamiq Mockup

http://www.balsamiq.com/

Balsamiq Mockups 提供了 9 大类共 50 多个控件，涵盖了几乎所有常用的 UI 控件。不管是桌面软件、手机软件还是 Web 站点，都能搞定，且软件极易上手。 Balsamiq Mockups 有许多不足之处，如不能制作交互效果、不能将重复区域做成模块多次使用。不过 Balsamiq Mockups 的免费版本有诸多限制，如无法保存、导出原型图就极为不便。而收费版本需要 $79 ，实在太高。但是也有 5 种方法可以免费获取 license key ，可以去它的网站上研究一下。

三、 iPhone Sketch Pad

http://www.uistencils.com/

这是一个做纸面原型的模板，像我们小时候用的那种复杂的绘图板，不同的是它集成了 iPhone 的一些常见的按钮、输入框、组件样式，而且可以方便的绘制 iPhone的轮廓。有网格线，还送白纸板，当然，这个东西是需要购买的， 9.95美金。

四、 Axure

http://www.axure.com/

Axure RP已经成为成功设计 Web 原型的重要工具，也是产品经理使用的最多的原型工具，虽然 Axure 的优势在 Web 原型，但是用过导入一些组件也可以方便的设计手机原型和交互效果，这对于使用 Axure已经娴熟的人来说，基本不需要任何学习成本，所以也是一种比较推荐的工具。

The end