Axure - UCD大社区

基于axure的PRD协作

kent.zhu — 2012-02-13 08:50:32

大约1年多前我写了一篇《基于axure的PRD写作思考》，其主旨思想是将文档版本的PRD与线框图及流程图结合起来，统一由axure来输出，降低PM与研发之间的沟通成本及交付物的传递成本。

当时这个文档是基于我做Web端产品设计的经验为蓝本完成的，这1年多来我从Web端完全转到Mobile端，还在继续的使用着这套方法。在不断的实践过程中略有心得，遂更新一篇，详细的讲述一下这套思路。

当然，肯定会有很多人说axure是个很笨重的工具，从来不用；也肯定会有很多人说我们团队有严格的文档规范，你的这套东西不适用…..是的，你们都是对的。这套方法的最大好处就是快速、直接，适用于扁平化的团队。如果你是产品与研发异地的团队，那么，建议还是有详细的文档比较合适。

关于一个PRD文档需要包含的内容及相关的结构，之前《基于axure的PRD写作思考》已经说的比较清楚，不再赘述。我们为什么要写PRD？简单来说就是把我们具体要做一个什么样的东西很详细的描述出来并传递给团队其他成员知晓，最终一起执行。这里面我觉得有3个点特别重要，详细描述、快速传递、一起执行，一份不管是什么形式的PRD最终都必须做到这3点。

从打开axure准备开始进行原型设计开始，我会把文件分成这样几个部分：修改记录、产品结构、（用例及信息架构）、具体页面原型设计。在具体页面的原型设计的时候会再根据这个页面的负责程度看是否要增加一个流程图页面进去。

修改记录

修改记录模块主要是对该原型的迭代历史进行记录。修改记录可以使用文本面板完成，主要记录比如，什么时候修改了什么模块，原因是什么。每次对原型进行修改都必须记录下来，这种内容迭代的记录方式一方面便于自己后续回忆与总结，同时也对项目管理的需要，每次的修改都有据可查。

产品结构

产品设计本身是个从大往小的过程。所谓大就是指的产品整体的结构所谓小则是具体的交互设计页面布局等。我个人非常不建议一开始就进入到具体的页面设计，即使是一个具体的页面设计也建议先把页面模块及相应模块的布局想清楚，然后再开始填充内容；而如果是一个会涉及到很多步骤的设计，如果流程没有事先想清楚画出来，千万不要动手去设计。

按照我个人的习惯，产品结构部分一般会采用结构图的方式调用流程图模式把这个产品的结构关系画清楚。目的有这样几个：搞清楚用户的主要路径，用户会从什么地方进入产品，在里面会经过哪些页面，然后会从什么地方退出；弄清楚产品的层级关系，从移动端的设计上看，产品的层级关系一定要避免太深；梳理一下整个产品的页面，不要有遗漏。

用例及信息架构

用例之前在Web端我通常是直接采用母板来完成的，最近在做Mobile的产品设计，倍感在画原型的时候把用例标识出来的重要性。个人感受，移动端的产品需要比Web端更加深入的考虑模块复用，一来保持整个客户端的统一性，同时复用的模块在一定程度上是可以减少开发工作量的。

就一个Apps而言，这个部分通常会包括一级页面的页面结构、二级页面的页面结构、三级页面的页面结构、….；弹层的样式及出现方式；是否出现menu键、样式及内容（android）等内容。

当进行需求评审的时候也建议按照这个顺序来说，先介绍一下整个产品的结构，向整个团队成员说清楚我们大概要做一个什么样的产品，他包括哪些部分，这些部分的关系是咋样的；其次开始介绍一下这个产品他从一个框架上看是什么样子的，有一个感性的认知；再次开始按用户任务/流程分模块进行介绍，详细的说明其中的策略问题。

具体页面原型设计

具体页面的原型设计分为2种，1种是页面行为比较单一，简单的几个图加一定的文字就可以描述清楚的；一种是页面行为的流程及逻辑性比较强，有比较多的中间状态和用户行为的分支，这种页面我一般的方式是先画出流程图，然后再相应的给出页面原型。

第一种页面比较简单，设计的时候想着点各个平台的设计规范（指南）就可以搞定。同时可以在页面原型的边上把每个模块部分取的元素内容及相应的策略也写出来。

不过，需要有一个提醒，在移动端会存在不少页面的长度是超过1屏的，在原型设计的时候一定要画出一条屏幕高度基线，将第一屏内容和第二屏内容隔开。一方面重要的内容都必须在第一屏有所体现，另一方面注意节减页面高度，同时在原型评审的时候也让其他角色提前有所了解。

另一方面，如果一个模块涉及的交互流程比较复杂，比如一个输入框，在初始状态、开始输入状态、输入完成状态、输入出错状态（超过字数限制）等不同状态下的表现及相应的操作提示都是不一样的，建议分别拆成几个不同的状态完成。这部分之前在Web端的时候可以直接用axure的交互来完成，但是mobile端的屏幕有所限制，再去做这些交互效果，往往也隐藏比较深，不如拆出来画。

一些关于移动端原型设计的其他问题

1、工具永远都是工具，不要让工具限制了你。axure也好，viso也好，OmniGraffle也好，做出来的东西无分好坏。

2、除非脑子里想的比较清楚了，不要冲动性的就开始用axure画原型。在我看来，画原型只是20%的功夫，更多的功夫应该在原型之外，包括对要做什么，为什么要这么做的思考。同时，纸面原型是更好的选择，帮助锊清思路。

3、在原型设计的过程中需要注意沉淀一些规范性的组件出来。每个团队每个项目都应该有一套自己的原型组件，而不应该是直接找别人要来原型组件然后直接导入（当然，系统通用的组件除外）。

4、原型设计的过程中，酷炫的原型交互需要适可而止。

相关话题：Axure 源地址：http://www.ikent.me/blog/4046

用好Axure的协作功能

波希米亚 — 2011-02-17 10:37:04

最近一个项目里，“被迫”开始使用Axure的协作功能，为了保证版本统一和一致的输出。实践的效果不错，在时间短、质量要求高、同时又有多人参与时非常奏效。

