1704181139
精益求精：卓越的互联网产品设计与管理 [:1704178984]
1704181140
精益求精：卓越的互联网产品设计与管理 3.4 快速原型设计与交互设计
1704181141
1704181142
当我们需要进行思想交流、概念探索、业务需求表现、交互行为模拟时，快速原型设计无疑是最好的方法。在产品设计中，快速原型法(Rapid Prototyping)是一种有效的、高效的、以用户为中心的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。
1704181143
1704181144
通常，快速原型设计指在尽可能短的时间内制作能够表现产品基本特征的原型，包括整体的信息架构、基础的交互功能以及基本的页面元素等，必要时还需要添加色彩因素。快速原型设计的结果我们通常称之为低保真原型，其目的并不是为了交付，而是为了沟通、测试、修改等，解决产品中主要的不确定问题，所以快速原型设计需要具有快速构建、轻松修改、容易操作、关注流程、抛弃成本低的特点。
1704181145
1704181146
在快速原型设计中，我们通常需要进行整体的考虑，将网站的信息架构、基础的交互、界面框架以及基本的界面元素结合起来，使其成为一个整体，通常我们用线框图的方式来展示。在绘制线框图或流程图之前，应该先思考界面框架，决定界面基本元素与层级。明确界面框架后，我们就需要通过全局导航将这个系统的基础结构定义完成。
1704181147
1704181148
当我们完成基础结构定义后，我们需要将一些基础的交互行为添加到这个快速原型中。通常，在我们完成基础的交互行为规划后，我们需要通过定义控件的交互行为来实现快速原型的设计。交互行为主要由事件(Events)、场景(Cases)和动作(Actions)组成。事件主要是指用户操作界面时的触发行为，比如鼠标的On-Click、OnMouseEnter和OnMouseOut；而每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；每个场景又包含了多个可执行的动作，例如：打开链接、显示面板、隐藏面板、移动面板。当这一切都完成以后，我们便拥有了一个灵活的、可以用于展示和测试的快速原型。
1704181149
1704181150
在整个过程中我们可以发现，实际上快速原型设计只不过是强调制作过程快速的整套交互设计而已，所以如果原型设计师能够在初次制作原型时便考虑到一些交互设计要素，这无疑将使我们整套工作更加高效。通常，在进行快速原型设计时，我们应当尽量避免使操作效率低下的交互设计，尽量沿袭普通用户的使用习惯，尽量减少用户的工作量，尽量使每个操作都对用户实现目标有所帮助，尽量保证操作的一致性，使快速原型尽可能简单，以最少的方式实现最多。
1704181151
1704181152
小知识：快速原型设计工作
1704181153
1704181154
“工欲善其事，必先利其器”。几年前我们一直使用纸上原型来支持我们的快速设计，我们可以用手中的笔快速绘制我们心中的模型，然后把它们剪裁下来粘贴到KT板上，这让我们回想到幼时的手工制作，这真是一个令人高兴的工作。后来我们发现了Axure、Visio等很多类似的软件，我们发现使用它们可以让我们更快、更好地完成，而且更容易表达我们的交互行为设计，它们更能满足我们对快速原型的需求：快速，可以很好地体现我们的交互，而且还能够用于可用性测试，实在是太棒了。虽然我们有时仍然还会使用纸原型，但是我们的焦点都被这些原型设计工具吸引住了。不过很多人也认为纸质模型更有助于思考，我偶尔也会有同感，偶尔也会回到纸模型时代，但是形式已经不是重点。下面我来介绍几款方便的原型设计软件：
1704181155
1704181156
1.Axure RP(Rapid Prototyping)
1704181157
1704181158
Axure无疑是目前最受关注的原型开发工具，能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型（流程图、线框图），并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。
1704181159
1704181160
Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。然而最让人称道的是，Axure的丰富的脚本模式，我们可以通过点击和选择，快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得Axure能够生成十分接近于真实产品的原型。另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。
1704181161
1704181162
但Axure仍然有一个让人头痛的问题：对于中文的支持不太友好。在小部分元件上输入中文的时候，经常需要像碰运气似的反复切换输入法，这破坏了设计师的用户体验。但“瑕不掩瑜”，Axure仍然是交互设计师的首选原型工具。
1704181163
1704181164
1704181165
1704181166
1704181167
图3-8 Axure制作原型
1704181168
1704181169
2.Microsoft Office Visio
1704181170
1704181171
Microsoft Office Visio在2000年被微软收购，并在2002年成为Office 2003套件中的一个组件，最新版本是2007。Visio能够获得推荐的原因是：Visio的适用性非常广，从网站界面、数据库模型，到平面布置图，再到工艺流程图，Visio都提供了相应的元件库和模板来进行快速创建。
1704181172
1704181173
相较Axure而言，Visio更适合于传统行业的生产或流程设计，或者软件及互联网行业中的信息、数据和流程的说明，而不太适用于Web界面。因为它基于Web的元件库还是比较少，并且形式和结构也更类似于Word中的图形工具，因此在原型开发效率上都有所不足。
1704181174
1704181175
1704181176
1704181177
1704181178
图3-9 Visio制作原型
1704181179
1704181180
3.Balsamiq Mockups
1704181181
1704181182
这个基于Adobe AIR Runtime的工具实在是让人眼前一亮，手绘风格的元件样式粗犷淋漓，能创建接近于纸上手绘的原型文件。它提供了丰富的手绘风格的Web常用元件，包括常用的html控件以及一些组合控件，如多媒体控制器、标签页、列表、Iphone界面元件等。
1704181183
1704181184
其他一些设计工具有：Mockflow、Pencil sketch、GUI Design Studio、Prototype Composer、Lucid Spec、Irise Professional Edition等，它们各具特色，这里就不一一详述了。
1704181185
1704181186
1704181187
1704181188