Axure快速原型设计

Axure快速原型设计程娜2009年1月24

一.认识AxureRP 二.AxureRP基本操作 三.架构图&流程图 四.互动设计 五.公司范例

一.认识Axure RP1. 什么是Axure RP 2. Axure RP可以帮助哪些人 3. 如何学习Axure RP的操作

1.什么是Axure RPAxure RP是一个快速绘制线框图和原型的工具。

2.Axure RP可以帮助哪些人产品经理是否碰到了当自己收集了客户意见后出了一份word文档,交给客户看,结果 可能因为一份文档要花比较多的时间去看，客户可能没有时间和精力去认真去看去 理解，所以和客户沟通起来会比较困难。

项目经理和开发人员，设计大家交流项目工作的时候。也只是一份文档，或者简单 的用excel visio 画的图，这样的图并不能够准确的表达一些页面上的元素。比如 说，哪个地方是个下拉框。哪个地方是个输入框，或者对输入框有什么限制等情况。 都没有办法在那些图上能够准备的表达出来。所以项目组成员之间的沟通也得多一 些时间。axure快速原型设计就能帮助大家，快速的出一份原型。让您和别人的沟通变得更 加轻松。

3.如何学习Axure RP的操作如果您本身已经会使用PowerPoint或者Visio,您可以很快学会AxureRP的 操作。 学习AxureRP的最好方式就是下载安装，直接去体验，任意的玩一玩各种功 能，然后试著按下[F5]输出成Prototype。 或者您也可以下载我们提供的AxureRP范例，打开这些范例的RP档(AxureRP 专属的Project File),然后试著按下[F5]输出成Prototype。

一般情况，AxureRP初次使用者大约花上1-2小时就学会基本操作，并开始 应用到实际的工作上。

二.AxureRP基本操作 示意图及註解 初级互动设计 使用共用区块 (Master) 输出网站/应用程式原型 输出规格文件(Word)

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) 窗格：互动的范围很广，从最基本的超连结、popups,一直到动态显示和隐藏widget。您可以在这个窗格中定义Widget的互动。

物件註解(Annotation) 窗格： 您可以为Widget加上註解来指定功能，您可 以在这个窗格中增加和自订Widget的註解。网页说明及互动(Pages Notes & Interactions)窗格：您可以在这个窗格中 加入网页层级的说明与互动效果到设计中。

示意图及註解1. 2. 3. 4. 5. 定义Sitemap 以介面物件(Widgets)绘製示意图(Wireframe) 撰写物件註解(Annotation ) 撰写网页说明(Page Notes ) 秘技(Quick Tips)

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

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)的方式来新增物件。移动物件(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 的类型而有所不同。

初级交互设计

1. 交互(Interaction) 2. 定义基本连结 3. 动作型态(Action)及实际动作(Action Description) 4. 多重条件(Multiple Cases ) 5. 网页层级的交互: OnPageLoad 6. 秘技(Quick Tips)

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

触发事件(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触发事件。

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中输入的值或变量值来执行动作，这个主题将会在第六章高 级交互设计做深入的说明。