Axure+RP+pro教程

               在实习期间的第一个要熟悉的软件-Axure

                简介：

              Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用 软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具，它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。它同时支持多人协作设计和版本控制管理。

               教程：来自百度文库

Axure RP pro教程

（原出处www.2tan.net）

注：此教程是我在下面这位仁兄的Blog上整理过来的，在此再次感谢这位仁兄。此教程前半截是Axure 4，后半截是Axure 5，但由于4，5差的不是很多，所以基本上可以通用。内容和其Blog上基本上没有变，就是添了一个目录。

   

目录

（一）Axure介绍 2

（二）界面与功能 4

（三）文档管理 8

（四）模板复用 12

（五）widgets工具-上 15

（六）widgets工具-下 18

（七）注释annotations 20

（八）交互interactions（上） 28

（八）交互interactions（中） 31

（一）Axure介绍

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

进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的Axure RP，是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时，此软件也在产品经理圈子中广为流传。之所以Axure RP得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。

在正式谈Axure RP之前，我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。
纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。
Word：上手难度普通。可以画wireframe，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。
PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。
Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。
Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。
Dreamweave：操作难度大，需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。

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

比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的 画出来，是再好不过的方法。而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。而ppt自 然是演示时更好。visio则可以适用于各种流程图、关系图的表达，更可通过画use case 获取用户需求。PS/FW是图片处理的工具，DW则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去 掌握。

其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。因为每个工具的产生，都是为了满足人类的某一方面需求。比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。但是不同的工具都有自己的工作领域，在其他领域它并不擅长。而以上的软件在创造的初期，并非为了帮助产品经理、ue完成产品原型设计，因此他们都不能在prototype design 这件工作上得心应手。而Axure RP正是在互联网产品大张其道的前提下，为满足prototype design创建的需求，应运而生。

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

没错！Axure RP 的特点是：

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

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

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

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

接下来我会结合图片，分几个步骤分享我对Axure的认识，
一、 界面与功能
二、 工具栏
三、 站点地图
四、 组件与使用方法
五、 复用模板与使用
六、 交互功能与注释
七、 实例

当然，在书写的过程中我会根据具体的情况再进行调整，尽量做到图文并茂，易于理解。写这个教程的目的，一方面为自己熟悉与更加理解Axure，另一方面也鞭策自己完善自己的blog网站www.2tan.net，同时也希望以自己的绵薄之力，为希望学习Axure的朋友分享一点经验。由于这是我第一次尝试写教程，难免会出现偏颇，也希望朋友们能够不吝赐教，共同进步。

另，为e文好的朋友附上自学Axure RP的几个途径：
1、 打开软件，按F1调取帮助文档，对照文档学习。
2、 登录http://www.axure.com/au-home.aspx 查看flash视频学习。
3、 登录 Axure 博客 http://axure.com/cs/blogs/Default.aspx，了解软件最新信息。
4、 登录讨论组http://axure.com/cs/forums/Default.aspx，参与讨论。 

并提供Axure RP pro 4.6版本的下载
http://www.2tan.net/LoadMod.asp?plugins=downloadForPJBlog

（二）界面与功能

不论学习什么，打基础是很重要的。关于基础练习，我印象最深的故事是王羲之练习书法的故事，将一池水染黑，需要怎样的毅力？再有就是达芬奇与鸡蛋的故事， 一个简单的鸡蛋，达芬奇画了无数次。我相信正是他们的一步一个脚印，才让他们有了后来伟大的成就。故事老套，道理浅显，可是我认为很重要。

学习软件，应该先熟悉每个面板，每个基础功能，才能够真正谈到运用。所以我的学习方法是了解软件的基础功能开始。

一、欢迎界面与功能

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

功能区1：文档区，这个区域显示用户最近打开的Axure RP文件，用户可以快捷的打开之前编辑的文件。同时也提供快捷按钮，可以创建新文档与打开Axure RP默认文件夹。

功能区2：认证区，这个区域显示注册信息。
    已经注册的用户，显示注册者名称，与已经获得认证的图标。
    未注册用户，显示注册链接，引导用户完成注册注册。

功能区3：Axure RP学习中心。主要包括在线学习、帮助文档、问题反馈三个环节。
    a、在线学习提供了三个链接：
    video tutorial：点击后进入视频学习中心，可以通过观看相关的flash教程学习Axure RP，不过都是e文解说。
    online community：进入Axure RP的官方讨论组，在线讨论学习。
    Axure blog：进入Axure的官方论坛，了解最新资讯。
    
    b、帮助文档也提供了两个链接，但是其实起到的是一样的效果，都是打开帮助文档，只是跳往不同的章节罢了。

    c、问题反馈，通过点击链接可以发邮件到[email protected]，以寻求获得帮助。

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

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

二、软件主界面与功能

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

功能区1：命令区，和我们操作的所有office软件一样，包含文件、编辑、查看和帮助，这些功能大抵是差不多的。table也很容易理解，就是对表格编辑的命令。而Axure特有的几个特殊的命令栏目是

    a、wireframe：线框，包含所有画原型线框图的相关命令。
    b、object：包含所有对工作区物体的操作命令，操作放入工作区的所有widgets，包括组合、排序、锁定以及脚注命令等。
    c、generate：自动生成html演示文件、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距离。通过使用上下左右键，结合这个信息 栏，你可以一步一步将它移动到你想去的地方。有意思吧？

好了，今天先写到这里，写到快3点了，今天真是有点投入了，要上床睡觉了，支持不住呀。接下来，我将根据不同的工作区，来详细解说功能了。写得不清楚的，可以问；写得不对的，可以提，我会尽力做好工作！ 

（三）文档管理

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

文档管理的目的，其实是为了有一个清晰的产品思路。刚开始工作的时候，我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的，我也不例外。没有好 的整理习惯，这直接导致每次寻找先前的文档都要花费相当长的时间，甚至不小心误删，如果恰好有事请假，别的同事也无法接手工作。

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

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

一、工具功能条

1、增加一个子页面：为所选择的页面创建一个子页面。
2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。
3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。
4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。
5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。
6、删除页面：将所选页面删除，同时删除其子页面。
7、编辑页面：在工作区打开所选择页面，进行编辑。

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

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、复制页面链接到剪切板(clipboard)。

以上就是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、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：使用报告，点击后弹出面板，显示所有使用了此复用模板的列表，显示的是文件名称，通过双击文件名，可以在工作区打开，直接编辑。

