五. 中级交互设计

控制Dynamic Panel

1. Axure RP实现更丰富的交互设计

网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。

不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA(Rich Internet Application)的技术，能够让网站介面更丰富，展现更优质的人机交互。

同时，这个趋势也挑战了传统的文书软件或绘图软件，当这些软件受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的交互方式表达清楚并设计出来。

Axure RP与其它的wireframe软件，最大的差异在于能够进行交互设计(Interaction Design)，且可以立即将结果呈现于prototype上，而不是只有文字叙述。更棒的一点是，学习Axure RP的交互设计，您并不需要学习HTML或Java Script语法，只要透过一些设定与操作，便可以完成多样而创新的交互介面设计。

在Axure RP设计出来的Prototype中，最简单的交互设计是网页连结，透过鼠标的click来串起使用者与网站的交互流程。然而，真正发挥Axure RP在交互设计上的惊人特色，并不是只有连结这么简单的交互，您可以藉由学习Dynamic Panel (动态面板)对象的操作与控制，来做到更丰富更友善的交互介面设计。

2. 认识Dynamic Panel Widget

Dynamic Panel (动态面板) 这种对象是专门用在设计Prototype动态功能的Widget，Dynamic Panel可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示Dynamic Panel来达成交互介面的整个表现。

就像其它Widget一样，Dynamic Panel可以用拖放的方式从Wireframe窗格加入到画布中。

axure dynamic panel

　

学习Dynamic Panel的交互设计之前，有2个重要的概念必须先认识：

(1) Dynamic Panel (动态面板)：

一种透明的对象，本身可以包含很多个状态(State)，而每个状态都是一个小网页。被放置在最上层的状态就是该面板的长相。

(2) State (状态)：

每个状态都是一个小网页，而这个小网页的边界与大小，与所属的Dynamic Panel大小相同。不同的State可以重迭在同一个Dynamic Panel里头，唯有被控制放在最上层的State，才会呈现于Prototype的画面中。

以Axure RP所设计出来的多样交互介面，大多藉由各种触发事件(Event)来控制Dynamic Panel显示或消失，或控制哪个State在最上层来仿真出实际的交互介面。

3. 编辑Dynamic Panel 的State(状态)

已经摆放到画布中的Dynamic Panel，直接在上头快速点鼠标左键两下，会开启「Dynamic Panel State Manager」对话框。在这个对话窗口中，您可以新增State、更改State名称、调整State排序、移除State与编辑State。 Axure dynamic panel state manager在「Dynamic Panel State Manager」对话框中选择一个Panel State，然后按下【Edit State】钮，会开启这个Panel State的Wireframe以供设计。或者您可以选择【Edit All States】钮，一口气把所有的状态页面通通开启。

开启后，您就可以像设计其它Wireframe一样的设计状态页面(State)， 每个状态页面的侧边蓝色虚线外框就表示Dynamic Panel 的边界。

4. 预设Dynamic Panel的显示/隐藏

Axure Dynamic Panel HiddenDynamic Panel 可以预设为隐藏(Hidden)，作法是在Dynamic Panel 对象上按鼠标右键，并选择「Edit Dynamic Panel->Set 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
  • Toggle Visibility for Panel(s)：根据目前的显示状态来显示或隐藏Dynamic Panel
  • Move Panel(s)：移动Dynamic Panel，可根据绝对坐标或相对坐标来移动

5. 示范-以Click来开关Dynamic Panel

　》下载这个示范rp檔(MyFirstPanel.zip, 52k) 　》教学影片 – 开关Dynamic Panel交互设计 51秒

要了解Dynamic Panel的交互控制，我们先来模拟一个Click的效果 – 当鼠标Click页面上的矩形时，会出现一个讯息窗口，再Click一次时，又把讯息窗口隐藏起来。换句话说，我们将藉由鼠标Click来控制Dynamic Panel的显示与隐藏。

首先我们先在画布上放一个矩形对象。接下来放置一个Dynamic Panel，并且编辑这个Panel唯一的预设状态(State1)。

axure dynamic panel edit state

　

在State1(状态)的wireframe上，随意加入一些文字，以供辨认。

axure dynamic panel edit state1

　

再把Dynamic Panel的显示状态，设定为隐藏(Hidden)。

axure hide dynamic panel

　

然后，在矩形对象上增加一个OnClick的Interaction Case。先选择矩形对象，接着click两下 『OnClick』，弹出「Interaction Case Properties」交互设计的对话框。

分别针对这个对话框中的Step 1- 3做交互设计的设定：

step 1: Description – 预设为 Case 1，不用变更。

step 2: Select Actions – 勾选Toggle Visibility for Panel(s)，此时在step 3会出现 Toggle Visibility for Panel。如下图：

axure dynamic panel edit action

　

接下来…

step 3: Edit the Action description (click an underlined value to edit) – 这句话的意思是，去点选有加底线的项目进一步编辑。于是我们接着click Panel这个单字，然后会看到弹出一个「Select Panels」对话框，里头只有一个叫做』My First Panel』的项目，把它勾选起来。此时在step 3会出现Toggle Visibility for My First Panel。(如下图)

axure dynamic panel select panel

　

如果您曾经给Dynamic Panel有意义的名称，就可以在Select Panel时看到被您命名过的Panel。选择Dynamic Panel时，Dynamic Panel 会以Annotations & Interactions 窗格中所给予的Label做为识别，如果没有指定的话，Dynamic Panel 会预设标示为』Unlabeled』。

接下来，就可以输出Prototype了，按下F5或选择 「Generate > Prototype」，将刚刚设计过的简易交互介面，输出到浏览器上进一步检视，当鼠标click时，您所设计的那个Dynamic Panel是否会消失/出现 (如下图)。

axure dynamic panel togglel

　

当您顺利完成这个Dynamic Panel的设定之后，非常恭喜！您已经成功进阶到Axure RP中级交互设计了，随着Dynamic Panel的各种交互设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的交互介面。

鼠标移入移出及图像变换的交互设计

1. 鼠标移入移出(OnMouseEnter/OnMouseOut)

在先前初级交互设计(Basic Interaction)一章中，介绍多种Axure RP支持的人机介面交互效果。这里我们要介绍其中两个常见的触发事件(Event)：

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

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

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

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

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中，利用鼠标滑过影像上的黑白色方块来预览变换影像。

Axure 变换影像(Rollover Image) 　

 

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的变换样式。 Axure 变换样式(Rollover Style) 　

 

Axure 变换样式(Rollover Style) Window变换的样式(如左图)包括：

  • 字型 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)。Axure 选单对象 Menu Widgets您可以在Widgets窗格中找到两种选单物件：

  • Menu (Vertical) – 垂直选单
  • Menu (Horizontal) – 水平选单

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

下图展示的动画则是已经完成设定的多层选单： Axure Menu Demo 选单动态展示

 

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的选项上，按鼠标右键会出现如下图功能选单： Axure 新增选单选项 Add Menuitem

 

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

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

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

 

设定选项间距(Padding)

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

Axure 预设选单 　

 

3. 设定选单的变换样式 (Rollover Style)

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

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

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

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

Axure 设定选单的变换样式 (Menu Rollover Style)

4. 秘技 (Quick Tips)

秘技 1. 优先设定母选单(Root Menu)的样式：

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

posted @ 2014-05-07 17:41  roilat  阅读(387)  评论(2)    收藏  举报