Axure使用教程（二）、动态面板

动态面板可以设置多个状态，可以通过设置动态面板在不同状态间切换来实现复杂功能。比如弹出框、下拉菜单、轮播等。

一、如何创建、编辑、取消动态面板

1、从左侧部件库中拖进一个动态面板来。

2、双击动态面板，可以编辑动态面板。
如下图，出现动态面板弹出框，可以命名动态面板名称。另外选中State，点击可修改状态名称，双击可进入State编辑状态。
如果需要新增状态，点击下图中的加号。

3、如果想取消动态面板，怎么操作？ Axure7.0之后的版本支持取消功能。只要选中面板右键选择Break Away First State，这样就能成功脱离动态面板

二、动态面板实现弹出框、下拉菜单

弹出框和下拉菜单实现类似。只是弹出框需要遮罩层效果，下拉菜单不需要。
这里我还有个没有实现的点：点击遮罩层可以隐藏弹出框，或点击空白处可以隐藏下拉菜单。（有处理方法的欢迎评论留言）

1. 输入好需要点击按钮后跳出弹窗的页面；

2、添加好弹出框内容，右键选择“转换为动态面板”。并将动态面板命名为“确认删除框”

3、将动态面板放置到合适位置。在工具栏上，将弹出框向后堆叠（点击Back），这样不会遮挡页面其他内容。另外，勾选隐藏或右键点击隐藏。

4、点击添加交互用例，鼠标单击时显示动态面板“确认删除框”。然后勾选“Bring to Front”，这样弹出框出现时能堆叠在最前面。

如果希望弹出框出现时，有遮罩层的效果，选择选项“treat as lightbox”。

最终效果如下图：

三、动态面板如何设置滚动条

选中动态面板，右键选择Scrollbars，选择你需要的滚动形式。

另外右键菜单中Fit to Content是勾选状态，记得去掉。勾选表示动态面板宽高是由内容决定的，因此即使设置Scrollbar也不会出现滚动条

四、如何实现图片轮播等定时事件
使用场景：图片轮播事件
步骤：
1）添加动态面板，并添加两个状态，分别命名为“插花”和“自然花景”。
2）点击“插花”状态，进入编辑。从元件库拖入图片到“插花”状态，拖入后点击图片元件，将图片替换为实际图片。还可以设置图片大小

3）“自然花景“状态编辑和上一个步骤类似
4）点击页面空白区，点击添加OnPageLoad事件。设置Set Panel Sate为Next。并勾选Wrap from to Last，这样可以重复播放。并可以设置状态切换间隔时间。

五、如何制作折叠菜单
比如后台管理模块需要包含：日志（系统日志、用户日志）、系统（系统设置、系统版本与升级）、用户管理（用户维护、用户权限管理）
1、基础准备
1）拖进一个矩形，宽度设置为 250 px，高度为 45px。并将背景色设置为#545c64，字体颜色设置为#ffffff。并拖入Label，并设置文本“日志”。另外添加一个展开图标。选中文本、矩形、图标，右键组合，并命名为“一级菜单_日志”。
2）拖进一个矩形，同样宽度为 250 px ，高度为 40 px 。背景色为 #ffffff，字体颜色设置为#333333.。并拖入Label，并设置文本“系统日志”。同样将文本和矩形组合，并命名为“二级菜单_系统日志”。
复制“二级菜单_系统日志” ，分别叫“二级菜单_用户日志 ” 。
2、设置交互样式
1）选中一级菜单，点击交互区-->点击Properties ，选择鼠标悬停 – 填充颜色 – 色值为 #ffd04b、然后再选选中 – 填充颜色 – 色值 #ffd04b。

2）二级菜单设置类似。选中所有二级菜单，点击交互区-->点击Properties ，选择鼠标悬停 – 填充颜色 – 色值为 #409eff、然后再选选中 – 填充颜色 – 色值 #409eff。
3、设置交互用例
1）选中所有二级菜单，右键选择Convert to Dynamic Panel，命名为“二级菜单动态面板_日志”，并隐藏该动态面板。
2）选中“二级菜单_系统日志”，添加点击交互事件。设置选中“一级菜单_日志”为选中状态，并将当前二级菜单二级菜单设置为true。
（注意这里要注意事件的顺序。如果调换顺序，最终效果将无法高亮一级菜单。猜测是跟后面将所有的一级菜单组合成到同一Selection Group有关。同一Selection Group的元件是互斥的，但为什么会导致无法高亮还没想明白）

