Axure交互设计实例介绍

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 ...