物联网技术专业入门教程：如何使用Axure动态面板详解？【学到牛牛】IT培训

作者：学到牛牛 周磊

动态面板简介

图1-1 动态面板

动态面板（如图1-1所示）是Axure原型制作中使用非常频繁的一个元件，它主要用于实现动态的交互效果，它由一个或多个状态组成，每个状态就是一个页面，可以通过事件来控制动态面板的状态。

通过以下案例讲解动态面板的使用：

1、动态面板的切换

动态面板支持在同一个区域内放置多个状态的内容，每个状态的内容就如一个页面，可以使用点击事件切换不同的状态，如图2-1所示，当点击“红”按钮时，动态面板将切换到红的状态，当点击“黄”按钮时，动态面板将切换到黄的状态，点击“绿”按钮时动态面板切换到绿的状态。

图2-1 动态面板的切换

具体操作

1）使用按钮元件分别创建出内容为红、黄、绿三个按钮，如图2-2所示。

图2-2 创建按钮

2）使用动态面板元件创建动态面板，使用按钮以动态面板对齐，并分布均匀，如图2-3所示。

图2-3 创建动态面板

3）根据按钮对动态面板设置三种状态，分另为红、黄、绿，如图2-4所示。

图2-4 设置动态面板状态

4）分别对动态面板的不同状态设置如图2-5、2-6和2-7所示。

图2-5 “红”状态内容

图2-6 “黄”状态内容

图2-7 “绿”状态内容

5）分别对红、黄、绿按钮添加点击事件，用来切换不同的动态画板状态，如图2-8和2-9所示。

图2-8 设置鼠标单击事件

图2-9 设置用例

2、轮播图

轮播图在同一个窗口中，通过鼠标点击、滑动或者自动加载多张图片，这些图片切换的过程就是轮播图。以下例子通过自动加载触发轮播图及图标，动态效果如图3-1所示。

图3-1 轮播图

具体操作

1）在页面中分别创建出两个动态面板，大概尺寸及位置如图3-2所示。

图3-2 创建两个动态面板

2、分别给两个动态面板创建不同的状态，如图3-3和3-4所示。

图3-3 轮播图模块的状态页面

图3-4 标签的状态页面

3、对轮播图模块的状态页面按图3-5内容编辑。

图3-5 轮播图模块的状态页面内容

4）对标签的状态页面按图3-6内容编辑。

图3-6 标签的状态页面内容

5）对整个页面设置“页面载入时”事件，如图3-7所示。

图3-7 设置载入时事件

6）设置动态画板动作状态用例，如图3-8所示。

图3-8 动态画板用例

3、手机动态解锁

手机动态解锁的原型设计，通过滑动滑块，呈现解锁效果，滑块未接触到右边热区时可以左右自游滑动，在触碰到右边热区后解锁成功，进入到解锁后的界面；在解锁后的界面上点击微信图标可进入到微信“发现”页面；在整个原型中点击底部返回按钮，可以返回到解锁前的界面，动态效果如图4-2所示。

图4-2 手机动态解锁

具体操作

1）创建手机模块组合，如图4-2所示。

图4-2 手机模块

2）创建显示内容的动态画板，并设置“滑块”、“解锁后页面”和“微信界面”三种状态，如图4-3和4-4所示。

图4-3 创建动态画板

图4-4 创建面板状态

3）制作“滑锁”状态面板的页面内容，如图4-5所示。

4）制作“解锁后页面”状态面板的页面内容，如图4-6所示。

图4-6 解锁后页面的内容

5）制作“微信界面”状态面板的页面内容，如图4-7所示。

图4-7 微信界面页面的内容

6）选中动态画板，设置拖动事件和碰撞到热图后的动作，如图4-8所示。

图4-8 设置拖动时事件

7）设置拖动时的触发条件，如图4-9所示。

图4-9 触发条件

8）设置触发条件后的用例，如图4-10所示。

图4-10 触碰后的用例

9）设置“滑块”元件滑动效果，如图4-11所示。

图4-11 滑动效果用例

10）在“解锁后页面”状态页面中设置微信鼠标点击事件，如图4-12所示。

图4-12 设置鼠标单击事件

11）设置单击微信跳转到微信页面的事件用例，如图4-13所示。

图4-13 微信跳转用例

12）设置返回按钮事件，如图4-14所示。

图4-14 设置返回单击事件

13）设置单击“返回按钮”返回到动态面板“滑块”状态页面，如图4-14所示。

图4-14 返回到“滑锁”状态用例

14）设置返回到到动态面板“滑块”状态页面后，将滑块元件归位，如图4-15所示。

图4-15 滑块元件归位