axure教程十一如何控制Dynamic Panel.docx

1、axure教程十一如何控制Dynamic Panelaxure教程(十一)如何控制Dynamic Panelaxure发表于227天 21小时 36分钟前来源：标签：Dynamic PanelaxureAxure教程控制Dynamic Panel1. Axure RP实现更丰富的交互设计2. 认识Dynamic Panel Widget3. 编辑Dynamic Panel 的状态4. 预设Dynamic Panel的显示/隐藏5. 示范-以Click来开关Dynamic Panel1. Axure RP实现更丰富的交互设计网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。不管是

2、AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA(Rich Internet Application)的技术，能够让网站介面更丰富，展现更优质的人机交互。同时，这个趋势也挑战了传统的文书软件或绘图软件，当这些软件受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的交互方式表达清楚并设计出来。Axure RP与其它的wireframe软件，最大的差异在于能够进行交互设计(Interaction Design)，且可以立即将结果呈现于prototype上，而不是只有文字叙述。更棒的一点是，学习Axure RP的交互设计，您并不

3、需要学习HTML或Java Script语法，只要透过一些设定与操作，便可以完成多样而创新的交互介面设计。在Axure RP设计出来的Prototype中，最简单的交互设计是网页连结，透过鼠标的click来串起使用者与网站的交互流程。然而，真正发挥Axure RP在交互设计上的惊人特色，并不是只有连结这么简单的交互，您可以藉由学习Dynamic Panel (动态面板)对象的操作与控制，来做到更丰富更友善的交互介面设计。2. 认识Dynamic Panel WidgetDynamic Panel (动态面板) 这种对象是专门用在设计Prototype动态功能的Widget，Dynamic Pa

4、nel可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示Dynamic Panel来达成交互介面的整个表现。就像其它Widget一样，Dynamic Panel可以用拖放的方式从Wireframe窗格加入到画布中。学习Dynamic Panel的交互设计之前，有2个重要的概念必须先认识：(1) Dynamic Panel (动态面板)：一种透明的对象，本身可以包含很多个状态(State)，而每个状态都是一个小网页。被放置在最上层的状态就是该面板的长相。(2) State (状态)：每个状态都是一个小网页，而这个小网页的边界与大小，与所属的

5、Dynamic Panel大小相同。不同的State可以重迭在同一个Dynamic Panel里头，唯有被控制放在最上层的State，才会呈现于Prototype的画面中。以Axure RP所设计出来的多样交互介面，大多藉由各种触发事件(Event)来控制Dynamic Panel显示或消失，或控制哪个State在最上层来仿真出实际的交互介面。3. 编辑Dynamic Panel 的State(状态)已经摆放到画布中的Dynamic Panel，直接在上头快速点鼠标左键两下，会开启Dynamic Panel State Manager对话框。在这个对话窗口中，您可以新增State、更改Stat

6、e名称、调整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)，作

7、法是在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对话框中设定 (请参考初级交互设计)。其中

8、有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. 示范

9、-以Click来开关Dynamic Panel下载这个示范rp檔(MyFirstPanel.zip, 52k)教学影片 - 开关Dynamic Panel交互设计 51秒要了解Dynamic Panel的交互控制，我们先来模拟一个Click的效果 - 当鼠标Click页面上的矩形时，会出现一个讯息窗口，再Click一次时，又把讯息窗口隐藏起来。换句话说，我们将藉由鼠标Click来控制Dynamic Panel的显示与隐藏。首先我们先在画布上放一个矩形对象。接下来放置一个Dynamic Panel，并且编辑这个Panel唯一的预设状态(State1)。在State1(状态)的wireframe上

10、，随意加入一些文字，以供辨认。再把Dynamic Panel的显示状态，设定为隐藏(Hidden)。然后，在矩形对象上增加一个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 V

11、isibility for Panel。如下图：接下来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。(如下图)如果您曾经给Dynamic Panel有意义的名称，就可以在Select P

12、anel时看到被您命名过的Panel。选择Dynamic Panel时，Dynamic Panel 会以Annotations & Interactions 窗格中所给予的Label做为识别，如果没有指定的话，Dynamic Panel 会预设标示为”Unlabeled”。接下来，就可以输出Prototype了，按下F5或选择 Generate Prototype，将刚刚设计过的简易交互介面，输出到浏览器上进一步检视，当鼠标click时，您所设计的那个Dynamic Panel是否会消失/出现 (如下图)。当您顺利完成这个Dynamic Panel的设定之后，非常恭喜！您已经成功进阶到Axur

