是的，我还没有拆分完我的UI，陆陆续续的杂乱笔记基本都做完了，现在就差把他们整理出来了，今天有点点小累，所以，打算就写一个轮播。

轮播也称为屏幕轮显， 英文名也就更多了，Carousels, image rotators, sliders, featured content modules。

什么是轮播（Carousels）

轮播指的是一系列一张一张展示的信息的集合（比如图片， 广告），因此一次只能看到一个元素。

我们可以用箭头，键盘快捷键，分页控件来控制轮播，也有些轮播会自动切换。

设计师用轮播将信息高度浓缩放在首屏，而用户无需下拉。 轮播有很多大小和形式，

通常有以下几种表现：

• 出现在主页最上面
• 有超过一个内容展示在同一个位置， 虽然每次只能放一张。
• 提供一些线索告知有超过一个的内容出现。

在手机端，屏幕轮显使用水平的滑动手势（swipe gesture）以全屏布局的方式在不同内容间导航。类似于我们之前提到的平铺页面导航方式中使用到的分页控件（Page Control)。

内容轮显是存于单一屏幕布局之内的。但同样使用了水平滑动的手势，这样可以在固定的全屏布局内，展现并导航不同的内容对象。

内容轮显所展示的内容，要有适当的尺寸和间距，有时在宽度上也会填满整个屏幕，在左边或者右边设置一个箭头，或者在下方加上一个分页控件。这种内容沦陷长鉴于的内容有媒体缩略图，或者较大的图片，电商网站非常常见。

Apple经典的一个轮播显示方式就是3D效果的显示，这样会将聚焦的对象在轮显中位于中心位置，从而突出重点，产生聚焦，而另外左右两边尚未显示出来的内容，也是很好的一种告知用户还有更多内容可以查看的提示。

由于轮播的展示方式有很多种，因此是否支持首尾循环展示是一个值得思考的问题，如果内容很多的话，可以考虑支持收尾循环展示，这样用户就无需再手动滑到很前面。但在采取这种方式的时候，轮播到达末尾的时候，要给到用户清晰的视觉提示，不然会让人容易产生困扰。

轮播的方式：

1. 平铺轮播
2. 3D效果轮播（App Store)
3. 垂直轮显 (Safari）

使用轮播的优势：

• 可以让多个内容同时展现在最主要页面的黄金位置
• 更多的信息出现在页面上方更容易被用户发现

轮播的缺点：

• 通常用户会忽略轮播， 即便自动播放， 用户也会忽略-用户不会在页面的最上端停留太长时间， 因此你不能依靠这个让用户看到所有内容
• 设计师通常认为轮播就是一系列的图片，用户会看到所有，而研究发现只有1%的用户会点击轮播，而其中只有84%的用户点击的是第一页， 因此用户通常只看得到一张图。 提供一系列的图片能帮助用户理解你的网站是做什么的，但是他们通常只看到一张， 这样会产生认知偏差。

轮播的设计原则

内容优先：

• 如果你的内容对于用户来说没有什么兴趣点，也没有帮助的话， 不要用轮播， 比如促销信息。 这种轮播只会分散用户的中医里，而无法让他们集中的对主要按钮（call to action ）采取操作。
• 轮播里面的内容不应该看起来像是广告如果看起来像是广告，很多用户就会自动屏屏蔽（Banner blindness） 因此选择合适的同整个站点相配的字体和图片是很有必要的， 因此slide应该更像是网站内容的一部分而不是广告。
• 轮播的内容顺序应该精心的排布。 记住第一张永远比后卖弄的所有曝光率都搞。 因此，第一张图应该展示最主要的内容， 而且能自带最好能自带引出下一页的功能. 所有slide按照重要性顺序排列。
• 轮播不应该是唯一展示网页特征（features）和内容的方式， 将在轮播上面放置的重要内容放到页面的其他地方也很重要， 用户可以有更多的机会看到并且交互。
• 不要用轮播，如果你希望用户可以看到所有的内容。 即便你的轮播安排的很好， 但是要记住大部分用户不会每页都看。

控制页面数量

在设计轮播的时候， 轮播图不易过多，一般控制在五个页面以内， 太多了不易用户发现更多内容。

提供导航控件（Navigation controls)：

通过导航控件告诉用户图片的展现方式， 以及用户所在的位置， 让他们有可控感。

设计合适的导航控件: 导航是在帮助用户区分选择， 并且当用户看到了一部分内容后能帮助他们快速定位。

• 确保导航在轮播里面。 而不是在下面或者其他地方
• 确保链接和按钮是容易辨识的，而且需足够大能点击。
• 在移动端支持用户左右滑动

自动播放的注意点（Tips for auto-rotation (auto forwarding )：

Auto-rotation在轮播中能帮助用户自动看到信息。 需要注意的是：

• 尽量不要在手机端使用自动轮播。 用户可能在自动轮播的时候错误点击

• 确保轮播速度不要太快， 有时候播放的太快， 用户就不能清楚的看到信息。 太慢的话也会有问题， 用户会感到很无聊。 你应该测试正确的时间点， 至少得确保大部分用户有足够的时候看到信息和图片。 考虑每个slide可能需要被消化的时间可能不同。 如果你不能找到正确的时间， 那就不要使用自动。

• 确保用户有可控性 。 当用户鼠标悬停的时候，将轮播停止。 当用户产生交互的时候，一定要全部停下来，比如用户点击了页面控制器。因此一次点击代表了用户需求，以及其兴趣。

确保轮播内容在移动时也有可看性

确保文字和图片的清晰性，让用户更容易理解。 因此文字的清晰可读性很重要， 即便整个屏幕变小了，也要确保可读。 如果移动端直接用的是桌面端的，则要测试。

轮播的替代：

轮播的一个问题是确保上下文联系（lack of context） :用户通常不知道下一张图片是什么， 以及他们为什么要关注。 因此用户不会想要去一一查看。为了解决这个问题， 你可能需要考虑使用主图片（hero image ）而不是轮播， 比起轮播主图片有以下的优点：

• 用户可以关注在一张图片上， 而不是将他们的注意力分散 。 而且hero image不会分散用户的注意力。

• 如果设计师知道他们只能选择一张图片， 他们可能会选择一张更加能够代表服务或产品的图片。

你可以将你的内容主次更好的排布， 去掉轮播， 将一些有效的hero image以及call to action按钮放在轮播的位置。

当然如果我们依然想要用轮播图，但是只想要专递一个内容的时候，可以采取图片滚动，文字固定的形式：

实例分析

对于电商网站来说，轮播图是非常常用的在主页展示产品以及促销的方式：

桌面端：

天猫

采用了分页控件和自动轮播展示促销信息和广告。

京东

采用了分页控件，左右箭头，自动轮播的方式展示。

亚马逊

亚马逊也采取了左右箭头以及自动轮播的方式控制轮播，但是他的分页控件稍稍有所不同， 当鼠标悬停到轮播控件上的时候， 轮播底部会自动弹出每一个页面的介绍，方便用户更快的在各个页面之间切换。

但是很有趣的是，刚才我们看到的是亚马逊中国的首页，但是亚马逊官网则没有使用轮播， 直接放了一张Kindle阅读器的Hero Image就结束了。 相较于轮播图，Hero Image能更好的抓住用户的注意力，传达信息。

来单独看一下亚马逊中国的轮播导航：

由于传统的点点点的方式可能不够明显，亚马逊在底部直接采用label的方式描述了图片的信息，给用户传递了更多信息， 但是我们也有时候会看到，有些网站在Label上放置的是图片的预览，由于图片被缩小了，上面的文字也就没有了可读性，用户看到的内容也就更少了，不见得会引起用户的关注。

