原则2:轮播图控件允许用户进行前后帧内容的切换——
这是使用箭头是比较好的方法,然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限,会导致用户容易忽视这些控件,那怎样避免进行前后切换的箭头被用户忽视呢:
- 展示部分下一帧或前一帧图片;
- 根据所识别的背景图片的颜色和明度进行相应的颜色改变。
通过展示前后一帧内容的部分内容,用户很容易感知到可以进行切换。
除了传统的设计样式像是用来感知位置的小点和前后切换的箭头,“table of contents”这种设计样式同样也能起到一样的效果 。
- 首先,它结合了位置感知和手动切换的控件为一个整体的UI组件;
- 其次,它能为用户提供了一定的轮播信息线索,让用户知道接下来会看到什么因而可以让用户更有效的进行跨帧的切换。
4. 在移动端一切都如此不同
触屏设备上的轮播图与PC端有着很大的不同 — 之前列举的PC端上的交互逻辑在移动设备上是无效的并且有很多新的规则:
原则1:移动端没有hover状态因此尽量避免自动轮播——
hover状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号,这意味着如果没有hover状态来激活自动轮播暂停,那么自动轮播在移动设备上的使用就不那么合适了 — 自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换,这会使用户跳转到错误的页面。
原则2:移动端支持滑动操作——
- 用户在触屏设备上的操作预期就是滑动来进行导航切换
- 传统的轮播图操作控件同样重要(如进行前后切换的箭头和让用户感知位置的小点)
原则3:移动端屏幕的图片需要特别优化——
- 许多在PC端上使用的轮播图设计稿是直接缩放后在移动端上重复使用,这造成在移动端屏幕上许多文案的阅读性较差;
- 移动端用户对加载较慢的轮播图更没有耐心( 用户在PC端可以边花费1到5秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息,而在移动端有限的屏幕大小下用户只能看到轮播图)
现在我们来总结一下: