AxureRPPro中高级交互实例教程.pdf

1、Axure 中级互动设计 1控制 Dynamic Panal 1.Axure RP 实现更丰富的互动设计实现更丰富的互动设计 网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。不管是AJAX或JavaScript，甚至是 Flash、Silverlight、JavaFX，这些都被归类为 RIA(Rich Internet Application)的技术，能够让网站介面更丰富，展现更优质的人机互动。同时，这个趋势也挑战了传统的文书软体或绘图软体，当这些软体受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的互动方式表达清楚并设计出来。Axure RP 与其他的 wir

2、eframe 软体，最大的差异在于能够进行互动设计(Interaction Design)，且可以立即将结果呈现于 prototype 上，而不是只有文字叙述。更棒的一点是，学习 Axure RP 的互动设计，您并不需要学习 HTML 或 Java Script 语法，只要透过一些设定与操作，便可以完成多样而创新的互动介面设计。在 Axure RP 设计出来的 Prototype 中，最简单的互动设计是网页连结，透过滑鼠的 click 来串起使用者与网站的互动流程。然而，真正发挥 Axure RP 在互动设计上的惊人特色，并不是只有连结这么简单的互动，您可以藉由学习 Dynamic Panel

3、(动态面板)物件的操作与控制，来做到更丰富更友善的互动介面设计。2.认识认识 Dynamic Panel Widget Dynamic Panel(动态面板)这种物件是专门用在设计 Prototype 动态功能的 Widget，Dynamic Panel 可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示 Dynamic Panel 来达成互动介面的整个表现。就像其他 Widget 一样，Dynamic Panel 可以用拖放的方式从 Wireframe 窗格加入到画布中。学习 Dynamic Panel 的互动设计之前，有 2 个重要的

4、概念必须先认识：(1)Dynamic Panel(动态面板)：一种透明的物件，本身可以包含很多个状态(State)，而每个状态都是一个小网页。被放置在最上层的状态就是该面板的长相。(2)State(状态)：每个状态都是一个小网页，而这个小网页的边界与大小，与所属的 Dynamic Panel大小相同。不同的 State 可以重叠在同一个 Dynamic Panel 里头，唯有被控制放在最上层的 State，才会呈现于 Prototype 的画面中。以 Axure RP 所设计出来的多样互动介面，大多藉由各种触发事件(Event)来控制 Dynamic Panel 显示或消失，或控制哪个 Sta

5、te 在最上层来模拟出实际的互动介面。3.编辑编辑 Dynamic Panel 的的 State(状态状态)已经摆放到画布中的 Dynamic Panel，直接在上头快速点滑鼠左键两下，会开启Dynamic Panel State Manager对话方块。在这个对话视窗中，您可以新增 State、更改 State 名称、调整 State 排序、移除 State 与编辑 State。在Dynamic Panel State Manager对话方块中选择一个 Panel State，然后按下【Edit State】钮，会开启这个 Panel State 的 Wireframe 以供设计。或者您可以

6、选择【Edit All States】钮，一口气把所有的状态页面通通开启。开启后，您就可以像设计其他 Wireframe 一样的设计状态页面(State)，每个状态页面的侧边蓝色虚线外框就表示 Dynamic Panel 的边界。4.预设预设 Dynamic Panel 的显示的显示/隐藏隐藏 Dynamic Panel 可以预设为隐藏(Hidden)，作法是在 Dynamic Panel 物件上按滑鼠右键，并选择Edit Dynamic Panel-Set Hidden，这样就可以隐藏 Panel 的内容，而且 Dynamic Panel 的遮罩也会从蓝色变成黄色。已经预设隐藏的 Dynam

7、ic 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

8、的显示状态*Show Panel(s)：显示(设为 visible)一或多个 Dynamic Panel*Hide Panel(s)：隐藏一或多个 Dynamic Panel*Toggle Visibility for Panel(s)：根据目前的显示状态来显示或隐藏 Dynamic Panel*Move Panel(s)：移动 Dynamic Panel，可根据绝对座标或相对座标来移动 5.示范示范-以以 Click 来开关来开关 Dynamic Panel 要了解 Dynamic Panel 的互动控制，我们先来模拟一个 Click的效果-当滑鼠 Click页面上的矩形时，会出现一个讯息视

