交互原型设计软件 Axure RP Pro 5 中文教程

交互原型设计软件 Axure RP Pro 5 中文教程（共4篇）

篇1：交互原型设计软件 Axure RP Pro 5 中文教程

交互原型设计软件 Axure RP Pro 5 中文教程(1)

交互原型设计软件 Axure RP Pro 5 中文教程 [By Hawking] October 9, 2008 at 11:11 am · Filed under WEB Design

来源：http://演示文件、word说明文档，以及对生成规则进行自行编辑、定义。

功能区2：工具栏，基本和office风格一模一样，功能也很容易上手。

功能区3：工作区，这就是我们平常操作工具，创建prototype的舞台，将自己的构思在这里释放，将自己的想法在这里展现。

工作区的上部显示打开的文件名，可同时打开多文档，进行操作。

功能区4：站点地图，Axsure RP创建的文件是模拟真实网站页面关系的，sitemap就是通过树形目录关系，管理所有的站点页面文件与流程图文件。科学的文件关系结构，对有效的演示文档与生成易读的说明文档相当重要。

我的操作习惯是先画流程图，然后根据流程图构建页面文件框架，最后才开始页面的具体设置。期间可以将文件分为LOFI（低保真）与HIFI（高保真）两个部分进行分别展示，有利于不同的需求者使用。

功能区5：器具箱，囤积了所有用来画wireframe与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区，进行操作。对于这里面的对象，我们有必要一一详细了解。

功能区6：复用模块区，这里创建的页面文件和sitemap的页面相似，唯一不同的是，master的每个文件，可以当作一个整体，被

sitemap反复调用。这个功能就相当于程序开发中的程序复用，用好这个功能，可以减少我们很大一部的工作量。也更容易理解网页文件的关系，了解网页设 计师、程序员是怎么构建网站的页面的。

功能区7：页面笔记，用来对当前创作页面进行注释与说明。同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。

功能区8：页面载入时的交互功能。通过在这里设置，不同条件下，页面初次打开时的状况。

功能区9：注释与交互区。这个注释和交互和7、8不同，7、8针对的是页面，而9针对的是页面中的元素，也就是一个个widgets。

功能区的上面部分设置交互条件。通过鼠标点击、滑入、滑出，设置触发的事件，与对应widgets相应的变化。这一部分对没有程序基础的人可能会有一点难度，我稍后会做详细解释。

功能区的下面部分是注释部分，用户可以对选定的对象进行详细的注释。Axure已经设置了几个默认的注释字段，但是其实这些默认的注释字段，大家完全可以不使用，因为它可能和你要说明的东西风马牛不相及。

那么该怎么办呢？Axure提供了自主设置字段，只要你自己设置好自己常用的字段，然后按照自己的习惯编写就可以了。比如说你要说明对象的功能、优先

级、参数，那么你在设置中加入这三个字段就好了。Axure最大的优势就是你设置的这些注释，在生成说明文档时，Axure自动帮你生成PRD规格的表格

文档，你可以省去相当大的编号工作，与文档工作。这些我在之后也会做说明。

这些就是Axure的主要功能区，但是其实还有两个小的角落大家可能会忽略，那就是6、7、8区下面的一行系统信息，这里显示的信息很重要，但

是一般人却经常会忽视。我只所以说重要，因为我们在给ui设计师wireframe的时候他们总会问，这里多少像素，那里多少像素，可是我们在画

wireframe的时候却无法度量。Axure创建的wireframe，完全可以生成html，因此我们可以在画的时候就度量好每个像素距离。但是我

们要怎么做呢？这就需要利用到下面这行小信息栏了。

信息栏左边显示的是文档保存情况。而右边呢，当你将一个widgets放入工作区，并选择这个widget时，这里就有用了，它显示的是你所选

择widget的高宽，以及距离页面顶部和左边的px距离。通过使用上下左右键，结合这个信息栏，你可以一步一步将它移动到你想去的地方。有意思吧？

Part III :文档管理(Document)

开章要说的是文档管理。文档管理看似简单，但是这是从操作功能上来说的，而我在说功能上的时候，想把我对文档管理的理解也一并说一下。

文档管理的目的，其实是为了有一个清晰的产品思路。刚开始工作的时候，我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的，我也不

例外。没有好的整理习惯，这直接导致每次寻找先前的文档都要花费相当长的时间，甚至不小心误删，如果恰好有事请假，别的同事也无法接手工作。

所以，做一个prototype需要首先构建一个清晰的文档关系，这样一方面能够让自己清楚文件关系与位置，更主要的是让开发者与接受者能清晰理解你的思路，生成更合理的产品说明word文档。

Axure RP的sitemap，与windows的树形目录相似，是以父子关系构建页面关系的，每个页面既可以是一个页面page，也可以是一个流程图flow。

一、工具功能条

1、增加一个子页面：为所选择的页面创建一个子页面。

2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。

3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。

4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。

5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。

6、删除页面：将所选页面删除，同时删除其子页面。

7、编辑页面：在工作区打开所选择页面，进行编辑。

二、右键—增加为鼠标右击文件所显示命令，下同。

1、增加一个子页面：同 一，1。（表示和第一大点，第1小点功能相同，以下同此）

2、在所选页面之上增加一个同等级页面。

3、在所选页面之下增加一个同等级页面。

三、右键—移动

1、页面上移：同一，2。

2、页面下移：同一，3。

3、页面降序：同一，4。

4、页面升序：同一，5。

四、右键—复制

1、复制页面：复制所选页面，作为同级页面显示在所选页面下方。不包含所选页面子页面。