为什么说“被迫”，这里当然是个反语，但说实话，做了这么长时间交互设计，参与过大大小小不少项目，能使用到这个功能的情况是屈指可数的。往往都是1个交互设计师对2-3产品经理，来一个需求分一个人跟，出于人员配比的原因，也就很少有机会能出现几个交互设计师攒在一起协作个什么的情况。

这个功能虽不是总能用到，但适时使用一下，能让参与者感到欢乐不少。

创建协作项目

以Axure RP Pro 6 Beta for Mac为例，Win下的版本差不多。

1. 打开或新建一个.rp文件，然后开始创建：选择”Share”中的“Create Shared Project from Current File…”

2. 给你的协作项目起个名字。在“Shared Project Name”中填写项目名，如“b3inside”

3. 创建共享目录。这个目录一般放在SVN上，以便其他人也能访问得到。在“Shared Directory”中指定一个SVN上的目录，用于存放共享文件

4. 指定本地一个目录，来接收和存放共享文件。在“Local Directory”中选择一个本地目录

5. 点击“Finish”完成协作项目的创建。这时会发现文件内容无法操作了……“Check Out”和“Check In”就都会玩了吧。

获取协作项目

1. 在“Share”中“Get and Open Share Project…”，填入SVN目录地址，如“http://svn.b3inside.com/SharedDirectory/”

2. “Next”之后指定一个本地目录用于接收共享的Project文件

3. 完成。之后每次修改时“Check Out”文件，修改好后“Check In”回服务器，以便其他协作方能够访问到更新。

新的一天开始工作时，先利用“Share”里的“Get All Changes from Shared Directory”来获取所有更新。

AXURE之变量控制不同场景的交互演示

jerry — 2011-01-27 21:26:39

该教程适合追求axure功能使用最大化的人，并不是原型设计的目的。追求方便、快速设计交互原型的同学可以无视这篇文章。

实例演示：
演示地址（axure 6 beta生成）

原理：
1. 通过Axure的变量来记录对应的场景
2. 用master 的 onPageLoad 事件根据变量的值来判断dynamic panel对应的state

Ps: 该教程实际上我上一篇变量教程的升级版本，有兴趣的同学可以看这里：Axure 实现网站登录的交互

实例教程：
实例说明：需要设计一个电子商务网站“用户中心”首页的原型。该页面呈现的内容要根据不同用户的情况来显示。比如：用户是vip会员，需要显示vip的标识，用户有一笔需要支付的订单，需要提醒用户有一笔“待支付”订单等等。

1. 分析和整理会产生的的所有场景

1.1 将所有会产生不同场景的条件都罗列出来
当用户进入用户中心首页时：
·如果已经通过实名认证，显示相应的标识
·如果用户已经上传头像，显示头像，否则，则提示用户上传
·如果是2011年的新用户，在公告中显示给新用户营销的信息，否则显示普通的信息
·如果有需要提醒处理的订单，显示提示
·如果是vip用户需要，显示vip的标识

1.2 将这些场景分组，并梳理其中的逻辑关系

Ps:分组可以帮助我分析各种信息展示时的关系，并能够让我们考虑到以后的扩展性

2. 规划Axure的变量和变量值

变量和变量值规划只要能包含所有会出现的场景就可以了。但规划方式的不同将影响影响到axure动作中的逻辑判断的复杂度。

2.1 所有Axure变量，以及变量值对应的关系

2.2 Axure变量组合对应的各种场景

3. 设计“场景控制台”

用户（这里的用户指的是演示这个原型的人，以下同）可以在场景控制台中选择各种场景的组合，来查看对应的交互原型演示
3.1 将可能出现的条件通过Axure的widgets的radio button或者checkbox的方式让用户选择

3.2 同一个选项的radio button（checkbox）设置编组
是否为vip会员为例：

3.2 为每一个radio button（checkbox）命名
是否为vip会员为例：将“是”的单选框取名为“rb_vip_yes” “否”的单选框取名为“rb_vip_no”

3.3 为“进入demo”按钮添加交互事件，将所有用户的选择记录在变量中
是否为vip会员为例：
3.3.1 为按钮“进入demo”添加交互事件

3.3.2 添加判断条件：当选中“是否是vip”的单选框“是”时

图5

3.3.3 选择交互事件，为变量赋值

3.3.4 点击“open set values editor”按钮打开设置变量面板

3.3.5 在打开的新窗口中新建变量，变量名为“vip”：

3.3.6 为变量名“vip” 赋值为“have”（这里的have表示用户选择的条件“是vip用户”）

3.3.7 用同样的办法，将用户的每一种选择都记录在Axure的变量中

提醒：这里值得一提的是，需要把每个else if 改成 if。因为这里需要对每一种情况都判断一次。

3.4 设置动作的最后一步是链接到原型页面：

4. 设计“用户中心”首页的原型

4.1 根据1.2的场景组来设计用户中心首页信息的布局

4.2. 将场景组中的每一个场景封装成一个dynamic panel
以“用户信用、会员体系”场景组为例

每一种显示内容做在一个state中，如上图，

4.3 将场景组封装成的dynamic panel转化为master
以“用户信用、会员体系”场景组为例

4.4. 通过master的OnPageLoad事件，判断dynamic panel应该显示哪个state
该事件的作用是当页面加载master时，通过Axure的变量去判断dynamic panel应该显示哪个state。
以判断“只是vip会员”为例

4.4.1 为ico这个master添加OnPageLoad事件

4.4.2 添加判断条件

4.4.3 设定panel显示哪个state
以判断“只是vip会员”为例

4.4.5 同样的方法，设置完成“用户信用、会员体系”场景组dynamic panel的所有的states

4.4.6 其它场景组也是同样设置

5. 添加变量值监测功能，方便测试
同样是用master的OnPageLoad事件，将变量赋值给文本，这里就不啰嗦。

6. 大功告成:)

附实例源文件：rp文件下载

相关话题：Axure 源地址：http://ued.5173.com/1238.html

Axure之变量的使用

kent.zhu — 2010-10-14 15:18:26

写在最前面：任何工具都容易造成沉迷，Axure也一样；沉迷工具有害健康，过渡钻研Axure不利于职业发展！