13、e RP中级交互设计了，随着Dynamic Panel的各种交互设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的交互介面。 一. 认识Axure RP 二. 下载 / 安装 o 安装授权序号 三. Axure RP基本操作 o 示意图及批注o 初级交互设计o 使用共享区块 (Master)o 输出网站/应用程序原型o 输出规格文件(Word) 四. 架构图&流程图 o 1-click绘制架构图o 流程图&连接线 五. 中级交互设计 o 控制Dynamic Panelo 鼠标移入移出及图像变换的交互设计o 设计多层选单 首页 在线教程 五. 中级交互设计 控制Dynamic Pa

14、nel控制Dynamic Panel1. Axure RP实现更丰富的交互设计2. 认识Dynamic Panel Widget3. 编辑Dynamic Panel 的状态4. 预设Dynamic Panel的显示/隐藏5. 示范-以Click来开关Dynamic Panel6. 教学影片教学影片 - 开关Dynamic Panel交互设计 51秒教学影片 3分55秒1. Axure RP实现更丰富的交互设计网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA(Ric

15、h Internet Application)的技术，能够让网站介面更丰富，展现更优质的人机交互。同时，这个趋势也挑战了传统的文书软件或绘图软件，当这些软件受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的交互方式表达清楚并设计出来。Axure RP与其它的wireframe软件，最大的差异在于能够进行交互设计(Interaction Design)，且可以立即将结果呈现于prototype上，而不是只有文字叙述。更棒的一点是，学习Axure RP的交互设计，您并不需要学习HTML或Java Script语法，只要透过一些设定与操作，便可以完成多样而创新的交互介面设计。在Axur

16、e RP设计出来的Prototype中，最简单的交互设计是网页连结，透过鼠标的click来串起使用者与网站的交互流程。然而，真正发挥Axure RP在交互设计上的惊人特色，并不是只有连结这么简单的交互，您可以藉由学习Dynamic Panel (动态面板)对象的操作与控制，来做到更丰富更友善的交互介面设计。2. 认识Dynamic Panel WidgetDynamic Panel (动态面板) 这种对象是专门用在设计Prototype动态功能的Widget，Dynamic Panel可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示Dy

17、namic Panel来达成交互介面的整个表现。就像其它Widget一样，Dynamic Panel可以用拖放的方式从Wireframe窗格加入到画布中。学习Dynamic Panel的交互设计之前，有2个重要的概念必须先认识：(1) Dynamic Panel (动态面板)：一种透明的对象，本身可以包含很多个状态(State)，而每个状态都是一个小网页。被放置在最上层的状态就是该面板的长相。(2) State (状态)：每个状态都是一个小网页，而这个小网页的边界与大小，与所属的Dynamic Panel大小相同。不同的State可以重迭在同一个Dynamic Panel里头，唯有被控制放在最

18、上层的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

19、对话框中选择一个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

20、，这样就可以隐藏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(

21、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)教学影

22、片 - 开关Dynamic Panel交互设计 51秒要了解Dynamic Panel的交互控制，我们先来模拟一个Click的效果 - 当鼠标Click页面上的矩形时，会出现一个讯息窗口，再Click一次时，又把讯息窗口隐藏起来。换句话说，我们将藉由鼠标Click来控制Dynamic Panel的显示与隐藏。首先我们先在画布上放一个矩形对象。接下来放置一个Dynamic Panel，并且编辑这个Panel唯一的预设状态(State1)。在State1(状态)的wireframe上，随意加入一些文字，以供辨认。再把Dynamic Panel的显示状态，设定为隐藏(Hidden)。然后，在矩形对象

23、上增加一个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。如下图：接下来step 3: Edit the Action descrip

24、tion (click an underlined value to edit) - 这句话的意思是，去点选有加底线的项目进一步编辑。于是我们接着click Panel这个单字，然后会看到弹出一个Select Panels对话框，里头只有一个叫做”My First Panel”的项目，把它勾选起来。此时在step 3会出现Toggle Visibility for My First Panel。(如下图)如果您曾经给Dynamic Panel有意义的名称，就可以在Select Panel时看到被您命名过的Panel。选择Dynamic Panel时，Dynamic Panel 会以Annota

25、tions & Interactions 窗格中所给予的Label做为识别，如果没有指定的话，Dynamic Panel 会预设标示为”Unlabeled”。接下来，就可以输出Prototype了，按下F5或选择 Generate Prototype，将刚刚设计过的简易交互介面，输出到浏览器上进一步检视，当鼠标click时，您所设计的那个Dynamic Panel是否会消失/出现 (如下图)。当您顺利完成这个Dynamic Panel的设定之后，非常恭喜！您已经成功进阶到Axure RP中级交互设计了，随着Dynamic Panel的各种交互设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的交互介面