综上，我们可以看出，国内的电商网站基本都采用了轮播放在首页，展示其商品和促销。而其展现方式通常也伴随着一些其他的控件同时出现，比如分页控件，和左右按键，而每个电商的处理方式也不尽相同。

先来看看分页控件，分页控件是一个很容易被用户忽略的控件，因其表意不明，以及颜色较容易融入不同图片的底色中，而不易被识别，而亚马逊中国的处理方式就比较醒目了，将没个图片的内容写出来，较为引人注目，但底部这种导航方式必须当用户的鼠标悬停在轮播上时才会被触发，需要一定的发现成本。而京东和天猫的两个分页控件都做的较为明显，底部都采用了半透明以及反差色，叫容易在各个不同的底色中凸显。

再来是左右按键， 亚马逊的左右按键相比于京东，缺少了触发的视觉反馈。 可以很明显的看到京东的左右按键（图中为右键）在鼠标悬停的时候，颜色加深。

而这三大电商都采用了自动轮播的方式，私以为，自动播放容易引起用户注意，告知用户后续还有内容。

移动端：

当然都分析了这三大电商的网站了，我是不会放过他们的移动端的：

三张图分别是淘宝，京东和亚马逊，光看头部似乎就亚马逊比较明显得告知了用户自己打开的是亚马逊，而淘宝由于主色调就是橙色，外加一贯的纷杂印象，也比较容易识别，但是京东这个主页面要不是我看到了中间的京东二字，说实话还真有点困惑。

言归正传，三大电商也都在客户端也都用了轮播图，但是很显然，轮播上的分页控件有种都消失了的感觉，由于手机上寸土寸金，分页控件不易设计的过于复杂，因此都采用了同一种分页控件的样式，只有位置上的不同，淘宝的较为靠右。 淘宝采用的关注色是橙色，所以在橙色底的图上表现能力欠佳，京东则是白色，很显然和佳洁士融为一体了，亚马逊也是一样。

另外也都采用了自动播放，我数了数，大致是3-4秒换一次页面，手机端估计就我个人而言在首页是待不了那么久的，打开直接往下拉了，只有很偶尔的情况下顶部的轮播会一闪而过，但也不会究其内容。 不过到的确给人一种种类繁多的感觉。

再扯个题外话，淘宝的橙色真的很厉害，不比不知道，这三个页面平铺开来，淘宝的热闹真的给我一种欢度佳节的错觉，橙色比起旁边的京东和亚马逊的确热烈了不少，给人买买买的冲动，旁边的两个则莫名的有种冷漠的感觉。。。但是淘宝的热情可能也会造成一种层次很深的感觉，让人感觉无从下手，而亚马逊可能会给人一种比较舒服的感觉。

泳道（swimlane)

提到轮播，我们不得不再提展现内容的另一种轮播方式：泳道（swimlane)

泳道平衡了轮播的自然浏览频率和信息密度。泳道是一组垂直排列的轮播，每个轮显都可以独立水平滚动，对其他的轮播没有影响，较为灵活。

豆瓣是在电影的介绍页面采用了泳道来展示影人和电影相册，由于一部电影的影人并不是很多，所以滑到底之后也不会离开头很远。而电影剧照就很多了，豆瓣用了只展示一小部分最后给到一个连接并告知有多少剧照的方框表示，引导用户如想看更多，可以点击进入。

显然，我们可以用泳道来展示无数条的内容，但是这并不是十分合适，最好用轮播来展示有限的内容，在末尾打上记号，给用户一定的视觉反馈。

但是和轮播不同的时，千万不要设定为自动滚动。

参考文章：

Designing a user friendly Homepage-carousel

Should I use Carousel

Why Users Aren’t Clicking Your Home Page Carousel

Carousels and User Experience-A look at user oriented content through carousels

交互设计精髓4-为移动设备和其他设备而设计 p428-p431