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

第一篇：交互原型设计软件 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

第二篇：软件交互系的自荐信（范文）

软件交互系的自荐信范文,关键词是自荐信,软件交互系,

尊敬的领导：

您好!衷心的感谢您在百忙之中翻阅我的这份材料，并祝愿贵单位事业欣欣向荣，蒸蒸日上!

我是x大学xx学院软件交互届毕业生，自从今日大学之后，高考后的轻松、获知被录取的喜悦随风而逝，因为我的从新开始，继续努力奋斗，迎接新的挑战。时光飞梭，我讲到这童年的梦想、青年的理想离开学校，走上工作岗位。大学四年是我思想、知识结构及心理、生长成熟的四年。惠于理工大学的浓厚学习、创新氛围，熔融其中四年使我成为一名复合型人才。

在校期间，我勤奋学习专业知识，努力把理论知识运用到实践中去，曾参加全国大学生电子设计竞赛，并取得佳绩。此外我很喜欢电脑，不仅熟练掌握基本应用软件的使用，而且顺利通过国家社会和劳动保障部高新技术信息职业资格中级考试和微软ATC认证考试。在英语方面，通过国家英语四级，并且参加英语口语培训。

此外，我积极投身学生会和广播站等学生组织为同学服务，表现出色，贡献卓越，曾先后荣获校级“优秀三好学生兼优秀团员”、“优秀学生干部”、“校广播站系统”杰出工作者“等称号。

“长风破浪会有时，直挂云帆济沧海”，我真诚地希望加盟贵公司，我定会以饱满的热情和坚韧的性格勤奋工作，与同事精诚合作，为贵单位的发展尽自己的绵薄之力。下页附履历敬请勘酌，恳请接纳，回函是盼，我恭候您的佳音!

此致

敬礼!

第三篇：基于软件交互设计综合实践教学研究

基于软件交互设计综合实践教学研究

摘 要：针对专业交叉团队合作模式的培养体系，提出综合实践方式，以广东东软学院为例，根据专业方向进行岗位设置，配备具有双师素质的教师、企业工程师进行全程交叉指导，分阶段、分岗位进行考核，将软件交互设计工作贯穿于综合实践开发过程的各个阶段，使实践成果达到软件交互设计的期望目标，同时也引导学生以用户为中心并以人性化的软件交互设计理念，培养软件交互原型设计能力，加强对可用性设计的评估能力。

关键词：综合实践；交互技术；原型设计；软件评估概述及背景

随着人机交互技术的快速发展，软件数量日渐暴增，最新版本的软件工程知识体系 SWEBOK V3.0将人机交互列为一个独立的知识域[1]，交互设计也成为软件产品竞争与创新的关键，但是软件质量却参差不齐，特别是体现在用户可用性与易用性等方面；同时，在实际项目开发过程中，用户需求不明确、不完整、变更频繁等因素导致系统设计困难，实现的系统与需求不一致，项目风险提升，致使项目延期或者成本超支。开发者要提升软件核心竞争力，需要关注用户在使用过程中的体验与感受，掌握软件开发过程中的工程方法、核心技术及开发工具，运用综合知识，开发出满足用户需求的优质软件。实践学期组织

2.1 基本思路

软件综合实践安排在大二暑假学期进行，以“研究用户需求、强化实践技能、突出能力培养”为实践思想，采用以用户为中心的创新实践教学体系，以能力培养为重点，以就业为导向，培养学生具备岗位所需的职业能力。

开发周期为4周，以项目团队为组织形式，采用基于项目案例的综合实践教学体系以及分阶段、分岗位的考核形式。实践的组织模式更贴近实际工作需要，即根据专业（包括专业方向）的就业岗位进行项目团队的岗位设置，项目团队以1：2：1：1：1：1：1的比例设有项目经理（兼）、软件开发、数据库开发、Web前端开发、软件测试、系统实施与维护、基础网络设施搭建等岗位，以经过裁剪、修改或补充的真实项目需求作为团队的目标进行实践，配备具有双师素质的教师、企业工程师进行全程交叉指导。

随着人机交互在软件设计与开发中的地位变得越来越重要，有些引领企业如苹果公司已经派生出交互设计师、界面设计师、可用性工程师、用户体验设计师等职业，而更多的企业则由软件工程师兼顾交互设计方面的工作[2]（如图1所示）。根据图1可知，Web前端开发由网站规划与开发专业的学生承担，而交互设计是Web前端开发中的核心内容。

