1、什么是变量

变量的全称应该是“中间变量”，变量用于在HTML原型中进行点击时的页面之间的传递和存储数据，这样变量能在页面之间保持下去。Axure文件中可最多使用25个变量。变量可以在交互设计和逻辑条件中使用。

简单说就是，在2个页面之间添加一个桥梁，用以延续交互动作。这个东西最直观的理解就是我们在做几何题目的时候通常需要在2个条件之间再取一个中间的条件，最后达到证明这2个条件是一致的，如：a=b，b=c，所以，a=c。

在Axure中可以通过“线框图”（Wireframe）——“管理变量”（Manage Variables），来增加或者管理变量。
Axure会默认一个变量叫做“OnLoadVariable”，必须使用字符和数字做变量名，不能大于25个字符长度，且不能含有空格。

2、变量的使用情景

1）动态显示输入的字符
2）动态统计并显示输入的字符长度
注：这里变量只能实现计算字段的长度，但是不能做加减乘除运算，所以想要实现“还可以输入XX个汉字…”这样的交互目前在Axure上还无法实现。
3）页面之间的锚点跳转，详见之前的这篇
4）下拉列表的联机动态加载
5）Tab页签的变换
注：较常规的动态面板也可以实现该功能
….

简单说，变量的使用一般程序：添加变量，修改变量值，判断变量值，加载对应内容。

特别说明：
1）变量的使用过程中需要用到每个组件的标签名称，所以，必须要先给需要用到的组件添加标签，不然就全部显示“unlabeled”。
2）在“设置变量和组件的变化值”这个交互动作的时候，一般的格式是：变量的值“a”等于组件值的长度“b”；组件中的文本“C”等于值，然后后面有个编辑文本。
点击进去之后可以编辑的是动态显示的具体内容，你可以输入的是一些修饰内容，无关紧要，最主要的是，要记得插入变量“a”，这样整个交互才能起作用。

3、实例
之前设想过的一个微博输入框为例，点击这里查看。

P.S：
一个容易忽略的地方：Axure在处理多个交互动作的时候，实际上你是可以手动设置他们的发生顺序的。在“交互属性”弹窗的右上角有个“高级编辑器”，点击里面的箭头来对交互动作的发生进行排序。这个主要应用在如：弹窗XX秒后自动消失等交互上。

先温习一下在axure中什么是组件什么是模块，高手请直接跳过：

组件（控件）是用于设计线框图的用户界面元素。在组件（控件）面板中包含有常用的控件库，如按钮、图片、文本框等。从组件面板中拖动一个控件到线框图区域中，就可以添加一个组件。组件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。组件面板工具栏中可以加载已有组件库、创建新组件库、编辑当前组件库、或更新组件库，也可以对组件进行搜索。

模块（Maste）是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块，在所有引用这个模块的页面中的模块也会相应跟着同步更新。 模块的概念犹如PowerPoint 中母版、Dreamveawer中模板的概念，熟练掌握模块可以大大提高原型设计的效率，并使原型易于管理维护。

组件的复用是axure默认传达的第一个复用原则，axure内置有基本的Web组件和流程图组件。当然，axure还提供了更高级的组件复用——自定义组件库。在Web设计中，为了保持一致性每个系统模块都会有大量的重复设计出现，如按钮样式、链接样式、表单样式、Tab页签样式、翻页样式、图片大小、输入框交互等等等等

Axure的自定义组件可以使用有心人制作的，比如官方提供的基于雅虎风格的Web组件套装和mobile原型设计组件(下载地址)、比如有个牛逼的老外制作的2套Web原型（下载地址）；也可以自己在项目过程中自我总结创建。

在控件面板中点击下拉菜单的“Create library”（创建组件）选项，这时会弹出一个保存对话框让对这个.rplib文件进行命名和保存，Axure会立刻启动另一个执行程序并打开这个刚建好的 .rplib文件。

在新的Axure程序界面中，原本站点地图面板的位置会被组件库面板(Widget Library Pane)所取代。你可以像处理页面一样对组件进行新增、删除、排序。

Axure启动时，如果已经把创建好的自定义组件库(.rplib文件)放在Windows文件夹的―我的文件> My Axure RP Librarie目录中，则该组件库会被自动加载到控件面板中。另外，你也可以手动选择你所指定的 .rplib 文件进行组件库加载。新建立的自定义组件库的操作方式就如同其它的默认组件库一样，以拖放(Drag&Drop)的方式将组件放到画布上进行画面的绘制。