2、复制分支：复制所选页面以及子页面，作为同级分支显示在所选页面分支下方。

五、右键—页面类型

1、wireframe：页面类型定为线框图，文件图标显示页面图标。

2、flow：页面类型定位流程图，文件图标显示流程图标。

六、右键—其他

1、删除页面：同

一、6。

2、重命名页面：为所选页面重命名。

3、编辑页面：同

一、7。

4、生成流程表：将所选页面以及其子页面关系，生成流程图。生产图有两种页面布局方式可选。标准模式，页面按照父子关系从上自下排列；阶梯模式，页面按照父子关系从左上至右下，以阶梯方式进行排列。

5、复制页面链接到剪切板。

以上就是sitemap所有命令，其实这些命令都很简单，也很容易理解，关键在于怎么去使用。

由于页面有两种类型，wireframe与flow，所以要善于用这两种标记页面，从而让人理解你的意图。我总结大致这两种标记可以如下利用。

flow图为父页面，wireframe图为子页面：先画流程图，然后根据流程图构建页面关系。这样在流程图的指引下结构页面关系，可以更清晰的理解页面框架。

wireframe为父页面，flow为子页面：为页面线框图中的特殊部分做流程解释。可以对页面的细节部分进行详尽的解释。

当然，这两种结构方式要活学活用，在复杂的产品页面结构中，他们完全是你中有我，我中有你的。

Part IV : 模板复用(Templates)

masters和sitemap面板很相似，文档操作也一样，它们的本质区别是，sitemap里的文件是最终展示页面，masters里的文件却只是一个模块，是页面的一个部分。

masters的英文直译是主人或雇主，但是我认为这里可以叫做模板，或者复用模块。masters的文件，是页面中重复的模块，由于在不同页面中这些模块是一样的，所以拿出来作为一个模块编辑，然后在不同页面中进行调用。

这个功能类似于网页程序开发中的程序复用，不同页面中调用同一段程序，一般把这段程序单独做成一段页面程序，然后用include命令进行调 用。master的文件就相当于这段被调用的页面程序。dreamweaver也有类似的功能，就是template，可以参照理解。

一、功能条

master的功能条功能基本和sitemap一模一样，功能也基本一样。唯一不同的是master可以创建文件夹，可以通过文件夹收纳不同的文件，因此唯一不同的就是第一个功能按钮，功能作用是增加一个文件夹。

二、右键单击文档——增加

增加功能的功能模块功能除了增加文件夹其他和sitemap相同，大家可以参考教程三中的二大条。

而masters的文档组织结构主要依靠文件夹完成，页面文件之间不存在父子关系。这是文档操作与组织中与sitemap的最大不同。

三、右键单击文档——移动

文件移动功能基本上也和sitemap完全相同，但是父子关系的文档移动是文件相对于文件夹完成，而不是相对于文件进行。

功能，基本上也可以参考教程三的第三点。

四、右键单击文件——文件身份“行为”

behavior是行为的意思，这个功能是axure升级到4版本后加入的，是针对master的不同使用情况而添加的一个功能，也是要重点介绍的功能。

1、normal：普通文件。就是一般的复用文件。是默认创建的复用文件。

2、place in background：定位的复用模板，这类模板的特点是定位于页面的底层，并且锁定模板中的widgets在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。

3、custom widgets behavior：自定义模块。这类模块就类似于自创了一个widgets。

这类模块与其他类型的复用模块的不同在于，其他模块与复用到页面的模块是完全相同的，模块的功能设置是什么，功能说明是什么，页面中的模块设置和功能说明就是什么。

而自定义模块与页面中被复用的模块是母子关系。自定义模块只决定了模块的功能和位置，但是进入到特定的页面中，模块中的各自部分的说明和功能可以重新定义。

充分理解三种不同类型的复用模块的区别，根据不同环境有效的选择，也是非常重要的。

五、右键单击文件——其他 1、2、3功能都是文档文档操作功能，和sitemap一样，分别是删除、重命名和编辑master。4、5功能是对应的。前者是将所选模板文件批量运用于页面，后者是将所选模板文件，批量从页面中去除。通过选择此功能，会弹出sitemap文件的树形目录，你可以通过选择需要添加模板的页面，从而完成模板使用或移除。

check all：选择所有页面

uncheck all：所有页面都不选择

check all children：选择所选页面以及其所有子页面

uncheck all children：不选择所选页面以及其所有字页面

在4中有特殊的position设置和options命令，position中有两个命令

place in blackground：将文件至于页面背景

specify location：是特殊定位，可以通过设置距离左侧和上边的距离，来将模板文件放入特定的位置。

options里的多选框的意思是“只有页面中没有此模板时才置入”，默认是选择的。如果不选择而置入页面，就会出现如果页面中已经有模板，模板被再次置入的情况。当然如果有特殊需要的模块，就可以这么使用了。

6、usage report：使用报告，点击后弹出面板，显示所有使用了此复用模板的列表，显示的是文件名称，通过双击文件名，可以在工作区打开，直接编辑。

PartV:Widget工具

Axure RP的widgets工具栏，就是我们用来画线框图wireframe、流程图flow的工具，也可以说是组成我们最终输出图表的零件。好比我们小时候玩 的组装积木，这些工具就是组装积木里的一个个小部件，组成什么？组合得怎样？完全依靠个人的经验和智慧。因此，熟悉每一个工具的用法和用途，才能随心所欲 的画出脑海中的图形。

Widgets工具栏，下分两类工具：

