三. Axure RP基本操作
(1) 認識Axure RP操作介面
下圖是Axure RP 環境與介面中各區塊的簡單描述。 放大圖 
1. 主選單/工具列：在主選單與工具列中，可以執行常用的動作指令，例如：開啟與儲存檔案、輸出Prototype或Spec文件。
2. Sitemap窗格：Sitemap窗格將您所設計的網頁以樹狀結構的方式呈現，您可以在這裡新增、移除、重新命名和組織設計的網頁。
3. Widgets窗格：包含一系列常用的使用者介面物件，例如：按鈕、影像、Text Panel與矩形，您可以直接透過拖拉的方式來設計網頁。
4. Masters窗格：在這裡您可以新增、移除、重新命名和組織設計好的Master。Master是一種可以容納多項介面物件集合的樣板(Temlate)，您可以將常用的物件組合設計成Master，未來在設計Wireframe時重複使用Master，來提高規劃的效率。
5. Wireframe窗格：您可以在這個窗格中設計網頁資訊元素，編排內容，設計介面，設計互動特性等等。未來可以將這些設計好的頁面，輸出成Prototype或Spec文件。
6. 網頁說明/互動/格式 (Pages Notes & Interactions & Formatting)窗格：您可以在這個窗格中加入網頁層級的說明與互動效果到設計中，也可以改變頁面格式、調整成素描效果(Sketch Effects)等。
7. 物件屬性(Widget Properties)窗格：
- 物件註解(Annotation)：您可以為Widget加上註解來指定功能，您可以在這個窗格中增加和自訂Widget的註解。
- 互動設計(Interaction)：互動的範圍很廣，從最基本的超連結、pop-ups，一直到動態顯示和隱藏widget。您可以在這個窗格中定義Widget的互動。
- 物件格式(Formatting)：您可以為Widget改變字體、樣式及群組等，也可以在此手動輸入數值改變物件的位置。
8. 動態面板管理(Dynamic Panel Manager)窗格：可以在此窗格管理當下編輯頁面中所有的Dynamic Panel。
初级交互设计
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)? 2. 输出网站原型/格式设定 3. 展示与操作网站原型 4. 分享原型档案给其它人 5. 秘技(Quick Tips)
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中的警告讯息，请点选「工具」菜单中的「Internet选项」，切换到「高级」标签页中，找到「安全」的设定中，勾选「允许活动内容在我的计算机上的文件中运行*」选项即可 (如上图)。
秘技三. 嵌入外部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』 改成 『网页画面』。如此一来输出成规格文件时，会更方便阅读这些段落标题。
浙公网安备 33010602011771号