虽然自定义组件和模块都基于组件的组合，但组件与模块的区别在于，组件是针对Axure存在的，在所有基于axure完成的页面中都可以使用该组件；而模块是基于某一具体的axure页面存在的，仅在该axure文件下可以使用，如果打开新的axure文件则该模块不存在了。模块针对某一具体项目以单个axure文件为单位组合复用；组件针对所有axure文件为单位组合复用。

模块的复用常用于在某个产品模块中会重复出现的情况下，如展示商品的列表、未登录的弹层、页面头部、导航、页面底部等等。共同的特点就是，在该产品模块下都需要且表现形式都一样。也就意味着如果要修改就得全部修改，如果出现就要不断的“CTRL+C”在“CTRL+V”，由于这些组件并不是单一的，如果是复制的话很可能复制不全，即使你使用了组合。模块则可以很好的解决这些麻烦。

模块有2种制作方式：在页面中框选住需要转发的组件，右键选择“转化成模块”；在左侧导航部分选择“Add Master”（添加模块）进行模块制作。在实际操作中个人觉得第一种方式应用更多，因为肯定是先在页面中进行了全局设计才知道这些组件是可以转化成模块的，有一个全局的考虑先。

模块有以下3种行为：

• 普通行为（Normal）：模块可以被移动与放置在线框图中的任何地方，对模块所做的修改会在所有模块实例中同时更新。

• 背景行为（Place in Background）：模块应用在线框图中时，会处于线框图的最底层并被锁定。模块实例中所包含控件的位置与在模块中的位置相同，常用于作为模板、布局、底板。

• 自定义控件行为（Custom Widget）： 模块应用在线框图中时，模块实例中的控件与原模块失去关联，模块实例中的控件可以像一般控件一样可以进行编辑，就好像只是进行了复制和粘帖操作。常用于创建具有自定义属性、注释和交互的自定义控件库，例如：具有白色文字的蓝色按钮。

使用一个工具并把它用透，比使用多个工具但每个工具都会使用一点要高效的多。别去追求炫目，追求效率，这是俺在使用工具上的一点小感悟，记录如此。

长久以来，有个很有趣的现象：“有没有PRD模板，PRD该咋写”这个问题已经成为新手入门经典必问题目之一；如果1年以后这个家伙还在这行里混，他一定会抱怨，娘滴，我们的QA压根就不看我的文档、我们的交互（如果有这个职位的话）还是会问我一些我写的很明白的问题、我们的测试拿着文档问我该咋测试、….

Web页面之间的关系是网状的，而Word文档只能树状的表述，这无疑是矛盾的；PRD文档无法做到实时更新发布，我回顾了我第一年写的PRD文档，很多下面的修改栏都是空的，惭愧之至….；所谓一图胜千言，万言刚够文档标准，每个PRD都是臭长臭长的，这样的东西别说交互设计师了，很多PM自己写完了都不想看。所以，我武断的认为，撰写某些PRD文档实在是一个既耽误时间又费劲且不敏捷的事情（很多PRD都是一夜情，写完了就不会修改更不会有人乐意看100P以上的文档），是在让产品经理实现慢性自杀！

个人认为，一个PRD文档需要包含以下的内容：

1、概述
1.1、名词说明：文档中涉及到的名词
1.2、产品概述及目标
1.3、产品风险预估
1.4、产品开发进度：产品开发阶段及责任人与时间节点
2、使用者需求
2.1、使用者需求描述：定义用户是谁
2.2、管理员需求描述：后台管理部分（很多人会忽略这个部分）
2.3、任务流程图：从业务逻辑流程到产品逻辑流程转化
3、功能需求
3.1、功能总览
3.2功能需求分解：界面分解及交互说明和用例
4、非功能需求：与该产品相关联的辅助产品等
5、上下线需求：产品的生命周期
6、运营计划：产品的上线后的反馈与改进

整个文档中，最大的部分其实是对功能需求的分解，但是最核心的部分是使用者需求与功能需求部分。使用Axure后，我发现Axure可以很好的承载我平常写的这个产品需求文档的全部内容，最主要的问题是，Axure是可以网状的展示的。下面是举个例子：

在Axure的站点导航中，默认的Home页面承担了PRD文档的第一部分内容；而使用者需求描述及任务流程图也可以由Axure自带的流程图功能完成；任务流页面的分解本来就是Axure中完成的；最后的非产品功能部分也可以由axure完成（文本块组件）