wireframe线框图工具：基本上对应着web页面中的各种图形。针对页面中交互行为的表达，Axure RP专门增加了image map region 图像映射区、dynamic panel动态面版、menu（vertical/horizontal）水平/垂直菜单等几个特殊的工具。

Flow工具：流程图所需的基本图形框架。

我们先谈wireframe线框图工具。学习这部分工具，如果事先有html基础，或者对web页面元素有比较充分的理解，就很容易入手。以下我根据图片中的编码，依次讲解。

1、image图片：给wireframe中插入一个图片站位，也可以直接置入真实的图片。

2、text panel文本：插入文本。相当于插入了一个< text >标签。是不带链接的文本。但是其实也可以带链接，在interactions中我们会提到。

3、hyperlink超链接：插入带链接的文本。相当于插入了一段带< a >标签的文字。但其实在Axure中它与普通文本除了外型不同，没有本质区别。之所以将两类文字区分开来，目的还是为了在视觉表达中让人直观的理解链接文本和普通文本，而这对于设计人员理解也非常重要，因此建议画图时尽量标准的区分链接文本和普通文本。

4、rectangle矩形：插入一个矩形。可以对其进行图形样式编辑。此图形通畅被用来表达板块的边界。

5、placeholder占位符：插入一个占位符。占位符通常用来表达在页面中某些特殊区域，比如情况复杂，或者在系统升级中不需要修改，又或者无关紧要的区域等等。作者需要结合说明文字，进行对应的详细表达。

6、button按钮：插入一个按钮，相当于< button >标签。按钮一般结合表单使用，当然也可以作为强化的提示链接使用。

7、teble表格：插入一个表格。Axure的表格使用起来不是很方便，增加行、列，修改行、列宽度都不方便，算是一个败笔。期待在下一个版

本的时候能够有更好的进步。与标准化制作网页一样，表格的使用在画wireframe的时候就应该明确其作用，是用来作为数据列表展示使用，而不是作为网 页布局的控件。

8、text field文本输入框：结合表单使用。一般用作表单中提交数据。比如搜索框、用户登录框、注册信息填写框等。用作字段提交或单行数据提交。

9、text area文本区：结合表单使用。一般用作大段文字编辑、提交。比如文章编辑、留言等板块。

10、droplist下拉列表框：结合表单使用。一般用作下拉菜单或者下拉列表选项，比如在搜索中，可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接，可以通过下拉选择直接进行页面跳转。

11、listbox列表选择框：结合表单使用。通过文本框列表选项，通常使用在多项列表选择，比如在填写简历表的时候，选择你所感兴趣的行业，会提供列表选择框。不过列表选择框都会结合按钮使用。

12、checkbox多项选择：多项选择通常使用在表单中，以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好，会提供十多个选项，因为选项可以并列进行，因此使用的是多项选择。

13、raido button单项选择：在一组选择中选择适合选项，选项关系非此即彼。比如在填写性别的时候提供男女选择，用户非男即女，只取一项。当然，不排除再多提供一个双性选择，这样就是三选一，但是同样是非此即彼的单一选择。14、15、horizontal line水平线、vertical line垂直线：用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线，为了系统生成用于演示的html文件，特将两种线条分开使用。

16、button shape形状按钮：相当于图形按钮，多用于导航，或者多帧切换的版面切换按钮。可进行边角编辑。

17、image map region图像映射区：它用于在web页面中制造一片不可见的区域，一般是图片的部分区域，相当于图片的热区，从而添加说明与互动。在现实的网页中经常 会有一张大图中有某个区域是触发按钮，而图像映射区就可以用来说明这个区域的的功能和互动内容。

18、inline frame框架：类似于html中的< iframe >对象。用于在页面中制造页面框架，每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏，一般都是使用了框架，左侧载入的是导航页面，右侧是载入的管理页面。

Axure的缺点是，暂时不支持百分比，因此iframe都是按像素度量的，和实际页面效果还是有差距。

19、dynamic panel动态面版：是Axure为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构。它是不同的state叠加的一个动态区域，默

认显示其中一个state，当用户触发按钮、图片或者下拉列表等时，可以设置相应动态面版切换到不同的state。不同state的关系，类似于

photoshop的层，也类似于html中的css属性layer。

我们可以通过右击dynamic panel进行state编辑，然后通过打开对应state进行编辑，编辑方式和编辑页面相同。20、21、menu（vertical/horizontal）水平/垂直菜单：用于制作水平或者垂直的菜单，可以添加漂浮的的子菜单，添加方法很简单，就是选择所要添加的菜单项，添加submenu。

Axure RP pro 的widgets工具栏，另一个重要的工具组就是flow，流程工具。

对于画流程图，是我们经常会遇到的问题。我们和程序工程师沟通，用再多的口水，也无法挑明的事情，画一张简明的流程图，就能很直白的说明关键问题。

有时候你可能会懊恼，因为程序员的思维犹如计算机，你告诉他为什么没有用，你就告诉他该怎么做，是左是

右，是0是1就好了。这个时候，产品经理需要的是理性思维，清晰的思路，如果你不清晰，工程师大多数会跟着你的思路乱做一团。所以多画几个流程，多根据页 面需求画清晰的流程，就能解决实际的问题。

话不多说，本章主要介绍flow里面的工具，因为图形其实很好介绍，简单的英文翻译就好了，所以也顺带说说这些图形在流程里的作用。方式还和以前一样，编号，对号入座，咱们来一个萝卜，一个坑：

1、rectangle：矩形

作用：一般用作要执行的处理（process），在程序流程图中做执行框。

在axure中如果是画页面框架图，那么也可以指代一个页面。有时候我会把页面和执行命令放在同一个流程中做说明，这个时候将两类不同的矩形做色彩区别，然后做说明就好了。