（五）widgets工具-上

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、radio 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 5.0 功能预告

今天不写教程，先来了解一下Axure RP pro 5最新的功能，对我们接下来要接触的技术，做一个展望。

Axure PR pro 5 最大的改进，就是shared projects模式的研发，使得产品原型设计，由原来的单人单机，转变到了多人共同合作。因此，4升级到5，名副其实。

所谓的shared project模式，就是项目分享模式，这一模式让联网的用户可以同时对同一个Axure项目进行编辑修改，通过将修改记录记入历史表单，对项目的进程进行控制。基本上这一功能和svn是一样的原理，创建一个可共分享的项目文件，设置相应的访问权限。访问者通过本机打开项目文件，修改后上传最新修改，覆盖共享文件，以共其他人下载或升级更新，从而完成项目的协同开发。

关于项目分享的具体内容，关心的朋友可以访问http://www.axure.com/au-sharedprojects.aspx进行查看。

Axure PR pro 5的其他重要更新，主要有：

1、链接指向到图片确定热区(即页面锚点)。

这个功能其实就是同一页面的跳转，跳转对象就是页面中的锚点。实现的效果就是通过点击链接，跳转到本页面的特定锚点区域，对页面长度较长的页面表现，有重要的作用。

2、移动动态面板。

就是设置面板出现的位置，移动面板到确定位置。通过添加交互命令后，选择Move panel，设置移动的位置。

3、聚焦和失焦事件。

聚焦与失焦事件，是增加了两种触发事件发生的动作。

聚焦，就是鼠标或者用户的操作指向页面中的特定对象；失焦就是用户失去对页面中特定物体的控制。我们可以通过设置聚焦和失焦，从而设置相应的交互效果。

比如我们做一个关键词搜索。关键词输入框就是我们的对象，一般我们会期望，当用户进入页面没有进行操作时，默认输入框中显示文字“请输入关键字....”；当用户激活关键词输入框时，就是聚焦输入框，这时输入框中文字消失，用户可以开始输入关键字；如果用户不做操作，选择页面其他对象，这个时候就是用户对关键词搜索框失焦，我们希望重新显示“请输入关键字....”。

（七）widgets工具-下

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

有时候你可能会懊恼，因为程序员的思维犹如计算机，你告诉他为什么没有用，你就告诉他该怎么做，是左是右，是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文档加上名词解释一样，才是解决方法。

（八）注释annotations

Axure rp将interaction交互与annotations注释说明功能放在了一个面版上，同时又针对整个页面有一个交互与注释说明。

交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时，发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互，与针对页面中某个元素的说明与交互在文档表现和生成的不同，而被分开，但是他们的实际功能是一致的，可以一起来说。

针对页面和针对页面元素的功能，分别默认处于软件界面的右侧和底侧。如下面两张图片所示：

底部：

 

右侧：

对于交互与注释说明，有必要分开讲述。这一节主要讲述annotations，即注释说明。

首先，我定义一下对交互与注释说明的解释。
Interaction：交互功能，用以设置页面中的交互事件，如页面跳转、面版跳转。从而实现框架图中不同对象的实际功能。在生成html框架页面时，产生相应的对象功能，用以演示操作。

Annotations：注释说明，用以对页面或页面中的特定对象进行说明注释。可以根据实际情况分类编写说明内容。比如优先级、功能类型、交互效果、说明等。让程序在开发的时清楚了解该对象或该页面的程序实现详情与细节。

那么，现在重点来说注释。
1、自定义注释与说明
你也许看到e文会头大，你也许第一次看到annotations面版中specification、status、benefit、effect等一连串的 英文单词脑袋发晕，那么我告诉你，你完全不用在意这些单词和选项的意义，因为也许它们根本就不适合你，而你可以自定义一套自己的说明选项。

我之所以说你不必去理解，出于两个理由，一是因为这些定义，是axure根据一些欧美公司文档中常见的字段归纳出来的，他不适合我们的国情和我们自己公司的 实际情况，二则是一个文档中该向你的程序员、设计师表达什么，并没有一个完全的框架。你尽可以根据你要说明的事情，以及你们往常的沟通方式来定义。那么现 在看看，我们怎么来定义吧。

如果是定义右侧的对象注释，选择 annotations & interactions > customize fields and viwe
如果是定义底部的页面注释，选择 page notes – default > manage notes
就弹出了自定义窗口，由于功能类似，所以我只选择复杂的右侧的对象注释来说明

如图所示，我们看到了两个区域：
区域一：Fields：这是管理系统所有的说明字段的，这里定义了针对对象你要说明它的哪些属性，这些属性，用什么类型type的文字进行表述。

A)新增字段

先在前面的下拉选择框中定义该字段的type类型，有四种类型：
Text：文本文字。说明字段中用大段的文字进行说明。
Number：数字。说明字段中只包含数字说明。
Date：日期。说明字段只有日期
Selectlist：选择列表。通过设置特定的选择条件，以供选择。

然后在后面的填空框中输入字段的名称，比如我想设置一个对页面中对象的开发优先级的说明字段，那么我就可以给这个字段命名为“优先级”。然后点击add按钮，你所设置的说明字段就被添加到下面的字段列表了。

B)管理字段
管理字段，首选必须选中你要管理的字段。

然后可以通过选择右侧的功能按钮，对字段进行管理：
[b]Remove：[/b]删除此字段。
Rename：对字段重命名。
Move up：将字段排列顺序上移一格。
Move down：将字段排列顺序下移一格。
Edit selectlist：编辑选择列表中的项目，该功能只有当你所选择的说明字段的type类型是selectlist时，你才能选择。选择后会弹出编辑窗口，你可以根据自己的需求，填写不同的选择项，Axure定义，每一行为一个选择项。

点ok之后，你就完成了对所选项的管理。

区域二Custom views：这里是定义了我们自定义文件的版本。我们可以选择几个常用的说明字段，归纳起来生成一个自定义版本。
A）新增用户自定义说明

新增说明很简单，只要在输入框中输入一个名称，点选add，就会弹出一个选择框

你可以通过add field下拉列表选择你的自定义说明中要包含的说明字段项目，然后点add添加到你的自定义说明中。
当你都选择完成后，点done，就创建了一个你自己的自定义说明。
 
B）管理自定义说明
管理自定说明，和管理说明字段一样，在管理前，你必须选中你要管理的自定义说明。
Rename：对字段重命名。
Edit：重新定义此自定义说明中所包含的fields说明字段。弹出选择框，供你重新选择。
Remove：删除此自定义说明。

