Axure学习笔记

软件中有不完善的地方，要靠自己的经验来规避和克服，还算好用。

熟练了Axure，对软件设计文档的编写大有帮助，因为可以有一些界面图出来。

画界面图时多用Axure，画流程图时多用Visio，为的是熟练Axure，并且Axure画界面要简便许多，节约时间。

 

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

masters的英文直译是主人或雇主，但是我认为这里可以叫做模板，或者复用模块。masters的文件，是页面中重复的模块，由于在不同页面中这些模块是一样的，所以拿出来作为一个模块编辑，然后在不同页面中进行调用。

这 个功能类似于网页程序开发中的程序复用，不同页面中调用同一段程序，一般把这段程序单独做成一段页面程序，然后用include命令进行调用。 master的档就相当于这段被调用的页面程序。dreamweaver也有类似的功能，就是template，可以参照理解。

一、功能条
master的功能条功能基本和sitemap一模一样，功能也基本一样。唯一不同的是master可以创建档夹，可以通过档夹收纳不同的档，因此唯一不同的就是第一个功能按钮，功能作用是增加一个档夹。

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、raido 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。

（六）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等一连串的 英文单词脑袋发晕，那么我告诉你，你完全不用在意这些单词和选项的意义，因为也许它们根本就不适合你，而你可以自定义一套自己的说明选项。

 

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

 

 

 

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

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

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

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

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

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

交互条件：是达成我们目标行为的前提条件。如果目标行为只有一个，对触发没有任何条件限制，交互条件则可以被忽略。
    再以此文字链接为例，如果对查看文章列表没有任何限制，则不设置交互条件，用户点击文字链，直接发生交互行为。如果对查看文章列表有权限限制，只允许作者查看，则触发交互行为的条件就是“以文章作者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做出来，肯定是不可能完全达到的，这也才是我们创造力的价值体现。而那些可以达到的效果，也没有 必要我们费劲心机的让它在策划阶段就实现。作为交互设计师，更多应该关注功能是否满足用户需求，提高用户使用效率；作为产品经理应该更多的关注产品的生命 线、竞争力。

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

 

 

 

版本二

三. Axure RP基本操作
(1) 认识Axure RP操作接口

下图是Axure RP 环境与接口中各区块的简单描述。 放大图

 

主菜单/工具列： 在主菜单与工具列中，可以执行常用的动作指令，例如：开启与储存档案、输出Prototype或Spec档。

Sitemap 窗格： Sitemap窗格将您所设计的网页以树状结构的方式呈现，您可以在这里新增、移除、重新命名和组织设计的网页。

Widgets窗格： 包含一系列常用的使用者接口对象，例如：按钮、图片、Text Panel与矩形，您可以直接透过拖拉的方式来设计网页。

Masters窗格：在这里您可以新增、移除、重新命名和组织设计好的Master。Master是一种可以容纳多项接口元素的集合样板(Temlate)，您可以将常用的共享区块设计成Master，未来在设计Wireframe时重复使用Master，来提高规划的效率。

Wireframe窗格： 您可以在这个窗格中设计网页信息元素，编排内容，设计接口，设计交互特性等等。未来可以将这些设计好的页面，输出成Prototype或Spec档。

交互设计 (Interaction) 窗格：交互的范围很广，从最基本的超级链接、pop-ups，一直到动态显示和隐藏widget。您可以在这个窗格中定义Widget的交互。

物件批注(Annotation) 窗格： 您可以为Widget加上批注来指定功能，您可以在这个窗格中增加和自订Widget的批注。

网页说明及交互(Pages Notes & Interactions)窗格：您可以在这个窗格中加入网页层级的说明与交互效果到设计中。

示意图及批注
1.定义Sitemap
企划一个网站或Web AP，在动手开始绘制网站页面的示意图(Wireframe)或流程图之前，您应该事先思考网站架构，并决定信息内容与层级。当您心中已经有了明确的网站架构，接下来就可以利用Sitemap窗格来定义您所设计的网站页面。

 Sitemap窗格是用来管理设计中网页的工具，您可以在Sitemap 窗格中可以新增、删除和调整网页层级。

 

新增/删除网页：

想要新增网页的话，请点选Sitemap 工具列上的【Add Child Page】钮。 

在网页上按鼠标右键，然后选择「Rename Page」或慢慢的在网页上连续按鼠标左键两下可编辑网页名称。 

想要删除网页的话，请点选想要删除的网页，然后按下Sitemap 工具列上的【Delete Page】钮，或是在网页上按下鼠标右键，然后选择「Delete Page」。

调整网页层级： 

您可以将网页从Sitemap 中拖曳到目标母网页中来移动网页位置，您也可以使用Sitemap 工具列上的箭头按钮来上下移动网页，或改变网页的阶层。 

开启网页：

在 Sitemap中的任一网页上连续按鼠标左键两下，网页会在Wireframe 窗格中开启。