2、rounded rectangle：圆角矩形或者扁圆

作用：表示程序的开始或者结束，在程序流程图中用作为起始框或者结束框。

3、beveled rectangle：斜角矩形

作用：斜角矩形我几乎不使用，可以视情况自行定义。或者在其他的流程图中，有特殊含义，暂不知晓，也希望有识之士指点一二。

4、diamond：菱形

作用：表示决策或判断（例如：If…Then…Else）,在程序流程图中，用作判别框。

5、file：文件

作用：表达为一个文件，可以是生成的文件，或者是调用的文件。如何定义，需要自己根据实际情况做解释。

6、bracket：括弧

作用：注释或者说明，也可以做条件叙述。一般流程到一个位置，做一段执行说明，或者特殊行为时，我会用到它。

7、semicircle：半圆形

作用：半圆在使用中常作为流程页面跳转、流程跳转的标记。

8、triangle：三角形

作用：控制传递，一般和线条结合使用，画数据传递。

9、trapezoid：梯形

作用：一般用作手动操作。

10、ellipse：椭圆形或圆形

作用：如果画小圆，一般是用来表示按顺序数据的流程。

如果是画椭圆形，很多人用作流程的结束。如果是在use case用例图中，椭圆就是一个用例了。

11、hexagon：六边形

作用：表示准备之意，大多数人用作流程的起始，类似起始框。

12、parallelogram：平行四边形

作用：一般表示数据，或确定的数据处理。或者表示资料输入（Input）。

13、actor：角色

作用：来自于use case 用例，模拟流程中执行操作的角色是谁。需要注意的时，角色并非一定是人，有时候是机器自动执行，有时候也可是是模拟一个系统管理。

14、database：数据

作用：就是指保存我们网站数据的数据库。

15、image：图片

作用：表示一张图片，或者置入一个已经画好的图片、流程或者一个环境。

基本上，axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中，模糊了流程图的区别，而尽量贴近交互设计时的工作内容。

流程图无疑只是一个表达的工具，我们在使用的时候应该根据自己的实际情况使用，而不应该死钻牛角尖，非要知道某个图形的通用标准。理解和沟通是第一位的。而对于某些具有标准性含义的图形，大家人所共知，则我们应该遵循共同的准则，这样就能达到表达的目的。

其实axure里面由于不涉及到具体的程序流程，所以有些标准的图形并没有提供，如不规则图形、侧面双

矩形等，大家可以自己google一下或者baidu一下很容易就知道。大多数情况下，还是自己自定义一下自己的符号标准，就跟prd文档加上名词解释一 样，才是解决方法。

来自: http://hi.baidu.com/liuquan1021/blog/item/91ff4f365ef84c45241f1484.html

篇2：交互原型设计软件 Axure RP Pro 5 中文教程

第一类： Layout Controls(布局控件)

第二类： Item Controls (项目控件)

第三类： User Interaction Controls(用户交互控件)

我们已经对第一类布局控件在Blend中的应用进行了描述，本文将介绍Item Controls，也称为项目控 件;和User Interaction Controls，也称为用户交互控件.

Item Controls (项目控件)

在实际项目中，我们经常会遇到处理数据集合或者数组的情况，而处理数据集合最好的方法就是使用 “Binding”绑定。正如您所知道的，在 ASP.NET中，就已经应用了“Binding”绑定的概念，其优势在于 节省了大量的开发时间，降低了开发难度。而在Silverlight中微软加强了Binding功能，并且使用Item Controls(项目控件)来显示和处理数据集合和数组类型数据。Silverlight提供了四种标准项目控件， 分别是 ListBox，ComboBox，TabControl和TreeView。 下面，我将演示在Blend中如何使用这些控件。

根据上文描述，使用Item Controls前，首先需要绑定数据，而绑定数据需要有相关数据源，所以，我 们需要先定义数据源。本文依旧使用前文例程 SilverlightBlendDemo，在Silverlight客户端创建一个新 的 Usercontrol，ItemControlsDemo.xaml.

创建完毕后，主设计窗口将呈现ItemControlsDemo的UI设计界面，看右边属性栏，有三个Tab，其中包 含“Data”，选中Data，

该窗口允许用户在Blend中定义数据源，导入XML格式数据，定义外部数据源等功能。

首先，我们选择“Define New Sample Data..“，定义一个新的例程数据源，名字使用默认 SampleDataSource。其中，Define in是指定该数据源的应用访问，默认为整个项目，当然，如果作为测 试，也可以指定该数据源仅应用于当前打开文档。这里，我们使用默认设置。

创建完成后，在右边Data数据栏中，会出现SampleDataSource选项，而在该数据源下包含一个集合 “Collection”，该集合默认有两个属性“Property1”和“Property2”。在项目应用中，可以根据需要 再添加新的属性。

由于我们添加的是例程数据源，Blend已经在该数据源中添加了例程数据，根据需求，我们可以对例程 数据进行修改。首先选择Collection，然后点击编辑例程数据，

可以看到，Blend生成的默认例程数据，这里我们可以进行简单修改，Property1默认类型String， Property2默认类型为Boolean，这里我想修改Property2为String，

类型修改为String，还可以修改该数据列的具体的格式：

为了方便演示我修改两个默认属性名，分别为，“网站”和“网址”

点击OK，例程数据建立完成，

下面，看看在Blend中如何使用Item Controls装载数据源。首先我们测试ListBox：

在左边工具栏，选择ListBox控件，然后在ItemControlsDemo.Xaml设计页面，画一个ListBox。

