当前案例,可以用于中高仿真原型的图片轮播效果,以及多文章左右查看的同区域左右滑动显示效果。
移动互联网时代,无论是手机屏还是PAD这种横屏展示,为了在同一个页面展示更多的内容,尤其是类似于图片类或者多文章类的内容,都可以通过在区域内左右滑动显示更多,既好看又可以减少跳转。
之前在百度经验分享过类似的案例,今天是升级版的,适用于任何内容。
为了方便浏览,可能图片不会放整个axure的完整截图,仅是截取主要部分的图片。
╭◎◔◑◕◉◌-华丽的分割线-◌◕◑◔◌◎╮
⚑工具:axure 8.0
⚑步骤详解:
⇲第一阶段:准备工作
新建一个axure文档;并在其中添加一个600*300的底图背景;在两侧预留20px的位置,各放置两个15*15的图标,做激发操作的按钮。
建立四个动态面板,大小为180*250px,分别命名no1/2/3/4,并将其间距调整为10px,1/2/3为显示,4为隐藏(属性),no4放置在底图最右边的边缘位置;通过辅助线明确位置的准确性(可如图中一样,通过工作窗口的边缘拖出辅助线做帮助)。
选择四个图或者四篇文章内容,大小均为和动态面板的尺寸一致。
以动态面板no1为例,双击no1,弹出动态面板编辑窗口,如下图,在“面板状态”对应的名称上右键,编辑名称,案例中改为“图1”,并点击工具状态栏上的编辑状态,进入面板no1的编辑状态。
在面板no1-图1的编辑状态窗口,插入图片或者文章内容。将图片拖入蓝色虚框内或者在其内编辑文章。(蓝色虚线框内为动态面板图1状态的内容展示位置,超出内容不显示)
↙
其他动态面板no234,同步骤5的处理方法。最终如图所示。
⇲第二阶段:效果实现,实现当按动左右两边的小按钮时,实现每个面板的内容轮换显示。
显示234,隐藏1的效果操作:
选中右侧按钮,“鼠标点击时”-添加用例;在弹出窗口点击“元件”下的“移动”,在最右侧“配置动作”进行1234的配置,具体内容如下:
动态面板no1的处理:选中1,(值的算法:no1距离底图的左侧边缘为20,+no1本身的宽度,由于是往左移动,所以是负数);为了防止no1的内容一直移动,为每个面板设置边界值,no1设置边界值,左侧>120;保证点击切换按钮的时候,不冲出底图的显示区域
no2:的处理:选中2,下方“移动”选“经过”X设置值为-190(间距10+180,也就是说no2移动到no1的位置);左侧>120;
no3的处理:选中3,下方“移动”选“经过”X设置值为-190(间距10+180,也就是说no3移动到no2的位置);左侧>310;
no4的处理:选中4,下方“移动”选“经过”X设置值为-200(no4本身的宽度+图标占据的位置,也就是说no4移动到no3显示);左侧>500;
隐藏显示的设置:同用例(case1)下,元件-显示/隐藏,no1设置为隐藏,no4设置为显示;
隐藏显示的设置:同用例(case1)下,元件-显示/隐藏,no1设置为隐藏,no4设置为显示;
右侧按钮的设置方式同上,就是参数不同,具体可查看完成后如图参数:
右侧按钮
左侧按钮
就是这样的,你学会了吗?
╭◎◔◑◕◉◌-华丽的分割线-◌◕◑◔◌◎╮
⚑还有一种用例的设置方法,就是对于no1不设置移动属性,仅是设置其显示隐藏的属性即可。