同时，Axure支持多种格式的输出，一般情况下我是发送给团队Html文件包，也可以是.chm格式的文件（团队协作目前还没有尝试）。该文件包打开后，左侧是整个系统的导航菜单，右侧是相应的说明。最主要在于，原型中的页面是可以相互跳转的（得益与axure的强大交互功能），同时页面有注释功能。所以，整个产品需求文档真正实现了基于产品的模拟，网状的传播，而不是Word式的树状阅读。

1）见过不少新手使用Axure生成的原型有页面是空白的，我问为什么，他说这个页面不知道放什么，但是又不能不命名，否则逻辑上有些不通。实际上，这个空白页面就可以用来放这个页面的流程图及整体的说明。

2）不建议做太复杂的Axure动作，比如使用多个层、动态面板等。因为在工程师等的眼里原型图是不可以点击的（基于viso等的惯性思维），所以，为了避免花很长时间去实现一个很炫的axure交互而最后被埋没，建议把任务分解来画。比如一个输入框，需要画：默认状态、获得焦点状态、输入字符判定状态、失去焦点状态等，按照逻辑分步来展示。（在我特别蛋疼的时候我会先分步展示，然后搞个比较炫的交互放在上面自己玩或者用于演示）

3）在每个页面的下方或者侧边（由页面大小来定）要放一个功能详解的文本块来对本页面的功能进行详细说明。也可以直接使用Axure自带的注释功能（组件注释、页面注释）为什么不推荐用Axure的组件注释功能？因为这个功能在生成的原型里是被隐藏的，有被人无视的可能。

4）使用axure的组件库功能（可自制）和模块功能既可以保证设计的统一性（设计规范），又可以提高原型制作的效率。图中我采用了注册模块。

下面，QA时间（这个QA是问答，文中的QA是技术，呃，注意区分）

Q：为什么我看到有的书上说要写N多文档，带RD的有：BRD、MRD、PRD、….
A：是的，有这样的定义。BRD（商业需求文档）、MRD（市场需求文档）、PRD（产品需求文档）。每个公司的风格不一样，我个人倾向于把BRD与MRD整合，PRD单独做。但是MRD与PRD中会有内容重合，就是会同时提到用户是谁？为什么要做？产品目标是什么？等几个问题

Q：Axure有个功能是可以导成Word格式，把做的原型导入后是归类好的，包含了用例文档，为什么不这么玩呢？
A:没人说不可以这么玩。还是那句话，个人习惯。

Q：除了页面原型之外你塞了这么多东西到Axure里，会不会导致源文件以及生成的文件体积巨大？
A：实际上塞进去的东西都是文本，使用axure的文本组件完成的，体积并不会大。同时，请不要在用axure做原型的时候使用过多的图片，尽量是用组件和模块完成。我目前位置做的最大的一个原型是4.7M，这是一个完整的系统原型。

Q：按照你的写法Axure好像是万能的了？
A：没有不好用的工具，只有用的不顺手的人。人是活的，工具是死的，且Axure目前在mac平台下功能并非很强大，也有很多人觉得axure很笨重，更加喜欢轻量级的原型功能。不过，这些都不是核心问题，核心问题是要让你的团队能够以最高的效率进行合作。使用Axure的人不必鄙视Viso，用excel的人也不必羡慕OmniGraffle，拿Word的人也不必留恋firework。

既然提到了MRD也顺便说下我写这个文档的习惯。一般情况下这个文档是给老板看的，主要是对市场的分析、同类产品的竞品分析、我们产品的盈利预测等等。所以，一般由PPT来完成。你的文档越长老板越反感，你的文档文字越多老板越没兴趣，所以，PPT是最好的方式。

文档这个东西跟流程有类似的地方，大公司会相当重视这个事情，因为要规避风险。流程与文档的核心点在于如何高效传递如何快速执行而不是他如何写以什么形式写。相对于小团队而言，流程之殇大可避免。当然，如果大公司能够以小团队的心态去做大产品的话，定会事半功倍！我更相信小团队大产品的力量，而不是大团队大产品的说法。

1、Title提示和Alt提示功能实现
链接的Title提示和图片的Alt提示功能相对比较简单，其实只要简单说一下大家就都能明白了，只是平时没有注意罢了。
如上图所示，选择图像映射区域组件，覆盖在要映射的图像上方，右键点击“编辑工具提示”，输入Title的文本内容，OK。
其中，是否给该控件加注标签为可选项，如果不加注标签，则系统默认名称为“unlabeled”，不过，如果你需要使用锚点跳转功能的话则需要加注标签，中英文皆可。因为你要指定锚点的跳转位置，这个位置的判定就是以该标签的名称为准的。
PS：ALt和Title提示这个功能也可以用动态面板来实现，不过比较笨重，需要设置mouse on和mouse out两个交互动作。
2、同一页面内锚点跳转