最后，当你即完成了对字段的处理，又完成了自定义说明的生成后，点done，你就定义完成了你自己的注释与说明。这个时候，你再选择annotations & interactions，你将会看到你自己的自定义说明：

选择后，右侧的注释与说明的字段就都是你自己的了：

2、自定义注释与说明的现实意义
那么这些自定义说明到底对于我们有什么现实的意义呢？有的，下面我来说明一下。
这涉及到axure rp的两个文档生成功能

生成演示文档：我们利用axure完成文档的编写后，需要给程序演示，那么我们怎么演示呢？
请按下f5键，会弹出提示框，按照默认设置确定后，就会生成html演示文件。你就可以拿这些html文件，给程序员、设计师们演示你的文件了。
而我们自定义的这些说明，在编写好的时候会出现在如图中的位置：

就是说明面版的激活按钮，点击弹出你的说明文字。这样，用户就可以在不明白的时候在页面中调出说明文字，一一查看了。

生成word文档：我们也可以生成word的文档的说明文件，这样的文件甚至可以当作PRD文档使用，而说明则会根据label的标签以及编号，对应生成table说明文档。
生成word的快捷键是F6，生成specification说明书。

综上所述，运用好了annotations，就可以解决好prd文档中最重要的工作，即功能说明。至于设置怎样的注释，完全就靠你自己来掌控了。

Ps：页面notes更加简单，因为针对页面的说明只能有一段文本，不存在特殊说明字段的编辑。

（九）交互interactions（上）

Axure RP Pro5终于发布了，直观操作上，最明显的变化之一就是在命令行多了“share.分享”，其次所有窗口可以以浮动形式编辑了。为了与时俱进，以后的教程将以Axure RP Pro5为基础来继续写。

话说上次功能说到注释annotations，这次就来说它的“亲兄弟”交互interactions。之所以说他们是亲兄弟，除了因为他们长在同一个面版上，更因为他们需要结合起来使用，这样才能清楚的表明功能详情。

打个不恰当的比方，如果要说明的功能对象是人，那么注释annotations标注的是这个人的基本属性，比如“性别、年龄、学历……”，交互 interactions则是说明人根据外部条件，做出的回应。比如你父母做好饭菜给你，你就吃饭；给你10块钱，一个瓶子，嘱托你买酱油，你就会一溜烟 小跑去打酱油（这个比喻有点过时，现在都不这么买了）。当然，我们说的是绝对条件下的绝对反应，这就是机器语言。

我们以一条简单的文字链接为例：“hawking 的 axure rp 5  文章列表”。我们来对它添加交互行为。

我把交互分为三个部分的：交互触发、交互条件、交互行为。这样的区分，其实是参考程序编程的结构而做的，这就把程序构成人性化、语义化了。

这章我着重讲解交互触发与交互行为中的快速链接，详情的交互行为与交互条件留待后面两章进行详解。还是照例先给三个名词做出名词解释。

交互触发：是发生交互的导火索，说明引起交互的触发动作是什么。
    以此文字链为例，交互的触发原因，是“点击文字链”。

交互条件：是达成我们目标行为的前提条件。如果目标行为只有一个，对触发没有任何条件限制，交互条件则可以被忽略。
    再以此文字链接为例，如果对查看文章列表没有任何限制，则不设置交互条件，用户点击文字链，直接发生交互行为。如果对查看文章列表有权限限制，只允许作者查看，则触发交互行为的条件就是“以文章作者hawking的身份登录”。
    PS：有条件本身，就必然会有条件的反面。或者有多个条件，就会有多个条件之外的例外情况。在写文档的时候，必须考虑进去，说明清楚，这一点最容易疏漏，而造成程序员在开发的时候想当然，或者再回来问你。针对这个例子，条件的反面就是“登录者不是hawking，或没有登录”。

交互行为：是机器依据触发事件与条件，做出的反应动作或行动。
    此文字链接的的交互行为，就是“页面跳转到hawking 的 axure rp 5  文章列表页面”。

一、交互触发

触发主要有两种，一种是页面载入触发，一种是鼠标行为触发。

1、页面载入触发，针对的对象就是我们所编辑的页面，axure将其放在了page notes&page interactions面版中。如下图所示，就是page interactions。

Axure暂时仅支持一种页面触发条件，就是OnPageLoad当页面载入时。

如图所示，针对我们设置的case事件，axure提供了三个功能。
Add case：给所选对象增加事件。
Edit case：编辑所选事件。（功能前提，选择你索要编辑的事件，比如鼠标选择case 1）。
Delete case：删除所选事件。（功能前提，选择你索要编辑的事件，比如鼠标选择case 1）。

2、鼠标行为触发是当用户使用鼠标操作界面时，引发交互。

Axure支持的鼠标触发行为根据你所选择的对象不同而不同，选择图形、文字、链接会出现三种触发行为：
Onclick：当鼠标点击目标时，触发交互行为。
OnMouseEnter：当鼠标移入目标热区时，触发交互行为。
OnMouseOut：当鼠标从目标热区移出时，触发交互行为。

如果选择的是输入框、多选框等则会出现对应功能的触发行为：
OnKeyUp：Fires when the user releases a key.当释放键盘时触发交互行为。
OnFocus：当鼠标选择、聚焦到对象时，触发交互行为。
OnLostFocus：当鼠标失去对目标对象的选择、聚焦时，触发交互行为。

特别的，选择下拉框、列表框会出现：
Onchange：当所选项被更改时，触发交互行为。

而选择我们所编辑的对象后，如果对象之前没有编辑过交互事件，则有两个选项
Add case：给所选对象增加事件。
Quick link：快速添加链接。

如果曾经编辑过交互事件，则有三个功能，和页面载入触发是一样的，这里也就不再累述。

二、交互行为—快速链接

选择好交互触发后，在对交互没有特定条件设置的前提下，我们可以直接设置此次触发引起的交互行为。由于链接跳转是网页中最常用的交互行为，因此axure特意提供了一个快速链接的功能。

选择对象后，点击快速链接则会弹出如下link properties 链接属性面版：

如图所示，此面版中有四条可选命令：
1、link to a page in this design：链接到这个项目中的某一特定页面。
你可以通过鼠标点击，选择你想要跳转的，树型目录中的相应页面。