--------------------------------------------------------------------------------

2. 以接口对象(Widgets)绘制示意图(Wireframe)

 

接口对象(Widget)是用来设计Wireframe的使用者接口元素， 您可以在Widgets 窗格中找到一些常用的Wireframe Widget，例如：Button、Image和 Text Panel。 

Axure RP 各种Widgets呈现效果，请参考Widgets效果总览

在Wireframe中新增接口对象(Widget):

想在Wireframe中新增对象的话，只要从Widgets 窗格中将想要新增的对象 拖曳(drag&drop)到Wireframe窗格上就可以了。

您也可以在Wireframe中利用复制(Ctrl+C)与贴上(Ctrl+V)的方式来新增对象。

提醒: 熟悉PowerPoint操作方式的使用者刚开始可能不太习惯，因为Axure RP的操作方式类似Visio选择图形的作法，是利用拖放(Drag & Drop)的方式，跟PowerPoint是不一样的。

移动对象(Widget)

在Wireframe中新增对象之后，您可以拖放Widget来移动的位置，拖曳Widget四周的控制点来改变Widget的大小。您也可以一次选取多个对象，一次改变所有被选取的对象的位置和大小。

除此之外，您还可以在选取的Widget上按下鼠标右键，使用快捷菜单(context menu)来设定Widgets的群组(Grouping)、顺序(Order)、对齐(Align)、分散(Distribute)与锁定(Lock)；您也可以利用Object工具列来做这些设定，请先利用菜单「View->Toolbars->Object」将Object工具列叫出。

编辑对象(Widget)的样式与属性

编辑Widget的样式与属性有下列3种方式：a. 连续按鼠标左键两下：在Widget上连续按鼠标左键两下可以让您变更一些基本的Widget属性，例如：在Image Widget上连续按鼠标左键两下可以让您汇入图片；在Droplist或List Box Widget上连续按鼠标左键两下可以让您编辑菜单项目。 

b. 工具列： 

使用工具列可编辑Widget 的样式，例如：外框色彩、填满色彩、字型和字体大小。 

c. 快捷菜单(Context Menu)： 

在Widget上按下鼠标右键会出现快捷菜单，您可以透过菜单中的选项来设定Widget的特殊属性，这些选项也会因Widget的类型而有所不同。

--------------------------------------------------------------------------------

3. 撰写对象批注(Annotation )
您可以在Wireframe中为任何对象(Widget)加上批注。 

新增批注

想要帮对象加上批注的话，请先选择Wireframe中的对象，如图箭头1所示，被选取的对象呈现绿色框线状态，然后在对象批注窗格(Annotations & Interactions Pane)的 Specification字段(箭头2)，输入对这个对象的解释内容，您也可以在窗格最上方的「Label」字段(箭头3)输入名称来帮对象命名。 

自定字段

您可以透过菜单「Wireframe -> Customize Annotation Fields and Views」，或是按一下Annotations & Interactions的标头来自订批注字段。

脚注(Footnote)

一旦在Widget上加上后，Widget 右上方会多一个黄色小方块，里面有一个脚注号码(Footnote number)，您可以在Widget上按下鼠标右键，使用Footnotes次菜单来增加或减少这个编号数字。

--------------------------------------------------------------------------------

4. 网页说明(Page Notes)
网页说明可以用来收集网页层级的描述或需求。

撰写网页说明(Page Notes)

网页说明会被保留在Wireframe下方的窗格内。

 

管理网页说明类别

Axure RP本身预设的网页说明类别是default，您可以透过新增额外的说明类别，轻易的区分出您自己的说明与要输出到Prototype与规格中的说明。

 

比如您可以新增Test Case，操作说明，SD等不同类别的网页说明。而当您要输出规格文件时，可以个别指定哪些种类的网页说明要输出到档，如此一来，您就可以输出专属于Test Case, 操作说明或SD文件了。

想要新增/编辑网页说明类别的话，请点选菜单「Wireframe->Manage Page Notes」，或按一下「Page Notes – Default」右方的向下箭头并选择「Manage Page Notes」，此时会出现Page Notes 对话框，利用这个对话框，您可以新增、移除、更名或重新排列说明字段。

想要切换说明类别的话，请按一下「Page Notes – Default」右方的向下箭头，来选择说明类别。 

--------------------------------------------------------------------------------

5. 技巧(Quick Tips)
技巧一. 超快速挪动画面：

当您设计的网页画面变大时，为了选取不同位置的对象，您必须经常使用垂直与水平的滚动条，这会使得选取对象的动作变慢。请试试这招，鼠标光标focus在Wireframe，按住键盘的空格键，这么一来就会切换成Hand tool，此时鼠标光标会切换成手状，您可以用来抓着画面任意滑动，而且不会打乱任何对象的位置，轻松愉快。

技巧二. 穿透对象(Widget)选取下层的对象： 

以鼠标右键慢慢的按一下对象，当您放开鼠标右键时，可以穿透上层对象，选取到位于下层的对象 。

技巧三. 引用Microsoft Office或其它软件的对象：

您可以利用复制/贴上(Coyp/Paste)的功能，将其它应用程序中，例如：PowerPoint, Excel, Visio, Photoshop 与Illustrator的物件，并贴到Axure RP中。一般来说，这些贴上的对象会变成Wireframe中的图片对象。反之亦然，您也可以复制Axure RP中的对象或画面，贴到其它应用程序。

技巧四. 单选群组(收音机按钮群组 Radio Button Group)： 

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

初级交互设计
1. 交互(Interaction)
Interactions窗格是用来定义Widget在Wireframe中的交互表现方式，交互表现的方式包含简单的连结到Rich Internet Application (RIA)的复杂行为，而且这些交互表现都可以在Prototype中执行。

 

　
触发事件(Event)、假设条件(Case)、动作型态(Action)

在Axure RP中的交互设计是由触发事件(Event)、假设条件(Case)与动作型态(Action)所组成。

当使用者对网页进行某些人机接口的操作时，就会对网页触发一个事件(Event)。

每一个触发事件都可以有一或多个假设条件(Case)，例如，一个按钮的OnClick 触发事件可以有两个假设条件：其中一个导引至某个网页，另一个则导引至另一个网页 。

而每一个假设条件(Case)又可以执行一或多个动作型态(Action)，举例来说：「Open Link in Current Window」的动作就是一个基本连结。

触发事件(Event)

目前Axure RP 5支持的人机接口触发事件，及相对应的触发事件(Event)名称如下：

以鼠标点击 - OnClick 
鼠标的指针移动到对象之上 - OnMouseEnter 
鼠标的指针移动出对象之外 - OnMouseOut 
鼠标的指针进入文字输入状态 - OnFocus 
鼠标的指针离开文字输入状态 - OnLostFocus 
敲键盘 - OnKeyUp 
浏览器载入网页 - OnPageLoad 
大多数的对象，只具备最常见的三种触发事件(Event) - OnClick、OnMouseEnter 与OnMouseOut。
某些特定的Widget的可触发事件有些不同：

Button对象只有OnClick。 
Radio Button，CheckBox 这2种对象则具有OnFocus / OnLostFocus 触发事件。 
Text Field，Text Area这2种对象则具备 OnKeyUp / OnFocus / OnLostFocus 触发事件。 
Droplist，List Box这2种对象则具备 OnChange / OnFocus / OnLostFocus 触发事件。 
网页载入浏览器时，则有 OnPageLoad触发事件。(请参考5. 网页层级的交互: OnPageLoad) 
您不需要硬背上述的对象及对应的Event，在Axure RP的操作接口上，您只要点选对象，就可以查看Interaction窗格所显示的对应Event。

--------------------------------------------------------------------------------

2. 定义基本连结
下列步骤说明如何新增一个基本连结到Button Widget。

加入基本连结最快的方法就是按一下Interactions窗格中的「Quick Link」，弹出Sitemap窗格的网页清单后，你可以为选定的对象(Widget)指定连结到哪一个网页。 

如果不是透过Quick Link的话，那么请按照下列步骤(对照下图) 进行交互的设定。

步骤一：指定对象

于画布中放置一个Button Widget并选取它。

步骤二：新增假设条件(Add Case)

在 Interactions窗格中选择OnClick ，并点选「Add Case」 (或在OnClick上连续按鼠标左键两下)以增加一个假设条件(Case)到按钮的OnClick触发事件，这时会出现「Interaction Case Properties」对话窗，您可以在此处选择想要执行的动作。

步骤三：选择动作型态(Select Action)

在Interaction Case Properties对话窗的Step 2. Select Actions，勾选「Open Link in Current Window」这个动作型态。 

步骤四：编辑实际动作(Edit Action Description)

按一下Interaction Case Properties对话窗的下方，step 3 的”Link” ，并选择实际执行动作时要开启的网页。

 

 

--------------------------------------------------------------------------------

3. 动作型态(Action)及实际动作(Action Description)

 

除了基本连结之外，Axure RP还提供了许多的动作型态，这些动作都可以在任何触发事件的假设条件中被执行。

你可以同时指定一种/多种动作型态(Action)之后，接着定义实际动作(Action Description)，这样子才能完成展现在Prototype上的一个/多个实际动作。

以下是 Axure RP 5.0版所提供的动作型态 (Action)：

1. Open link in Current Window
 开启网页
 
2. Open link in Popup Window
 开启网页在Popup窗口（自动弹出窗口）
 
3. Open link in Parent Window
 开启网页在Parent窗口
 
4. Close Current Window
 关闭目前窗口 
 
5. Open link in Frame
 开启网页在inline frame中
 
6. Set Panel state(s) to State(s)
 指定某个Dynamic Panel的显示状态
 
7. Show Panel(s)
 显示Dynamic Panel
 
8. Hide Panel(s)
 隐藏Dynamic Panel
 
9. Toggle Visibitdty for Panel(s)
 切换Dynamic Panel显示或隐藏
 
10. Move Panel(s)
 移动Dynamic Panel
 
11. Set Variable and Widget value(s) equal to Value(s)
 设定变量或Widget 的值
 
12. Open link in Parent Frame
 开启网页在上层内嵌框架中
 
13. Scroll to Image Map Region
 卷动画面到Image Map的位置
 
14. Enable Widget(s)
 把Widgets变成可用状态
 
15. Disable Widget(s)
 把Widgets变成变成不可用状态
 
16. Wait Time(s)
 动作之前先等候(毫秒)
 
17. Other
 以文字说明来描述实际动作
 

--------------------------------------------------------------------------------

4. 多重假设条件(Multiple Cases)
一个触发事件(Event)可以加入多个假设条件(Multiple Cases)，以进行不同条件判断的差异化流程或交互表现。 

举例来说，您可以在一个按钮的OnClick触发事件中加入两个假设条件，第一个假设条件 Case 1 命名为 “If Yes”，选择这个假设条件时会开启第一页；第二个假设条件 Case 2 命名为 “If No”，选择这个假设条件时会开启第二页。

当按纽在Prototype中被按下时，会显示出这两个条件的说明(”If Yes” 与”If No”)，此时点选其中一个条件的说明，就会执行该条件所关连的动作。 

使用条件说明可以有效沟通条件流程，但是，如果需要建立一个高亲合力的Prototype，则必需在条件中定义条件逻辑，根据在窗体Widget中输入的值或变量值来执行动作，这个主题将会在第六章高级交互设计做深入的说明。

5. 网页层级的交互: OnPageLoad
Axure RP支持一个网页层级的触发事件(Event)-OnPageLoad，这个触发事件发生在Prototype载入网页时。

OnPageLoad 交互必须在Page Notes 窗格的Interactions 窗格中定义，加入假设条件的方式与在Widget中相同。 

OnPageLoad 触发事件(Event)会在OnPageLoad Event的介绍中做深入的说明。

--------------------------------------------------------------------------------

6. 技巧(Quick Tips)
技巧一. 快速连结(Quick Link)

选择 Widget ，然后按一下Interactions 窗格中的「Quick Link」并选择目标网页，可以快速地在Widget中加入一个基本连结。 

技巧二. 连结外部实际网址或网页

你可以让prototype的hyperlink动作去连结到外部的实际网址或网页。

如果使用Axure RP 5.0版

在「Link Properties」对话框中指定网页连结的时候，勾选「Link to an external url or file」选项，然后在「Hyperlink」字段指定一个外部实际网址的URL。 

如果使用Axure RP 4.6版

在「Link Properties」对话框中指定网页连结的时候，取消勾选「Link to a page in this design」选项，然后在「Hyperlink」字段指定一个外部实际网址的URL。 

技巧三. 重复应用类似的交互设计

如果你要进行一连串类似的交互设定，可以在Interaction窗格上，对着某个Case按鼠标右键选择”Copy”的动作，然后到你想加上交互设定的另一个Case，以鼠标右键选”Paste”动作，然后再修改这个新的交互设定。如此一来，就可以更快速的完成对象的交互设定。 

使用共享区块 (Master)
1. 认识共享区块 (Master)
共享区块 (Master) 是一组在设计过程中可以重复使用的Widget，一些常用的Master包括了页首(Header)、页尾(Footer)与导航栏(Navigation)， Master 可以被放置在网页或是其它的Master中，只要Master做了修改，其它使用到这个Master的地方也会跟着修改。 

我们也可以从其它的软件/程序技术经验来认识Axure RP的Master。

如果您熟悉PowerPoint的母片功能，那么Axure RP的Master功能，在”重复使用”的这一点特性上，有一点点类似PowerPoint的母片，但不完全是。如果您熟悉ASP或PHP程序语言的”Include”语法，或DreamWeaver的Template(DWT)，那么Axure RP的Master就是同样的概念，您只要使用Master，其它页面把Master放进来，就可以产生共享的特性。

若想要提升企划的速度跟效率，让Axure RP在Web/AP规画项目的效益展现出来，那么Master肯定是您必须要学会并熟练运用的功能。

 

新增、组织与设计Master

Master要在Masters 窗格中管理。想要新增Master的话，请按一下Masters窗格工具列上的【Add Master】钮，或在窗格中按鼠标右键并选择「Add Master」。

Masters 窗格利用文件夹(Folder)来组织Master，然后透过工具列、快捷菜单或是拖拉的方式重新排列Master。

在Master上连续按鼠标左键两下可以开启Master来进行设计，您可以像网页一样，将Widget拖拉到Wireframe中来设计Master。

--------------------------------------------------------------------------------

2. 套用 Master到网页中
想要在网页或其它Master 的Wireframe 中套用Master，只要将Master窗格中的Master拖拉到Wireframe中即可。

 

根据Master的特性， Master 对象会有淡红或灰色的屏蔽，想要移除屏蔽的话，可以使用主菜单中的「Wireframe->Mask Masters」功能。 

Master预设的行为是Normal，您可以在Master上按鼠标右键，然后利用「Behavior」子菜单将它变更为「Place In Background」或「Custom Widget」。

Masters的行为说明如下： 

Normal: 可以被移动与放置在 Wireframe上的任何地方，对Master的变更会立即反映出来。

Place in Background: Master被锁定在Wireframe的最底层，所包含的Widget 与Master 位在相同的位置，通常在制作样板(Template)时会用到这个功能。

Custom Widget: 当Custom Widget放到Wireframe上时，Widget就会失去与Master的关联，可以像一般Widget一样被编辑，这个功能适合将经常使用到的Widget，连同预设定义好的属性、注释和交互建立一个样式库(UI Design Pattern Library)，例如：白色文字的蓝色按钮。

--------------------------------------------------------------------------------

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

--------------------------------------------------------------------------------

4. 技巧(Quick Tips)
技巧一.在建立项目的初期就开始定义Master

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

至于如何判断什么样的接口区块适合放在Master？您可以观察自己会经常把哪些区块Copy/Paste到其它页面去使用，那些经常会被Copy/Paste的区块，往往就是网站共享的区块，就适合被设计到Master中。

技巧二. 将所有页面都套用Master(或移除Master)

在您想要套用(或移除)的Master名称上按鼠标右键，找到菜单”Add to Pages..”及”Remove From Pages..”，就可以一次把想要套用Master的许多页面，一次加完。反之，可以一口气把不要的共享区块，从许多页面中快速移除。

技巧三.使用文件夹(Folder)

文件夹(Folder)可以帮助您分门别类整理Master，尤其是如果您想要建立Master library的话，这个功能绝对让您事半功倍。您可以在Axure RP的Masters窗格第一个Icon (Add Folder)找到这个功能。

技巧四.建立图片 Master

在Master 中建立常用的图片(例如：icon图标)有助于重复使用这些图片，您就不需要反复的复制贴上，或不断的汇入图片文件，而且，如果您想要更换掉这个图片的话，也只需要在一个地方变更就好了。 

--------------------------------------------------------------------------------

编注： 

Axure RP的”Master”功能想要以中文精准表达有些困难。在PowerPoint中，Master被翻译成”母片”，但是Axure RP如果把Master翻译成”母片”，会失去Axure RP的Master多种功能的涵义。

Axure RP的Master，可以是整页的母片，这是一种型态。Axure RP的Master，也可以是Header区块或Footer区块，使用在很多页面一起共享的时候，这是第二种型态。Axure RP的Master还可以当作独立的Widget来使用，用来建立样式库Library。

因此，我们暂时选择把Master翻译成”共享区块”，同时也直接将英文”Master”放在教学文章之中。

输出网站/应用程序原型
1. 什么是网站/应用程序原型 (HTML Prototype)?
在Axure中完成有批注的Wireframe和Interaction之后，您可以产生可交互且支持多种浏览器的Web/AP原型(HTML Prototype)。(注: AP是Application的缩写，通常指的是应用程序)

Axure RP网站原型是由HTML和Javascript组成，可以在IE 6(或以上的版本)、Mozilla或Firefox中浏览。换句话说，观看网站原型的人仅需要一般浏览器，不需要安装Axure RP。如下图范例所示。

解除IE中的Active X 警告讯息：使用IE开启在自己计算机里头的HTML Prototype档案时，浏览器中可能会出现Active X 警告讯息，想要暂时解除IE中的警告讯息，请点选IE浏览器出现的Active X警示讯息，接着选择”允许被封锁的内容”，这样子就可以在IE浏览器上看到自己计算机里头的HTML Prototype了。
想要永久解除Active X警告讯息，请参考技巧一。

--------------------------------------------------------------------------------

2. 输出网站原型/格式设定
想要输出原型或设定(Configure HMTL Prototype)输出格式的话，请按下Axure RP软件上方主功能菜单「Generate」菜单，选择「Prototype(F5)」。

或是按下工具列中的「Prototype」钮，系统会开启「Configure HTML Prototype」对话框，并显示预设的原型输出格式设定，您可透过这个对话框来设定输出原型的格式。

 

格式设定中的选项可分成下面几区：

General：在「Destination Folder」处输入网站原型的HTML档案的存放位置，因为Axure RP的网站原型包含许多档案，最好指定一个windows档案系统内的档案夹来存放。

Notes(网页说明)：选择和排序想要显示在网站原型中的网页层级说明。

Annotations(物件批注)：选择和排序想要显示在网站原型中的批注字段。

Interactions (交互)：指定交互的行为，例如：指定是否需要预设显示条件描述(case)，或是只在多个条件存在的情形才显示。

Distribution：选择是否产生CHM 档。

Advanced：选择是否将Text Panel转成图片，这是一个旧版本的功能，现在很少有需要这样处理。

初次输出原型，您可以直接使用预设的设定值，除了指定输出的档案夹之外，不用费心去调整。或者当您完成网站原型输出格式的设定，只要按一下【Generate】钮就可将这个Prototype输出了。

如果您越来越熟练，您可以两个动作就完成网站原型的输出了，第一个动作是按下【F5】，接着再按下【Generate】。

--------------------------------------------------------------------------------

3.展示与操作网站原型
Axure RP输出的网站原型(HTML Prototype) 总共可区分成三个框架。

左侧: Sitemap 框架
您可以按Sitemap中的网页列表，循序展示网站原型中的任何一个网页。如果您不需要显示左侧的Sitemap，那么就应该

底部: 网页说明(Page Notes)框架
这个框架显示该网页的文字说明，这些文字说明来自于您写在网页批注(Page Notes)的文字。

中间: 主框架
主框架包含了Wireframe和流程图，Wireframe是可以交互的，举例来说，按一下设定有网页连结的按钮，那么就会连结到所设定的网页。

您也可以按一下加有附注的Widget旁边的黄色便利贴小Icon图示来检视批注。

--------------------------------------------------------------------------------

4. 分享原型档案给其它人
因为Axure RP的Prototype是标准的HTML、Javascript和图片文件，所以您的同事和客户不需要安装Axure RP或任何播放器就可以直接检视Prototype。

发布Prototype的方式有很多种，以下是三种不同的分享方式的介绍。

a. 放到网站服务器

第一种方式是发布网站原型的HTML Prototype到Web Server上，您只要将网址给客户或工作伙伴其它人，他们在他们的浏览器上浏览Prototype。

b. 压缩成Zip档

第二种方式是将包含Prototype档案的档案夹压缩成Zip档，然后将Zip档寄给相关的人。收到档案的人，将Zip档解压缩后，便可以直接在自己的计算机浏览HTML Prototype，通常是开启 index.html或从 XXX_Start.html档开始浏览 (XXX指的是该RP Project的名称)。

c. CHM 档

第三种方式是产生包含Prototype的CHM档，就像zip档一样，这种方式让您可以档案的方式发布Prototype，而且不需要安装任何软件来检视。CHM是Microsoft HTML Help档的格式，所以大多数的Windows计算机已经安装了浏览器，使用者只要在档案上连续按两下鼠标左键就可以检视它。

想要将Prototype输出成CHM档的话，请在「Configure HTML Prototype」对话框中，进入「Distribute」区，勾选「Create HTML Help File(.chm)」选项。

如果您目前已经安装的Microsoft系统中没有HTML Help Workshop的话，就必须安装它才能产生CHM档，您可从这里免费下载，一旦完成安装以后，所安装的文件夹中将会出现一个hhc.exe的档案，按一下「Locate hhc.exe」来告诉Axure RP这个程序在计算机中的位置。

一旦Prototype和.chm档产生之后，您将会在存放Prototype的文件夹中找到一个 .chm档，您现在就可以将 .chm档发布出去，让接收者在HTML Help检视器中检视。

 

技巧(Quick Tips)
技巧一. 只更新现在开启的页面到网站原型：

当您设计网站原型的技巧越纯熟，网站项目会越来越大，导致输出网站原型的时间会随着项目而变大。万一您只是调整其中的某一页，却得等待整个网站重新全部输出，那就太浪费时间了。

想要重新产生某一页网页，只要在Axure RP打开该页Wireframe，接着按下Axure RP主功能菜单「Generate」菜单，选择「Regenerate Current Page to Prototype(CTRL+F5)」(如下图)。

当您选择这个动作，或者直接按下热键CTRL+F5，Axure RP不会产生任何对话窗口，您只会感觉到鼠标指针闪了一下，此时，再回到网站原型(HTML Prototype)上去reload这一页，或click这一页网页名称，就会看到已经更新的页面了。

 

技巧二. 关闭IE中的Active X 警告讯息：
使用IE浏览器在自己的计算机上开启存放于档案夹中的HTML Prototype时，浏览器中可能会出现Active X 警告讯息，想要解除IE中的警告讯息，请点选「工具」菜单中的「因特网选项」，切换到「进阶」标签页中，找到「安全性」的设定中，勾选第二项「允许主动式内容在我的计算机上的档案中执行*」选项即可 (如图)。

技巧三. 嵌入外部Flash档案Inline Frame