本文主要想介绍一下什么是Axure中的变量（Variables），以及变量的使用场景，然后附加一个实例。

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 源地址：http://www.ikent.me/blog/2568

Axure之复用

kent.zhu — 2010-09-20 22:36:11

本文主要记录一下自己在使用axure软件做原型设计中的一些感悟。对于原型的制作而言我们需要的是一个能够快速设计高效传递的软件，对于原型的表现形式而言我们需要的是一个“中保真”原型，可以直观的表述交互与页面布局即可。

作为工具，首要的条件就是高效率。高效率的解决问题，高效率的传达，高效率的记录，等等。Axure之所以被称作“快速原型设计”就在于他能高效率的完成原型设计并高效率的传达。而这一切得益与axure的“复用”思想。在Axure中的复用包括2个部分：组件的复用、模块的复用。

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

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

相关话题：Axure 源地址：http://www.ikent.me/blog/2990

基于Axure的PRD写作思考

kent.zhu — 2010-08-11 08:56:47

本文想说的事情是，那个叫PRD文档的家伙只是个称呼而已，PRD的问题不在于如何写而在于如何被传递与执行。这里简单介绍一下我基于axure rp的一种新的PRD写法。（友情提醒：从来不用axure，认为他笨重无比的人请路过。）

从半只脚迈入产品经理这个大门的那天起我就被2个文档的名称深深的纠缠着，他们是市场需求文档（MRD）、产品需求文档（PRD）。先不论你是什么方向的PM，这2个玩意一定会一直伴随你的Title跟着你。这2个文档在不同的团队中有不同的叫法和写法，我也见过有团队的MRD其实就是PRD，不沾半点商业市场分析的边的，当然，这些不是本文探讨的内容。

长久以来，有个很有趣的现象：“有没有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是最好的方式。

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

AXURE在原型设计中的应用

苇子 — 2010-08-27 11:06:03

前言

什么是原型呢？

产品原型简单的说就是产品设计成形之前的一个简单框架，对网站来讲，就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。
就我个人而言，目前使用频率最多，最高效，交互效果最好的原型工具是axure。今天给大家介绍一些我在工作中使用axure的经验。主要从交互设计中涉及的三个主要步骤进行说明：

一、主要页面原型

在进行主要页面原型设计之前，交互设计师需要：

一份主要的任务流程图（或是用例，一般由产品经理提供）
一份主要功能列表（一般由产品经理提供）
网站信息架构（信息架构在一些公司是需要交互设计师来完成的）
对于前期调研结果的理解

如何做“主要页面原型”

1. 在建立项目的初期就开始定义Master

项目一开始启动，如果可以稍微掌握哪些区块未来将是共享区块，那么就开始建立Master，比如网站的Header / Footer / 导览选单(Navigation)，或者广告版位等等。越早使用，越可以节省其它页面设计的重复工作。

Master的定义

2.可以应用一些Axure RP library

网上有很多资源，如：http://ucdchina.com/post/6285。也可以自己制作适合产品的library。

网上的library资源

3.根据“任务流程图”，“功能列表”将主要的页面原型制作出来。

这时可以包括一些必要的交互动作。一些详细的，比如出错提示等交互可以不用考虑。

主要的页面列表

用途：

主要的页面原型可以用于产品初期的讨论会、测试以及产品介绍会。

应注意几点：

1.不要加入视觉设计的元素。着眼于大局，不要纠结细枝末节

在制作原型的初期请把所有精力都放在流程的优化和布局设计上面吧，不要把时间浪费在视觉设计上，那样绝对是得不偿失。

因为我们的原型方案还没有最终通过，肯定要通过多次迭代才能确定方案，太多的视觉设计就是浪费时间；

再者，如果原型做的十分逼真，在产品讨论会上，视觉的元素会很快抓住大家的眼球，到时就会有领导来质疑你的界面是不是该换成蓝色，按钮是不是再精致一些这样的问题。没有人会专注于你的交互设计了。

2.最好在使用axure工具前，用纸和笔画一些纸面原型，整理一下思路。

3.这个过程应是快速的，迭代的。

二、页面流程图

在确定主要页面之后，我们可以开始细化页面流程了。页面流程图有利于向大家展示自己的想法，也有利于思路的整理。毕竟axure上面的交互点是散的，通过页面流程图，我们可以整理所有的页面上的交互行为，避免遗漏；在向他人展示的时候，也可以一目了然的看出需要的操作步骤是多少。

我倾向于将主要任务列出来，然后画出所有任务的页面流程图。

页面流程图

页面流程图要素

由于axure中没有斜线，在表现流程的时候有些受限。我会在流程图中表现以下几点：

操作步骤的名称和编号

开始和结束

页面的名字
点击的位置

操作说明和箭头

步骤序号

用途

可以与他人沟通流程、整理思路细化流程。

应注意的几点

如果项目时间有限，页面流程可以画在纸上。但还是建议在交互设计保留这一步。
为了减少沟通成本，在绘制页面流程图时，最好有一定的规范和标准。

三、完善原型

页面的主要页面和页面流程确定之后，就可以完善原型了。这时可以叫上产品部的同事一起来完成原型的细节工作。

如何完善原型

1. 按照页面流程中所考虑的交互过程，体现在原型上面。出错，提示等交互细节也应有体现。这时你可能会用到变量、层等高级axure技巧。

点击定时操作弹出层的操作

2. 增加说明

选中某个控件，在右边区域可以为此控件增加说明。

增加描述

增加描述后的前台页面，点击黄色图标显示说明提示层

如果对于说明区域的属性不满意，可以修改属性：

修改属性

不过这种增加描述的方式可能会干扰整个页面，很容易让浏览者以为是一个页面元素。也可以采取一种原始的方法为控件增加说明文字：

文字补充说明

3. 为页面编号

当原型不再需要修改时，我们需要为原型页面编号，这样有利于与视觉设计师、前端沟通。

用途

测试、产品需求文档编写参考、视觉设计参考、前端设计参考等。

应注意的几点

1. 不要过于追求技术表现