2、link to an external url or file：链接到一个外部链接或者文件。
你可以通过在hyperlink框中输入链接地址，完成链接导向。
注意：链接最好是绝对链接地址，不然就容易出错。

3、reload current page：重新载入当前页面。
Variable changes are applied变量变化生效。

4、back to previous page：返回浏览前一页面。
Varable changes are not applied变量变化不生效。

（十）交互interactions（中）

本章要介绍的是交互条件。交互条件是axure的学习中的难点，也是axure高段进阶功能。其实我们不设置条件，直接靠文字说明，也可以完成我们的思想传达，如果你设计的原型文档，能模拟真实的交互环境，当然就非常优秀了。

但是，我要强调一点观点，传达思想是首要的工作，传达思想也是有成本的，如果为了传达思想要耗费更多无意义的劳动，损耗更多的时间，增加更多的沟通难度，不要也罢！我个人觉得，我们在做原型设计的时候，有没有必要把页面模拟到和真实情况一模一样，这个还值得探讨。

言归正传，开始来说设置交互条件。

一、进入 交互条件设置

当我们选择好了交互触发，通过双击选择促发动作，或者点击add case ，就会弹出interaction case properties 交互事件属性窗口。

通过这个面板，我们要表达我们伟大的交互行为。面板告诉了我们三步策略：

Step1 description 描述
描述后的input输入框，可以编写事件的名称，或者事件的描述文字，以供生成html页面展示时标注此事件，也供生成需求文档的时候辨识此功能功能。

Add condition （if necessary）增加条件（如果需要的话）。这就是这章所要说的重点内容，为我们要创建的交互事件，设置前提条件。我想，axure在这里添加这么一 句话，也许同样是在提醒我们，我们把交互做到如此之细，是否真的必要？思考清楚了目的，考量准确了我们需要投入的精力，再开始做这一步。我想会清晰很多。

Step2 select action 选择动作
Step3 edit the actions description（click an underlined value to edit）编辑动作描述，你可以通过点击有下划线的文字，编辑动作的具体参数。

第二步与第三步，就是我下一章要说的交互行为，或者叫交互动作也可以。第二步是选择我们要进行的动作，第三步则是为我们的动作设置具体的参数。这些我们稍后再看，还是先来了解下，我们可以怎么设置条件。

二、条件设置的功能与细节

点击step 1 后面带下划线的文字，add condition，弹出condition builder条件设置 窗口

条件设置窗口也分三个部分：

A、满足条件类型选择与条件清理

   我们可以同时设置多个条件，但是我们是需要满足所有条件，还是仅仅满足其中一个条件就可以了呢？ 
    在satisfy “any / all”of the following 中就提供了这个选择。
         选择all，则需要满足我们设置的所有条件；假设，你设置了条件a、b、c，则你需要同时满足条件a、b、c，才能产生最后的交互。
         选择any，就是需要满足我们设置的任一条件。假设，你设置了条件a、b、c，则你需要满足a、b、c中任何一个条件，就能产生最后的交互。

另外，如果我们对我们设置的众多条件都不满意，想全部删除重新设置，clear all 就是为了满足我们这一需要的按钮。

B、设置具体条件

a)增加条件与删除条件。
初始默认我们只有一个条件，通过点击条件末尾的“-”、“+”按钮，我们可以删除、添加新的条件。

b)条件设置

注意：在设置条件前，需要给条件所涉及的widgets对象设置label名称，因为条件设置，需要用label定位widgets。

条件设置分五个部分，但是其实只需要将其看做三个部分。为什么这么说呢？这是我的深刻教训，我在写这篇攻略的时候走了一段比较长的弯路，最后才发现自己的错误，所以也非常希望朋友们不走我一样的弯路。下面且听我道来。

我最开始把条件设置看做5个部分，1是作为条件类型的设置，则2是设置要比较的对象，3是比较方式，然后根据你选择的对象，后面4、5会分别出现不 同的可比较条件或设置条件。这样理解是没有错的，但是就绕了一个非常大的弯路，而且表述起来要逐条罗列，非常繁琐。所以一开始，我根据1可能出现的六种类 型，画了6个大表格，企图把所有的情况囊括，做了很多无用功。

现在我们尝试把它理解为三个部分，那么怎么理解呢？
细心的人可能发现了，3是设置的比较方式，可以是等于，也可以是不等于，或者是大于小于。而左右两边是被比较的两个对象。

对了，这就是关键，1、2设置的是条件的比较方，我们把它看做a，4、5是条件的被比较方，我们把它看做b，而3就是比较方式。而我们要做的工作就是设置a与b的关系。

但是设置比较关系是有原则的，就是数值可以和数值比较，区域选择状态可以和区域选择状态比较。我们不可能设置让一个变量，等于一个区域被选择的状态。所以根据a的不同，b的可选项也会相应的改变，但是他们的内容基本上是一致的。

比较对象类型	比较针对目标	注意
check state of 多项/单项选择框的选择状态	多项选择（checkbox）、单项选择（radio button）。注意：这里会显示页面上的多项选择、单项选择的label名称，所以做页面工作的时候，要保持有效命名label的好习惯，以下不再累述。	此项目只能与选择状态比较，或者value of variable变量值比较，不能与其他类型的对象比较。这是最特殊的一项，以下不再做强调。
selected option of 所选择的菜单	下拉菜单条droplist或者list box列表文本框。这里也是显示你所设置的label名称
value of variable  变量的值	Onloadvariable系统默认的变量
	Add new..自己新增一个变量
	如果你设置了其他变量，这里会提供选择
length of variable value 变量值的长度	同上
check state of多项/单项选择框的选择状态	这里会提供文本输入框input、文本框text供你选择
length of widget value 图形原件上的文字长度	提供文本输入框input、文本框text、下拉菜单条droplist或者list box列表文本框的label名称选择
Value值	当a比较对象是list时，这里是选择状态，当a的比较对象是数值时，这个数值由用户自定义设置。	此选项根据条件设置情况只出现在b。

以上列出了可操作的对象情况，大家可以自行研究一下，写得有点不太形象，有机会我再专门做实例来说明。其实很简单，朋友们可以自己做一两个例子，把 所有的wigets拖到页面里，并根据各自的情况命名label，然后一条条的选择，操作一下就清楚了，我这里主要提的是一个理解的方法，条件含义的说 明。

