Axure中文教程 .pdf

《Axure中文教程 .pdf》由会员分享，可在线阅读，更多相关《Axure中文教程 .pdf（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论?交互原型设计软件 Axure RP Pro 5 中文教程By Hawking日期:2008-07-07（2008.07.22 更新了 Axure RP pro5 的交互部分，最下面）一直在用 visio 做交互原型和画 pageflow，朋友推荐用 Axure RP 4，试用了一下果然不错，特别在网上找到教程转帖给需要朋友。（作者:Hawking原创）先提供 Axure RP pro 4.6版本的下载http:/ I:介绍(Introduce)互联网行业产品经理的一项重要工作，就是进行产品原型设

2、计(Prototype Design)。而产品原型设计最基础的工作，就是结合批注、大量的说明以及流程图画框架图wireframe，将自己的产品原型完整而准确的表述给UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改prototype 直至最终确认，开始投入执行。进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的Axure RP，是 taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时，此软件也在产品经理圈子中广为流传。之所以 Axure RP 得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。file:/E

3、|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 1 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论在正式谈 Axure RP 之前，我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以

4、表述交互信息与程序需求细节。Word：上手难度普通。可以画wireframe，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。Dreamweave：操作难度大，需要基础的html 知识。易于画框架图、流程图、表达交互设计。不擅长文字说明

5、与批注。以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototype design的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。而word 则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word 最擅长的工作。而 ppt 自然是演示时更好。visio 则可以适用于各种流程图、关系图的表达，更可通过画use ca

6、se 获取用户需求。PS/FW 是图片处理的工具，DW 则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。因为每个工具的产生，都是为了满足人类的某一方面需求。比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。但是不同的工具都有自己的工作领域，在其他领域它并不擅长。而以上的软件在创造的初期，并非为了帮助产品经理、ue 完成产品原型设计，因此他们都不能在prototype design 这件工作上得心应手。而 Axure RP 正是在互联网产品大张其道的前提下，为满足

7、prototype design创建的需求，应运file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 2 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论而生。Axure RP 能帮助网站需求设计者，快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和w

8、ord 文档，以提供演示与开发。没错！Axure RP 的特点是：快速创建带注释的 wireframe文件，并可根据所设置的时间周期，软件自动保存文档，确保文件安全。在不写任何一条 html 与javascript语句的情况下，通过创建的文档以及相关条件和注释，一键生成 html prototype演示。根据设计稿，一键生成一致而专业的word 版本的原型设计文档。说到这里相信很多人已经激起了兴趣，但是在开始学习之前，我认为我们还是有必要先了解一下软件短短的历史，创造这一软件的公司 Axure Software Solutions,Inc.该公司创建于 2002 年五月，Axure RP 是这

9、一软件公司的旗舰产品，2003 年一月 Axure RP 第一版本上线发表，至今已经正式发行到了第四个版本，而我提笔写到这里的时候，Axure 5.0版本 beta 版本已经正式提供下载试用，虽然我已经下载使用，但是我想，写教程还是应该先从稳定的4.6 版说起，至于 5.0 版，我们可以伴随着软file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 3 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 35 页 -交互原型设计软件 Axu

10、re RP Pro 5 中文教程 By Hawking-折折熊 de交互论件一起成长。接下来我会结合图片，分几个步骤分享我对Axure 的认识，一、界面与功能二、工具栏三、站点地图四、组件与使用方法五、复用模板与使用六、交互功能与注释七、实例当然，在书写的过程中我会根据具体的情况再进行调整，尽量做到图文并茂，易于理解。写这个教程的目的，一方面为自己熟悉与更加理解Axure，另一方面也鞭策自己完善自己的blog 网站http:/ 的朋友分享一点经验。由于这是我第一次尝试写教程，难免会出现偏颇，也希望朋友们能够不吝赐教，共同进步。为 e文好的朋友附上自学 Axure RP 的几个途径：1、打开软件

