原型设计教程.docx

原型设计教程.docx

《原型设计教程.docx》由会员分享，可在线阅读，更多相关《原型设计教程.docx（52页珍藏版）》请在冰豆网上搜索。

原型设计教程

AxureRPPro5.6教程

（一）Axure介绍

互联网行业产品经理的一项重要工作，就是进行产品原型设计（PrototypeDesign）。

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

进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的AxureRP，是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。

同时，此软件也在产品经理圈子中广为流传。

之所以AxureRP得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。

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

纸笔：

简单易得，上手难度为零。

有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。

但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。

Word：

上手难度普通。

可以画wireframe，能够画页面流程，能够使用批注与文字说明。

但是对交互表达不好，也不利于演示。

PPT：

上手难度普通。

易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。

但是不利于大篇幅的文档表达。

Visio：

功能相对比较复杂。

善于画流程图，框架图。

不利于批注与大篇幅的文字说明。

同样不利于交互的表达与演示。

Photshop/fireworks：

操作难度相对较大，易于画框架图、流程图。

不利于表达交互设计，不擅长文字说明与批注。

Dreamweave：

操作难度大，需要基础的html知识。

易于画框架图、流程图、表达交互设计。

不擅长文字说明与批注。

以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototypedesign的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。

比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，与时的画出来，是再好不过的方法。

而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。

而ppt自然是演示时更好。

visio则可以适用于各种流程图、关系图的表达，更可通过画usecase获取用户需求。

PS/FW是图片处理的工具，DW则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。

其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。

因为每个工具的产生，都是为了满足人类的某一方面需求。

比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。

但是不同的工具都有自己的工作领域，在其他领域它并不擅长。

而以上的软件在创造的初期，并非为了帮助产品经理、ue完成产品原型设计，因此他们都不能在prototypedesign这件工作上得心应手。

而AxureRP正是在互联网产品大张其道的前提下，为满足prototypedesign创建的需求，应运而生。

AxureRP能帮助网站需求设计者，快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以与带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发。

没错！

AxureRP的特点是：

∙快速创建带注释的wireframe文件，并可根据所设置的时间周期，软件自动保存文档，确保文件安全。

∙在不写任何一条html与javascript语句的情况下，通过创建的文档以与相关条件和注释，一键生成htmlprototype演示。

∙根据设计稿，一键生成一致而专业的word版本的原型设计文档。

∙

说到这里相信很多人已经激起了兴趣，但是在开始学习之前，我认为我们还是有必要先了解一下软件短短的历史，创造这一软件的公司—AxureSoftwareSolutions,Inc.该公司创建于2002年五月，AxureRP是这一软件公司的旗舰产品，2003年一月AxureRP第一版本上线发表，至今已经正式发行到了第四个版本，而我提笔写到这里的时候，Axure5.0版本beta版本已经正式提供下载试用，虽然我已经下载使用，但是我想，写教程还是应该先从稳定的4.6版说起，至于5.0版，我们可以伴随着软件一起成长。

接下来我会结合图片，分几个步骤分享我对Axure的认识，

一、界面与功能

二、工具栏

三、站点地图

四、组件与使用方法

五、复用模板与使用

六、交互功能与注释

七、实例

当然，在书写的过程中我会根据具体的情况再进行调整，尽量做到图文并茂，易于理解。

写这个教程的目的，一方面为自己熟悉与更加理解Axure，另一方面也鞭策自己完善自己的blog网站，同时也希望以自己的绵薄之力，为希望学习Axure的朋友分享一点经验。

由于这是我第一次尝试写教程，难免会出现偏颇，也希望朋友们能够不吝赐教，共同进步。

另，为e文好的朋友附上自学AxureRP的几个途径：

1、打开软件，按F1调取帮助文档，对照文档学习。

2、登录查看flash视频学习。

3、登录Axure博客，了解软件最新信息。

4、登录讨论组，参与讨论。

并提供AxureRPpro4.6版本的下载

（二）界面与功能

不论学习什么，打基础是很重要的。

关于基础练习，我印象最深的故事是王羲之练习书法的故事，将一池水染黑，需要怎样的毅力？

再有就是达芬奇与鸡蛋的故事，一个简单的鸡蛋，达芬奇画了无数次。

我相信正是他们的一步一个脚印，才让他们有了后来伟大的成就。

故事老套，道理浅显，可是我认为很重要。