当然，不能忘了说明一下，3比较方式有哪些，如下：
  3.1 equals 对象的值等于
  3.2 does not equals 对象的值不等于
  3.3 is less than 对象的值小于
  3.4 is greater than 对象的值大于
  3.5 is less or equals 对象的值小于等于
  3.6 is greater or equals 对象的值大于等于
  3.7 is 对象是 ，需要注意的是，这里不是关注的值，而是关注的对象组成的内容

以上内容，大家可以对照着参考学习。

C、自动生成对条件的文字描述

条件的第三部份基本上不需要我们手动设置，在进行第二步条件设置的时候，这里会自动生成描述性的英文。即便是可以选择的部分，也会提示链接，让我们点击链接，手动选择。所以这里的重点意义，在于生成prd文档的时候，会生成条件的说明文字。

三、综合谈一谈设置合理的条件。

好了，交互条件设置基本上说完了，可能会有一些不清楚，因为这里的条件设置会涉及到部分的程序的内容，而且条件设置有点绕，有点晕。但是大家没有必要那么着急，一方面因为如果你针对我的文字多对应操作一下，就很容易了解，另一方面因为我现在要说的，还是条件设置不重要。

为什么条件设置不重要？我要提出我的几点理由：

1、设置过于复杂的条件，做成的展示文件，可能根本没有用途。
程序员可能根本不看，即便看也容易遗漏细节，仍然需要你与他沟通。

2、你需要花费过多的时间。
这无形中提高了你的开发成本，对于你的项目是不利的。

3、花哨的展示，脱离了产品策划的精髓。
   我相信，我们可以想象到的交互效果，要用现在的axure做出来，肯定是不可能完全达到的，这也才是我们创造力的价值体现。而那些可以达到的效果，也没有 必要我们费劲心机的让它在策划阶段就实现。作为交互设计师，更多应该关注功能是否满足用户需求，提高用户使用效率；作为产品经理应该更多的关注产品的生命 线、竞争力。

由上，所以我一再强调，除非必要，真的不用研究得太深，表现得太细致，这只是个工具。可能你不太同意，那也没关系，我们可以交流，提出你的思想，让我们碰出火花！

（十一）交互interactions（下）

终于来到交互行为了，交互行为的学习会稍微简单一些，因为基本上都是逐一的选择实现，而展示内容也是我们在浏览网页的时候见过无数次的。不过在讲解这个之前，我想我们可以回顾一下交互这一小节的所说的三部分：交互触发、交互条件、交互行为。然后我们可以进行一些胡乱的联想。(我喜欢干这些无厘头的事情….我觉得对开拓思路有益。)

我一开始觉得这有点像初中学的神经反射，当触发了网页之后，我们经过数据传递与处理，根据条件内容，进行有效地反应。

后来我又想到了信息的处理，交互触发是设置我们要传递的信息内容；交互条件是设置我们对信息的处理方式；交互行为是反馈我们的信息处理结果。

再生活化一点，就想到了一个简单的场景，一个男生强吻了他喜欢的女生，这是我们所说的交互触发；女生衡量了一下，发现这个男生邋遢、猥琐，这是交互条件；女生愤然给了男生一个巴掌，这就是最后的交互行为了。

或者我想，我们也可以把它理解成为一个因果条件关系，因为….满足….所以….。哈哈~也许还有更多的联想，不知道你是怎么理解的，如果有兴趣的话，可以写下来，跟在我的文章后面，肯定很有意思，期待朋友们的参与。

完成联想，那么我们继续来看，在设置好触发内容与判断条件后，我们可以跟用户展示些什么，我想大家肯定都迫不及待了！但是我不得不先泼一点冷水，因为你可能会经受挫折！

我们可以干什么呢？交互设计师和产品经理想干很多事情，你可以想象，但是很多情况下无可奈何。因为你要干的事情，需要受到技术条件、浏览器、用户端等等条件的限制。而现在我们要用axure rp表达出来，我们又受到了axure的限制，这就使得我们往往“可想而不可及”。

是不是有点郁闷呢？这是很多产品经理、交互设计师喜欢问的问题“那个效果怎么做”、“这个效果怎么做”、“这个效果我都做不出来怎么办”。我希望你不是个制作者，你应该是个设计者！你需要明确一条，axure rp 只是个工具，因此使用或不使用它，或使用它多少的功能，应该由你控制，而不能让它控制了你的思维，让自己成为工具的奴隶。

这就像很多学习绘画而成为制作者的人出现的问题是一样的。过分的追求ps、3d max、ai等工具的掌握，让自己成了工具的奴隶，却忘记了最有价值的是自己的头脑，是闪光的idea。这是我毕业设计时学到的一课，我觉得我终生受益，所以我也希望跟大家有个共鸣。

但是我这么说，并不是说学习axure能干什么不重要，恰恰相反！扎实而基础的掌握axure所有的功能，才能让你在做表达的时候游刃有余。你才能知道，什么时候，需要做什么工作；什么情况下，需要做怎样的表述。那么，我们还是扎实的一一学习，我们到底可以用axure 表达什么交互行为吧。

现在我们就继续上一章的内容 说一说

Step2 select action 选择动作

Step3 edit the actions description（click an underlined value to edit）编辑动作描述，你可以通过点击有下划线的文字，编辑动作的具体参数。

可以说，step2是我们选择要进行的动作，而step3是我们要对动作设置参数，通过点击选择，或者输入文字数据，控制动作具体的内容。下面我们一个一个动作来分析说明：

1、

动作：open link in current window在当前窗口中打开链接

参数：点击link弹出link properties链接属性设置对话框

该对话框在Hawking’s Axure RP Pro 5原创教程：（八）交互interactions（上）中的交互行为—快速链接中已有介绍，大家可以参考相应章节。

2、

动作：open link in popup window在弹出窗口中打开链接

参数：

2.1点击link弹出link properties链接属性对话框，主体内容与动作1的参数一致。由于是在新窗口中打开链接，因此该链接属性中，没有重新载入当前页与返回浏览前一页的设置。

2.2点击popup弹出popup editor弹出窗口编辑器，用于设置弹出窗口的属性。

多项选择中的toolbars工具栏、menubar菜单栏、scrollbars滚动条、directories目录条、location bar地址栏、resizeable窗口大小可拖动改变、status状态栏、center screen位于中心等多选框，用于设置在打开的窗口中这些功能是否可用。选择则表示可以使用，不选择则表示不可使用。

右侧的数值，用于控制所打开窗口的width高度、height宽度以及距离屏幕左上角的left左边距、top上边距，数值按照像素进行度量。

