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

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

《axure教程十一如何控制Dynamic Panel.docx》由会员分享，可在线阅读，更多相关《axure教程十一如何控制Dynamic Panel.docx（19页珍藏版）》请在冰点文库上搜索。

axure教程十一如何控制DynamicPanel

axure教程（十一）如何控制DynamicPanel

axure发表于227天21小时36分钟前

来源：

 标签：

DynamicPanelaxureAxure教程

控制DynamicPanel

1.AxureRP实现更丰富的交互设计

2.认识DynamicPanelWidget

3.编辑DynamicPanel的状态

4.预设DynamicPanel的显示/隐藏

5.示范-以Click来开关DynamicPanel

1.AxureRP实现更丰富的交互设计

网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。

不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA（RichInternetApplication）的技术，能够让网站介面更丰富，展现更优质的人机交互。

同时，这个趋势也挑战了传统的文书软件或绘图软件，当这些软件受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的交互方式表达清楚并设计出来。

AxureRP与其它的wireframe软件，最大的差异在于能够进行交互设计（InteractionDesign），且可以立即将结果呈现于prototype上，而不是只有文字叙述。

更棒的一点是，学习AxureRP的交互设计，您并不需要学习HTML或JavaScript语法，只要透过一些设定与操作，便可以完成多样而创新的交互介面设计。

在AxureRP设计出来的Prototype中，最简单的交互设计是网页连结，透过鼠标的click来串起使用者与网站的交互流程。

然而，真正发挥AxureRP在交互设计上的惊人特色，并不是只有连结这么简单的交互，您可以藉由学习DynamicPanel（动态面板）对象的操作与控制，来做到更丰富更友善的交互介面设计。

2.认识DynamicPanelWidget

DynamicPanel（动态面板）这种对象是专门用在设计Prototype动态功能的Widget，DynamicPanel可以包含一或多个状态（State），每个状态本身是一个小页面，藉由控制状态（State）的顺序或隐藏/显示DynamicPanel来达成交互介面的整个表现。

就像其它Widget一样，DynamicPanel可以用拖放的方式从Wireframe窗格加入到画布中。

学习DynamicPanel的交互设计之前，有2个重要的概念必须先认识：

（1）DynamicPanel（动态面板）：

一种透明的对象，本身可以包含很多个状态（State），而每个状态都是一个小网页。

被放置在最上层的状态就是该面板的长相。

（2）State（状态）：

每个状态都是一个小网页，而这个小网页的边界与大小，与所属的DynamicPanel大小相同。

不同的State可以重迭在同一个DynamicPanel里头，唯有被控制放在最上层的State，才会呈现于Prototype的画面中。

以AxureRP所设计出来的多样交互介面，大多藉由各种触发事件（Event）来控制DynamicPanel显示或消失，或控制哪个State在最上层来仿真出实际的交互介面。

3.编辑DynamicPanel的State（状态）

已经摆放到画布中的DynamicPanel，直接在上头快速点鼠标左键两下，会开启「DynamicPanelStateManager」对话框。

在这个对话窗口中，您可以新增State、更改State名称、调整State排序、移除State与编辑State。

在「DynamicPanelStateManager」对话框中选择一个PanelState，然后按下【EditState】钮，会开启这个PanelState的Wireframe以供设计。

或者您可以选择【EditAllStates】钮，一口气把所有的状态页面通通开启。

开启后，您就可以像设计其它Wireframe一样的设计状态页面（State），每个状态页面的侧边蓝色虚线外框就表示DynamicPanel的边界。

4.预设DynamicPanel的显示/隐藏

DynamicPanel可以预设为隐藏（Hidden），作法是在DynamicPanel对象上按鼠标右键，并选择「EditDynamicPanel->SetHidden」，这样就可以隐藏Panel的内容，而且DynamicPanel的屏蔽也会从蓝色变成黄色。

已经预设隐藏的DynamicPanel，可以选择「EditDynamicPanel->SetVisible」来显示DynamicPanel。

DynamicPanel可以藉由接下来所介绍的交互模式，动态控制在Prototype中的显示或隐藏。

AxureRP提供交互设计的实现方式，都在「InteractionCaseProperties」对话框中设定（请参考初级交互设计）。

其中有5种交互方式（Action）是专门用来控制DynamicPanel的，分别是:

∙SetPanelstate（s）toState（s）：

将某个DynamicPanel的State设定为该Panel的显示状态

∙ShowPanel（s）：

显示（设为visible）一或多个DynamicPanel

∙HidePanel（s）：

隐藏一或多个DynamicPanel

∙ToggleVisibilityforPanel（s）：

根据目前的显示状态来显示或隐藏DynamicPanel

∙MovePanel（s）：

移动DynamicPanel，可根据绝对坐标或相对坐标来移动

5.示范-以Click来开关DynamicPanel