11、，按 F1调取帮助文档，对照文档学习。2、登录http:/ flash 视频学习。3、登录 Axure 博客 http:/ http:/ II:界面与功能(Interface&Function)不论学习什么，打基础是很重要的。关于基础练习，我印象最深的故事是王羲之练习书法的故事，将一池水染黑，需要怎样的毅力？再有就是达芬奇与鸡蛋的故事，一个简单的鸡蛋，达芬奇画了无数次。我相信正是他们的一步一个脚印，才让他们有了后来伟大的成就。故事老套，道理浅显，可是我认为很重要。学习软件，应该先熟悉每个面板，每个基础功能，才能够真正谈到运用。所以我的学习方法是了解软件的基础功能开始。file:/E|/My D

12、ocuments/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 4 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论一、欢迎界面与功能运行 Axure RP 后，首先弹出的是欢迎界面，它拥有的功能和其他软件的欢迎界面没有什么特别的不同。功能区 1：文档区，这个区域显示用户最近打开的Axure RP 文件，用户可以快捷的打开之前编辑的文件。同时也提供快捷按钮，可以

13、创建新文档与打开Axure RP 默认文件夹。功能区 2：认证区，这个区域显示注册信息。已经注册的用户，显示注册者名称，与已经获得认证的图标。未注册用户，显示注册链接，引导用户完成注册注册。功能区 3：Axure RP 学习中心。主要包括在线学习、帮助文档、问题反馈三个环节。a、在线学习提供了三个链接：video tutorial：点击后进入视频学习中心，可以通过观看相关的flash 教程学习 Axure RP，不过都是 e文解说。online community：进入 Axure RP 的官方讨论组，在线讨论学习。file:/E|/My Documents/交互原型设计软件 Axure RP

14、 Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 5 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论 Axure blog：进入 Axure 的官方论坛，了解最新资讯。b、帮助文档也提供了两个链接，但是其实起到的是一样的效果，都是打开帮助文档，只是跳往不同的章节罢了。c、问题反馈，通过点击链接可以发邮件到，以寻求获得帮助。在欢迎界面中，Axure 还提醒用户，用 4.6 高版本的软件创建保存的Ax

15、ure 文件，无法用以前的低版本查看。同时，如果我们不希望下次打开软件再看到这个面板，我们可以通过选择“Dont show this at startup”实现。二、软件主界面与功能关闭欢迎界面后，我们进入软件的主界面，淡蓝色调的ui，并不是很张扬。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 6 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Haw

16、king-折折熊 de交互论功能区 1：命令区，和我们操作的所有office 软件一样，包含文件、编辑、查看和帮助，这些功能大抵是差不多的。table 也很容易理解，就是对表格编辑的命令。而Axure 特有的几个特殊的命令栏目是 a、wireframe：线框，包含所有画原型线框图的相关命令。b、object：包含所有对工作区物体的操作命令，操作放入工作区的所有widgets，包括组合、排序、锁定以及脚注命令等。c、generate：自动生成 html 演示文件、word 说明文档，以及对生成规则进行自行编辑、定义。功能区 2：工具栏，基本和 office 风格一模一样，功能也很容易上手。功能区

17、 3：工作区，这就是我们平常操作工具，创建prototype的舞台，将自己的构思在这里释放，将自己的想法在这里展现。工作区的上部显示打开的文件名，可同时打开多文档，进行操作。功能区 4：站点地图，Axsure RP 创建的文件是模拟真实网站页面关系的，sitemap就是通过树形目录关系，管理所有的站点页面文件与流程图文件。科学的文件关系结构，对有效的演示文档与生成易读的说明文档相当重要。我的操作习惯是先画流程图，然后根据流程图构建页面文件框架，最后才开始页面的具体设置。期间可以将文件分为 LOFI（低保真）与 HIFI（高保真）两个部分进行分别展示，有利于不同的需求者使用。功能区 5：器具箱，

18、囤积了所有用来画wireframe与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区，进行操作。对于这里面的对象，我们有必要一一详细了解。功能区 6：复用模块区，这里创建的页面文件和sitemap的页面相似，唯一不同的是，master 的每个文件，可以当作一个整体，被sitemap反复调用。这个功能就相当于程序开发中的程序复用，用好这个功能，可以减少我们很大一部的工作量。也更容易理解网页文件的关系，了解网页设计师、程序员是怎么构建网站的页面的。功能区 7：页面笔记，用来对当前创作页面进行注释与说明。同时可以在这里对页面里的关键字段file:/E|/My Documents/交互原型设计软