其他二级菜单和“二级菜单_系统日志”的事件一样，只要将事件复制黏贴就行了。
3）实现选中互斥
现在二级菜单选中高亮已经实现了。但是逐个点击二级菜单，发现被点击过的二级菜单都是高亮状态。我们希望实现互斥选中，只有一个菜单是高亮状态。
选中所有二级菜单，右键选择Assign Selection Group，并设置Group名称。这样就能实现选中互斥，即二级导航只能同时选中一个。

4）实现点击一级菜单时，二级菜单显示在一级菜单下方
点击“一级菜单_日志”。设置鼠标单击时 – 设置面板状态 – 可见性，将可见性设置为显示。勾选上Bring to Front，将面板置于顶层；在More Options下选择向下推动面板

5）制作多个菜单项
选中所有元件，右键组合成菜单项。复制两份，黏贴并按顺序排放。修改下文本内容。
另外，一级菜单也要实现互斥选中。逐个找到每个菜单项下的一级菜单，右键选择Selection Group，保存到名称为“一级菜单”的选项组中。

4、菜单加上页面链接

上面的菜单还不能实现页面跳转，现在要加上这个功能。
1）加链接
先给所有二级菜单加上页面链接。选中“二级菜单_系统日志”，增加事件用例：

其他二级菜单也同样加上链接。但是发现加上链接后，选中没有高亮效果了。因为页面会重新加载。
2）设置页面跳转后菜单高亮，并展开选中的一级菜单
进入到具体的页面，比如用户日志页面，添加onPageLoad事件，在页面加载后给菜单设置高亮，并展开选中菜单。添加了三个操作：

将“一级菜单_日志”设置为选中状态；
将“二级菜单_用户日志”设置为选中状态；
显示“二级菜单动态面板_日志”，动态面板向下推动显示，并置于顶层。

点击用户日志，会跳转到用户日志页面，呈现效果如下：

六、参考文章
1、Axure 动态面板如何添加为弹出框：https://www.jianshu.com/p/389b762380e1
2、Axure 教程：制作折叠菜单：http://www.woshipm.com/rp/1088033.html

Axure使用教程（二）、动态面板相关推荐

【Axure原型图】——动态面板
Axure是很早之前就用过的软件,只是当时并没有深究,但最近在画原型图的时候,发现自已以前会的那点儿皮毛着实干不了啥,仅仅需要修改一下已有的图形,可我却不知道如何下手,不得不重新拾起被遗漏的文件夹,重 ...
Axure8.0教程：动态面板多级联动
动态面板在Axure原型设计中,可以说是应用最广泛的了.本次课程我们学习用动态面板制作多级联动效果. 原型预览及下载地址:https://8ewqz4.axshare.com/#g=1 一.制作交互效 ...
axure rp 9 嵌套动态面板拖动
嵌套的动态面板,里外两层都有拖动事件时,只会触发内部动态面板的拖动事件,而不会触发外部动态面板的拖动事件.不像html那样冒泡. 解决方案:内层动态面板的拖动事件中手工触发外部动态面板的拖动事件.
Axure rp9的使用——动态面板
一.动态面板 1.面板折叠我们是需要在做好动态页面后,有两个面板页面,即一个展开一个折叠. 这就是前期我们准备折叠的部分, 接下来返回,对面板添加交互--页面点击时--设置面板状态,设置动作如下就 ...
Axure RP 7.0 - 动态面板的展开和折叠
下面是一个控制面板跟随展开和移动的用例: 第一步:创建一个矩形和一个动态面板: 第二步:编辑动态面板的第一层,添加两个矩形和两个控制面板: 第三步:编辑第二步图中的第一个控制面板: 第四步:编辑第二步 ...
axure内联框架和动态面板_Axure教程:如何使用动态面板？动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板动态面板是a ...
1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解手动制作滚动条的原理 2. 掌握鼠标悬停在本案例中的用法一.成品效果 Axure ...
1.4_16 Axure RP 9 for mac 高保真原型图 - 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解元件库,会使用元件库中的成品进行改造 2. 掌握在概要模块的使用技巧一.成品效果 ...
1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解深色模式的实现原理 2. 掌握在概要模块中,显示/隐藏对象 3. 掌握置于顶 ...
Axure动态面板使用，简单的交互
在Axure中如何使用动态面板将动态面板拖拽到工作区,并设置为合适大小, 双击动态面板双击之后,周围变色,动态面板高亮,点击顶部的state1,添加状态, 添加很多的新的面板设置完成之后点击右上 ...

Axure使用教程（二）、动态面板

Axure使用教程（二）、动态面板相关推荐

最新文章

热门文章