2.2 交互设计

交互设计（interaction design，IXD）是一种系统的设计，产生于20世纪80年代，以实现产品的“可用性”和“用户体验”为目标，把握设计、行为设计和形式设计3者的相互关系，由人（people）、行为（activity）、产品使用时的场景（context）和支持交互行为的技术（technology）组成，简称 PACT [3]。

交互设计原型和可用性评估是交互设计的核心，科学地建立符合用户需求的交互原型是交互设计追求的目标[4]。其中，原型设计能够快速发掘并明确用户的需求，是交互设计师、用户和软件工程师收集需求、确认需求最好的沟通工具；可用性评估是基于真实用户，找出软件可用性方面的问题，也是提高产品可用性的有效途径。实践开发过程

整个实践学期，从实践项目启动到项目总结结束，软件交互设计岗位的工作贯穿软件工程开发过程，采用迭代、循序渐进的方法进行软件开发，如图2所示。

从软件项目实施过程来看，由于存在学生缺乏软件开发经验、需求变更过多、缺乏软件测评手段、进度计划不合理等项目风险，因此用户会对软件质量和开发周期提出更高的要求。为了降低软件危机，确保项目顺利交付，项目的需求分析阶段可采用场景剧本、角色法、访谈法、亲和图法等方式进行用户调研，形成信息架构；概要设计和详细设计阶段输出交互原型，使用原型技术和可用性评估对需求及设计进行验证；编码阶段由网站开发专业学生负责软件Web前端开发，使用html、css、javacsript、Bootstrap框架等技术完成前端页面开发；测试阶段由网站开发专业学生对软件进行交互设计评估、交互需求验证、软件可用性确认并输出评估报告，评估报告会反馈给软件开发岗位学生，软件岗位的学生会根据技术约束、资金、开发时间等因素，与交互设计人员沟通，形成最终的修改方案，整个过程会迭代进行，直至项目完成。实践内容与成果

软件综合开发实践中，网站开发专业的学生承担Web前端开发，具体工作内容包括需求分析、软件原型、软件界面设计、Web前端开发、软件评估等。网站开发专业学生工作中的重点不仅仅是使界面美观，还要实现软件的可用性、易用性、有效性等指标。

软件开发流程中交互设计岗位主要工作分成4个阶段：需求调研分析、原型设计、软件界面开发和软件评估。针对4个阶段的主要工作，对其使用的工具、技术和方法以及输出成果进行阐述，具体内容见表1。实践考核方式

根据各专业的毕业标准，课程?M教师制定了一套全方位、科学有效的考核体系。答辩委员会分别由指导老师、学校督导和企业工程师组成。

学生实践学期的总体考核方案分为3部分：IT职业素养能力（30%）、团队实践成果（30%）和岗位专业技能（40%）。其中，IT职业素养能力和团队实践成果考核是各专业通用，岗位专业技能考核根据各专业单独设置考核点。我们以网站开发技术专业为例进行介绍，见表2。实践意义

网站开发技术专业学生于大二已经学习了Java程序设计、网页设计与制作、Web开发基础、Javascript页面特效设计、Javascript服务器技术、网站界面设计艺术等课程，掌握了Dreamweaver、Photoshop和Flash软件的操作以及HTML、CSS、Javascript、Ajax等技术，具备了网站前端开发基本技能，但是缺乏开发经验，针对项目的需求分析，不能合理安排和组织内容以及设计软件界面，难以开发出有吸引力、易寻、易用、用户友好的网站。

通过学期项目实践，培养学生对用户界面设计的审美能力，增强其对可用性设计的评估能力[5]，帮助学生积累项目经验和提高开发效率；在团队合作过程中培养学生的团队合作能力，树立以用户为中心的交互设计开发理念。基于软件交互设计的综合实践过程，应最大限度地明确需求，减少方案设计时的随意性和迭代次数，提高开发效率，降低项目开发的风险，保证软件产品满足用户需求。

综合实践学期结束，学校举行院级小学期竞赛，其中，人力资源管理系统、Neusoft好课堂、MyHouseRent房屋租赁平台管理系统、SOVO?C合管理系统、奥运奖牌记录管理系统、“程序猿”学院等作品获奖。