9、窗，再 Click 一次时，又把讯息视窗隐藏起来。换句话说，我们将藉由滑鼠 Click 来控制 Dynamic Panel 的显示与隐藏。首先我们先在画布上放一个矩形物件。接下来放置一个 Dynamic Panel，并且编辑这个 Panel 唯一的预设状态(State1)。在 State1(状态)的 wireframe 上，随意加入一些文字，以供辨认。再把 Dynamic Panel 的显示状态，设定为隐藏(Hidden)。然后，在矩形物件上增加一个 OnClick 的 Interaction Case。先选择矩形物件，接着 click 两下“OnClick”，弹出 Interaction C

10、ase Properties 互动设计的对话方块。分别针对这个对话方块中的 Step 1-3 做互动设计的设定：step 1:Description-预设为 Case 1，不用变更。step 2:Select Actions-勾选 Toggle Visibility for Panel(s)，此时在 step 3 会出现 Toggle Visibility for Panel。如下图：step 3:Edit the Action description(click an underlined value to edit)-这句话的意思是，去点选有加底线的项目进一步编辑。于是我们接着 click

11、 Panel 这个单字，然后会看到弹出一个Select Panels对话方块，里头只有一个叫做”My First Panel”的项目，把它勾选起来。此时在 step 3 会出现Toggle Visibility for My First Panel。(如下图)如果您曾经给 Dynamic Panel 有意义的名称，就可以在 Select Panel 时看到被您命名过的 Panel。选择 Dynamic Panel 时，Dynamic Panel 会以 Annotations&Interactions 窗格中所给予的 Label做为识别，如果没有指定的话，Dynamic Panel 会预设标示为

12、”Unlabeled”。接下来，就可以输出 Prototype 了，按下 F5 或选择Generate Prototype，将刚刚设计过的简易互动介面，输出到浏览器上进一步检视，当滑鼠 click 时，您所设计的那个 Dynamic Panel 是否会消失/出现(如下图)。当您顺利完成这个 Dynamic Panel 的设定之后，非常恭喜！您已经成功进阶到 Axure RP 中级互动设计了，随着 Dynamic Panel 的各种互动设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的互动介面。Axure 中级互动设计 2鼠标移入移出等的互动设计 1.滑鼠移入移出滑鼠移入移出(On

13、MouseEnter/OnMouseOut)在先前初级互动设计(Basic Interaction)一章中，介绍多种 Axure RP 支援的人机介面互动效果。这里我们要介绍其中两个常见的触发事件(Event)：OnMouseEnter-滑鼠的指标移动到物件之上 OnMouseOut-滑鼠的指标移动出物件之外 有许多 Widget 可以使用 OnMouseEnter 和 OnMouseOut 触发事件，当滑鼠移到 Widget 上时会触发 OnMouseEnter 事件，OnMouseOut 事件则发生在滑鼠离开 Widget 时被触发。最常见的运用方式，则是合并 Dynamic Panel

14、来控制比较复杂的功能时，例如：浮动选单、滑过特效和自订 tooltips 等。以左图的互动效果来当例子：当滑鼠移到图片上方时，会自动弹出说明文字框(Dynamic Panel)，当滑鼠移出图片时，说明文字框就会消失。这个互动设计就可透过 OnMouseEnter 和 OnMouseOut 触发事件结合 Dynamic Panel 的控制来达成，设计方式如下图所示。2.变换图像变换图像(Rollover Image)Image Widget 以及 Button Shape Widget 可直接利用 Axure RP 的功能来设计 Rollover Image和 Rollover Style，不需

15、要使用到 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

16、 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 左上角的黑白色方块来预览变换状态。Axure 中级互动设计 3设计多层选单 1.认识选单物件认识选单物