“ 左右滑动内容,并限制滑动的范围”
这是《Axure9百例》系列第26篇
在得到首页的TOP50/TOP100推荐榜单中,有课程、听书和电子书的推荐,共3项内容,可左右水平拖动,且只能在指定范围内拖动。
操作简单却又十分常见,知道怎么实现么?
这是演示效果:
01
—
界面布局
列表里的每项内容布局设计不作详细解释,在一个矩形框内有标题、头像和列表,这里准备了低保真的样式如下:
将内容全部选中,Ctrl+D键连续复制两个(或者Ctrl+C后按下Ctrl键拖动复制),水平排列,修改文字内容。
这种水平列表的布局设计上需要明白一点,为什么第二项内容只显示了一半。现在可能稍微了解一点交互和设计的人都能看出来,目的是引导用户右侧还有内容,可以向左滑动,因为这种显示部分内容的设计,天性让我们下意识的向左边滑动继续查看。
最后,我们选中所有内容,右键转成动态面板,命名为list,然后再次右键将list转成动态面板,调整外层动态面板的宽度和屏幕一样宽。
思考:为什么转换两次动态面板?
这是比较常见有疑问的地方,详细解释一下:
1、外层的动态面板是为了限制内容的显示范围,这是它的样式特性,这里是设置为屏幕的宽度范围内,因为我们只需要在屏幕宽度内显示即可。
2、里层的内容列表也转换为动态面板是利用了它的事件特性,只有动态面板才支持拖动的事件。里面的动态面板是“自适应宽度”的,保持了原始内容的长度。
好了,布局就这样了。
02
—
交互处理
动态面板的拖动事件可以加在里层动态面板list上,也可以加到外层动态面板上,但拖动的对象要是里面的list。
这里我们把事件加到外面动态面板上,选择外层动态面板,新建交互:拖动时,添加移动动作,目标对象选择list,移动方式选择为跟随水平拖动,这样系统就会限制我们只能在水平方向上移动,避免拖动时上下偏离了水平位置。
接下来设置一下“更多选项”中的参数,用来限制拖动的水平范围。
我们首先要看一下列表的宽度和屏幕的宽度,然后来计算水平方向上限制的范围。
1、屏幕的宽度为414,但左位置是从10开始的,因此外层动态面板宽度显示为404
2、内容的列表的宽度为764
从列表list的位置来看,向右拖动时,只能拖动到初始位置,也就是左侧<=0
向左拖动时,要保证第3项内容在屏幕上完全可见,因此位置就是764-404=360,也就是向左偏移360,即左侧>=-360,可以适当放宽一点,让右侧多空出些位置,考虑左侧>=-370。(也可以通过设置右侧的位置来限制范围,留给勤奋的你来试试)
大功告成,来试下。。
03
—
小结
这个案例主要是应用了动态面板的两个特性,一个是样式特性,显示固定区域的内容,另一个是事件特性,支持拖动事件。
这里注意一下,有的人可能发现“为啥我的移动的设置里看不到跟随水平拖动的选项?”,这个选项只在“拖动时”事件里有,在“开始拖动时”事件里是没有的。
留下小问题,下面的交互细节更能体现拖动时的趣味性:
1、如何在向右拖动超过位置0时,自动弹回到原处?
2、相反,如何在向左拖动超过最右边位置时,自动弹回?
今天是不是又进步了一点点~给自己点个赞~
往期回顾
【Axure9百例】25.得到交互设计-返回顶部
【Axure9百例】24.得到交互设计-底部导航菜单
【Axure9百例】23.侧边栏的显示和隐藏