Inline Frame Widget可用来加入Axure RP 目前不支持的内容，例如：Flash物件；只要在Inline Frame Widget上连续鼠标左键两下就可以让您指定想要加载到框架的网页，如果您要建立一个包含Flash对象的HTML 文件，您可以将档案嵌入到Inline Frame中，这样他就可以在Prototype中呈现了。

技巧四. 快速绘制网站架构图：

以”Generate Flow Diagram”的功能，请看快速绘制网站架构图 (Sitemap)教学影片。

输出规格文件(Word)
1. 什么是规格文件 (Specification)?
在Axure RP 中设计完Wireframe之后，我们可以输出Microsoft Word格式的需求书或功能性规格文件(Specification)。输出Word格式规格文件之前，您的计算机必须事先安装好Microsoft Word 2000或更新的版本。

如果您在设计Wireframe的同时，也把需求说明或规格叙述写在网页说明(Page Notes)或Widget的对象批注(Annotations)，输出成规格文件时，Axure RP会自动帮您汇整文字数据以及画面，并且按照网页顺序整理在Word档案里头。(如下图)

 

您可以下载下列网站策划书范例，很快就可以了解Axure RP输出的规格书大概是长成什么型态:

Axure RP Prototype范例-旅游网站策划书(Word 2000格式) 1.7 M bytes 
Axure RP Prototype范例-旅游网站策划书(Word 2007格式) 700 k Bytes 

--------------------------------------------------------------------------------

2. 输出规格文件/格式设定
想要输出规格文件或设定(Configure Specification)输出格式的话，请按下Axure RP软件上方主功能菜单「Generate」菜单，选择「Specification(F6)」。

或是按下工具列中的「Specification」钮，系统会开启「Configure Word 2007 Specification」或「Configure Word 2000 Specification」对话框，并显示预设的规格文件输出格式，您可透过这个对话框来设定其它格式。

如同输出网站原型(HTML Prototype)一样，需求书或规格书也可依不同的用途进行设定，比如设定一种格式专门给客户确认需求及规格，设定另一种格式专门产生测试计划与测试步骤，再另外设定一种格式用来介绍操作步骤。

如果您不另外指定输出格式，可以直接按下【Generate】来输出规格书，您唯一须留意的是输出文件名称(Destination File)必须是一个文件名称，比如 Untitled.docx (Word 2007格式) 或 Untitled.doc (Word 2000格式)，不能只给目录名称。

可以被调整设定的项目包括，Pages(网页)相关 / Masters(共享区块)相关 / Notes(网页说明)相关/ Screenshot (画面)相关/ Annotations (对象批注)相关 / Widgets(对象)相关 / Word Template (Word档样板)相关。

套用Word档样板可以客制化您输出的规格文件，让文件的呈现更专业，您也可以事先设定好前言以及附录档，比如封面，附录或签名页。您可以修改Word模板来配置规格中的文字样式，变更文件的排版或加入页首或页尾。一但您设定好规格文件格式，请按一下【Generate】钮来产生这份规格。

--------------------------------------------------------------------------------

3. 技巧(Quick Tips)
技巧一. 只要把必要的项目输出到规格文件中

规格文件输出时如果选择输出的项目太细，很有可能会产出一份好几百页的Word档案，而难以阅读。因此，输出之前，最好透过格式的设定将不需要的项目取消勾选，保留有意义的部份。

技巧二. 预设规格文件标题改成中文

将Axure RP预设格式的档标题改成中文，比如将Pages格式设定的 Section Header名称 “Pages” 改成 “网站策划说明” ，把 “Page Tree” 改成 “网页列表”；或者把Screenshot格式设定的 Section Header名称”User Interface” 改成 “网页画面”。如此一来输出成规格文件时，会更方便阅读这些段落标题。

--------------------------------------------------------------------------------

 

鼠标移入移出及图像变换的互动设计
1. 鼠标移入移出(OnMouseEnter/OnMouseOut) 
在先前初级互动设计(Basic Interaction)一章中，介绍多种Axure RP支持的人机接口互动效果。这里我们要介绍其中两个常见的触发事件(Event)：

OnMouseEnter - 鼠标的指针移动到对象之上
OnMouseOut - 鼠标的指针移动出对象之外

有许多Widget可以使用OnMouseEnter 和 OnMouseOut触发事件，当鼠标移到Widget上时会触发OnMouseEnter事件，OnMouseOut事件则发生在鼠标离开Widget时被触发。

最常见的运用方式，则是合并Dynamic Panel来控制比较复杂的功能时，例如：浮动菜单、滑过特效和自订tooltips等。

以左图的互动效果来当例子：当鼠标移到图片上方时，会自动弹出说明文字框(Dynamic Panel)，当鼠标移出图片时，说明文字框就会消失。这个互动设计就可透过OnMouseEnter 和 OnMouseOut触发事件结合Dynamic Panel的控制来达成，设计方式如下图所示。

　