然后从右边Data栏中，选中Collection，拖拽到ListBox空白处，ListBox即可自动绑定例程数据。

Blend会自动生成XAML代码，对例程数据进行绑定。

1

2

3

4

5

6

7

8

9

10

11

这样就轻松实现了ListBox绑定例程数据。

再试试ComboBox，从左边工具框选择ComboBox,在设计页面画一个ComboxBox，

仍旧按照以上方法，拖拽Collection到ComboBox上，即可看到数据已经进行绑定。

同样，在Treeview中，也可以正常绑定。

在数据绑定的时候，Data栏目，会有黄色的框，表示“Data Binding”。

具体的定义，在Property属性栏中查看：

以上则是使用Blend对Item Controls进行数据绑定的方法。由于文本主要讲述Blend应用，这里，就不 再对Item Controls的属性进行赘述，如果您有问题可以留言给我。

User Interaction Controls(用户交互控件)

Silverlight控件中，User Interaction Controls是面向用户行为交互，该控件和ASP.NET和WPF中的 大部分交互控件相同，用法也基本相似。其选取和设计，和前文Item Controls相同，这里就不再赘述。 需要注意的是，不同的交互控件，具有不同的交互事件，从而达到不同的交互效果。在后文，如果有需要 ，我将详细解释说明。

篇3：交互设计的原型构建方法研究

当我们所设计的东西诸如, 移动电话、生活空间、交易系统等已经整合了硬件与软件时, 设计已经变得越来越复杂与动态了。应对这种新的趋势, 新的设计特质必须被发掘出来。新的设计方法需要考虑与具体情境中的整体体验相融合, 而不是仅仅考虑某个单独的物品或特殊部分。我们可以通过比喻个例子来表述当下的设计情境——设计师将需要去思考光的体验, 而不是直接去想如何设计一个灯本身。

在交互设计中, 设计师们需要聚焦于通过实际的设计制作来探索, 即“做中学”以及积极地实验与综合各种可能的解决之道。所以我们需要构建起一种恰当的有效的设计方法, 以适应这个复杂动态的过程, 使各种设计经验可以被分享, 可以成为进一步深入的基础。以原型构建活动为中心, 将交互设计的原型构建看做是一个动态迭代的过程, 并从整体的角度去理解并重构交互设计。推导这个过程可以从以下三种方法来进行:

二、构建用以观察与理解用户的原型

设计师们需要理解现存的用户体验, 界定使用情境并识别出可能的设计机会点。在这个阶段最好能获得现实存在的用户体验, 但是这种真实体验往往可能不安全、不可能或者太昂贵, 所以原型构建的目标是通过高保真原型模拟出一个现实情境, 使设计师们能获得有效的体验。

早在1970年代, 施乐PARC研究中心的Tim Mott和Larry Tesler在设计最早的计算机文字编辑系统时, 在初期就很注重构建观察与理解用户的原型。他们称之为“guided fantasies”, 这被认为是最早将完善的用户测试运用到用户界面设计。Tim实地采访了编辑们的工作环境, 观擦他们的日常工作。编辑们则向Tim和Larry描述他们用纸和笔做编辑工作的情境。这样设计师和最终用户一起设想如何用计算机来输入文本, 创建菜单选项以及如何使用鼠标与键盘来代替笔的功效。

IDEO设计公司设计的水下导航界面也是个很好的例子。在这个设计中, 因为导航界面包括了水下移动机构和多媒体摄像机两部分的共六个自由度的操作, 最重要的问题就是让操作员避免认知上的混乱。在设计初期, 设计师们还模拟了真实的操作场景:在一间空房间内放置各种椅子以模仿水下复杂情况, 一个设计师拿着连着隔壁房间监视器的摄像机, 另一个设计师则在隔壁房间的监视器前向模拟环境中的设计师发出身体 (即设备) 或摄像机上/下, 左/右, 前/后不同的命令。通过这种演练设计团队比较真实地理解了操作界面的使用和实际用户的使用感受, 并且发现了潜在的问题, 为下面的具体设计获得了最直接的第一手资料。

三、构建用以探索与迭代设计的原型

原型构建的主要目的是通过不断地构建活动促进探索各种更广泛的解决方法并且通过这些可触摸的实体原型引导设计团队向更具体的用户体验深入。在这种探索与评估的方法中, 设计的中心需要聚焦到设计物各个层面的具体特质。通过实体原型的构建, 设计物与用户之间的交互行为便可以直观地被记录与发掘出来, 以帮助设计团队评估各种创意, 为迭代设计提供进一步的基础, 以最终提升交互原型的设计品质。

探索用户体验, 需要在多条设计线索上构建各种有效率的原型以帮助设计师们相互比较与甄别。在IDEO的一项视频游戏设计中, 为了设计好一个带有六个自由度的控制器, 设计团队选择了三条截然不同的可能发展线索, 并使用一些类似物作为原型道具, 帮助设计师们发现这些线索上可能存在的用户体验。通过对这些原型道具的反复把玩, 帮助设计师们体会到每种特定发展线索之间微妙的差别与对于使用者的潜在影响。

对于设计概念的探索与评估是整个交互设计过程的重要方法。Bill Atkinson设计的Hyper Card是早期软件设计界被使用最为广泛的交互原型构建工具之一。当谈及对于原型构建的看法时, 这位曾负责苹果公司第一代用户图形界面 (GUI) 系统的交互设计大师认为, 原型构建中最重要的是帮助设计构建原型的工具不能太艰深, 要让设计者方便地尝试各种不同的想法, 并且可以快速的进行修改与反复设计。Hyper Card的优点是能将各种要素快速地整合到一起来, 设计者用一上午时间就做出个东西来, 让人们反复检测它修改它。

四、构建用以相互交流与评估的原型

原型构建的第三种方法就是可以让项目委托方、其他设计团队成员以及最终用户能通过直接的原型体验来交流对于设计方案的理解, 并且有的放矢的提出评估意见。

2003年IDEO进行了一项设计研究, 尝试发掘帮助人们利用无线技术传递情感的方法。在这个研究项目中, 一个被称为“Kiss Communicator”的原型) , 将帮助人们把爱意 (a kiss) 传递给在世界另一端的爱人。设计师们希望通过构建这个交互通讯原型来探索两个不在同一地点的用户如何利用无线技术来传递情感的各种可能性。在该设计原型的构建中, 设计团队需要领会把握好一些要点, 如交流的私密性, 两个分开的人与其所在情境, 如何传递等。针对这些要点, 每对这种交互设备都会有一个特定的匹配模块, 以保证人们可以只和指定的人进行一对一的消息传递。用户可以用最简单最自然的肢体语言来传递情感信息, 并将进一步的肢体动作语言传递到另一台匹配的设备上转化为生动的有明暗起伏如同呼吸一样的微光信号。

最近斯坦福大学的人机交互研究组又开发了新的工具包, 帮助构建交流与评估的原型。“d.tools”是结合了软硬件的交互原型构建系统, 它能帮助设计师快速地构建基于物理的和电子的用户界面, 设计师们可以不必再为软硬件的结合花费过多时间而只需要专注于设计思考。通过d.tools设计师们能方便地设置物理控制 (如按钮、游标) , 传感器 (如加速度计) , 输出设备 (如发光二极体, 液晶显示屏) 并整合为交互原型, 使用户的使用行为能直接与原型互动起来, 如此辅助设计团队交流与评估设计概念。

五、小结

通过以上的论述与实例介绍, 交互设计中的原型构建过程有三种重要的方法需要设计团队深入探讨。

1. 可以通过原型构建模拟设计项目所涉及的人、情境与设计

物间的特殊局部关联以及整体上的联系来帮助深入理解现存的用户体验;

2. 通过原型构建来提供、确认或者放弃从具体体验中获得的设计灵感, 并在此基础上迭代设计;

3. 通过与其他人共同完成的原型体验, 来有效评估设计质量并构建起一个共同的新观点或者认识。

事实上, 这三个原型构建的方向并不是一种具体的交互设计技巧, 而是用发展的态度和语言来解决交互设计问题的思路。设计团队通过这些方法的原型构建案活动, 可以将原本包含于不同学科中的各种技术融合到一起, 同时这个过程提供了让不同学科背景的设计师相互补充工作技巧、拓宽设计途径的机会。

摘要：本文针对目前新兴的交互设计发展趋势, 提出了以原型构建为中心的三种不同的设计研究方法, 为设计师与研究者提供方法借鉴。

关键词：交互设计,原型构建,设计方法

参考文献

[1]〈美〉普里斯等著;刘晓晖等译.交互设计——超越人机交互.北京:电子工业出版社.2005.

[2]〈美〉库帕 (Coper, A.) 著, 〈美〉丁 (Ding, C.) 等译.交互设计之路:让高科技产品回归人性.北京:电子工业出版社.2005.

[3]Bill Moggridge.Designing Interactions.MIT Press.2006

篇4：论交互设计中的原型构建

交互设计活动的展开需要在不同设计阶段制作原型对设计概念和设计方案进行验证。目前关于原型制作的理论和方法都只关注于软件界面设计，并没有从软硬件结合的交互系统层面对原型构建进行探讨。作者改进了David Benyon等人提出的PACT模型，提出了交互设计应该包括人、系统、情境三个方面的因素，进而说明了需要在交互设计过程中构建人物原型、系统原型、情境原型，并给出了原型构建所需的技术和方法。

关键词：

交互设计 原型构建 设计要素 原型分类 构建方法

中图分类号：TB47

文献标识码：A

文章编号：1003-0069（2015）06-0060-03

随着计算机技术的进一步发展，人们的日常生活中到处充满了采用计算机技术开发的产品，此类产品比传统未采用计算机控制技术的产品具有更多的灵活性，人们称其为智能产品，如智能电话、智能电视机、智能电冰箱等。不可否认的是，这类产品因为使用了计算机控制技术，其操作界面更多是以“软界面”的方式呈现，有一些还带有专用的信息显示屏幕，这些都提升了用户使用产品所需的技能水平。很多厂家为了提升产品的易用性、可用性而展开了相关的设计研究，也就是交互设计。

作为一个新兴的研究方向和学科，交互设计在发展过程中遇到了很多的迷茫和困惑，国内外也有很多学者对相关问题进行了探索，但都没有形成得到广泛认同的观点。交互设计本身属于设计活动，带有设计活动与生俱来的一些特征，如问题的不明确性、目标的模糊性、解的不唯一性等。因此，在交互设计活动中存在有迭代的验证环节，需要设计师不断地构建不同设计阶段所得成果的运行，并对其进行验证。本文从交互设计所包含的组成元素进行了探讨，进而提出了交互设计过程中所应该关注的原型及其构建方法。

1 交互设计的组成要素

狭义的交互设计指人机交互设计，即是设计供人们使用的数字化产品的过程。这里的数字化产品，既包括硬件产品的控制件，如数码相机、智能手机等产品上的实物质旋钮、按钮等；也包括软件产品在屏幕上显示的控制选项，如窗口、指针、国标等。经过拓展之后，交互设计的定义为“设计具有交互功能的数字化产品、环境、系统和服务的行为。”交互设计的目的是通过设计满足人们使用产品的功能需求和情感需求，从这个角度来说，交互设计从属于体验设计。既然交互设计的目的在于通过设计满足人类的使用需求，那么其工作核心必然包括”、人与系统的交互行为、系统”三个方面。

David Benyon等人提出用PACT（People， Activity，Context，Technology）模型来帮助交互设计。PACT模型具体解释为：

P，人：交互系统是为人服务的，设计师在交互设计过程中首先必须认识和理解系统的服务对象——人。此处需要补充的是，交互系统需要关注的人可能不仅仅只包括使用物的“用户”，而应该考虑交互发生的场景中的所有人。比如，在公共场合使用交互产品时，人与产品交互的过程应该不影响其他人。

A，行为：包括人的行为和系统的行为。其中人的行为又包括认知行为和动作行为；人通过认知行为识别、理解、分析物在某一时刻的状态，然后经过决策之后，制定下一步的操作指令，由此引发出人的动作行为。同样，系统的行为也包括捕获信号（区别于人的认知）、信号分析、反馈等行为。系统的所有行为都是事先经过认为设定好的，根据捕获到的信号，经过分析之后，做出不同的决策，进而执行反馈行为。

C，情境：交互系统中的情境可分为物质和非物质情境两大类：物质情境是指人与产品之间的交互行为发生时周围的物理环境，包括交流空间、照明条件和其他相关设施等。非物质情境分为组织情境和社会情境两种情形。组织情境是指为用户在物质情境中与产品顺利进行交互提供的管理、服务方式以及用户与服务提供商之间的关系。社会情境是指交互行为发生时周围的社会状况。

T，技术：支持交互行为和实现系统功能所需的技术，包括硬件和软件技术。与交互行为有关的技术有：语音识别、图像和文字识别、多媒体、信息可视化、虚拟现实、网络、移动通信、各种传感器、光控和声控技术等。

作者认为，PACT模型把技术（technology）作为交互设计的要素之一不太合适，而应该改成系统（system）。因为同一技术最终形成的产品、系统可能是千差万别的，比如同是基于Android操作平台的智能手机系统，小米手机的操作系统就比很多其他同类操作系统获得更多消费者的青睐；同样是传感器技术，不同的技术搭配和不同的应用场合能实现风格迥异、截然不同的交互行为。细化之后，交互设计还应该关注于人的认知、思维、行为、习惯等方面，以此捕捉目标人群的特征，为交互行为的设计建立指导原则。

从上述交互过程可知，交互设计中应该关注于三个方面的要素：人、系统、情境。

在展开交互设计时，首先要了解目标人群的需求、认知、思维、行为等方面的特征，因为这些决定着用户的交互动机和具体的交互行为。另外，目标人群的知识背景、年龄、审美偏好、地域特征等因素会影响人对系统信息的认知。

在这些问题都解决之后，然后要考虑目标人群将来可能展开交互行为的情境，包括物质情境和非物质情境，这些因素会对用户的思维、决策、计划以及原本要执行的交互行为产生影响，进而改变用户与系统的交互方式。此外，特定的情境对系统还可能产生一定的特殊要求，比如在照明不足、湿度过大、噪声过大、人流密集等情境下使用的系统在设计时就应该考虑如何克服类似情境产生的交互障碍。

最后，根据目标人群的需求和行为特征、心理特征、认知习惯，加上情境的特定约束，利用计算机技术、信号接收、分析处理技术、图形显示技术、机械工程与加工制造技术等制定整个系统的设计方案。（图1）

2 原型和模型

nlc202309012357

在设计活动中，原型和模型都可用来测试设计概念的有效性，帮助设计师推敲设计想法，逐步完善设计方案，最终实现设计目标。在交互设计领域中，原型和模型有着密切的关系，但两者又有一定的区别，一定要分清楚原型和模型的区别，才能更好地展开设计活动。

原型是设计概念的具体化，并不特指某个设计要素具体的模型。模型是对设计目标物的视觉化表现形式，一般都会用实物质材料来制作。原型可能会包括有实物模型，但不仅仅局限于实物模型。

原型关注于设计概念所有要素的表现，注重于设计要素之间的关系的表达，而模型更多地涉及到具体某个设计要素，是特定设计要素的实物质表现。

原型一般接近于设计目标物的实际尺度，而模型则可以有不同比例的放大或缩小形式。

模型并不一定反映最终设计目标物的实际功能，原型一定要体现设计目标物的实际功能，但功能可能并不完善，在试验过程中可能会出错。

3 原型的分类

对于交互设计，设计师需要利用原型来验证不同设计阶段设计成果的合理性和有效性，并根据验证结果对设计成果进行修正和改进。根据上文把交互设计所包含的要素分成人、系统、情境三个部分，那么也需要建立相应的原型，来验证交互设计的合理性。

从不同的角度来看，可以把交互设计过程中的原型分成不同的种类。从构建原型的工具来看，可分为用Flash构建的原型、用Arduino构建的原型、用LabVIEW构建的原型等等。从原型的保真程度来看，可以氛围低保真原型，中保真原型、高保真原型等。笔者认为，这些分类方法对于交互设计过程的参考意义不大，没有涉及到交互设计过程中构建原型时应该考虑的核心内容。

既然交互设计的重心在于交互动作的设计，那么交互设计原型的构建必然是对交互动作的真实反映，这其中涉及到三方面的内容：人的动作、系统的动作、交互动作展开的情境。因此，交互设计过程中应该针对这三方面内容来构建原型，这样才能促进、引发真实的交互动作，进而对交互设计方案进行评估。

