[Axure交互设计实例介绍.docx

Axure中级互动设计 1——控制Dynamic Panel控制Dynamic Panel1. Axure RP实现更丰富的互动设计2. 认识Dynamic Panel Widget3. 编辑Dynamic Panel 的状态4. 预设Dynamic Panel的显示/隐藏5. 示范-以Click来开关Dynamic Panel6. 教学影片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 WidgetDynamic Panel (动态面板) 这种物件是专门用在设计Prototype动态功能的Widget，Dynamic Panel可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示Dynamic Panel来达成互动介面的整个表现。就像其他Widget一样，Dynamic Panel可以用拖放的方式从Wireframe窗格加入到画布中。学习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。在「Dynamic Panel State 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 Hidden」，这样就可以隐藏Panel 的内容，而且Dynamic Panel的遮罩也会从蓝色变成黄色。已经预设隐藏的Dynamic Panel，可以选择「Edit Dynamic Panel-Set Visible」来显示Dynamic Panel。Dynamic Panel 可以藉由接下来所介绍的互动模式，动态控制在Prototype 中的显示或隐藏。 Axure RP提供互动设计的实现方式，都在「Intera