学习软件，应该先熟悉每个面板，每个基础功能，才能够真正谈到运用。

所以我的学习方法是了解软件的基础功能开始。

一、欢迎界面与功能

运行AxureRP后，首先弹出的是欢迎界面，它拥有的功能和其他软件的欢迎界面没有什么特别的不同。

功能区1：

文档区，这个区域显示用户最近打开的AxureRP文件，用户可以快捷的打开之前编辑的文件。

同时也提供快捷按钮，可以创建新文档与打开AxureRP默认文件夹。

功能区2：

认证区，这个区域显示注册信息。

已经注册的用户，显示注册者名称，与已经获得认证的图标。

未注册用户，显示注册链接，引导用户完成注册注册。

功能区3：

AxureRP学习中心。

主要包括在线学习、帮助文档、问题反馈三个环节。

a、在线学习提供了三个链接：

videotutorial：

点击后进入视频学习中心，可以通过观看相关的flash教程学习AxureRP，不过都是e文解说。

onlinecommunity：

进入AxureRP的官方讨论组，在线讨论学习。

Axureblog：

进入Axure的官方论坛，了解最新资讯。

b、帮助文档也提供了两个链接，但是其实起到的是一样的效果，都是打开帮助文档，只是跳往不同的章节罢了。

c、问题反馈，，以寻求获得帮助。

在欢迎界面中，Axure还提醒用户，用4.6高版本的软件创建保存的Axure文件，无法用以前的低版本查看。

同时，如果我们不希望下次打开软件再看到这个面板，我们可以通过选择“Don'tshowthisatstartup”实现。

二、软件主界面与功能

关闭欢迎界面后，我们进入软件的主界面，淡蓝色调的ui，并不是很张扬。

功能区1：

命令区，和我们操作的所有office软件一样，包含文件、编辑、查看和帮助，这些功能大抵是差不多的。

table也很容易理解，就是对表格编辑的命令。

而Axure特有的几个特殊的命令栏目是

a、wireframe：

线框，包含所有画原型线框图的相关命令。

b、object：

包含所有对工作区物体的操作命令，操作放入工作区的所有widgets，包括组合、排序、锁定以与脚注命令等。

c、generate：

自动生成html演示文件、word说明文档，以与对生成规则进行自行编辑、定义。

功能区2：

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

功能区3：

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

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

功能区4：

站点地图，AxsureRP创建的文件是模拟真实网站页面关系的，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距离。

通过使用上下左右键，结合这个信息栏，你可以一步一步将它移动到你想去的地方。

有意思吧？

好了，今天先写到这里，写到快3点了，今天真是有点投入了，要上床睡觉了，支持不住呀。

接下来，我将根据不同的工作区，来详细解说功能了。

写得不清楚的，可以问；写得不对的，可以提，我会尽力做好工作！

（三）文档管理

开章要说的是文档管理。

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

文档管理的目的，其实是为了有一个清晰的产品思路。

刚开始工作的时候，我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的，我也不例外。

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

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

AxureRP的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为子页面：

为页面线框图中的特殊部分做流程解释。

可以对页面的细节部分进行详尽的解释。

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

（四）模板复用

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

masters的英文直译是主人或雇主，但是我认为这里可以叫做模板，或者复用模块。

masters的文件，是页面中重复的模块，由于在不同页面中这些模块是一样的，所以拿出来作为一个模块编辑，然后在不同页面中进行调用。

这个功能类似于网页程序开发中的程序复用，不同页面中调用同一段程序，一般把这段程序单独做成一段页面程序，然后用include命令进行调用。

master的文件就相当于这段被调用的页面程序。

dreamweaver也有类似的功能，就是template，可以参照理解。

一、功能条

master的功能条功能基本和sitemap一模一样，功能也基本一样。

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

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

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

而masters的文档组织结构主要依靠文件夹完成，页面文件之间不存在父子关系。

这是文档操作与组织中与sitemap的最大不同。

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

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

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

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

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

1、normal：

普通文件。

就是一般的复用文件。

是默认创建的复用文件。

2、placeinbackground：

定位的复用模板，这类模板的特点是定位于页面的底层，并且锁定模板中的widgets在他原来创建的位置。

这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。

3、customwidgetsbehavior：

自定义模块。

这类模块就类似于自创了一个widgets。

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

而自定义模块与页面中被复用的模块是母子关系。

自定义模块只决定了模块的功能和位置，但是进入到特定的页面中，模块中的各自部分的说明和功能可以重新定义。

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