原型有些交互效果做出来会很花费时间，我建议不要过于追求技术表现效果，可以用些文字来说明交互效果。Axure软件的初衷是快速的设计原型，如果在一些技术方面交互设计师花费很多时间的话，就有些顾此失彼了。还是把真实的效果交给前端去实现吧。

2. 为了减少沟通成本，在完善原型时，最好有一定的规范和标准。

总结

Axure其实只是一种交互工具而已，交互设计最重要的还是想法，工具只是来帮你表现想法的。不必过于追求技术，不必过于追求视觉表现。我们在把握好整个产品方向的同时，应专注于交互流程、页面内交互、布局结构的创新和优化。

下面给大家介绍一些我工作之中记录下来的axure技巧。

1.快速移动页面

大家有没有感觉到，当电脑配置低，页面元素很多的时候，移动页面是一件极其痛苦的事情，有一个好的方法可以解决这个问题：

在非输入状态下，按住键盘“空格”键，界面上的鼠标“箭头”会变成“手”，这样就可以很轻松的拖动页面了。

2.原地复制组件

在axure中“ctrl+c”“ctrl+v”复制粘贴，会错位复制一个组件。怎么解决这个问题呢：

用快捷键“ctrl+d”可以原地复制一个组件。

3.复制动作Copy Case

如下图可以复制动作，就不用一个个的设置这么麻烦了。

4.直接将素材或控件转换为Dynamic Panel（层）

很实用，特别是在制作过程中发现有些东西还是放在层中展现更好的时候，以前得新建一个层，再把它们Copy进去，现在只需要右键需要转换的素材或控件Convert>>Convert To Dynamic Panel：

5.单选群组（Radio Button Group）

您可以一次选取多个Radio Button，按下鼠标右键，并选择“Edit Radio Button>>Assign Radio Group”来设定 Radio Button 的群组关系。如此一来，当这些Radio Button输出到Prototype 时，就会形成真正的单选用户接口。

6.添加定位锚点

类似于网易车库中的定位功能，点击某一字母，页面就会定位到同一字母所在的区域：

用Axure怎么来实现这个功能呢？

a)首先要用“image map region”在页面上定位一个锚点，并命名为“定位锚点位置”：

b)然后再在点击的地方加上链接

如上图，勾选“scroll to image map region”，点击下面的“image map region”，打开对话框：

如上图，选择“定位锚点位置”这一项，选中“scroll vertically only”垂直滚动，最后点击确定。

设置完成，看看效果吧。

7.下拉框（droplist）的条件（condition）

这里讲关于“条件”的简单例子。通过编辑条件，可以表现一些更高级的交互效果。

这个例子的效果是，用户切换左边的下拉框选项，右边的提示文字会随之变化。当选中的是图书时，文本框中的文字是“请输入图书名称或作者”；当选中音乐时，文本框中的文字是“请输入音乐名称或歌手”：

a)首先在页面上添加以下的组件，并给下拉框添加两个选项“图书”和“音乐”：

b)为组件命名

c)为下拉框添加动作

选择“OnChange”

这时会弹出选择交互行为的对话框，如下图。选择add condition：

在条件选择的对话框中如下图设置，设置完后点击ok：

回到选择交互行为的对话框，这时选择下图这一项：

点击上图文本框中的“Variable and Widget value equal to Value”，打开设置变量的对话框，如下图设置：

d)重复以上操作，为下拉框添加case2，效果如下：

好了，制作完成，大家可以看效果了：

条件和变量这一块的功能还需要多多探索，有些功能还是比较强大的。不过在实际的操作中，大多数的富交互效果是很少用到的。

8.恢复文件Recover files

Recover files功能可以帮你找到几天前的文件版本。

点击file>>Recover file，打开对话框，你可以查看最近的文档了：

选择recover就可以恢复当时的文档。

9.利用Axure封装视觉标准

看到的折折熊的一篇博客。

交互设计师一般都是出线框图为最终产物，但是往往很多产品只需要利用现成的视觉标准就可以画出原型。为了减少流程、降低沟通成本，所以我建议交互设计师在做类似产品的时候能够直接利用现有视觉标准进行原型的搭建，一般很多交互设计师会用Photoshop来实现视觉原型，但是效率和不可交互性还是存在很多问题，所以需要有一套完成的封装来执行视觉标准并且产生可交互的高保真原型。

具体请查看原文章：http://www.jojobox.cn/blog/article.asp?id=133

相关话题：Axure 源地址：http://uedc.163.com/2248.html

Axure Better Defaults Library v2

Loren — 2010-04-08 09:27:55

This is version 2 of the Better Defaults library, expanded to sixty five (or so) interactive and cleanly styled widgets. Use it in place of the standard widget set.

Reasons to use these widgets include:

Consistent and improved styling.
Polished interactivity.
Standardized labeling.
Expanded set of shapes & controls.
Rollover, MouseDown, Selected, and Disabled styles for most controls.
Includes all defaults.

This is for version 5.5 and above. Put the extracted .rplib file in your “My Documents\My Axure RP Libraries\” folder (Windows) or your “Documents\Axure\Libraries” folder (Mac).

Preview | Download

Axure之锚点跳转与Title提示

kent.zhu — 2009-11-25 23:43:00

       最近在做一个原型的时候用到锚点跳转与Title提示功能，同事看到HTML之后问我这个是怎么实现的；昨天又看到一篇文章举了个注册表单中的Title 提示示例，问这个是如何实现的，我才发现原来很多人都忽视了axure中一个很常用的组件——图片/图像映射区域（image map region）。
       组件名称：image map region，图片/图像映射区域
       组件介绍：在web页面中制造一片不可见的区域，相当于图片的热区，从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮，而图像映射区就可以用来说明这个区域的的功能和互动内容。
      可实现功能：链接的Title提示、图片的Alt提示、锚点跳转。类动态面板功能。

       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的汉化版本，汉化版本情况可以看这里。

相关话题：Axure 源地址：http://www.ikent.me/blog/2065

Axure Pro 5.6.0.2089简繁体中文汉化包

平生一笑 — 2009-10-23 17:29:51