　》下载这个示范rp檔（MyFirstPanel.zip,52k）

　》教学影片-开关DynamicPanel交互设计51秒

要了解DynamicPanel的交互控制，我们先来模拟一个Click的效果-当鼠标Click页面上的矩形时，会出现一个讯息窗口，再Click一次时，又把讯息窗口隐藏起来。

换句话说，我们将藉由鼠标Click来控制DynamicPanel的显示与隐藏。

首先我们先在画布上放一个矩形对象。

接下来放置一个DynamicPanel，并且编辑这个Panel唯一的预设状态（State1）。

在State1（状态）的wireframe上，随意加入一些文字，以供辨认。

再把DynamicPanel的显示状态，设定为隐藏（Hidden）。

然后，在矩形对象上增加一个OnClick的InteractionCase。

先选择矩形对象，接着click两下“OnClick”，弹出「InteractionCaseProperties」交互设计的对话框。

分别针对这个对话框中的Step1-3做交互设计的设定：

step1:

Description-预设为Case1，不用变更。

step2:

SelectActions-勾选ToggleVisibilityforPanel（s），此时在step3会出现ToggleVisibilityforPanel。

如下图：

接下来…

step3:

EdittheActiondescription（clickanunderlinedvaluetoedit）-这句话的意思是，去点选有加底线的项目进一步编辑。

于是我们接着clickPanel这个单字，然后会看到弹出一个「SelectPanels」对话框，里头只有一个叫做”MyFirstPanel”的项目，把它勾选起来。

此时在step3会出现ToggleVisibilityforMyFirstPanel。

（如下图）

如果您曾经给DynamicPanel有意义的名称，就可以在SelectPanel时看到被您命名过的Panel。

选择DynamicPanel时，DynamicPanel会以Annotations&Interactions窗格中所给予的Label做为识别，如果没有指定的话，DynamicPanel会预设标示为”Unlabeled”。

接下来，就可以输出Prototype了，按下F5或选择「Generate>Prototype」，将刚刚设计过的简易交互介面，输出到浏览器上进一步检视，当鼠标click时，您所设计的那个DynamicPanel是否会消失/出现（如下图）。

当您顺利完成这个DynamicPanel的设定之后，非常恭喜！

您已经成功进阶到AxureRP中级交互设计了，随着DynamicPanel的各种交互设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的交互介面。

∙一.认识AxureRP

∙二.下载/安装

o安装授权序号

∙三.AxureRP基本操作

o示意图及批注

o初级交互设计

o使用共享区块（Master）

o输出网站/应用程序原型

o输出规格文件（Word）

∙四.架构图&流程图

o1-click绘制架构图

o流程图&连接线

∙五.中级交互设计

o控制DynamicPanel

o鼠标移入移出及图像变换的交互设计

o设计多层选单

∙首页

∙>

∙在线教程

∙>

∙五.中级交互设计

∙>

∙控制DynamicPanel

控制DynamicPanel

1.AxureRP实现更丰富的交互设计

2.认识DynamicPanelWidget

3.编辑DynamicPanel的状态

4.预设DynamicPanel的显示/隐藏

5.示范-以Click来开关DynamicPanel

6.教学影片

　》教学影片-开关DynamicPanel交互设计51秒

　》教学影片3分55秒

1.AxureRP实现更丰富的交互设计

网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。

不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA（RichInternetApplication）的技术，能够让网站介面更丰富，展现更优质的人机交互。

同时，这个趋势也挑战了传统的文书软件或绘图软件，当这些软件受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的交互方式表达清楚并设计出来。

AxureRP与其它的wireframe软件，最大的差异在于能够进行交互设计（InteractionDesign），且可以立即将结果呈现于prototype上，而不是只有文字叙述。

更棒的一点是，学习AxureRP的交互设计，您并不需要学习HTML或JavaScript语法，只要透过一些设定与操作，便可以完成多样而创新的交互介面设计。

在AxureRP设计出来的Prototype中，最简单的交互设计是网页连结，透过鼠标的click来串起使用者与网站的交互流程。

然而，真正发挥AxureRP在交互设计上的惊人特色，并不是只有连结这么简单的交互，您可以藉由学习DynamicPanel（动态面板）对象的操作与控制，来做到更丰富更友善的交互介面设计。

2.认识DynamicPanelWidget

DynamicPanel（动态面板）这种对象是专门用在设计Prototype动态功能的Widget，DynamicPanel可以包含一或多个状态（State），每个状态本身是一个小页面，藉由控制状态（State）的顺序或隐藏/显示DynamicPanel来达成交互介面的整个表现。

就像其它Widget一样，DynamicPanel可以用拖放的方式从Wireframe窗格加入到画布中。

学习DynamicPanel的交互设计之前，有2个重要的概念必须先认识：

（1）DynamicPanel（动态面板）：

一种透明的对象，本身可以包含很多个状态（State），而每个状态都是一个小网页。