注意，高宽只包括内容区，不包括整个windows。而边距也是以所打开窗口的左上角，与桌面左上角的距离作为参考依据。

3、

动作：open link in parent window 在父窗口中打开链接

参数：点击link弹出link properties链接属性对话框，设置内容和动作2的link属性一致。

4、

动作：close current window关闭当前窗口

5、

动作：open link in frame在特定框架中打开链接，必须当前页面包含frame框架。

参数：点击link in frame进入open link in frame目标框架设置窗口

Step1是select frames选择你要操作的框架，如果页面中有多个框架，你也可以多选。

Step2是edit actions description编辑动作描述，也就是编辑你的框架将做什么样的状态变化，通过点击link弹出link properties链接属性窗口，设置内容和动作2的link属性一致。

6、

动作：set panel state(s) to state(s)设置面板的状态变转换

参数：点击panel state to state面板切换进入set panel state to state面板切换设置窗口

step1:select panels选择面板。通过点击选择你要操作的页面，你想要控制的面板。

Step2是edit actions description编辑动作描述，也就是编辑你的面板将做什么样的状态变化，这里通过点击状态界面的名称“1”，    弹出select panel state选择面板状态窗口，列表出你多选面板所包含的所有状态名称，你可以选择一个作为想要获取的目标状态。

7、

动作：show panel(s)显示面板，让面板在页面中显示。

参数：通过点击panel进入selects panels面板选择窗口，通过鼠标选择你要显示的面板。

8、

动作：hide panel(s)隐藏面板，让面板在页面中隐藏

参数：通过点击panel进入selects panels面板选择窗口，通过鼠标选择你要隐藏的面板。面板同动作7。

9、

动作：toggle visibility for panel(s)切换面板的可见属性。控制面板的可见属性，在显示与隐藏之间转换。是动作7与8的结合。

参数：通过点击panel进入selects panels面板选择窗口，通过鼠标选择你要控制的面板。面板同动作7。

10、

动作：move panel(s)移动面板。将你想控制的面板，移动到某一坐标位置。

参数：通过点击panel to (x,y)进入move dynamic panels移动动态面板控制窗口。

step1是select panels选择面板。通过点击选择你要操作的页面，你想要移动的面板。

step2是edit actions description编辑动作描述，也就是编辑你的框架将做什么样的状态变化，通过点击to (0,0)进入move widget editor工具移动属性设置窗口。

其中move widget 后的下拉选择项目有to和by两个选项。

选择to，是将工具的位置移动到（x,y）坐标，原坐标以窗口左上角作为起始坐标；

选择by，是在工具的所处的坐标基础上，做（x,y）的累计移动，即以widget工具当前所处的坐标作为起始坐标进行移动。

11、

动作：set variable and widgets value(s) equal to value(s)设置变量或者工具的值的变化值

参数：通过点击variable and widget value equal to value进入set variable and widget values设置变量和工具值窗口

此窗口的值设置与Hawking’s Axure RP Pro 5原创教程：（九）交互interactions（中）中条件设置窗口的值基本一致，大家可以参考文章九的表格。唯一不同的是，中间条件不可选择，只能是equal to，也就是只能设置为等值。

而此文档中有一个不同的选项情况是：

text on widget工具上的文字，通过下拉选择你所要控制的widgets上的文字变化。不过这似乎是我上篇文章漏记了的，如果是漏了的话，那就补回来吧。

12、

动作：open link in parent frame在父框架中打开链接

参数：点击link进入link properties链接属性设置窗口，属性设置内容和动作2的链接属性一致。

13、

动作：Scroll to image map region滚动到图片的位置

参数：点击image map region进入select image map region目标图片区域设置窗口

首先，你必须确保你所控制的页面中已经包含了widget“image map region”这就类似于html页面中的map area。同时你必须保证给它取了一个名字，并在label中进行了设置。

这样，你就可以在scroll page to location of image map（滚动页面到当前图片区域）后的下拉选择框中选择到你需要滚动到的图片位置了。

而options菜单中的三个选项，是控制你滚动的具体方式:

scroll vertically only仅仅进行垂直滚动

scroll horizontally only 仅仅进行水平滚动

scroll vertically and horizontally同时进行水平与垂直滚动

14、

动作：enable widget(s)使工具可用。此功能就是使得目标工具的功能可用。

参数：点击widget进入select widgets窗口。窗口显示了所有当前页包含功能的widgets。

15、

动作：disable widget(s)使工具不可用。此功能是是的目标工具的功能不可用。

参数：点击widget进入select widgets窗口，功能操作同动作14。

16、

动作：Wait time(ms)设置等待时间。

参数：点击0ms进入wait time 等待时间设置窗口。你可以在这里设置等待时间enter time in millisecond，单位为毫秒。

17、

动作：other其他。通过文字表述其他你想实现的操作。

参数：点击other 进入other description其他描述设置窗口。你可以在enter a description后面输入你想表述的交互内容。

好了，交互部分终于写完了，不知道对朋友们是否有帮助。如果有什么意见和感想请尽管留言吧，我很期待与大家的交流。

（十二）企业如何引入Axure RP

要问如何引入Axure RP，其实没有一个准确的答案。为什么这么说呢？因为没有哪一条途径是适合所有公司的，不同的公司情况不同，人员组织不同、产品研发流程不同、交付物的表现形式也不同。每个公司，都会在自己的发展壮大的不同阶段，调整自己的企业文化，组织结构，甚至战略目标。因此，要问如何为自己公司引入AxureRP，首先还是应该从自身出发，才能为自己找到最合适的途径。

一、axureRP的引入

那么，我想结合我的工作经验，用五W一H的决策分析工具，来为我们今天的议题，指引一条路。当我们要为我们的企业引入axureRP时，我想，我们需要首先问自己以下几个问题：

What，我们引入的到底是什么？

Who，我们企业情况如何？（我的企业是谁）

Why，我为什么要引入Axure RP？

Where，我要将Axure RP用在什么地方？

When，我们该何时引入？

How，如何引入？

What，我们引入的到底是什么？

也许你觉得，这个问题很好回答。是呀，不是很明显么？我们引入的是这款叫做AxureRP的软件，我们就是要丢掉以前的原型设计方式，以后都用AxureRP来做我们的产品设计。但是仅仅用AxureRP加入制作流程，就是我们的初衷么？