勿需多言，有需要的朋友请下载。繁体版只是拿Access做了一下转换，所以在用词上肯定会不太准确，请使用繁体版的朋友反馈。

下载地址：
点击这里>>

使用方法：

解压缩，得到两个文件，Client_SC.dll和Client_TC.dll，分别对应简体中文和繁体中文。
根据你的需求，将Client_SC.dll和Client_TC.dll其中之一改名为Client.dll，然后将其拷贝到Axure的安装目录，覆盖原来的同名文件（覆盖前你自己可以做个备份）。
重新启动Axure，中文界面扑面而来。

本次汉化解决了Windows 7下的兼容问题。

本汉化适用于Axure Pro 5.6.0.2089版，请大家至官方网站下载。

用Dynamic Panel制作Tab分页模型

slan — 2009-06-24 01:22:19

晚上快下班时一个同事问俺怎么用Axure实现Tab分页

我已经估计半年没用Axure了...一时竟想不起来只记得大概用Dynamic Panel可以实现

晚上吃晚饭回来玩了一会又想起这事便开始琢磨起来

最后也的确是用动态面板来实现了Tab的效果（不过不知道是不是还有其它更容易的方法？）

为了自己加深印象故写了这篇简单教程也希望给想学习Axure的人提供一些帮助

Axure作为交互设计里的模型制作工具，它本身的可用性做的挺好的，非常易学！当初自己也就瞎摸索了一两天就差不多都会了。Axure拥有的一些强大的功能，甚至可以实现简单的数据控制和流程判断，针对网站项目，应用Axure可以做出保真度非常高的原型

在实际应用中，不管是对于早期产品可用性测试，或是面向整个团队阐述产品概念，这种原型都能发挥极好的作用

时间不早了，赶着回家睡觉，写到后来越写越草率...希望需要的同学能看的明白...

博客实在让人到了无法接受的地步！为了保障图片不被压缩，我已经把每张图都做的很窄了！居然对高度也有限制！！出离愤怒啊.....

大图地址：1 2 3 4 5 6 7

Axure动态面板的使用

kent.zhu — 2009-05-23 23:19:40

1、什么是Axure的动态面板
按照Axure官方网站的解释：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。
简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。

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里会显示成乱码。

相关话题：Axure 源地址：http://www.ikent.me/blog/1521

一套Axure模板

李小帅 — 2009-05-03 19:27:06

最近有些同学执于钻研，把资源都深陷在了axure的效果实现上，这让人有些担心，在工具和细节上的纠缠其实是违背做原型的根本目的的，其执着精神值得肯定，但应该把它用在最需要的地方，那些重复和不必要的工作，还是让模板来吧。

现在朋友之间共有几套被传来传去的模板，个人觉得还是acleandesign.com提供的“stencil”系列最为实用，里面几乎囊括了所有常用控件和主流的交互样式，只是效果实现手法上有点artificial（这当然是由于软件本身的原因）。比如一个Expand/Collapse的动画，居然是用wait time和move panel配合做了5个基于click的case来实现的（相当于搞了5个关键帧）。看着右边那满屏的case们，我是真的泪奔啊，我十分并且特别坚信作者就是那种能自己拿小刀在光盘上刻一套windows 7的人... ...

不过不管看模板的心情纠不纠结了，我们还是得感谢那些模板的制作者们，是他们替我们干了脏活累活，为我们节省了宝贵时间。在此致敬。- -b

需要的同学请点此下载 Axure_Stencils_2。

相关话题：Axure 源地址：http://lilong4174.blogbus.com/logs/38668651.html

Axure多人协同设计

xw — 2009-04-29 00:44:06

其实从Axure RP Pro 5.0 Alpha版本开始就已经有了”多人协同设计”功能，整个功能和传统的程序上用的协同开发没有任何区别。如果你用过vss或者svn就很容易理解了，不过没有用过也没有关系，下面我就来简单介绍一下。

为什么需要协同设计？
一般情况下一个产品的原型设计部分都是由一个人来完成的，但是如果比较大型的项目的话，就有可能涉及到，几个人来共同设计，但是通常情况下，每个人设计的原型都是独立分开的，譬如一个人设计前台，一个人设计后台，一个人设计消息系统等等。这样就会造成每个人的设计很难有统一的标准去规划，这样就会造成最终设计出来的产品整体性就要差。同时也影响了设计师在设计过程中分享想法的机会。而协同设计就可以避免这个问题，多个设计师可以一起设计原型，彼此互不干扰，因为是在一个文件下共同设计，所以在设计的时候可以更好的按照一个统一的标准去执行，提高设计效率和质量。而且可以更加容易让各个设计师在设计过程公分享设计想法。历史记录可以方便的查阅每一次修改的内容。

Axure 的多人协同设计
Axure的多人协同设计翻译的更准确一些来说应该叫项目分享，虽然没有vss和svn那样有很复杂的权限控制和功能在里面，但是对于原型设计来说功能已经足够了。

建立项目
【File>New Share Project】输入文件名称，选择好远程服务器路径（如果没有服务器的话其实也可以用自己的机器做分享服务），让后创建。这样就会有一个[ProjectName].rpprj 的文件生成。把这个文件的路径分享给其他人就可以直接打开，这样大家就可以共同编辑者一个项目文件了。

编辑项目
和单机文件不同，分享项目文件为了让多人协同设计，所以对文件设定了一些编辑状态。项目中的文件默认都是”Cheched In”既”嵌入”状态，当要编辑的时候必须设定成”Cheched Out”既”嵌出”状态，这样的话当有一个页面文件被一个设计师嵌出以后，其他设计师是不能嵌出的。这样就保证了在当前只有一个人可以编辑这个页面文件，在编辑的过程中，结果是保留到本地的缓存中，只有当再次嵌入以后，编辑的文件才会提交到服务器。同时其他设计师通过【Share>Get Changes from Shared Directry】来获取最近更新的文件。

历史记录
每一个设计师在嵌入文件的时候，在项目文件中有可以记录，可以通过【Share>Browse Shared Project History】来查看每一次的记录。

Axure的多人协同设计功能就介绍到这里，如果想了解更多内容可以到官方网站上查阅更多的资料，下面给出官方链接：