四、右键单击文件——其他

1、2、3功能都是文档文档操作功能，和sitemap一样，分别是删除、重命名和编辑master。

4、5功能是对应的。

前者是将所选模板文件批量运用于页面，后者是将所选模板文件，批量从页面中去除。

通过选择此功能，会弹出sitemap文件的树形目录，你可以通过选择需要添加模板的页面，从而完成模板使用或移除。

checkall：

选择所有页面

uncheckall：

所有页面都不选择

checkallchildren：

选择所选页面以与其所有子页面

uncheckallchildren：

不选择所选页面以与其所有字页面

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

position中有两个命令

placeinblackground：

将文件至于页面背景

specifylocation：

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

options里的多选框的意思是“只有页面中没有此模板时才置入”，默认是选择的。

如果不选择而置入页面，就会出现如果页面中已经有模板，模板被再次置入的情况。

当然如果有特殊需要的模块，就可以这么使用了。

6、usagereport：

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

（五）widgets工具-上

AxureRP的widgets工具栏，就是我们用来画线框图wireframe、流程图flow的工具，也可以说是组成我们最终输出图表的零件。

好比我们小时候玩的组装积木，这些工具就是组装积木里的一个个小部件，组成什么？

组合得怎样？

完全依靠个人的经验和智慧。

因此，熟悉每一个工具的用法和用途，才能随心所欲的画出脑海中的图形。

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

wireframe线框图工具：

基本上对应着web页面中的各种图形。

针对页面中交互行为的表达，AxureRP专门增加了imagemapregion图像映射区、dynamicpanel动态面版、menu（vertical/horizontal）水平/垂直菜单等几个特殊的工具。

Flow工具：

流程图所需的基本图形框架。

我们先谈wireframe线框图工具。

学习这部分工具，如果事先有html基础，或者对web页面元素有比较充分的理解，就很容易入手。

以下我根据图片中的编码，依次讲解。

1、image图片：

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

2、textpanel文本：

插入文本。

相当于插入了一个标签。

是不带链接的文本。

但是其实也可以带链接，在interactions中我们会提到。

3、hyperlink超链接：

插入带链接的文本。

相当于插入了一段带标签的文字。

但其实在Axure中它与普通文本除了外型不同，没有本质区别。

之所以将两类文字区分开来，目的还是为了在视觉表达中让人直观的理解链接文本和普通文本，而这对于设计人员理解也非常重要，因此建议画图时尽量标准的区分链接文本和普通文本。

4、rectangle矩形：

插入一个矩形。

可以对其进行图形样式编辑。

此图形通畅被用来表达板块的边界。

5、placeholder占位符：

插入一个占位符。

占位符通常用来表达在页面中某些特殊区域，比如情况复杂，或者在系统升级中不需要修改，又或者无关紧要的区域等等。

作者需要结合说明文字，进行对应的详细表达。

6、button按钮：

插入一个按钮，相当于标签。

按钮一般结合表单使用，当然也可以作为强化的提示链接使用。

7、teble表格：

插入一个表格。

Axure的表格使用起来不是很方便，增加行、列，修改行、列宽度都不方便，算是一个败笔。

期待在下一个版本的时候能够有更好的进步。

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

8、textfield文本输入框：

结合表单使用。

一般用作表单中提交数据。

比如搜索框、用户登录框、注册信息填写框等。

用作字段提交或单行数据提交。

9、textarea文本区：

结合表单使用。

一般用作大段文字编辑、提交。

比如文章编辑、留言等板块。

10、droplist下拉列表框：

结合表单使用。

一般用作下拉菜单或者下拉列表选项，比如在搜索中，可以通过下拉列表框来定位搜索分类的范围。

也有人用它来做友情链接，可以通过下拉选择直接进行页面跳转。

11、listbox列表选择框：

结合表单使用。

通过文本框列表选项，通常使用在多项列表选择，比如在填写简历表的时候，选择你所感兴趣的行业，会提供列表选择框。

不过列表选择框都会结合按钮使用。

12、checkbox多项选择：

多项选择通常使用在表单中，以提供多项选择。

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

13、raidobutton单项选择：

在一组选择中选择适合选项，选项关系非此即彼。

比如在填写性别的时候提供男女选择，用户非男即女，只取一项。

当然，不排除再多提供一个双性选择，这样就是三选一，但是同样是非此即彼的单一选择。

14、