Axure自学实例文档(初).pdf

Axure 中级互动设计1——控制Dynamic Panel 控制Dynamic Panel 1. Axure RP 实现更丰富的互动设计 2. 认识Dynamic Panel Widget 3. 编辑Dynamic Panel 的状态 4. 预设Dynamic Panel 的显示/隐藏 5. 示范-以Click 来开关Dynamic Panel 6. 教学影片 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 窗格加入到画布中。 学习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