相关话题：Axure 源地址：http://blog.d8in.com/posts/311.html

交互设计文档4：Axure交互实例

季子乌 — 2009-03-11 09:15:00

上下文链接：交互设计文档-1：经验和设计工具、交互设计文档-2：设计工具的选择、交互设计文档-3：Axure线框图实例

上篇用SNS未登录首页的实例介绍了Axure RP Pro制作线框图(Wireframe)的基本操作方法，嗯，那只是个入门。这个工具更多的“好东西”在这篇，以及在大家自己的研究之中。下面，我就把我所用到过的“好东西”先来分享分享，嘿嘿！

Masters（通用模块）
上篇的未登录首页中的底部，在网站中是通用的内容，因此我们可以利用到Masters（通用模块）。在通用模块中新增一个取名为“footer”的Masters。

双击“footer”模块名进行编辑，将Home页中footer的内容剪贴到模块中。为了在页面中的准确定位，我给footer也加了一个底色框。

然后别忘了把“footer”拖到Home页中相应的位置哦。
Menu(菜单)和Quick Link(快捷链接)
RP中制作多级菜单非常方便，只需要用到组件工具中的：

一个Menu(Vertical)：垂直菜单，一个Menu(Horizontal)：水平菜单。
菜单默认的一级Menu Item（菜单选项）有3个，我们可以通过右击某个选项来插入同级菜单(Menu Item)和增减下一级菜单(Submenu)。还可以编辑菜单

Tips：按键盘Tab键只会让当前聚焦点在菜单选项间浮动，不能增加新菜单选项。
新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同；
另外，在菜单中修改任一菜单选项的宽度，整个菜单的宽度都会被修改。也就是说，菜单宽度值是各个一级菜单选项的和，而不是自己事先定好的宽度。

拉长或缩短整个菜单的宽度时，只有最后的一级菜单选项的宽度被改变。可以通过拖动来选择多个菜单选项，在公共栏中对内容显示进行相关操作。

Tips：要先选中上级菜单选项，下级菜单才会显示出来；
下级菜单显示的起始位置是上级菜单的左边线，并且无法超过左边线。通过右击菜单中的“Edit Rollover Style（编辑翻转样式）”项，可以制定鼠标移动到菜单上时的菜单样式变化。

Apply to：
This menu item only ：只应用到对当前菜单选项；
This menu only：只应用到同级菜单；
This menu and all submenus：应用到所有同级菜单和下级菜单；Tips：为菜单添加了Rollover Style之后，菜单选项的左上角会出现一个黑白小框，鼠标移动到小框上，就可以看到Rollover Style的预览效果。
为菜单加上链接，我们选择菜单选项“首页”，再选择Interactions（交互）事件中的“Quick Link”

在Link Properties（链接属性）中选择网站页面地图中的“Home”页。一个链接就添加好了。

当然，也可以添加外部链接（Link to an external url or file）、重新加载当前页（Reload current page）、返回前一页（Back to previous page）。
表单和交互事件-关键字匹配实例
在前一篇介绍了一些表单组件的使用（文本输入框Text Field、下拉菜单Droplist、复选框Checkbox等），下面我们通过“关键字匹配”实例中交互事件，深入一点来认识表单的丰富交互效果。做一个类似google搜索的“查询建议”的关键字匹配实例：

我们简单模拟这个效果，寻找好友中姓“李”的朋友和叫“李查……”的朋友。实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。=
点这里先看看我做好的效果，下面的图片效果：

过程讲解：
用Text Panel、Text Field和Button 先做好搜索内容。然后拖出一个Dynamic Panel（动态面板）：

在Text Field下面拉伸出一个“查询建议”的区域来：

在Label标签栏分别为工作区中的Text Field和Dynamic Panel命名为“keyword”和“matching”双击“matching”，为它加上3个State(状态)：

第一个状态设为空内容，双击第二个状态(matching1)进行编辑，用List Box(选择框)：

在List Box中添加多个姓“李”的好友名字选项。

注意：Allow multiple（允许多选）不要勾选。回到工作区，选择“matching” 动态面板，双击第三个状态(matching2)，继续制作“查询建议”菜单，这次都叫“李查……”。
以下是“matching1”和“matching2”状态的菜单内容。我们分别为两个选择框命名为“matchingList1”和“matchingList2”。
和
Tips：可以看到两个状态的边缘都有一条蓝色虚线，这就是我们在调用动态面板的时候为它预设的区域大小。超过蓝色虚线的部分将在页面中无法被显示出来。
下面开始添加Interactions(交互事件)。为表单添加交互事件的方法，先选中工作区中的表单组件，然后在Interactions面板选择“Add case..”添加事件。

或是用一些预设的交互行为作为条件，为组件添加事件。
OnClick：点击
OnKeyUp：键入
OnFocus：聚焦
OnLostFocus：失去聚焦

为“keyword” 文本输入框OnKeyUp（键入行为）添加事件。键入“李”时，显示“matching” 动态面板中的“matching1” 状态。

勾选Select Actions（选择动作）中的“Set Panel state(s) to State(s)（改变动态面板的状态）”，在“Step 3: Edit the Actions description（第三步：编辑动作描述）”中选中蓝色的Set Panel链接，将动态面板“matching”的默认状态“none”改为“matching1”，即前面设好的姓“李”的“查询建议”状态。

点击右上角的“Edit Condition（编辑条件）”，为Case设键入时的keyword值。
可通过下拉菜单和输入框设置条件：“text on widget（文本组件）”，找到“keyword”文本输入框，equals value “李”（变量值等于“李”）。

以下还需要添加几个Case，这里不详说，大家试着自己做一下：
OnKeyUp行为下：
Case 2：当键入“李查”时，“matching”动态面板状态变为“matching2”
Case 3：当键入值不等于“李”时，“matching”的状态变回为“none”
OnFocus行为下：
Case 1：keyword的值是“李”，“matching”动态面板状态变为“matching1”
Case 2：如果keyword的值是“李查”，则“matching”动态面板状态变为“matching2”
OnLostFocus行为下：
Case 1：“matching”动态面板的状态为“none”

