移动端拖动轮播图,手机端轮播图最多放几张

首页 > 大全 > 作者:YD1662022-12-19 01:30:17

原则2:轮播图控件允许用户进行前后帧内容的切换——

这是使用箭头是比较好的方法,然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限,会导致用户容易忽视这些控件,那怎样避免进行前后切换的箭头被用户忽视呢:

  1. 展示部分下一帧或前一帧图片;
  2. 根据所识别的背景图片的颜色和明度进行相应的颜色改变。

移动端拖动轮播图,手机端轮播图最多放几张(5)

通过展示前后一帧内容的部分内容,用户很容易感知到可以进行切换。

移动端拖动轮播图,手机端轮播图最多放几张(6)

除了传统的设计样式像是用来感知位置的小点和前后切换的箭头,“table of contents”这种设计样式同样也能起到一样的效果 。

移动端拖动轮播图,手机端轮播图最多放几张(7)

4. 在移动端一切都如此不同

触屏设备上的轮播图与PC端有着很大的不同 — 之前列举的PC端上的交互逻辑在移动设备上是无效的并且有很多新的规则:

原则1:移动端没有hover状态因此尽量避免自动轮播——

hover状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号,这意味着如果没有hover状态来激活自动轮播暂停,那么自动轮播在移动设备上的使用就不那么合适了 — 自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换,这会使用户跳转到错误的页面。

原则2:移动端支持滑动操作——

原则3:移动端屏幕的图片需要特别优化——

现在我们来总结一下:

移动端拖动轮播图,手机端轮播图最多放几张(8)

上一页123下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.