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 中的显示或隐藏