19、件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 7 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论和特殊问题进行详细的描述。功能区 8：页面载入时的交互功能。通过在这里设置，不同条件下，页面初次打开时的状况。功能区 9：注释与交互区。这个注释和交互和7、8不同，7、8针对的是页面，而 9针对的是页面中的元素，也就是一个个widgets。功能区的上面部分设置交互条件。通过鼠标点

20、击、滑入、滑出，设置触发的事件，与对应widgets相应的变化。这一部分对没有程序基础的人可能会有一点难度，我稍后会做详细解释。功能区的下面部分是注释部分，用户可以对选定的对象进行详细的注释。Axure 已经设置了几个默认的注释字段，但是其实这些默认的注释字段，大家完全可以不使用，因为它可能和你要说明的东西风马牛不相及。那么该怎么办呢？Axure 提供了自主设置字段，只要你自己设置好自己常用的字段，然后按照自己的习惯编写就可以了。比如说你要说明对象的功能、优先级、参数，那么你在设置中加入这三个字段就好了。Axure 最大的优势就是你设置的这些注释，在生成说明文档时，Axure 自动帮你生成 P

21、RD规格的表格文档，你可以省去相当大的编号工作，与文档工作。这些我在之后也会做说明。这些就是 Axure 的主要功能区，但是其实还有两个小的角落大家可能会忽略，那就是6、7、8区下面的一行系统信息，这里显示的信息很重要，但是一般人却经常会忽视。我只所以说重要，因为我们在给ui设计师 wireframe的时候他们总会问，这里多少像素，那里多少像素，可是我们在画wireframe的时候却无法度量。Axure 创建的 wireframe，完全可以生成 html，因此我们可以在画的时候就度量好每个像素距离。但是我们要怎么做呢？这就需要利用到下面这行小信息栏了。信息栏左边显示的是文档保存情况。而右边呢，

22、当你将一个widgets放入工作区，并选择这个widget 时，这里就有用了，它显示的是你所选择widget 的高宽，以及距离页面顶部和左边的px 距离。通过使用上下左右键，结合这个信息栏，你可以一步一步将它移动到你想去的地方。有意思吧？Part III:文档管理(Document)file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 8 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 35 页 -交互原型设计软件 Axure RP

23、Pro 5 中文教程 By Hawking-折折熊 de交互论开章要说的是文档管理。文档管理看似简单，但是这是从操作功能上来说的，而我在说功能上的时候，想把我对文档管理的理解也一并说一下。文档管理的目的，其实是为了有一个清晰的产品思路。刚开始工作的时候，我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的，我也不例外。没有好的整理习惯，这直接导致每次寻找先前的文档都要花费相当长的时间，甚至不小心误删，如果恰好有事请假，别的同事也无法接手工作。所以，做一个 prototype需要首先构建一个清晰的文档关系，这样一方面能够让自己清楚文件关系与位置，更主要的是让开发者与接受者能清晰理解你的思

24、路，生成更合理的产品说明word 文档。Axure RP 的sitemap，与 windows的树形目录相似，是以父子关系构建页面关系的，每个页面既可以是一个页面 page，也可以是一个流程图flow。一、工具功能条 1、增加一个子页面：为所选择的页面创建一个子页面。2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。file:/E|/My Do

25、cuments/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 9 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论 6、删除页面：将所选页面删除，同时删除其子页面。7、编辑页面：在工作区打开所选择页面，进行编辑。二、右键 增加为鼠标右击文件所显示命令，下同。1、增加一个子页面：同一，1。（表示和第一大点，第1小点功能相同，以下同此）2、在所选页面之上增加一个同等

26、级页面。3、在所选页面之下增加一个同等级页面。三、右键 移动 1、页面上移：同一，2。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 10 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论 2、页面下移：同一，3。3、页面降序：同一，4。4、页面升序：同一，5。四、右键 复制 1、复制页面：复制所选页面，作为同级页面显