教师可以竞赛的方式激发学生的潜能，培养学生对软件开发的兴趣，同时为学生校外竞赛打好坚实的基础。例如，2016年攀登计划省级立项并获得拨款，包括基于Face++的人脸识别考勤系统（2万元）、基于Android系统的金标试纸定量检测仪的研制（1.5万元）；2016年大学生创新创业省级立项并获得拨款，包括基于Android的老人紧急报警APP（1万元）、“打酱油”移动社区App（1万元）；第四届“多迪杯”全国大学生网站开发大赛中，作品“ECHO商城”获得国家特等奖，奖金5 000元。结 语

我院实践了具有特色的实践教学模式，即两个理论教学学期后，安排一个综合实践学期，更好地把理论知识转换为能力，突出实践能力的培养。软件综合实践教学体系以优质创新教学建设为目的，以达到教学质量为最高目标，为培养学生实践能力和创新精神打下了坚实的基础。未来的计算机软件应用中，人机交互必然会发挥越来越重要的作用，我们将继续紧跟时代步伐，积极创新，不断积累教学经验，探索合适的教学体系，不断提高学生的创新能力以适应社会需求。

参考文献：

[1] Bourque P，Fairley R E.Guide to the software engineering body of knowledge，Version 3.0[EB/OL].（2015-08-19）[2017-04-23].http：//www.researchgate.net/publication/224302077_Guide_to_the_Software_ Engineering_Body_of_Knowledge_2004_Version.[2] 梁爽.用户交互技术课程的实践教学方法探索[J].计算机教育，2015（23）： 48-52.[3] 郭璐，李雅筝.基于PACT-P模式的社交网站交互设计策略研究： 以“人人网”为例[J].今传媒，2014（1）： 15-17.[4] 陈波，刘彦秀.基于公理设计的交互原型构建研究[J].人类工效学，2016，22（1）： 68-72.[5] 林连南，刘嘉伟，许南鸿.人机交互课程体系设计的研究[J].计算机教育，2015（1）： 78-82.（编辑：宋文婷）

第四篇：交互设计心得整理

交互设计心得整理

长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行，主要是交互设计师和视觉设计师对于交互设计的困惑，以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座；现在把它整理成文，希望与同行切磋，共同进步。

这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心（User-Centered-Design, 简称UCD）的设计原则，每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法，是从UCD的过程中提炼出来，也就是说，同样适用于任何非UCD的设计过程。交互设计的流程

如果一提到交互设计，你就想到画线框图或原型图，那你只对了五分之一。交互设计是一个过程，从开始到结束有一套系统的流程。原型图只是其中的一个环节。

当接到一个设计项目，怎么开始？都应该做哪些工作？怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性？

第一步，是任务分析，列出界面所要完成的所有任务。第二步按各任务确定页面流程，建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计，可以是低保真和高保真的原型图。最后编写设计说明。下面以设计一款动感相册界面为例，逐步讲解各个环节。1.任务分析

第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析，也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行，需求方一般提供一个功能点的列表。

任务分析最常见的是任务列表，另外有任务流程和任务场景等。下面以任务列表为例。列出所有主要任务，以及每个主要任务的子任务。再把子任务细分到各个步骤。形成下面这个列表。主要任务1 子任务1 步骤1 步骤2 子任务2 步骤1 步骤2 主要任务2 …

以动感相册为例，任务分析列表如下：

1.浏览相册 1)浏览相册列表 2)选择相册 3)浏览照片 2.创建新相册 1)添加照片 a)选择已有相册 b)选择照片 c)排列顺序 d)添加字幕文字 e)选择动画效果 2)添加模板 a)浏览模板 b)选择模板 3)添加音乐 a)浏览音乐列表 I.试听音乐 II.选择音乐 b)增加新音乐 I.打开本地文件 II.选择音乐 4)预览（略）… 5)命名（略）… 6)保存（略）… 3.修改相册（略）…

任务列表包括所有功能点，并对每一个功能点的逻辑关系进行整合。必要时会对各任务的使用频率和其它影响设计的重要因素进行分析，这里不做解释了。2.页面流程