如果一个公司在引入AxureRP时，领导层也没有重视这件事情，既没有说要大家尝试使用，也没有说不做考虑。这时，一旦有的人在做产品设计的时候，自己私下尝试使用，跟设计师、程序员沟通的时候生拉硬套，试图强行加入新的开发流程。一方面会出现由于刚刚接触这个软件，用起来并不是那么得心应手，产品设计花费的时间周期加长，另一方面会出现，各部门的执行人员，都不能适应这一新的变化，也不愿意同时面对两种不同类型的开发文档，因此导致沟通不利，影响工作的进度和质量。

很明显，AxureRP只是一个工具，就跟我们画画可以用毛笔、钢笔、铅笔、水彩笔、碳精条等等不同的工具一样，我们要完成产品原型设计也可以用其他的软件工具，所以如果我们仅仅是为了引进一个新的软件，那么很可能让我们的工作陷入另一种难堪的境地，这不是我们真正要引入的。

那么我们到底要引入的是什么？无疑，我们公司曾经出现的这种问题，并不是我们期望的局面。我们关注AxureRP的初衷是它在制作产品原型时所体现的便捷与速度，在进行产品展示时所体现的简单与低成本。如果AxureRP给我们带来更多的麻烦与问题，那么那岂不是毫无意义？我们是要引入AxureRP，但是我们是期望引入它之后，我们产品设计更合理，流程更简单，沟通更方便，降低成本，提高效率。而这些不是一个工具可以解决的，是一个高效的、优秀的、科学的产品研发流程，才能解决的问题。

所以，简单点说，我们引入的，是以AxureRP为产品设计工具，高效而科学的产品研发流程。

Who，我们企业情况如何？

一个公司的发展，跟一个人的成长是一样的。面对千差万别的事情，不同的人会有不同的处理方法；而人处于不同的年龄阶段，对于同一问题的处理方式，也会大相径庭。而无一例外的是，人们处理事情的方法无外乎来自两种途径，一是别人的经验，包括老师的教导，书本学到的知识，一些大师整理与归纳的定理和方法论等等，这些都是别人的经验。第二就是自己的经验，这是我们在遇到具体的问题时，通过思考与处理后，自己从成败中总结的理论。

公司也是如此，自己的经验，就是在项目研发中累积而成，比如我们常说麦肯方法，麦肯的理论。这是麦肯公司这么多年的广告客户服务中，不断总结累积的方法论，这就是麦肯的经验。我们可以拿来借鉴，但是是否符合我们自己的公司，那又另说了。我们不可能随便拿微软这样的软件巨擘的研发流程，去套一个只有5、6人的小项目组。所以，想要建立高效的产品研发流程，我们就必须认清自己公司的真实状况，以及所处的阶段，也就是明白我们自己是谁。

要引入axureRP，我们必须认清公司的哪些情况呢？我想，可以从以下几个方向着手。

1、    公司规模

一个公司的规模大小，决定了这个公司解决问题的方式，以及工作复杂程度。

小公司人员较少，一个人身兼多个职位，承担多种任务，所设的岗位相对较少，流程也比较简单，因此船小好调头。

大公司流程复杂，部门繁多，各个部门之间的关系协调是最大的成本损耗，因此轻易是不能改变自己的工作流程的。

2、    公司人员结构与关系

不同的公司，会有不同的部门结构，也会组织不同的部门关系，人员关系。有的公司，产品经理是向技术总监汇报；有的公司则直接向运营总监汇报；还有的公司则会专门设置产品总监这一职位，与其他部门做平行处理。

这些不同的人员结构与关系，从表面上看，带来的就是不同的汇报流程，而实质上，则是公司权责利益的表现。也说明了公司是由技术主导还是由市场主导。电子商务网站，往往是市场主导的公司，如麦考林、蓝谬，除非规模发展到amazon这样。而百度、google则是很明显的技术主导的公司。很显然，因为主导力不同，人员结构与关系的不同，则影响到流程改进的方式和步骤。也就影响到引进新的，或者优化产品研发流程的步骤与方式。

3、    公司的产品研发流程

要优化流程，必须了解现在的流程。因地制宜的解决问题。由于不同的公司情况不同，因此这一步必须在了解公司人员结构与关系之后。我们明确了不同部门不同人员的职责与职能，自然就能很清楚的梳理产品研发的不同阶段，不同相关人员具体负责什么工作。这样，也就能清楚的知道，从哪里下手，引入axureRP了。

Why，我为什么要引入Axure RP？

第三问是我们为什么要引入AxureRP，没有目的性的事情，不会取得有价值的结果，也不会有成就感，当然也就很难了解我们要做什么。因此，树立目标是很重要的。

引入AxureRP的原因是多种多样的，

l    建立高效的需求确认流程。外部，对客户；内部，对需求部门。

l    简化产品研发流程。

l    标准化产品规格说明书。

l    降低研发的沟通成本与沟通时间。

……

这里我想重点说明一下建立高效的需求确认流程这一点。

初步洽谈客户，一般是公司AE以及销售人员的工作，他们会拿销售材料去与客户洽谈。但是一般的图片与文档并不是特别直观，很多电子商务平台表达自己平台功能强大的方法是罗列很多功能，ERP、CRM等等有用的没用的都拿出来，功能表动不动就几十上百，看得人晕头转向。但是如果用AxureRP，将平台功能做成html，进行形象的展示，就会显得很直观，但是同时耗费的人力物力也很小。而且如果平台功能不断完善的，同样也可以在RP的产品文件上进行功能完善和补充，甚至也可以把不相关的功能板块去掉。

洽谈签订合同后，我们就开始与客户接洽，获取客户需求，设计产品的功能与UI界面，正式走入执行层面。但是如果用传统的方式与华泰电子商务保险公司确定需求，时间周期将会非常之长。为什么会这样呢？

传统的需求确认，我们会首先根据用户的需求设计产品功能，然后将产品功能做成静态产品线框图交给设计师，然后由设计师做成设计图片交给客户确认，其中涉及到相关的人员就达3个以上。因此一旦客户提出修改意见，每次需求修改都要走一遍所有流程。如果一旦不走流程，只是领会意思，难免不会偏离方向；也会有客户日后变更需求，无法与之前所确认需求进行核准的风险。如果遇到比较复杂的产品，一来二去时间就无法预估了。

而用axureRP，则减轻了很多工作。首先，产品设计之初，就不需要设计师参与，因为RP导出的HTML文件，可以让整个流程可视化，因此我们不必将视觉部分跟信息架构和功能部分一起让客户确定，而且我们交付的，还可以是一个可操作的模拟平台，用户能很直观的了解操作功能。

