轮播是学习Axure的经典案例,同时做轮播案例也要用到Axure中很多的知识点,比如动态面板,交互动作,交互样式,交互用例,交互事件等等
动态面板的理解:
动态面板的实质就是层,一个动态面板可以有多个状态,每个状态可包含一系列元件;正 是因为动态面板的存在实现了同一区域状态的变化。
· 任何时候都只有一个状态时可见的,一般都是默认第一个状态可见。
· 动态面板的状态可以隐藏、显示和改变。
· 将动态面板拖到界面后,可以根据需要改变面板大小、位置。
· 使用动态面板的情况:
页面中存某块内容在开始不显示,后来显示的情况;
在开始页面加载时不显示,后来显示的情况;
Tab页切换;
某块内容随着事件的不同显示位置不同的情况。
交互样式:设置同一对象不同样式,是针对元件本身的交互
交互事件:不仅可以针对元件本身,还可以针对其他元件作出交互动作
交互用例说明:在同一事件中,可以有多条用例。但是只会执行一条用例。在没有判断条件的情况下,出现多条用例,系统会让用户作出选择
用例:添加,删除,修改,复制,剪切,粘贴
交互用例中的条件设立
条件设立的解释如下图:
如下面轮播案例:
步骤:
① 首先从Axure的左边的基本原件里拖出”图片”,设置好想要的大小
② 将图片转为动态面板
③ 设计好按钮和小圆点
④ 在按钮和小圆点设置交互用例,交互动作,交互样式,交互事件
转为动态面板
设置自己想要的几屏面板(这里设置6屏面板)
设置动态面板载入时自动播放
设置左右按钮和组合左右按钮,同时给按钮设置上点击交互事件
给左和右按钮设置交互事件
在动态面板里设置小圆点,同时设置交互事件,这里的小圆点的交互事件的设置都是一样的,只要设置一个好了,其他的都可以复制了。
最后给整个动态面板设置鼠标移入时弹出左右按钮,鼠标移出时弹出左右按钮的点击事件,还有动态面板切换的状态改变时的判断和选中小圆点所对应的面板状态
这样就完成了动态面板的案例了!