任务分析完成后，进入设计的第一步，即设计页面流程。页面流程是设计的开始，也是重要的一环。它决定整个界面的信息架构和操作逻辑。页面流程是上一步任务分析的自然转化。一般来说，一个主要任务就是一个页面，其它子任务也可以转化为页面。

以动感相册为例，页面流程如下：

页面几乎是把任务分析照搬过来了。所以上一步做好了，这一步很轻松，而且越往后越轻松。注意这个流程图应该包括所有将要设计的新页面，一个不少，一个不多。它不仅确定页面内容，页面数量，还确定各页面之间的关系。如果在后来设计具体页面原型时，发现这个流程图多了或少了页面，或者页面关系发生了变化，说明你的功夫不到家（这个比较难，我一般不苛求我们的设计师）。根据原型图来创建或者修改页面流程图，不是在做设计，而是在写设计说明。3.页面布局

第三步页面布局是具体页面设计的开始，在上一步知道有哪些页面需要进行设计后，这里对页面进行划分，对内容进行组织。最重要的一点是确定页面分区。以动感相册为例，页面布局如下： 总布局，即通用布局，适合所有页面。

具体页面布局，在不与总布局冲突的情况下，有更细节的布局。

页面布局赋予零碎的内容以逻辑性，以分区的形式把页面各区域所对应的功能区确定下来，减少具体设计时的随意性。这是设计严谨与否的表现所在。把类似的操作放在一起，对于用户来说是可以预见的，用户能够判断哪个操作在哪个区域，减少盲目寻找带来的困难和疑惑。4.原型设计 这一步是大家熟知的，即具体页面的设计。这一步设计把所有的界面元素表现出来。可以有低保真和高保真原型图。低保真即是线框图，高保真多是接近最终效果图。下面是动感相册的低保真原型图。

5.设计说明

最后一步需要做的是对所有页面进行详细的描述，包括对页面上所有元素进行说明，比如默认状态，跳转页面，字号字体，尺寸等。这里就不解释了。这是交给开发人员的文档，以及测试人员进行测试的依据。小结

交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期，不带给他们任何的意外。一切都在用户的意料之中。

第五篇：交互设计档案

交互设计师的基本素质

首先，谈谈我个人对交互设计师基本素质的看法。从我个人的理解来看，可以简单归纳为九字诀：“听、看、想、说、磨、做、验、写、讲”（如图1.1）。

图1.1 1）听：做一个交互设计师，最重要的一点就是要懂得倾听（这里蕴藏了一个隐晦的性格属性：谦虚！）。通常情况下，我们不是用户，所以很难 100%代表用户，更左右不了老板，所以我们首先要有听的本事，把来自用户的、老板的、PD的、视觉的、前端的、开发的、测试的、市场的、业界的等各方面的声音都听过来，听进去。

2）看：99%的情况下，交互不是一蹴而就的创造工作，它是站在前人肩膀上不断迭代更新的行为过程。我这里指的“看”是要求设计师能博览、能泛猎，看到好的，见过差的，什么都略懂，交互才能变得很美„„

3）想：交互是思考的输出产物和表现形式。当设计师将之前听到的和看到的内容在头脑中加以整理、分析，经过发散的创造性碰撞和严谨的逻辑论证后，逐渐得到了相对靠谱的交互产物。这个思索分析的过程贯穿于交互设计工作流程的每个环节。

4）说：一个能说会道的人不一定是一个优秀的交互设计师，但一个优秀的交互设计师必然是一个善于准确表达自己想法和观点的人。在这一点上，我坚持交互是一门分享的学科，需要的是开放的性格和良好的沟通技巧。

5）磨：耐心、技巧、热情的综合表现。在一个项目的进程中，不可避免的会面临很多的挑战，优秀的交互设计师善于发挥“磨”的精神，他们怀揣对交互专业的无比热情，以无所不用其极的技巧，耐心的缠死一个又一个质疑方，最终让大家认同并帮助推动设计的实现。通常来说，一个优秀的交互设计师会是一个优秀的Idea推销员。