27、示在所选页面下方。不包含所选页面子页面。2、复制分支：复制所选页面以及子页面，作为同级分支显示在所选页面分支下方。五、右键 页面类型file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 11 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论 1、wireframe：页面类型定为线框图，文件图标显示页面图标。2、flow：页面

28、类型定位流程图，文件图标显示流程图标。六、右键 其他 1、删除页面：同一、6。2、重命名页面：为所选页面重命名。3、编辑页面：同一、7。4、生成流程表：将所选页面以及其子页面关系，生成流程图。生产图有两种页面布局方式可选。标准模式，页面按照父子关系从上自下排列；阶梯模式，页面按照父子关系从左上至右下，以阶梯方式进行排列。5、复制页面链接到剪切板。以上就是 sitemap所有命令，其实这些命令都很简单，也很容易理解，关键在于怎么去使用。由于页面有两种类型，wireframe与flow，所以要善于用这两种标记页面，从而让人理解你的意图。我总结大致这两种标记可以如下利用。flow 图为父页面，wir

29、eframe图为子页面：先画流程图，然后根据流程图构建页面关系。这样在流程图的指引下结构页面关系，可以更清晰的理解页面框架。wireframe为父页面，flow 为子页面：为页面线框图中的特殊部分做流程解释。可以对页面的细节部分进行详尽的解释。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 12 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawk

30、ing-折折熊 de交互论当然，这两种结构方式要活学活用，在复杂的产品页面结构中，他们完全是你中有我，我中有你的。Part IV:模板复用(Templates)masters和sitemap面板很相似，文档操作也一样，它们的本质区别是，sitemap里的文件是最终展示页面，masters里的文件却只是一个模块，是页面的一个部分。masters的英文直译是主人或雇主，但是我认为这里可以叫做模板，或者复用模块。masters的文件，是页面中重复的模块，由于在不同页面中这些模块是一样的，所以拿出来作为一个模块编辑，然后在不同页面中进行调用。这个功能类似于网页程序开发中的程序复用，不同页面中调用同一段

31、程序，一般把这段程序单独做成一段页面程序，然后用include 命令进行调用。master 的文件就相当于这段被调用的页面程序。dreamweaver也有类似的功能，就是template，可以参照理解。一、功能条 master 的功能条功能基本和 sitemap一模一样，功能也基本一样。唯一不同的是master 可以创建文件夹，可以通过文件夹收纳不同的文件，因此唯一不同的就是第一个功能按钮，功能作用是增加一个文件夹。二、右键单击文档 增加file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 1

32、3 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论增加功能的功能模块功能除了增加文件夹其他和sitemap相同，大家可以参考教程三中的二大条。而 masters的文档组织结构主要依靠文件夹完成，页面文件之间不存在父子关系。这是文档操作与组织中与 sitemap的最大不同。三、右键单击文档 移动文件移动功能基本上也和sitemap完全相同，但是父子关系的文档移动是文件相对于文件夹完成，而不是相对于文件进行。功能，基本上也可以

33、参考教程三的第三点。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 14 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论四、右键单击文件 文件身份“行为”behavior是行为的意思，这个功能是axure 升级到 4版本后加入的，是针对master 的不同使用情况而添加的一个功能，也是要重点介绍的功能。1、norma

34、l：普通文件。就是一般的复用文件。是默认创建的复用文件。2、place in background：定位的复用模板，这类模板的特点是定位于页面的底层，并且锁定模板中的 widgets在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。3、custom widgets behavior：自定义模块。这类模块就类似于自创了一个widgets。这类模块与其他类型的复用模块的不同在于，其他模块与复用到页面的模块是完全相同的，模块的功能设置是什么，功能说明是什么，页面中的模块设置和功能说明就是什么。而自定义模块与页面中被复用的模块是母子关系。自定义模块只决定了模块

35、的功能和位置，但是进入到特定的页面中，模块中的各自部分的说明和功能可以重新定义。充分理解三种不同类型的复用模块的区别，根据不同环境有效的选择，也是非常重要的。五、右键单击文件 其他file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 15 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论 1、2、3功能都是文档文档操作功能，

