我们在浏览网站的时候经常看到图像轮播效果,这个效果如何在Axure上实现呢?
很多网站都在使用图像轮播,但我想在原型设计中很多人都在使用。 介绍在“视频”面板中实现图像轮播的效果。 原型的预览效果如下。
交互事件分析
图像轮播最主要的交互事件是自动切换和单击时手动切换,事件分析如下:
页面概要
1个动态面板:动态面板中添加了4个面板,用于设置每个面板的轮播内容。 正文将被不同颜色的矩形替换。两个矩形:设置为“上一个”、“下一个”按钮,然后单击以切换面板内容;
4个椭圆形:单击以切换到相应的面板。
交互说明
1. 动态面板设置
双击动态面板,单击“添加”按钮添加面板,然后添加与每个面板对应的轮播内容。
选择4个
2. 椭圆页面按钮交互样式
椭圆形,然后用鼠标右键从菜单中选择“交互式样式…”(interactive style…)菜单。
选择“选择”选项卡,然后选择“填充颜色”。
PS :第一个椭圆页码必须处于选中状态。 加载页面时,默认情况下将播放图像。
3. 设置图片自动轮播
动态面板在页面加载时启动自动轮播,用鼠标单击页面并选择“页面加载时”事件。
页面加载时动态面板轮播事件:
选择状态: Next,面板切换到下一个面板;
回圈:勾选后,面板切换到最后一张时,自动切换到第一张;
周期:各面板停留事件;
第一个状态延迟:如果不检查页面,将跳过第一个面板。
轮播图像时,必须显示当前正在轮播的面板。 必须在“动态”面板中的“状态变化时”事件中设置此事件。
确定动态面板轮播动态面板轮播到第几个面板:
面板滚动到第一个面板。 必须选择第一个椭圆页码,然后取消选择其他页码。
要双击“状态更改时”用例以添加多个事件用例,并在面板切换时选择椭圆页面,请设置以下内容:
配置结束后,预览原型图像,设定自动轮播~
设置
4. 设置手动切换图片
上一页按钮:选中“上一个”矩形,然后选中“鼠标”
单击时”事件:在事件中选择“设置面板状态”动作,选择动态面板:
选择状态:Previous,面板切换到上一个面板;
向后循环:勾选后,面板切换到第一张时,会自动切换到最后一张。
设置下一页按钮:
选中“下一页”矩形,选中“鼠标单击时”事件:
在事件中选择“设置面板状态”动作,选择动态面板:
选择状态:Next,面板切换到下一个面板;
向后循环:勾选后,面板切换到最后一张时,会自动切换到第一张。
5. 椭圆形页码点击设置
选择第一个椭圆形,选择“鼠标单击时”事件:
鼠标点击时需要将动态面板切换到对应的页面,第一个椭圆形切换到第一个面板,第二个椭圆形切换到第二个页码,以此类推:
点击时,除了需要切换动态面板,还需设置当前椭圆形“选中”状态,设置其他椭圆形“取消选中”状态:
6. 图片轮播停止及恢复
当鼠标移入轮播区域时,图片要停止轮播,显示上一页、下一页按钮;当鼠标移除轮播区域时,图片恢复轮播并隐藏上一页、下一页按钮。可以将所有部件设置为一个组合,在组合的“鼠标移入时”、“鼠标移出时”添加事件:
链接:https://pan.baidu.com/s/1GgSXN6BZMF8TaGWc-Iyjcw
提取码:98q2
本文由 @Miss_Zhang 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议