3.1 人物原型

交互过程中人执行的动作受目标、动机、认知、思维、行为习惯等方面的影响。那么在交互设计过程中，应该针对具体的目标人群，建立特定的用户原型。用户原型是目标用户群体的虚拟代表，应该具备大部分目标用户群体的与交互设计相关的特征。它是交互设计中非常有效的设计指导工具，能帮助设计团队看到设计问题的范围和性质，清晰地揭示潜在用户目标，使设计团队明确设计目标。一般来说应该在用户原型中体现的内容如图2所示。

3.2 系统的原型

系统执行动作是通过系统识别信号，接收信号，分析信号，处理信号，然后根据预先设定好的情景条件做出反馈的过程。与人交互的系统一般包括两种产品：软件产品和硬件产品，不同类型的产品，原型构建时所需的技术和表现内容存在有一定的差异，但主要还是在原型中体现产品的功能实现过程、信息显示方式、产品控制方式、产品主要视觉特征等。针对不同产品类型，系统原型构建中应该包括的具体内容如图2所示。

3.3 交互情境的原型

如前文所述，交互情境包括物质情境和非物质情境，那么在构建原型时，也应该针对这两种不同的情境构建原型，尽可能地真实地模拟人与系统展开交互时所处的情境。物质情境的原型大致应该包括交互发生所在场景的其他物品，如在设计电视机遥控器的交互行为时，就需要利用特定的空间、沙发、茶几、电视机等要素模拟出客厅场景。非物质情境原型则需要模拟出支持交互的组织管理方式、交互行为发生时的社会情况等。比如在设计智能手机的交互行为时，可能就需要利用移动通讯运营商、拥挤的公交车（很多人经常在这种场景中使用手机）、嘈杂的人群、突然打入的电话等要素尽可能真实地模拟用户与系统发生交互行为所处的情境。图2给出了为交互情境构建原型时应具体包括的内容。

图2把交互设计中的行为要素分别放进了人物原型和系统原型进行考虑。人的行为受到人物原型中的诸多因素的影响，而系统行为则需要根据人物原型的行为进行设计。在交互设计过程中，设计师所能够设计的也只是系统行为，最多在研究了人的行为习惯、思维习惯之后，利用系统行为引发人做出一些以前从未有的行为。在交互设计活动中，只需要对系统的交互行为构建原型即可，这本身又属于系统原型的一部分。所以作者认为在交互设计活动中需要构建的原型包括人的原型、系统原型、情境原型。

4 原型的构建

不同类型的原型关注的内容有所差异，因此构建方法和技术也有所不同。图3给出了构建不同类型原型时具体使用的技术和方法。

4.1 人物原型的构建

人物原型的构建主要涉及到社会调查、市场调查、人群分析、聚类分析等人文社会学科所用的定性研究手法。主要工作包括抽样调查、收集整理资料、分析资料、构建原型等。

4.2 情境原型的构建方法

情境原型的构建涉及两方面的内容：物质情境的构建需要用到环境设计的手法，利用多种道具模拟搭建交互场景，并利用相关设施设备控制环境参数，力求实现最接近真实交互环境的效果。非物质情境则需要利用一些社会资源，提供相关的服务，控制特定的社会、人群状况，模拟特定的人物关系等。

4.3 系统原型的构建方法

系统视觉原型的建立需要用到实物模型制作、计算机图形表现、形态设计等方面的技术和知识。系统功能原型的构建则需要利用各种传感器技术、信号分析与处理技术、计算机编程、计算机控制、机械设计、机械制造等技术模拟系统功能的实现过程。交互原型的构建需要利用计算机动画、交互式编程、电子积木等技术来模拟人与系统的交互过程。

图3中给出的相关技术和方法具有一定的普适性，但在具体的交互设计活动中，应该根据具体的设计目标人群选择适当的人物原型构建方法，最终总结出的人物原型一定能够代表目标人群的所有特征；针对交互行为发生的情境，利用恰当的方法和技术构建所需的物质情境和非物质情境，力求模拟真实的交互情境；系统原型的构建，设计过程中阶段性的原型构建尽量快速、能够表达设计概念即可，功能原型和交互原型可以进行不断的改进，迭代使用。

5 结语

得益于计算机产品和移动终端设备的快速发展，交互设计行业在国内有了长足进步。但目前关于交互设计的理论大多集中于软件交互界面的设计，对软硬件结合的交互系统的研究还不够，没有系统性的理论和观点。本文对David Benyon等人提出的PACT交互模型进行了改进，提出了交互设计应该包括人、系统、情境三个方面的因素。交互设计必须关注目标人群的相关特征才能为设计活动指明方向。系统的视觉表现、功能设计和交互行为是交互设计的主要内容，只有实现了符合目标用户识别特征和审美特征的视觉表现，符合目标人群需求的产品功能，符合目标用户行为习惯和认知水平的交互行为，才能称得上是成功的设计。人与系统的交互过程必定发生在特定的情境中，相关的物理环境、其他配套设施设备、相关服务、社会组织情况、人群关系等都会影响交互活动的开展，这是交互设计过程中必须要考虑的影响因素。

最后，作者给出了构建人物原型、情境原型、系统原型可能会用到的技术和方法。在构建原型时应该把握快速、迭代、聚焦等原则，确保原型对设计过程和设计目标的支撑性，本文介绍的一些方法已经在相关的设计活动中得以实施，但都不是很系统。作者对相关技术和方法进行了梳理，希望能对交互设计活动起到一定的指导意义。