36、和sitemap一样，分别是删除、重命名和编辑master。4、5功能是对应的。前者是将所选模板文件批量运用于页面，后者是将所选模板文件，批量从页面中去除。通过选择此功能，会弹出sitemap文件的树形目录，你可以通过选择需要添加模板的页面，从而完成模板使用或移除。check all：选择所有页面 uncheck all：所有页面都不选择 check all children：选择所选页面以及其所有子页面 uncheck all children：不选择所选页面以及其所有字页面在 4中有特殊的 position设置和 options 命令，position中有两个命令 place in bla

37、ckground：将文件至于页面背景 specify location：是特殊定位，可以通过设置距离左侧和上边的距离，来将模板文件放入特定的位置。options 里的多选框的意思是“只有页面中没有此模板时才置入”，默认是选择的。如果不选择而置入页面，就会出现如果页面中已经有模板，模板被再次置入的情况。当然如果有特殊需要的模块，就可以这么使用了。6、usage report：使用报告，点击后弹出面板，显示所有使用了此复用模板的列表，显示的是文件名称，通过双击文件名，可以在工作区打开，直接编辑。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 B

38、y Hawking-折折熊 de交互论.htm（第 16 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论PartV:Widget工具 Axure RP 的widgets 工具栏，就是我们用来画线框图wireframe、流程图 flow 的工具，也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木，这些工具就是组装积木里的一个个小部件，组成什么？组合得怎样？完全依靠个人的经验和智慧。因此，熟悉每一个工具的用法和用

39、途，才能随心所欲的画出脑海中的图形。Widgets工具栏，下分两类工具：wireframe线框图工具：基本上对应着web 页面中的各种图形。针对页面中交互行为的表达，Axure RP 专门增加了 image map region 图像映射区、dynamic panel动态面版、menu（vertical/horizontal）水平/垂直菜单等几个特殊的工具。Flow 工具：流程图所需的基本图形框架。我们先谈 wireframe线框图工具。学习这部分工具，如果事先有html 基础，或者对 web 页面元素有比较充分的理解，就很容易入手。以下我根据图片中的编码，依次讲解。file:/E|/My D

40、ocuments/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 17 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论 1、image 图片：给 wireframe中插入一个图片站位，也可以直接置入真实的图片。2、text panel文本：插入文本。相当于插入了一个标签。是不带链接的文本。但是其实也可以带链接，在interactions中我们会提到。3、hyp

41、erlink超链接：插入带链接的文本。相当于插入了一段带标签的文字。但其实在Axure 中它与普通文本除了外型不同，没有本质区别。之所以将两类文字区分开来，目的还是为了在视觉表达中让人直观的理解链接文本和普通文本，而这对于设计人员理解也非常重要，因此建议画图时尽量标准的区分链接文本和普通文本。4、rectangle矩形：插入一个矩形。可以对其进行图形样式编辑。此图形通畅被用来表达板块的边界。5、placeholder占位符：插入一个占位符。占位符通常用来表达在页面中某些特殊区域，比如情况复杂，或者在系统升级中不需要修改，又或者无关紧要的区域等等。作者需要结合说明文字，进行对应的详细表达。6、b

42、utton 按钮：插入一个按钮，相当于标签。按钮一般结合表单使用，当然也可以作为强化的提示链接使用。7、teble 表格：插入一个表格。Axure 的表格使用起来不是很方便，增加行、列，修改行、列宽度都不方便，算是一个败笔。期待在下一个版本的时候能够有更好的进步。与标准化制作网页一样，表格的使用在画 wireframe的时候就应该明确其作用，是用来作为数据列表展示使用，而不是作为网页布局的控件。8、text field文本输入框：结合表单使用。一般用作表单中提交数据。比如搜索框、用户登录框、注册信息填写框等。用作字段提交或单行数据提交。9、text area文本区：结合表单使用。一般用作大段文

43、字编辑、提交。比如文章编辑、留言等板块。10、droplist下拉列表框：结合表单使用。一般用作下拉菜单或者下拉列表选项，比如在搜索中，可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接，可以通过下拉选择直接进行页面跳转。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 18 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 18 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折