如上图所示，先在要加入锚点的地方添加一个图像映射区域（操作方法如例1），这个图像映射区域必须要加注标签；在要实现跳转的链接上加到交互动作，动作选 择：滚动到图片映射区域；然后选择你要跳到的锚点位置，在下拉菜单中选择你刚才加注的那个标签名称；可以考虑选择滚动的方式；OK。
其中，必须要对图像映射区域加注标签；页面的长度一定要足够锚点跳转，如果页面不够长他跳了你也看不到。
3、不同页面之间的锚点跳转

如上图所示，这里包含了2个方面的交互：A页面的组件a的交互、B页面（跳转到的页面）的页面交互。这个过程中我们需要借助一个中间变量（新增的变量1）。
点击线框图，管理变量，新增一个变量（例如1）——给锚点链接添加交互属性，也就是在离开页面A的时候需要先给变量赋值——在跳转到的页面（B）中添加页面交互（在OnPageLoad中添加）：滚动到图片映射区域【注意，不是组件交互而是页面交互！】，OK。
这个过程的流程是这样的：点击链接a的时候也带入了一个变量1，当a动作完成后，如果在B页面还存在满足变量1的交互动作则继续执行，滚动到图像映射区域。
4、不同页面之间的切换层状态锚点跳转
这个需求是这样的，点击页面A中的链接a跳转到页面B中Tab模块T中的第二个tab 2中。
实际实现原理还是一样的，只不过是在对页面B的页面交互条件中再添加一个“设置动态面板状态跳转”就可以了，此时的条件变成同时满足：变量值为1 and 设置动态面板状态转换到T的tab2 and 滚动到图片映射区域。

PS：道理很简单所以就木有给出原型实例。我的axure使用的是5.6的汉化版本，汉化版本情况可以看这里。

2、Axure的动态面板可以用来做什么
1）tab式页签的切换效果：Axure的官方给出的实例就是这个，AlipayUED的同学 按照官方给出的做法制作了一个3tab的原型，不愿看英文说明的同学可以直接参照这篇博客。
2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。
3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。
4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。
5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。
….and so on…

3、如何使用Axure的动态面板
1）动态面板属于Axure的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。不用担心，即使在添加完状态之后它的位置也是可以随时改变的。
2）在动态面板上点击右键——编辑动态面板——管理动态面板状态。在弹出的窗口里输入动态面板的标签名称（默认是Unlabeled）、添加新的状态。当然，也可以在界面的右下角找到“动态面板管理”模块来对动态面板进行操作。
友情提示：
a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。
b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。
c）为了不影响其他交互的制作，可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏或显示之间切换。或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。

3）双击添加完的动态面板状态（State1、2、…），会在Axure的工作区打开一个新标签。现在，把这个新标签当作是一个全新的页面来设计就OK了，不过，记住不要超过蓝色虚线外框。
4）给动态面板添加交互。Axure5.5中常用在动态面板上的交互行为包括：Set Panel state to State（设置动态面板的状态切换）、Show Panel（显示动态面板）、Hide Panel（隐藏动态面板）、Toggle Visibility for Panel（切换动态面板可见属性）、Move Panel（移动动态面板到一个设定的位置（x*y））、Bring Panel to Front（将动态面板置于最前）。交互行为的添加与添加其他组件的交互一样，没有什么好解释和介绍的。
5）生成HTML发布到web上、生成CHM分发给其他团队成员、建立Axure协作共享、….
友情提示：
a）使用Axure汉化版本 会让你使用更轻松，虽然汉化的还不是非常完全，但是对于英文不好的同学来说已经是莫大的帮助了，向汉化的平生一笑 同学致敬！
b）如果看Axure官方的使用说明很费劲，可以参考目前陈良泳同学翻译的快速原型设计 ，翻译质量很不错！
c）从Axure5开始，可以创建自己的组建库和导入别人做好的组建库了，官方提供了一套雅虎的组件 ，个人觉得已经完全够用了。
d）模块和组件是2个完全不同的概念，模块的后缀是.rp而组件的后缀是.rplib。模块和组件之间是可以相互转化的，你可以利用组件去创建一些自己常用的模块如网站头部、底部等；你也可以把模块里的内容分拆成组件单个使用。
e）在生成chm格式的时候页面名称不要使用中文，中文名称的页面在chm里会显示成乱码。