2. 变换图像(Rollover Image)
Image Widget 以及 Button Shape Widget可直接利用Axure RP的功能来设计Rollover Image和Rollover Style，不需要使用到OnMouseEnter、OnMouseOut和 Dynamic Panel。

变换图像(Rollover Image)

想要建立变换图片的话，请在Image Widget上按右键，选择「Edit Image->Import Rollover Image」，然后选择一个图片当作变换图片，一旦图片选定后，您可以在Wireframe中，利用鼠标滑过图片上的黑白色方块来预览变换图片。

　

3. 变换样式(Rollover Style) 
在Axure RP里头，Rectangle，Placeholder，Button Shape这三种Widget可以直接设定变换样式(Rollover Style)，而不需要去特别指定OnMouseEnter / OnMouseOut的触发事件，就可以做到变换样式。

想要建立变换样式的话，请在Rectangle / Placeholder / Button Shape上按右键，选择「Edit Edit Button Shape->Edit Rollover Style」。

此时会开启「Set Rollover Style」对话框，您可以在这里选择变换样式，勾选「Preview」复选框来预览设定在Button Shape的变换样式。

　

 

字型 Font 
字体大小 Font Size 
粗体 Bold 
斜体 Italic 
底线 Underline 
文字颜色 Font Color 
填色 Fill Color 
线条颜色 Line Color 
线宽 Line Width 
线条样式 Line Style 
套用了变换样式之后，您可以选择 Preview提早预览效果。也可以在Wireframe中，利用鼠标滑过Widget左上角的黑白色方块来预览变换状态。

设计多层菜单
1. 认识菜单物件 (Menu Widget)
菜单对象 (Menu widgets) 常被用来建立简单的多层菜单 (Flyout Menus)。您可以在Widgets窗格中找到两种菜单物件： 

Menu (Vertical) - 垂直菜单 
Menu (Horizontal) - 水平菜单 
将你所需要的菜单对象从Widgets窗格中拖曳到Wireframe就可轻松建立，新的菜单会先设置3个菜单选项(Menu Item)。

下图展示的动画则是已经完成设定的多层菜单：

 

--------------------------------------------------------------------------------

2. 编辑菜单对象
编辑菜单和菜单项目的文字与格式的方法就像编辑其它Widget一样，您可以在菜单项目上连续按鼠标左键两下编辑文字，也可以利用工具列来编辑菜单和菜单项目的色彩、字型和其它样式。

菜单对象的编辑功能有这些项目：

Edit Menu Padding - 选项间距设定 
Edit Rollover Style - 设定变换样式 
Add Menu Item After - 往后新增选项 
Add Menu Item Before - 往前新增选项 
Delete Menu Item - 删除选项 
Add Submenu - 新增子菜单 (如果已经有子菜单，则会显示 Delete Submenu - 删除子菜单) 
在 Menu Widget的选项上，按鼠标右键会出现如下图功能菜单：

 

增加或移除菜单项及子菜单

想要增加或移除菜单项目的话，请在菜单项目上按鼠标右键，选择「Add Menu Item」和「Delete Menu Item」指令。

想要在菜单项目下加入子菜单的话，请在菜单项目上按鼠标右键，选择「Add Submenu」。在Axure RP的画布区域，通常Submenu会自动缩回，要去点一下上层菜单，才能再看到前新增的Submenu。如下动画：

　

设定选项间距(Padding)

若是想要编辑菜单项目之间的间距(Padding)，请在菜单或菜单项目上按鼠标右键，选择「Edit Menu Padding」。

　

--------------------------------------------------------------------------------

3. 设定菜单的变换样式 (Rollover Style)
就像Button Shape Widget一样，变换样式(Rollover Style)也可套用在Menu Widget的菜单项目上。

想要编辑菜单的变换样式，请在菜单或菜单项目上按鼠标右键，选择「Edit Rollover Style」，此时会开启「Set Rollover Style」对话框，您可以在这里选择单一菜单项目、菜单上的所有菜单项目，或是菜单和子菜单上的所有菜单项目的变换样式。

勾选「Preview」复选框来预览套用在菜单上的变换样式。

套用了变换样式之后，您可以在Wireframe中，利用鼠标滑过菜单项目左上角的黑白色方块来预览变换样式。

 

 

--------------------------------------------------------------------------------

4. 技巧 (Quick Tips)
技巧 1. 优先设定母菜单(Root Menu)的样式：

当子菜单(Submenu)建立了以后，会自动套用母菜单(Root Menu)的样式，您可以在建立子菜单之前先将母菜单样式设好，以节省时间。

另，为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，参与讨论。 

 

补充：相关英语

接口设计样式 (UI Design Pattern)：自动完成 (Auto Complete)

dynamic panel 动态面板

state 状态

Menu Padding Editor　设置边距

Add Submenu　添加子菜单