为“matching”动态面板内的两个状态添加交互事件，效果是“当某个查询建议被选中时，keyword文本输入框的文本值变为选中的内容”。
“matchin1”状态里的“matchingList1”选择框，OnChange行为的Case 1：

这样的Case我们需要做5个，因为我们有5个姓李的好友。我们可以通过Copy Case和Paste Case，来复制和粘贴。

但我们需要把equals的值“李安”分别改成其他的名字……

再选择OnChange，复制所有的Case：

到“matchin2”状态里的“matchingList2”选择框

将多余名字（不叫“李查”）的Case删除“Delete Case”

别忘记需要将选择框的名称修改为“matchingList2”

总算好了，发布看看吧（捏汗ing~~）~~点这里看效果；and 点这里下载.rp源文件，源文件包括了前篇中制作的SNS首页和今天讲解的所有内容。
RP Pro5.5多动作-倒计时跳转页面实例
RP 5.5版本之后，支持多个Action（动作）同步，这样我们可以制作出更多的交互效果来了。比如说：倒计时跳转页面。
新建一个页面，添加一个Text Panel加上内容“将在　　秒后跳到首页！”。在文本空格处加上一个Dynamic Panel(动态面板)，在Label中为它取名为“stopwatch”。

再为它加上“s5”到“s1” 5个状态，分别编辑5个状态，在里面加上内容“5、4、3、2、1”5个倒计时秒数。
Tips：建议文本中输入空格时用全角输入，否则它将跟Dreamweaver一样在HTML不能显示全部的空格，这样会产生与设计时的错位。利用工作区下面的Page Interactions（页面交互栏）为页面添加事件。

双击“OnPageLoad”，这时我们看到5.5版本中有一个选项“Advanced Editor(高级编辑器)”

利用这个高级编辑器我们可以为页面同时添加多个动作。选择“Add Action”增加动作，可以不断为页面添加动作。

Wait Time(ms)（等待时间）是我们等下要作为倒计时用的动作，单位是毫秒(ms)，1秒=1000毫秒。我们按步骤为页面事件添加动作：

“stopwatch”秒表跳在“s5”第5秒；
等待1秒；
“stopwatch”跳到s4；
等待1秒；
“stopwatch”跳到s3；
等待1秒；
“stopwatch”跳到s2；
等待1秒；
“stopwatch”跳到s1；
等待1秒；
跳到首页。“Step 2: Select Actions”区域中的动作可以通过右上角的三个小按钮进行“上移、下移、删除”操作。另外，跟前面讲的表单交互一样，“Step 3”动作描述中的参数可以通过蓝色文字链接进行修改。
完成添加事件，多个动作一次完成。点这里看效果吧！

据称Axure是目前Windows系统最好的原型设计工具了，它的强大就在于这些交互事件，远不止我说的这些。欢迎大家继续研究、发现和探讨。
如果你说这些交互操作太复杂了？！嗯，是的，如果你不需要用到交互效果，可以选择其他更轻巧工具（如Mockups 或 Pancil）。但既要做原型又要达到交互效果，又加上你是Win操作系统的话，Axure无疑是当前最好的选择了。而且，Axure也是有汉化包的，大家可以去google之哦~~偶已经习惯于用“有道桌面词典”+ 英文版软件了=。=（这是无奈的习惯~~）
祝你“用餐”愉快~~

终于收尾了，撒花~~~~

相关话题：原型(Prototype) Axure 源地址：http://p.pnq.cc/ue/?p=185

如何用Axure制作Tab页签

锦心 — 2009-02-06 02:16:26

这一段时间，我在进行“09帮助中心升级”项目，负责其中的白板和视觉设计，总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些Axure的基础教程，也因Axure易用性还是挺高的，在制作大部分白板时，倒也得心应手。可…制作某个页面白板，需要使用Tab页签的时候，我碰到了问题－－我不想通过刷新页面来达到效果…于是，我在网上寻求解决方案，找到了一大堆用Axure制作的Tab页签的样例文件和Axure源文件，可对于新手用户来说，理解起来还是有些困难。揣摩一番后，我总算明白了如何制作，现把整个过程整理了一下，希望能对同为新手的朋友有些帮助。（在往下看前，您需对Axure的工作环境有大致的了解，在此，我不对其进行讲解了^_^）

在制作这个教程时，我使用的是Axure RP Pro 5，为了让教程更简单，我们这次制作的Tab只有3个页签，分别为tab 1、tab 2、tab 3。

第1步：

拖动widget面板中的Dynamic Panel控件到线框图工作区中（如图1），蓝色区域的大小由我们要制作的Tab页签的大小决定，超出蓝色区域的元素皆不显示。

图1

第2步：

双击动态面板（即蓝色区域）打开一个动态面板状态管理器（Dynamic Panel State Manager）对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态（如图2）。

图2

为了便于记忆，我们对动态面板状态管理器进行以下编辑（如图3）：

a.在Dynamic Panel Label中输入“Tab页签设计”（可依据你的喜好设置，最好能易识别和记忆）

b.单击“state 1”，呈选中状态，点击右侧“Rename”按钮，重命名为“tab 1”

c.在 Add new state的右侧输入框中输入“tab 2”，点击“Add”按钮。重复操作，添加“tab 3”。

图3

第3步：

双击动态面板状态管理器（Dynamic Panel State Manager）中的“tab 1”，在蓝色虚线框内绘制tab 1的页面，效果如图4。

图4

第4步：

a.选中含有“tab1”文字的上圆角矩形框，双击控件交互面板（Annotations&interactions)中的OnMouseEnter(这个教程是通过鼠标的滑动来切换各个页签，如果想通过鼠标点击进行切换，则双击OnClick),弹出交互场景属性面板（Interaction Case Properties),在面板中的step2中勾选Set Panel state(s) to State(s)，相应的，会在step3中出现“Set Panel state to State”（如图5）。

图5

b.点击Panel state to State，弹出Set Panel state to state面板，勾选“set Tab页签设计state to state”，此时，step2中出现“Set Tab页签设计 state to tab 1”，单击tab 1，选择要显示的状态，这里选择tab 1。