6）做：交互设计师专业度的核心表现。俗语说得好，是骡子是马，牵出来遛遛。对于交互设计师来说，之前的环节做得再好、再完美，也只是停留在设计师自己的脑子里，游荡于听众们的耳膜间。如果理论落实不到实际，那所有的想法都只是空中楼阁，你之前所有的努力都只是在佐证你的空泛和不切实际。所以我们不仅要能 “做”，更要“做”得漂亮，“做”得完美！我一直都是这样认为：“做”决定了一个交互设计师是不是靠谱，决定了一个交互设计师的高度，是一个交互设计师最根本的专业素质。

7）验：用户体验设计，最终是要落实到用户的身上的。客观中立的验证、分析、评估能力是一个优秀交互设计师的重要素质。无论个人还是团队，设计的成果都需要通过精准的测试才能算得上合乎标准，此时，一颗平常心和一双敏锐的眼睛是设计师最需要的。

8）写：分析、归纳和总结能力的综合表现。一个项目，无论成功还是失败，总是有很多地方值得设计师本人或后来人借鉴。交互设计之路不是一座苛求零失误的独木桥，但绝对是一条要求零“重复”失误的单行线。评价一个设计师的专业度，很重要的一环就是看他能不能多犯前人从来没有犯过的错误，并能有效总结给后来人。于是，他就成了大家，路就这样被趟了出来„„

9）讲：演讲能力。这里所指的是在项目后期进行的交流分享。一个专业的交互设计师会站在宏观的高度上，以平和的心态同他人沟通，验证自己先前设计的合理性、全面性和科学性，更好的提高自己的专业能力，为今后的交互设计做好准备。

·交互专业度的具象化表现

刚才讲了很多，但总体来说还是偏理论，还是让人摸不着头脑，虚幻的概念最大的优势在于它的颠簸不破和四平八稳，谁也揪不住它的小辫子。但这不是我的风格，更不是我写这篇文章的初衷，我希望的是抛砖引玉，给大家带来一些真正意义上能直接使用的东西。所以，接下来，我们来些“干货”，玩点简单粗暴的„„

图1.2

根据阿里巴巴目前的产品开发流程（如图1.2），交互设计是大环节中的一个小点，抛开杂乱的干扰信息，单纯考量交互设计师在过程中的参与度，我们就能得到一个理想化的交互设计行为流（如图1.3）：

图1.3 流程没什么好讲的，更没什么好争辩的，无非也就是增加一个、减少一个、偷换概念、细分归纳之类的忽悠。我这里想和大家分享的是流程中每个环节的专业输出物，我有一个激进的想法：如果某人能精准的完成某些公认的标准化输出物，那他99%可以被称为是一个“专业”的75分交互设计师了，剩下的 1%，也许是拼RP„„

这里，我先简单交代一下即将涉及到的流程节点、对应输出物的图形色块的代表含义。

1）流程环节说明（如图1.4）：

图1.4 2）流程环节各输出物说明（如图1.5）：

图1.5 在我看来，一个专业的交互设计师，在一个理想化产品设计的过程中，有一些是属于必须的输出物，有一些属于最好有（推荐）的输出物，还有一些属于可有可无的输出物。同时，根据项目的实际情况和参与角色的分工情况，存在一些交互设计师可能需要负责的输出物，具体细节我将在下面逐一介绍。1）需求获取阶段：

此阶段通常来说会由PD等外部资源发起，输出物主要是FRD文档和时间计划文档，用以描述问题、提出初步目标，假想可能的解决方案、预估资源并梳理时间计划等。当然，对于从UED内部发起的项目，这两部分的输出也可以由交互设计师完成，属于可能责任输出物； 2）需求分析阶段：

历史数据的关注和分析阶段，基于项目本身，要针对竞争对手、行业现状等做详尽的收集和分析，其中的关键考核点是要做必要的头脑风暴，获取发散而全面的信息集合。在此阶段，竞争分析报告和头脑风暴输出物是交互设计师专业度的重要表现。

3）用户访谈阶段：

对于一些条件允许的项目，我们建议能在项目初期寻求一些用户的信息，定义一些用户的属性，这些对于之后的交互设计都会是坚实的基础。一个高专业度的交互设计师甚至会主动介入访谈问卷的设定工作，客观的参与调研报告输出的全过程。

4）需求修正阶段：

专业的交互设计师通常不甘于沦为一个纯粹的资源，抗拒被动的接受命令。我们之前经历的需求分析和用户访谈都是为掌控主动权而做的准备。如今，我们有理有据，应该主动出击，和需求方讨论研究需求的合理性、可行性，明确最终的修正目标，并对达成目标所涉及的重点突破点有理性的分析判断，筛选出各设计点的优先级。5）设计草稿阶段