这样，我们明确了目标，就将我们之前的需求确认流程进行了简单的拆分。初期我们商议确定功能后，首先拟定信息架构，让客户确认。然后安排UE设计wireframe文档，并生成可视化的html页面，提供客户操作，并二次确认。最后再安排设计师设计页面，进行视觉部分的确认。

其实，新流程的差异，就在于axureRP的快速建立规格文档，并产出html可视化操作的界面，实现了交互功能单独确认，大大降低了我们的沟通成本与风险。

Where，我要将Axure RP用在什么地方？

第四问是将AxureRP用在什么地方，其实也就是用在什么环节上。AxureRP可以做产品说明文档，也就是PRD文档；也可以做交互文件，也就是HTML交互视觉文件，可以精确到鼠标点击、移过、激活等等页面会做出什么反应；也可以简单的出一个视觉图片，仅仅交代布局结构。不同层次的使用，可以有不同的人来做，也会涉及到沟通的模式会有不同。因此我们只要找到不同的环节，需要做何种应用，而AxureRP是否能够有效，就能解决AxureRP用在什么地方。比如：

l    需求部门提交需求的时候，他们可以用AxureRP画简单的框架图

l    产品经理设计简单的线框图

l    UE设计师进行原型设计工作，设计高保真的产品原型图

l    给领导汇报产品工作

l    内部产品评省与快速功能修改

l    设计师、程序员开发的参考

l    制作产品需求文档PRD

……..

When，我们该何时引入

（我们这里只考虑有足够规模，有完整研发流程，分工细致的公司）

何时引入AxureRP，是对公司成本的一个评估工作后进行的决策。也同样是对之前问题回答之后，我们再考虑的解决方案。

如果现有的产品研发方式已经很优秀，且工作流程很合理，同时公司规模太大，涉及部门太多，我们为何还要导入AxureRP呢？所以在没有任何问题的情况下，我们应该有魄力的否决这个方案，放弃引入AxureRP。

其实引入axureRP的时间对于公司，是一个总体概念，自然是从意识到现有的产品研发方式有问题，而AxureRP能对其进行优化的那一刻，就会开始引入的行动。但是对于大型公司，这种改变是有风险的，所以只有对于具体的项目，或者产品的不同阶段，才会有具体的时间。因此我们从公司项目的具体情况与处于的具体阶段考虑引入的时间。

编号    风险    紧急度  成本    引入时间

1    大       高       大         暂不引入

2    大       高       小         慎重考虑

3    大       低       大         暂不引入

4    大       低       小         慎重考虑

5    小       高       大         暂不引入

6    小       高       小         慎重考虑

7    小       低       大         慢慢渗透

8    小       低       小         可以放手尝试

第1、3、5类项目，由于关系到项目成败，而且非常紧急，建议不要考虑尝试。对于2、4、6类项目，虽然具备一定的风险，但是可以根据风险情况，以及项目时间情况，做有效的尝试；7类项目，由于成本很大，但是风险小，时间周期长，可调整的机会多，因此可以慢慢渗透，视情况调整；而8类项目，则是做尝试的最佳项目，因此不妨马上开始。

How，如何引入？

明确了所有问题后，我们就该问如何执行了。基本上，在一个成形的项目组，或者在一个系统组织的公司内，执行的方式步骤，都很相似：

1、    找到关键角色：产品经理、UE。组织系统培训与学习。

2、    组织产品经理分析现有的研发流程，并依据AxureRP制定新的研发流程。

3、    编制统一的规范模板。

每个公司应该制定统一的规范模板，明确哪一步流程，文档制作由谁来完成，必须达到哪一个标准。（三类标准，简单的图标、带交互的html演示、word的prd文档，某些公司可以用到csv）

4、    组织培训会议，分发文档规格给各执行组成员。

这一步相对简单，组织相关人员学习如何看懂RP产生的规格文档。

5、    各项目组建立统一的RP文档，开始统一编撰产品规格文档，按照新的研发流程严格操作。

附录：可以根据产品销售、演示需求，制定特定的UE角色，专门执行设计初步的演示文件。

二、不同角色的人员，如何使用AxureRP软件（Axure RP可以帮助哪些人）

首先，对于AxureRP软件的掌握，可以分成三个层次。

而设计师、程序员主要是要能够读以上三类交付物，并根据所提供的交付物来完成手头工作；而需求提出部门的人员，不妨达到普通级别的使用就可以，如果不能达到，也不需要做出硬性要求。而销售、AE则更简单，只要知道如何拿这些文档去忽悠客户就好了，能不能做，都无关紧要了。

三、不执着于Axure RP不能实现的业务需求

设计师经常执迷于使用photoshop去完成一个高难度的效果。比如说，不断的向自己提出挑战，强迫自己用photoshop去做金属效果，去画白布上的冰块，去研究各种不同滤镜来做同一个物体形象。因为过分的执着，在工作中有如走火入魔一般，往往忘记了项目的工期，而且一再的向负责人拖延。就好像武侠小说里面痴迷的武痴一样，不达目的誓不罢休。

其实这对钻研，对技术的提高是很有好处的，但是需要学会适可而止，而且要学会目标导向。业余的时间，个人研究，是毫无对错可言的，这叫做钻研。

但是在工作中，要明白，AxureRP设计的产品原型，只是一种设计方式而已。我们利用它的主要目的，是为了沟通，是为了更好、更快的完成手中的工作。而不同的产品原型设计方式，也有自己各自的优点，需要活学活用。因此一个不能实现的效果，只要不影响项目的进度，不影响与执行人员的沟通，在工作中就不要过分的追求。或者，直接用文字，用语言表述，可以更好的提高效率，降低成本，也不妨如此。

而且，网络技术发展日新月异，很多新的技术形式，表现形式出现，并不见得AxureRP就一定可以表现，这是正常的事情。目前AxureRP软件也在不断的完善，但它的完善，也是根据互联网的实际发展情况更新。它是一款产品，是根据市场需求完善的产品，有不能实现的效果，更是非常正常的事情。

最重点的是，作为产品设计人员，交互设计师，重要的工作之一，就是务实的创新。如果你的创新，现在网络常见的交互方式中没有，AxureRP无法实现不是很正常的事情么？所以，万不可因为一个工具，而束缚了你奔放的思维，想象的空间！