同理，为含有“tab 2”和“tab 3”的上圆角矩形框添加交互行为，只是在b步骤中单击tab1选择显示状态时，分别选择tab 2、tab 3。效果如图6。

图6

第5步：

全选tab1页面，ctrl＋c复制。双击“动态Tab页签设计”动态面板，弹出动态面板状态管理器（Dynamic Panel State Manager）对话框，在panel state中双击tab 2，ctrl＋v粘贴tab1页面。更改tab1上圆角矩形和tab2上圆角矩形的填充色，并更改内容。效果如图7所示。

图7

第6步：

依据第5步的操作，我们完成tab 3的设置。

第7步：

点击主菜单―Generate->Prototype (F5)或工具栏上的Prototype按钮，在打开的 Configure HTML Prototype对话框中，可以对原型进行配置和生成。配置完毕后，点击Generate按钮生成原型。

完毕，bow～

相关话题：Tab页签 Axure 源地址：http://ued.alipay.com/?p=844

产品原型设计软件Axure汇总

我们只谈互联网 — 2008-08-13 23:21:26

最近有朋友询问产品原型设计软件Axure，我把发现的一些好资料分享给大家！

http://wowtree.com/tree.php?aid=220

http://userxper.com/blog/archives/246

http://groups.google.com.tw/group/axure-rp-groups

http://userxper.com/axure/download/download-form1#usermessagea

http://userxper.com/blog/archives/36

http://userxper.com/axure_tutorial

Axure RP能够快速提高网站企划的效率，除了个人在单一网站项目上应用Master的功能，来大量减低重复编辑的工作之外，还可以利用Master的Custom Widget自订对象的功能，来建立网站接口元素的接口库(UI Design Pattern Library)。这里有一篇大陆Axure RP应用于网站界面库的实际案例 - 利用Axure封装视觉标准，非常值得学习。

相关话题：Axure 源地址：http://pagesky.blog.sohu.com/97164649.html

Axure 5.5 Beta!

jonathonwong@yahoo.cn(折折熊) — 2008-12-17 01:40:52

Axure终于更新到 5.5的版本，虽然是beta版，但是新功能还是不错的，你可以去这里下载测试版。根据官方资料说明一下这次的新功能。

1、增加了自定义控件库，并增加控件管理功能。

1-1 多个控件库管理：

1-2 增加了检索功能：

1-3 增加自定义控件库，并进行自定义编辑：

1-4 自定义控件缩略图：

1-5 自定义控件列表：

2、增加了新的交互动作（如将控件置为选择状态、面板空间置前、让控件获取焦点等），并且使用新的高级交互编辑器编辑动画。

3、增强了动态面板管理、图片和图形管理功能，能够为图片和形状添加鼠标选择、按下的样式，以visio形式选择对象。

3-1 动态面板管理：

3-2 允许改变图形大小时锁定四个角的形状不至于变形：

3-3 图片形状等增加了鼠标悬浮、点击、选中等效果的设置：

3-4 增加了群组之后单独编辑某部分的属性（形状、交互方式等）：

3-5 位置和大小的编辑面板的浮层：

（PS：可惜这次更新没有把表格的问题解决，如：合并、拆分等功能。。。-_-b）

相关话题：Axure 源地址：http://www.jojobox.cn/blog/default.asp?id=145

Axure RP 5.5 widget Library: 仿雅虎模板设计工具包

盆地 — 2008-12-19 11:48:53

实在不知道如何翻译widget library较为合适，就widget这个词就一直有多种译法，例如挂件、组件等等，所以还是用原文好了。

Axure官方提供了模仿yahoo提供的模板设计工具包的一系列widget关键，下面是其中两个小类的预览图：

Axure RP的widget library官方下载地址如下，可以下载全部也可以分类下载:

http://www.axure.com/widgetLibraries.aspx

完整的预览可以到点击如下图片到盆地的网络相册查看，也可以到雅虎的官方网站下载PNG图查看，雅虎提供的工具包可供OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG)直接使用。

Yahoo! Design Stencil Kit

(完)

Axure RP Pro 4原创教程：（三）文档管理

hawking — 2008-03-17 22:41:16

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

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

所以，做一个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为子页面：为页面线框图中的特殊部分做流程解释。可以对页面的细节部分进行详尽的解释。

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

相关话题：Axure 源地址：http://www.2tan.net/article.asp?id=11

Axure - UCD大社区

基于axure的PRD协作

用好Axure的协作功能

创建协作项目

获取协作项目

AXURE之变量控制不同场景的交互演示

原理： 1. 通过Axure的变量来记录对应的场景 2. 用master 的 onPageLoad 事件根据变量的值来判断dynamic panel对应的state

1. 分析和整理会产生的的所有场景

2. 规划Axure的变量和变量值

3. 设计“场景控制台”

4. 设计“用户中心”首页的原型

Axure之变量的使用

Axure之复用

基于Axure的PRD写作思考

AXURE在原型设计中的应用

前言

一、主要页面原型

如何做“主要页面原型”

用途：

应注意几点：

二、页面流程图

页面流程图要素

用途

应注意的几点

三、完善原型

如何完善原型

用途

应注意的几点

总结

1.快速移动页面

2.原地复制组件

3.复制动作Copy Case

4.直接将素材或控件转换为Dynamic Panel（层）

5.单选群组（Radio Button Group）

6.添加定位锚点

7.下拉框（droplist）的条件（condition）

8.恢复文件Recover files

9.利用Axure封装视觉标准

Axure Better Defaults Library v2

Axure之锚点跳转与Title提示

Axure Pro 5.6.0.2089简繁体中文汉化包

用Dynamic Panel制作Tab分页模型

Axure动态面板的使用

一套Axure模板

Axure多人协同设计

交互设计文档4：Axure交互实例

如何用Axure制作Tab页签

产品原型设计软件Axure汇总

Axure 5.5 Beta!

Axure RP 5.5 widget Library: 仿雅虎模板设计工具包

Axure RP Pro 4原创教程：（三）文档管理

原理：
1. 通过Axure的变量来记录对应的场景
2. 用master 的 onPageLoad 事件根据变量的值来判断dynamic panel对应的state