项目目标和设计方向确定下来后，我们将进入核心的设计环节。作为交互设计师的“杀手锏”，交互流程和线框草图当然一个都不能少，但此时我更想强调一项辅助性质的调研分析工作。从交互的角度来看，在大流程大框架敲定的情况下，交互设计师通常会投入更多的精力在一些核心的设计点，也就是我们在需求修正阶段确认的设计重点。此时，专业的设计师绝对不会拍脑袋设计，更不会想当然出方案，而是会针对这些核心点做业界调研和分析，为自己即将进行的设计寻求一个足够宽广厚实的肩膀。6）设计细化阶段

第一阶段的设计工作将在此阶段性输出。我们回顾一下，截止此时的设计产物有：用户调研报告、FRD确认文档、交互流程、线框草图、核心设计调研分析、核心设计详细说明、交互流程整体说明等。基本上，一个交互设计师的专业度，已经可以根据此时的输出物数量、质量看出个大概齐了 7）专家评审阶段

一个专业的交互设计师，要谦虚。此刻，我们进入小范围专家评审的阶段了，三个臭皮匠还顶一个诸葛亮呢，更何况是参与评审的专家呢。此时设计师的专业度就体现在 “听”、“说”和“想”这三诀上，耐心的做好评审记录，有理有据的同专家们进行专业沟通，并确认最终的结论和方向。8）设计优化阶段

经历了专家团的考验，又该抖擞精神重新上路了，没什么好说的，把过程做好了，你的专业度也就到位了。设计优化阶段的投入度和产出将直接影响到后续Demo及测试的效果，和最终设计也息息相关，各位交互设计师们，千万别打瞌睡了！

9）仿真Demo开发阶段

终于到了仿真Demo的模型化阶段啦，这时尽管并没有直接的交互输出物，但还是需要交互设计师用百分百的挑刺精神，协助视觉和前端精准的达成我们之前的设计，严格保证最佳的输出效果。10）测试验证阶段

仿真Demo出来之后，将进入最后的测试验证阶段，根据项目的实际情况，可能是QA测试，也可能是用户测试，总之，这个环节能帮助设计师最后把关设计的合理性，专业如你，一定要亲自跟进测试并给出最终的评估报告，哪些点是前期没有考虑周全的？那些点是成功的？哪些点是必须立即改进的？哪些点能以后再说？哪些„„ 11）完成设计阶段

最后的设计阶段，根据之前的测试验证评估报告，交互设计师要对所有之前的输出做一次严格的检查和修正，完成最后的输出。

12）开发上线阶段

盯紧视觉设计师和前端工程师吧，最关键的时候终于到了，经历了那么多纷繁复杂的环节，我们等的就是上线的这一瞬间。当然，千万别忘了后续的跟踪和分析，这能为你的专业度加分不少哦 ·总结和展望

综上所述，我们已经整理出来了体现交互设计师专业度的过程输出物了，总结一下：以75分交互设计师的标准来看，我们的专业度能通过以下的关键输出物衡量：FRD目标确认文档、竞争分析报告、头脑风暴产出物、项目初期用户调研报告、核心设计点调研及分析报告、专家评审报告和评估报告、原型测试报告、交互流程图及详细说明文档、页面线框图、核心设计点说明文档和最后的跟踪分析报告。

基本上，所有的输出物都是反复易稿的结果，都是细碎过程的迭代输出，都饱含了设计师辛勤的工作投入。所有有梦想的交互设计师们，请正确的审视这些输出物，珍惜自己的付出，它们不光是单板的形式教条，它们更是证明自己专业度最有利的武器！

被很多同学都质疑过：那么多的输出物，平时做需求怎么可能全部做出来？每当此时，我的回答都是一样的：“是的，找借口总是很容易的。大家的确都很忙碌，按季度来说，基本上每个人都会经手大大小小几十个需求，但我们真的忙碌到输出一个高质量设计的精力都没有了吗？还是我们打心里就本着做交互、混日子的想法呢？”

不是不能，是不愿！那才是交互设计这个职业最可悲之处„„

作者信息：本文http://