被放置在最上层的状态就是该面板的长相。

（2）State（状态）：

每个状态都是一个小网页，而这个小网页的边界与大小，与所属的DynamicPanel大小相同。

不同的State可以重迭在同一个DynamicPanel里头，唯有被控制放在最上层的State，才会呈现于Prototype的画面中。

以AxureRP所设计出来的多样交互介面，大多藉由各种触发事件（Event）来控制DynamicPanel显示或消失，或控制哪个State在最上层来仿真出实际的交互介面。

3.编辑DynamicPanel的State（状态）

已经摆放到画布中的DynamicPanel，直接在上头快速点鼠标左键两下，会开启「DynamicPanelStateManager」对话框。

在这个对话窗口中，您可以新增State、更改State名称、调整State排序、移除State与编辑State。

在「DynamicPanelStateManager」对话框中选择一个PanelState，然后按下【EditState】钮，会开启这个PanelState的Wireframe以供设计。

或者您可以选择【EditAllStates】钮，一口气把所有的状态页面通通开启。

开启后，您就可以像设计其它Wireframe一样的设计状态页面（State），每个状态页面的侧边蓝色虚线外框就表示DynamicPanel的边界。

4.预设DynamicPanel的显示/隐藏

DynamicPanel可以预设为隐藏（Hidden），作法是在DynamicPanel对象上按鼠标右键，并选择「EditDynamicPanel->SetHidden」，这样就可以隐藏Panel的内容，而且DynamicPanel的屏蔽也会从蓝色变成黄色。

已经预设隐藏的DynamicPanel，可以选择「EditDynamicPanel->SetVisible」来显示DynamicPanel。

DynamicPanel可以藉由接下来所介绍的交互模式，动态控制在Prototype中的显示或隐藏。

AxureRP提供交互设计的实现方式，都在「InteractionCaseProperties」对话框中设定（请参考初级交互设计）。

其中有5种交互方式（Action）是专门用来控制DynamicPanel的，分别是:

∙SetPanelstate（s）toState（s）：

将某个DynamicPanel的State设定为该Panel的显示状态

∙ShowPanel（s）：

显示（设为visible）一或多个DynamicPanel

∙HidePanel（s）：

隐藏一或多个DynamicPanel

∙ToggleVisibilityforPanel（s）：

根据目前的显示状态来显示或隐藏DynamicPanel

∙MovePanel（s）：

移动DynamicPanel，可根据绝对坐标或相对坐标来移动

5.示范-以Click来开关DynamicPanel

　》下载这个示范rp檔（MyFirstPanel.zip,52k）

　》教学影片-开关DynamicPanel交互设计51秒

要了解DynamicPanel的交互控制，我们先来模拟一个Click的效果-当鼠标Click页面上的矩形时，会出现一个讯息窗口，再Click一次时，又把讯息窗口隐藏起来。

换句话说，我们将藉由鼠标Click来控制DynamicPanel的显示与隐藏。

首先我们先在画布上放一个矩形对象。

接下来放置一个DynamicPanel，并且编辑这个Panel唯一的预设状态（State1）。

在State1（状态）的wireframe上，随意加入一些文字，以供辨认。

再把DynamicPanel的显示状态，设定为隐藏（Hidden）。

然后，在矩形对象上增加一个OnClick的InteractionCase。

先选择矩形对象，接着click两下“OnClick”，弹出「InteractionCaseProperties」交互设计的对话框。

分别针对这个对话框中的Step1-3做交互设计的设定：

step1:

Description-预设为Case1，不用变更。

step2:

SelectActions-勾选ToggleVisibilityforPanel（s），此时在step3会出现ToggleVisibilityforPanel。

如下图：

接下来…

step3:

EdittheActiondescription（clickanunderlinedvaluetoedit）-这句话的意思是，去点选有加底线的项目进一步编辑。

于是我们接着clickPanel这个单字，然后会看到弹出一个「SelectPanels」对话框，里头只有一个叫做”MyFirstPanel”的项目，把它勾选起来。

此时在step3会出现ToggleVisibilityforMyFirstPanel。

（如下图）

如果您曾经给DynamicPanel有意义的名称，就可以在SelectPanel时看到被您命名过的Panel。

选择DynamicPanel时，DynamicPanel会以Annotations&Interactions窗格中所给予的Label做为识别，如果没有指定的话，DynamicPanel会预设标示为”Unlabeled”。

接下来，就可以输出Prototype了，按下F5或选择「Generate>Prototype」，将刚刚设计过的简易交互介面，输出到浏览器上进一步检视，当鼠标click时，您所设计的那个DynamicPanel是否会消失/出现（如下图）。

当您顺利完成这个DynamicPanel的设定之后，非常恭喜！

您已经成功进阶到AxureRP中级交互设计了，随着DynamicPanel的各种交互设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的交互介面