网页轮播模块调研专题课件.pptx

网页轮播模块调研1.小米官网小米官网小米官网的轮播模块相对简单大方，毕竟面向群众广，设计方面是最普通的banner左右侧带翻页按钮，底部带圆点托盘。banner图从左到右产品类别都有不同，且热度递减，最左边是最想卖掉的小米max，最右边是不太受关注的小米摄像头。信息列表也是采用最普通的并列式，有详细的分类，二级菜单鼠标悬浮在一级菜单即可触发。2.亚马逊亚马逊亚马逊的轮播图乍看很普通，实则比普通轮播要更高级，更加充分利用banner空间，托盘部分，在用户不用鼠标触碰是是普通状态，但当用户鼠标悬停在托盘处时会弹出此页banner的促销优惠信息标题，设计非常巧妙。列表数据方面和小米一样是鼠标悬停式二级菜单。3.优酷优酷优酷在其首页没有采用轮播的形式展现内容，而是一个个固定的banner图。但优酷的体量庞大，剧集，电影，娱乐，音乐皆有涉猎，其在这些不同分类下皆采用了不同的轮播方案，本次只研究剧集页的。剧集页的轮播采用3d式轮播，无一例外是优酷独播或首播的剧集，充分发挥了轮播的优势，带自动轮播，但间隔较慢。列表数据没有电商类网站详细，只有固定的一级菜单，但好处是一目了然，简约明了。4.爱奇艺爱奇艺爱奇艺的轮播是目前为止最特别的从上到下的自动轮播，用户切换banner只需在导航上移动鼠标，这样做的好处是节省了传统左右轮播的两侧按键，也不用带托盘，用户也知道这是第几页，还可以实现横向全屏的banner，坏处是对banner有所遮挡，因为列表导航放在最右侧。列表数据采用的是从上而下的列表形式，半透明的设计放在最右侧，牺牲部分显示效果换来体验更好的轮播系统，从一众普通轮播中脱颖而出。5.数字尾巴数字尾巴数字尾巴的设计美学更加极致，为了弥补去掉两侧按钮和底部托盘，彻底让banner横盘显示，数字尾巴只做了一步，把普通的小圆点托盘换成了半透明banner缩略图，这也是目前轮播系统的最优解，既保证了视觉美感，又减轻了用户需要单击切换banner的负担，现在只需要滑动鼠标就能切换，还知道自己在第几页，相当优秀的设计。为了保证视觉的统一性，数字尾巴的列表数据也全部采用极简的一级菜单，整体搭配相当融洽。6.简书简书的轮播相当复杂和别出心裁，分为左右一大一小两个模块，左边的长模块自动轮播，不受用户操作限制，右边的小模块又分为上下两个相连的模块，左右按钮唯一的左右就是切换这个小模块的上下移动，每按左/右按一次按键即模块上/下移动一个小banner。简书简书信息列表也是一样分左右两部分，虽然都是一级菜单，也和左右的轮播相呼应，但同样增加了网站复杂程度，比较见仁见智的设计。7.澎湃新闻澎湃新闻澎湃新闻的轮播比较别出心裁，只有一张banner作为新闻头条，这样也就自然省掉了底部的托盘，但并没有省掉左右按键，可也并非普通轮播系统的按键，在鼠标悬停在左边的按键上时，按键变成红色的订阅跳转按键，鼠标悬停在右边的按键上时，按键变成红色的视频跳转按键，所有它革命性的让左右切换banner图片导航的按键变成了左右切换网站内容分类模块，而不是前面最多只在美学上下功夫。列表数据被它很好的与轮播系统融为一体，好处是一页一banner做头条让信息传播更加专注，但代价是切换的效果不好，比较是进新的网址，网速再快也会有停滞，带来不拿么理想的体验，不过作为新闻站点来讲，这个不算太大缺点，总体来说设计还是相当前卫的。8.腾讯大家腾讯大家腾讯大家用的是和简书类似的一左一右的轮播，相同的是两个网站的左边长模块都不可操作，不同的是腾讯左边的长模块只有一个banner不可切换，并且选择去掉了左右按键，右边的轮播只能通过点击底部的托盘来手动切换，否则只能自动切换。这样做的好处是，既增加了设计元素，又不像简书一样用力过猛。数据列表也是顶部那一栏简单的一级导航，轮播系统与整个网站的设计相得益彰，简约大方，符合网站定位。9.网易云音乐网易云音乐网易云出人意料的做了一个最普通的轮播系统，即自动轮播+左右手动轮播+圆点托盘的设计，并且在右侧加入了网易云的客户端下载，即便主页的设计并无出彩之处，还要继续丑化banner图，可见网易云对用户下载客户端的诉求之深，毕竟抢占客户端才能更好的留住用户。数据列表的话，首页，也就是发现页下面有6个二级菜单，其余导航则打开另外的网页，设计不统一，用户体验较差。10.苹果官网苹果官网苹果不愧是设计界先驱，现在直接废除轮播模式，直接采用三大banner，四小banner的首页设计，调研的这么多网站，只有苹果将极简方式发挥到极致，用了最简单的设计来显示内容。苹果这么做并非因为产品线少，而是只突出这一季度的产品在banner上，其余的复杂产品线全部交给用户到导航栏解决，这也符合电子设备新旧更换的立场，即便在数据列表的导航栏，也在克制鼠标悬停在“iPhone”下弹出iph8，iph8+，i