1、三. Axure RP基本操作(1) 认识Axure RP操作介面下图是Axure RP 环境与介面中各区块的简单描述。主选单/工具列： 在主选单与工具列中，可以执行常用的动作指令，例如：开启与储存档案、输出Prototype或Spec文件。Sitemap 窗格： Sitemap窗格将您所设计的网页以树状结构的方式呈现，您可以在这里新增、移除、重新命名和组织设计的网页。Widgets窗格： 包含一系列常用的使用者介面对象，例如：按钮、影像、Text Panel与矩形，您可以直接透过拖拉的方式来设计网页。Masters窗格：在这里您可以新增、移除、重新命名和组织设计好的Master。Master
2、是一种可以容纳多项界面元素的集合样板(Temlate)，您可以将常用的共享区块设计成Master，未来在设计Wireframe时重复使用Master，来提高规划的效率。Wireframe窗格： 您可以在这个窗格中设计网页信息元素，编排内容，设计介面，设计交互特性等等。未来可以将这些设计好的页面，输出成Prototype或Spec文件。交互设计 (Interaction) 窗格：交互的范围很广，从最基本的超级链接、pop-ups，一直到动态显示和隐藏widget。您可以在这个窗格中定义Widget的交互。物件批注(Annotation) 窗格： 您可以为Widget加上批注来指定功能，您可以在这
3、个窗格中增加和自订Widget的批注。网页说明及交互(Pages Notes & Interactions)窗格：您可以在这个窗格中加入网页层级的说明与交互效果到设计中。1.定义Sitemap企划一个网站或Web AP，在动手开始绘制网站页面的示意图(Wireframe)或流程图之前，您应该事先思考网站架构，并决定信息内容与层级。当您心中已经有了明确的网站架构，接下来就可以利用Sitemap窗格来定义您所设计的网站页面。Sitemap窗格是用来管理设计中网页的工具，您可以在Sitemap 窗格中可以新增、删除和调整网页层级。新增/删除网页：想要新增网页的话，请点选Sitemap 工具列上的【A
4、dd Child Page】钮。 在网页上按鼠标右键，然后选择Rename Page或慢慢的在网页上连续按鼠标左键两下可编辑网页名称。 想要删除网页的话，请点选想要删除的网页，然后按下Sitemap 工具列上的【Delete Page】钮，或是在网页上按下鼠标右键，然后选择Delete Page。调整网页层级： 您可以将网页从Sitemap 中拖曳到目标母网页中来移动网页位置，您也可以使用Sitemap 工具列上的箭头按钮来上下移动网页，或改变网页的阶层。 开启网页：在 Sitemap中的任一网页上连续按鼠标左键两下，网页会在Wireframe 窗格中开启。2. 以介面物件(Widgets)绘
5、制示意图(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)的方式来新增物
6、件。提醒: 熟悉PowerPoint操作方式的使用者刚开始可能不太习惯，因为Axure RP的操作方式类似Visio选择图形的作法，是利用拖放(Drag & Drop)的方式，跟PowerPoint是不一样的。移动物件(Widget)在Wireframe中新增物件之后，您可以拖放Widget来移动的位置，拖曳Widget四周的控制点来改变Widget的大小。您也可以一次选取多个物件，一次改变所有被选取的物件的位置和大小。除此之外，您还可以在选取的Widget上按下鼠标右键，使用快捷菜单(context menu)来设定Widgets的群组(Grouping)、顺序(Order)、对齐(Alig
7、n)、分散(Distribute)与锁定(Lock)；您也可以利用Object工具列来做这些设定，请先利用菜单View-Toolbars-Object将Object工具列叫出。编辑物件(Widget)的样式与属性编辑Widget的样式与属性有下列3种方式：a. 连续按鼠标左键两下： 在Widget上连续按鼠标左键两下可以让您变更一些基本的Widget属性，例如：在Image Widget上连续按鼠标左键两下可以让您汇入影像；在Droplist或List Box Widget上连续按鼠标左键两下可以让您编辑选单项目。 b. 工具列： 使用工具列可编辑Widget 的样式，例如：外框色彩、填满色彩
8、、字型和字体大小。 c. 快捷菜单(Context Menu)： 在Widget上按下鼠标右键会出现快捷菜单，您可以透过菜单中的选项来设定Widget的特殊属性，这些选项也会因Widget的类型而有所不同。3. 撰写物件批注(Annotation )您可以在Wireframe中为任何物件(Widget)加上批注。 新增批注想要帮物件加上批注的话，请先选择Wireframe中的物件，如图箭头1所示，被选取的物件呈现绿色框线状态，然后在物件批注窗格(Annotations & Interactions Pane)的 Specification字段(箭头2)，输入对这个物件的解释内容，您也可以在窗格
9、最上方的Label字段(箭头3)输入名称来帮物件命名。 自定字段您可以透过菜单Wireframe - Customize Annotation Fields and Views，或是按一下Annotations & Interactions的标头来自订批注字段。脚注(Footnote)一旦在Widget上加上后，Widget 右上方会多一个黄色小方块，里面有一个脚注号码(Footnote number)，您可以在Widget上按下鼠标右键，使用Footnotes次菜单来增加或减少这个编号数字。4. 网页说明(Page Notes)网页说明可以用来收集网页层级的描述或需求。撰写网页说明(Page
10、 Notes)网页说明会被保留在Wireframe下方的窗格内。管理网页说明类别Axure RP本身预设的网页说明类别是default，您可以透过新增额外的说明类别，轻易的区分出您自己的说明与要输出到Prototype与规格中的说明。比如您可以新增Test Case，操作说明，SD等不同类别的网页说明。而当您要输出规格文件时，可以个别指定哪些种类的网页说明要输出到文件，如此一来，您就可以输出专属于Test Case, 操作说明或SD文件了。想要新增/编辑网页说明类别的话，请点选菜单Wireframe-Manage Page Notes，或按一下Page Notes Default右方的向下箭头
11、并选择Manage Page Notes，此时会出现Page Notes 对话框，利用这个对话框，您可以新增、移除、更名或重新排列说明字段。想要切换说明类别的话，请按一下Page Notes Default右方的向下箭头，来选择说明类别。 5. 秘技(Quick Tips)秘技一. 超快速挪动画面：当您设计的网页画面变大时，为了选取不同位置的物件，您必须经常使用垂直与水平的滚动条，这会使得选取物件的动作变慢。请试试这招，鼠标光标focus在Wireframe，按住键盘的空格键，这么一来就会切换成Hand tool，此时鼠标光标会切换成手状，您可以用来抓着画面任意滑动，而且不会打乱任何物件的位置
12、，轻松愉快。秘技二. 穿透物件(Widget)选取下层的物件：以鼠标左键稍慢速度按一下物件，当您放开鼠标左键时，可以穿透上层物件，选取到位于下层的物件 。操作速度如下图所示：秘技三. 引用Microsoft Office或其它软件的物件：您可以利用复制/贴上(Coyp/Paste)的功能，将其软件中的物件，例如：PowerPoint, Excel, Visio, Photoshop 与Illustrator贴到Axure RP中。一般来说，这些贴上的物件会变成Wireframe中的图像物件。反之亦然，您也可以复制Axure RP中的物件或画面，贴到其它软件。秘技四. 单选群组(收音机按钮群组
13、Radio Button Group)： 您可以一次选取多个Radio Button，按下鼠标右键，并选择Edit Radio Button-Assign Radio Group来设定Radio Button的群组关系。如此一来，当这些Radio Button输出到Prototype时，就会形成真正的单选使用者介面。 一. 认识Axure RP 二. 下载 / 安装 o 安装授权序号 三. Axure RP基本操作 o 示意图及批注 o 初级交互设计 o 使用共享区块 (Master) o 输出网站/应用程序原型 o 输出规格文件(Word) 四. 架构图&流程图 o 1-click绘制架构图
14、 o 流程图&连接线 五. 中级交互设计 o 控制Dynamic Panel o 鼠标移入移出及图像变换的交互设计 o 设计多层选单 首页 在线教程 三. Axure RP基本操作 初级交互设计 初级交互设计1. 交互(Interaction)2. 定义基本连结3. 动作型态(Action)及实际动作(Action Description)4. 多重条件(Multiple Cases )5. 网页层级的交互: OnPageLoad 6. 秘技(Quick Tips)1. 交互(Interaction)Interactions窗格是用来定义Widget在Wireframe中的交互表现方式，交互表
15、现的方式包含简单的连结到Rich Internet Application (RIA)的复杂行为，而且这些交互表现都可以在Prototype中执行。触发事件(Event)、假设条件(Case)、动作型态(Action)在Axure RP中的交互设计是由触发事件(Event)、假设条件(Case)与动作型态(Action)所组成。当使用者对网页进行某些人机介面的操作时，就会对网页触发一个事件(Event)。每一个触发事件都可以有一或多个假设条件(Case)，例如，一个按钮的OnClick 触发事件可以有两个假设条件：其中一个导引至某个网页，另一个则导引至另一个网页 。而每一个假设条件(Case)
16、又可以执行一或多个动作型态(Action)，举例来说：Open Link in Current Window的动作就是一个基本连结。触发事件(Event)目前Axure RP 5支持的人机介面触发事件，及相对应的触发事件(Event)名称如下： 以鼠标点击 OnClick 鼠标的指针移动到对象之上 OnMouseEnter 鼠标的指针移动出对象之外 OnMouseOut 鼠标的指针进入文字输入状态 OnFocus 鼠标的指针离开文字输入状态 OnLostFocus 敲键盘 OnKeyUp 浏览器加载网页 OnPageLoad 大多数的对象，只具备最常见的三种触发事件(Event) OnClic
17、k、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. 网页层级的交互
18、: OnPageLoad) 您不需要硬背上述的对象及对应的Event，在Axure RP的操作介面上，您只要点选对象，就可以查看Interaction窗格所显示的对应Event。1. 认识共享区块 (Master)共享区块 (Master) 是一组在设计过程中可以重复使用的Widget，一些常用的Master包括了页首(Header)、页尾(Footer)与导览(Navigation)， Master 可以被放置在网页或是其它的Master中，只要Master做了修改，其它使用到这个Master的地方也会跟着修改。 我们也可以从其它的软件/程序技术经验来认识Axure RP的Master。如果
19、您熟悉PowerPoint的母片功能，那么Axure RP的Master功能，在”重复使用”的这一点特性上，有一点点类似PowerPoint的母片，但不完全是。如果您熟悉ASP或PHP程序语言的”Include”语法，或DreamWeaver的Template(DWT)，那么Axure RP的Master就是同样的概念，您只要使用Master，其它页面把Master放进来，就可以产生共享的特性。若想要提升企划的速度跟效率，让Axure RP在Web/AP规画项目的效益展现出来，那么Master肯定是您必须要学会并熟练运用的功能。新增、组织与设计MasterMaster要在Masters 窗格中
20、管理。想要新增Master的话，请按一下Masters窗格工具列上的【Add Master】钮，或在窗格中按鼠标右键并选择Add Master。Masters 窗格利用数据夹(Folder)来组织Master，然后透过工具列、快捷菜单或是拖拉的方式重新排列Master。在Master上连续按鼠标左键两下可以开启Master来进行设计，您可以像网页一样，将Widget拖拉到Wireframe中来设计Master。2. 套用 Master到网页中想要在网页或其它Master 的Wireframe 中套用Master，只要将Master窗格中的Master拖拉到Wireframe中即可。根据Mast
21、er的特性， Master 对象会有淡红或灰色的屏蔽，想要移除屏蔽的话，可以使用主选单中的Wireframe-Mask Masters功能。 Master预设的行为是Normal，您可以在Master上按鼠标右键，然后利用Behavior子选单将它变更为Place In Background或Custom Widget。Masters的行为说明如下： Normal: 可以被移动与放置在 Wireframe上的任何地方，对Master的变更会立即反映出来。Place in Background: Master被锁定在Wireframe的最底层，所包含的Widget 与Master 位在相同的位置
22、，通常在制作样板(Template)时会用到这个功能。Custom Widget: 当Custom Widget放到Wireframe上时，Widget就会失去与Master的关联，可以像一般Widget一样被编辑，这个功能适合将经常使用到的Widget，连同预设定义好的属性、注释和交互建立一个样式库(UI Design Pattern Library)，例如：白色文字的蓝色按钮。3. 应用实例Axure RP能够快速提高网站策划的效率，除了个人在单一网站项目上应用Master的功能，来大量减低重复编辑的工作之外，还可以利用Master的Custom Widget自订对象的功能，来建立网站介面
23、元素的介面库(UI Design Pattern Library)。这里有一篇Axure RP应用于网站界面库的实际案例 利用Axure封装视觉标准，非常值得学习。4. 密技(Quick Tips)秘技一.在建立项目的初期就开始定义Master项目一开始启动，如果可以稍微掌握哪些介面区块未来将是共享区块，那么就开始建立Master，比如网站的Header / Footer / 导览选单(Navigation)，或者广告版位等等。越早使用，越可以节省其它页面设计的重复工作。至于如何判断什么样的介面区块适合放在Master？您可以观察自己会经常把哪些区块Copy/Paste到其它页面去使用，那些经
24、常会被Copy/Paste的区块，往往就是网站共享的区块，就适合被设计到Master中。秘技二. 将所有页面都套用Master(或移除Master)在您想要套用(或移除)的Master名称上按鼠标右键，找到选单”Add to Pages.”及”Remove From Pages.”，就可以一次把想要套用Master的许多页面，一次加完。反之，可以一口气把不要的共享区块，从许多页面中快速移除。秘技三.使用数据夹(Folder)资料夹(Folder)可以帮助您分门别类整理Master，尤其是如果您想要建立Master library的话，这个功能绝对让您事半功倍。您可以在Axure RP的Mast
25、ers窗格第一个Icon (Add Folder)找到这个功能。秘技四.建立影像 Master在Master 中建立常用的影像(例如：icon图标)有助于重复使用这些影像，您就不需要反复的复制贴上，或不断的汇入影像文件，而且，如果您想要更换掉这个影像的话，也只需要在一个地方变更就好了。 编注： Axure RP的”Master”功能想要以中文精准表达有些困难。在PowerPoint中，Master被翻译成”母片”，但是Axure RP如果把Master翻译成”母片”，会失去Axure RP的Master多种功能的涵义。Axure RP的Master，可以是整页的母片，这是一种型态。Axure
26、RP的Master，也可以是Header区块或Footer区块，使用在很多页面一起共享的时候，这是第二种型态。Axure RP的Master还可以当作独立的Widget来使用，用来建立样式库Library。1. 什么是网站/应用程序原型 (HTML Prototype)?在Axure中完成有批注的Wireframe和Interaction之后，您可以产生可交互且支持多种浏览器的Web/AP原型(HTML Prototype)。(注: AP是Application的缩写，通常指的是应用程序)Axure RP网站原型是由HTML和Javascript组成，可以在IE 6(或以上的版本)、Mozil
27、la或Firefox中浏览。换句话说，观看网站原型的人仅需要一般浏览器，不需要安装Axure RP。如下图范例所示。解除IE中的Active X 警告讯息：使用IE开启在自己计算机里头的HTML Prototype档案时，浏览器中可能会出现Active X 警告讯息，想要暂时解除IE中的警告讯息，请点选IE浏览器出现的Active X警示讯息，接着选择允许被封锁的内容，这样子就可以在IE浏览器上看到自己计算机里头的HTML Prototype了。想要永久解除Active X警告讯息，请参考秘技一。2. 输出网站原型/格式设定想要输出原型或设定(Configure HMTL Prototype)
28、输出格式的话，请按下Axure RP软件上方主功能选单Generate菜单，选择Prototype(F5)。或是按下工具列中的Prototype钮，系统会开启Configure HTML Prototype对话框，并显示预设的原型输出格式设定，您可透过这个对话框来设定输出原型的格式。格式设定中的选项可分成下面几区：General：在Destination Folder处输入网站原型的HTML档案的存放位置，因为Axure RP的网站原型包含许多档案，最好指定一个windows档案系统内的档案夹来存放。Notes(网页说明)：选择和排序想要显示在网站原型中的网页层级说明。Annotations(
29、物件批注)：选择和排序想要显示在网站原型中的批注字段。Interactions (交互)：指定交互的行为，例如：指定是否需要预设显示条件描述(case)，或是只在多个条件存在的情形才显示。Distribution：选择是否产生CHM 檔。Advanced：选择是否将Text Panel转成影像，这是一个旧版本的功能，现在很少有需要这样处理。初次输出原型，您可以直接使用预设的设定值，除了指定输出的档案夹之外，不用费心去调整。或者当您完成网站原型输出格式的设定，只要按一下【Generate】钮就可将这个Prototype输出了。如果您越来越熟练，您可以两个动作就完成网站原型的输出了，第一个动作是按
30、下【F5】，接着再按下【Generate】。3.展示与操作网站原型Axure RP输出的网站原型(HTML Prototype) 总共可区分成三个框架。左侧: Sitemap 框架您可以按Sitemap中的网页列表，循序展示网站原型中的任何一个网页。如果您不需要显示左侧的Sitemap，那么就应该底部: 网页说明(Page Notes)框架这个框架显示该网页的文字说明，这些文字说明来自于您写在网页批注(Page Notes)的文字。中间: 主框架主框架包含了Wireframe和流程图，Wireframe是可以交互的，举例来说，按一下设定有网页连结的按钮，那么就会连结到所设定的网页。您也可以按一
31、下加有附注的Widget旁边的黄色便利贴小Icon图示来检视批注。4. 分享原型档案给其它人因为Axure RP的Prototype是标准的HTML、Javascript和影像文件，所以您的同事和客户不需要安装Axure RP或任何播放器就可以直接检视Prototype。发布Prototype的方式有很多种，以下是三种不同的分享方式的介绍。a. 放到网站服务器第一种方式是发布网站原型的HTML Prototype到Web Server上，您只要将网址给客户或工作伙伴其它人，他们在他们的浏览器上浏览Prototype。b. 压缩成Zip檔第二种方式是将包含Prototype档案的档案夹压缩成Zi
32、p档，然后将Zip档寄给相关的人。收到档案的人，将Zip档解压缩后，便可以直接在自己的计算机浏览HTML Prototype，通常是开启 index.html或从 XXX_Start.html档开始浏览 (XXX指的是该RP Project的名称)。c. CHM 檔第三种方式是产生包含Prototype的CHM档，就像zip档一样，这种方式让您可以档案的方式发布Prototype，而且不需要安装任何软件来检视。CHM是Microsoft HTML Help档的格式，所以大多数的Windows计算机已经安装了浏览器，使用者只要在档案上连续按两下鼠标左键就可以检视它。想要将Prototype输出成
33、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档发布出去，
34、让接收者在HTML Help检视器中检视。秘技(Quick Tips)秘技一. 只更新现在开启的页面到网站原型：当您设计网站原型的技巧越纯熟，网站项目会越来越大，导致输出网站原型的时间会随着项目而变大。万一您只是调整其中的某一页，却得等待整个网站重新全部输出，那就太浪费时间了。想要重新产生某一页网页，只要在Axure RP打开该页Wireframe，接着按下Axure RP主功能选单Generate菜单，选择Regenerate Current Page to Prototype(CTRL+F5)(如下图)。当您选择这个动作，或者直接按下热键CTRL+F5，Axure RP不会产生任何对话窗口
35、，您只会感觉到鼠标指针闪了一下，此时，再回到网站原型(HTML Prototype)上去reload这一页，或click这一页网页名称，就会看到已经更新的页面了。秘技二. 关闭IE中的Active X 警告讯息：使用IE浏览器在自己的计算机上开启存放于档案夹中的HTML Prototype时，浏览器中可能会出现Active X 警告讯息，想要永久解除IE中的警告讯息，请点选工具菜单中的Internet选项，切换到高级标签页中，找到安全的设定中，勾选允许活动内容在我的计算机上的文件中运行*选项即可 (如上图)。秘技三. 嵌入外部Flash档案Inline FrameInline Frame Wi
36、dget可用来加入Axure RP 目前不支持的内容，例如：Flash物件；只要在Inline Frame Widget上连续鼠标左键两下就可以让您指定想要加载到框架的网页，如果您要建立一个包含Flash对象的HTML 文件，您可以将档案嵌入到Inline Frame中，这样他就可以在Prototype中呈现了。1. 什么是规格文件 (Specification)?在Axure RP 中设计完Wireframe之后，我们可以输出Microsoft Word格式的需求书或功能性规格文件(Specification)。输出Word格式规格文件之前，您的计算机必须事先安装好Microsoft Wor
37、d 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
38、2. 输出规格文件/格式设定想要输出规格文件或设定(Configure Specification)输出格式的话，请按下Axure RP软件上方主功能选单Generate菜单，选择Specification(F6)。或是按下工具列中的Specification钮，系统会开启Configure Word 2007 Specification或Configure Word 2000 Specification对话框，并显示预设的规格文件输出格式，您可透过这个对话框来设定其它格式。如同输出网站原型(HTML Prototype)一样，需求书或规格书也可依不同的用途进行设定，比如设定一种格式专门给客户
39、确认需求及规格，设定另一种格式专门产生测试计划与测试步骤，再另外设定一种格式用来介绍操作步骤。如果您不另外指定输出格式，可以直接按下【Generate】来输出规格书，您唯一须留意的是输出文件名称(Destination File)必须是一个文件名称，比如 Untitled.docx (Word 2007格式) 或 Untitled.doc (Word 2000格式)，不能只给目录名称。可以被调整设定的项目包括，Pages(网页)相关 / Masters(共享区块)相关 / Notes(网页说明)相关/ Screenshot (画面)相关/ Annotations (对象批注)相关 / Widg
40、ets(对象)相关 / Word Template (Word文件样板)相关。套用Word文件样板可以客制化您输出的规格文件，让文件的呈现更专业，您也可以事先设定好前言以及附录文件，比如封面，附录或签名页。您可以修改Word模板来配置规格中的文字样式，变更文件的排版或加入页首或页尾。一但您设定好规格文件格式，请按一下【Generate】钮来产生这份规格。3. 秘技(Quick Tips)秘技一. 只要把必要的项目输出到规格文件中规格文件输出时如果选择输出的项目太细，很有可能会产出一份好几百页的Word档案，而难以阅读。因此，输出之前，最好透过格式的设定将不需要的项目取消勾选，保留有意义的部份。
41、秘技二. 预设规格文件标题改成中文将Axure RP预设格式的文件标题改成中文，比如将Pages格式设定的 Section Header名称 Pages 改成 网站策划说明 ，把 Page Tree 改成 网页列表；或者把Screenshot格式设定的 Section Header名称User Interface 改成 网页画面。如此一来输出成规格文件时，会更方便阅读这些段落标题。1. Axure RP实现更丰富的交互设计网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为
42、RIA(Rich Internet Application)的技术，能够让网站介面更丰富，展现更优质的人机交互。同时，这个趋势也挑战了传统的文书软件或绘图软件，当这些软件受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的交互方式表达清楚并设计出来。Axure RP与其它的wireframe软件，最大的差异在于能够进行交互设计(Interaction Design)，且可以立即将结果呈现于prototype上，而不是只有文字叙述。更棒的一点是，学习Axure RP的交互设计，您并不需要学习HTML或Java Script语法，只要透过一些设定与操作，便可以完成多样而创新的交互介面设
43、计。在Axure RP设计出来的Prototype中，最简单的交互设计是网页连结，透过鼠标的click来串起使用者与网站的交互流程。然而，真正发挥Axure RP在交互设计上的惊人特色，并不是只有连结这么简单的交互，您可以藉由学习Dynamic Panel (动态面板)对象的操作与控制，来做到更丰富更友善的交互介面设计。2. 认识Dynamic Panel WidgetDynamic Panel (动态面板) 这种对象是专门用在设计Prototype动态功能的Widget，Dynamic Panel可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或
44、隐藏/显示Dynamic Panel来达成交互介面的整个表现。就像其它Widget一样，Dynamic Panel可以用拖放的方式从Wireframe窗格加入到画布中。学习Dynamic Panel的交互设计之前，有2个重要的概念必须先认识：(1) Dynamic Panel (动态面板)：一种透明的对象，本身可以包含很多个状态(State)，而每个状态都是一个小网页。被放置在最上层的状态就是该面板的长相。(2) State (状态)：每个状态都是一个小网页，而这个小网页的边界与大小，与所属的Dynamic Panel大小相同。不同的State可以重迭在同一个Dynamic Panel里头，唯
45、有被控制放在最上层的State，才会呈现于Prototype的画面中。以Axure RP所设计出来的多样交互介面，大多藉由各种触发事件(Event)来控制Dynamic Panel显示或消失，或控制哪个State在最上层来仿真出实际的交互介面。3. 编辑Dynamic Panel 的State(状态)已经摆放到画布中的Dynamic Panel，直接在上头快速点鼠标左键两下，会开启Dynamic Panel State Manager对话框。在这个对话窗口中，您可以新增State、更改State名称、调整State排序、移除State与编辑State。在Dynamic Panel State
46、Manager对话框中选择一个Panel State，然后按下【Edit State】钮，会开启这个Panel State的Wireframe以供设计。或者您可以选择【Edit All States】钮，一口气把所有的状态页面通通开启。开启后，您就可以像设计其它Wireframe一样的设计状态页面(State)， 每个状态页面的侧边蓝色虚线外框就表示Dynamic Panel 的边界。4. 预设Dynamic Panel的显示/隐藏Dynamic Panel 可以预设为隐藏(Hidden)，作法是在Dynamic Panel 对象上按鼠标右键，并选择Edit Dynamic Panel-Set
47、 Hidden，这样就可以隐藏Panel 的内容，而且Dynamic Panel的屏蔽也会从蓝色变成黄色。已经预设隐藏的Dynamic Panel，可以选择Edit Dynamic Panel-Set Visible来显示Dynamic Panel。Dynamic Panel 可以藉由接下来所介绍的交互模式，动态控制在Prototype 中的显示或隐藏。Axure RP提供交互设计的实现方式，都在 Interaction Case Properties对话框中设定 (请参考初级交互设计)。其中有5种交互方式(Action)是专门用来控制Dynamic Panel的，分别是: Set Panel state(s) to State(s)：将某个Dynamic Panel的State设定为该Panel的显示状态 Show Panel(s)：显示(设为visible) 一或多个Dynamic Panel Hide Panel(s)：隐藏一或多个Dynamic Panel