44、折熊 de交互论 11、listbox 列表选择框：结合表单使用。通过文本框列表选项，通常使用在多项列表选择，比如在填写简历表的时候，选择你所感兴趣的行业，会提供列表选择框。不过列表选择框都会结合按钮使用。12、checkbox多项选择：多项选择通常使用在表单中，以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好，会提供十多个选项，因为选项可以并列进行，因此使用的是多项选择。13、raido button单项选择：在一组选择中选择适合选项，选项关系非此即彼。比如在填写性别的时候提供男女选择，用户非男即女，只取一项。当然，不排除再多提供一个双性选择，这样就是三选一，但是同样是非此即彼的单一选

45、择。14、15、horizontal line水平线、vertical line垂直线：用以分割页面中的不同板块区域。由于web 页面中只能存在垂直与水平线，为了系统生成用于演示的html 文件，特将两种线条分开使用。16、button shape形状按钮：相当于图形按钮，多用于导航，或者多帧切换的版面切换按钮。可进行边角编辑。17、image map region图像映射区：它用于在web 页面中制造一片不可见的区域，一般是图片的部分区域，相当于图片的热区，从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮，而图像映射区就可以用来说明这个区域的的功能和互动内容。18、i

46、nline frame框架：类似于 html 中的 对象。用于在页面中制造页面框架，每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏，一般都是使用了框架，左侧载入的是导航页面，右侧是载入的管理页面。Axure 的缺点是，暂时不支持百分比，因此iframe 都是按像素度量的，和实际页面效果还是有差距。19、dynamic panel动态面版：是 Axure 为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构。它是不同的state 叠加的一个动态区域，默认显示其中一个state，当用户触发按钮、图片或者下拉列表等时，可以设置相应动态面版切换到不同的state。不同 sta

47、te 的关系，类似于 photoshop的层，也类似于 html 中的 css属性 layer。我们可以通过右击 dynamic panel进行state 编辑，然后通过打开对应state 进行编辑，编辑方式和编辑页面相同。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 19 35 页）2008-7-30 10:43:04名师资料总结-精品资料欢迎下载-名师精心整理-第 19 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de

48、交互论 20、21、menu（vertical/horizontal）水平/垂直菜单：用于制作水平或者垂直的菜单，可以添加漂浮的的子菜单，添加方法很简单，就是选择所要添加的菜单项，添加submenu。Axure RP pro 的widgets 工具栏，另一个重要的工具组就是flow，流程工具。对于画流程图，是我们经常会遇到的问题。我们和程序工程师沟通，用再多的口水，也无法挑明的事情，画一张简明的流程图，就能很直白的说明关键问题。有时候你可能会懊恼，因为程序员的思维犹如计算机，你告诉他为什么没有用，你就告诉他该怎么做，是左是右，是 0是1就好了。这个时候，产品经理需要的是理性思维，清晰的思路，如

49、果你不清晰，工程师大多数会跟着你的思路乱做一团。所以多画几个流程，多根据页面需求画清晰的流程，就能解决实际的问题。话不多说，本章主要介绍flow里面的工具，因为图形其实很好介绍，简单的英文翻译就好了，所以也顺带说说这些图形在流程里的作用。方式还和以前一样，编号，对号入座，咱们来一个萝卜，一个坑：1、rectangle：矩形作用：一般用作要执行的处理（process），在程序流程图中做执行框。file:/E|/My Documents/交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论.htm（第 20 35 页）2008-7-30 10:43:0

50、4名师资料总结-精品资料欢迎下载-名师精心整理-第 20 页，共 35 页 -交互原型设计软件 Axure RP Pro 5 中文教程 By Hawking-折折熊 de交互论在 axure 中如果是画页面框架图，那么也可以指代一个页面。有时候我会把页面和执行命令放在同一个流程中做说明，这个时候将两类不同的矩形做色彩区别，然后做说明就好了。2、rounded rectangle：圆角矩形或者扁圆作用：表示程序的开始或者结束，在程序流程图中用作为起始框或者结束框。3、beveled rectangle：斜角矩形作用：斜角矩形我几乎不使用，可以视情况自行定义。或者在其他的流程图中，有特殊含义，暂不