目录
一. 什么是动态面板
动态面板是Axure中最常用的组件之一。专门用于设计原型中的动态功能,可以让你实现高级的交互功能,实现原型的高保真度。它可以包含一个或多个状态,每个状态就是一个页面可包含一系列控件 (任何时候都只有一个状态可见),可以随意编辑,通过控制状态的切换或状态的显示/隐藏,实现一些常见的交互效果。
二. 了解动态面板
位于元件中的基本元件里面,它的图标也很特殊,很形象的表示出其多状态管理的特点。
1. 拖出来以后双击进入状态编写中。
2. 点击状态就进入到默认状态里,在画布或者概要里均可以去添加和修改状态名。
3. 点击隔离指的是只显示动态面板里的内容,不显示动态面板外面的内容。
三. 轮播图的实现
3.1 操作
1. 将图片元件放置到动态面板中。
2. 让动态面版自适应元件的大小,不然元件比动态面板大,对于我们画原型图是十分不利的
3. 想要实现几张图片轮播,就建立几个状态。并将各图片直接放入各状态中 (可以右键使用重复状态来快速复制状态) 。
4. 帮动态面板取个名字
5. 开始设置交互事件:
- 首先设置交互,点击动态面板。
- 点击右侧功能栏的交互,并新建交互,添加动态面板事件已载入,添加设置面板状态操作:
双击进入详细的操作界面,设置动态面板运行的方式 (下一张的元件交互与上一张的方法相同)
3.2 演示效果
四. 多种方式登录
4.1 操作
1. 注意:矩形要在动态面板中,把动态面板放到账号登录的位置,选择自适应模式
2. 复制状态 ,把动态面板放到短信登录的地方,然后给对应的元件还有动态面板取名
3. 新建交互,选择交互的方式,如图所示:
4. 把账号以及短信登录的信息在动态面板中写出来 ,在对应的交互地方双击添加更多的交互
5. 增加更多的交互
① 添加目标 ② 勾选登录面板 ③ 在状态的位置根据登录的不同方式选择对应的状态
4.2 演示效果
账号登录界面
短信登录界面
不同方式登录的效果演示:
五. 导航栏的实现
5.1 操作
1. 在大的动态面板中放入小的动态面板,然后放入对应的元件,记得给每个元件都取上对应的名字,易于区分。会议管理是一级菜单,其余是二级菜单。
2. 复制状态, 取名为收起状态,除了一级菜单留下,把其余的二级菜单删了,在一级菜单的地方放入一个元件,用于进行交互 。(分清楚展开和收起的状态)
3. 可以复制整个会议管理面板来制作别的面板,比如投票管理面板,系统管理面板。但是在运行时发现会议管理一级菜单在点击收起的时候出现了留白。
4. 选中进行交互的元件,双击打开交互编辑器,选中设置面板状态,勾选推动和拉动元件。
5. 把每个进行交互的元件都如此操作一次,再次刷新就没有留白了。