普遍存在的旋转木马

A series of horizontally scrolling rectangles contain high-level product information for laptops.
There are various UI elements that one might consider to be a carousel. For example, a filmstrip of several images you can click through (as on the Dell website).
Small thermostat feature images take turns occupying the large image space above.
Or an animation tour that displays multiple signposts (as on the Nest website).

但最无处不在的类型是特征区域旋转木马(如本文中所讨论的),这通常具有以下特征:

  • appears toward the top of the homepage
  • occupies a substantial section of the “above fold” area
  • displays more than one piece of content in the same place (one at a time)
  • 提供一些指示(或导航),即旋转木马内有多个特色内容或框架
  • 包含每帧中的图像和少量文本
  • 包括对组织的品牌或内容mission, featured information, or
  • 包括促销活动。

旋转木马的最大好处

The greatest benefit of using carousels is that theyenable more than one piece of content to occupy the same piece of素质房地产在the homepage, which can help diffuse any infighting about whose content is most deserving. An additional benefit is that because more information appears near the top of the viewable area, there may be greater opportunity for people to actually see it.

Greatest Drawbacks of Carousels

You can’t count on people seeing the information in carousels on websites and intranets. Whether looking at content on a 30-inch or 3-inch display,人们经常立即滚动超过这些大图像并想象它们内部的所有内容,或者至少在第一个帧以外的任何帧中的内容。确实,一些eyetrack研究和网络指标表明某些Carousels Garner多次固定并点击。但关于使用旋转木马的最重要的谨慎是人们经常忽视它们,以及它们内部的全部或一些内容。

第二个最重要的警告涉及设计师认为旋转木马作为图像集合的想法,但用户经常考虑他看到的一个图像。在旋转木马中的一组图像可以集体统称为组织所做的事情提供准确的印象。但if a person sees only one image in that set he may对组织的错误了解。This problem occurs frequently when an image depicts something outrageous, or simply not highly-related to the business or charter.

一个英雄形象可以成为你网站的英雄吗?考虑使用英雄形象而不是旋转木马

Today’s multi-image carousels replace the static, single “hero images” that used to be plastered all over the web. But in some cases the mature UI alternative may be a better fit than its youthful, energetic descendant. One reason for this is the designer’s attitude. Knowing there are multiple alternative frames in a carousel that have the opportunity to get a point across or capture the user’s attention可以给设计师一个虚假的安全感。他们假设人们会看到旋转木马中提供的所有图像,因此他们可以选择微薄的图像,希望弥补卷的任何问题。但是,如果设计师知道他们不得不选择一个图像和情绪,他们可能更有可能选择强大且表明的东西。用户可以真正关注那个形象,而不是将他们的注意除以几个图像。另外,静态英雄图像可能不太可能分散比旋转元件的注意力分散注意力,因此可以增加人们可以用于发现站点的其他区域的全球导航的可见性。(顺便提及,在UI的其他地方留下英雄或旋转赛中出现的任何重要信息总是一个好主意,所以与IA和页面互动的人有一个抗击看到它的机会。)

Big images of a refrigerator and digital devices dominate the homepage.
The homepage at BestBuy.com uses a hero image to display the promotional text, Labor Day Savings Event, along with the dates of the sale and a strong, yellow,Shop Now动作按钮。

Several things make the content of Best Buy's hero effective, including:

  • The images of the television, laptop, and refrigerator are easily decipherable and show the variety of products on sale. This hero is attention-grabbing, communicative, and information-rich.
  • 字体和颜色与全球导航和Masthead中使用的字体和颜色匹配,因此英雄似乎是网站内容的一部分,而不是一个咄咄逼人的广告。

此外,这些特征有助于传达最畅销的品牌,并加强每天销售的产品。

Guidelines for Good Carousel Design

但if you decide the carousel is your superman after all, follow these guidelines for doing them well.

1. Include5 or fewer frameswithin the carousel, as it’s unlikely users will engage with more than that.

它可以征税来通过移动设备上的许多帧滑动,并且用户难以识别它们已经查看的主题当一组超过五个时已经查看的主题。限制数量也有助于发现内容,并稍后再次在旋转木马中找到内容。

2. Usecrisp-looking text and images that coincide with the organization's charter

It’s difficult to read small text and decipher small images, especially on mobile devices. And it’s never any good to cram a large, high-density image into a small region. The clearer the text and images, the more likely users are to engage and understand the intended points.

Animation reveals one image at a time, with vertical labels: explore, watch, make, discover.
康宁玻璃博物馆使用引人注目的图像和高度相关的文本,符合博物馆的工作。
Photos of glassblowing entice the viewer to visit the museum.
康宁玻璃博物馆使用滑动手风琴来揭示茂盛的图像。

3.表明多少帧是存在的wherethe user is within the progression, to help people feel in control.

标题周期的垂直列表,每个标题循环列表伴随着列表的图像。
2008年,冷威尔银行家是我们的10名获奖者之一Intranet Design Annual contest。Their intranet’s carousel design clearly showed important information: there are 5 frames, the content of each frame is basic, and it is easy to identify which frame is selected.
巨型图像主导了主页,但表明循环进展的点很小,难以注意到,并提供很少的价值。
Delta makes the selected dot (toward the bottom of the screenshot) larger than the other two, but the size difference is too subtle to be helpful. (For those who can’t tell, the middle one is selected, and is larger.)

4. Use可理解和可识别的图标和链接

In navigation controls, aim to help people identify the choices, and recall them after they have already seen the content in the main frame. A user cannot guess what a number or dot might reveal when clicked, but may remember that a green background relates to an article about the environment, for example.DOTS在移动设备上是一个特别糟糕的提示,因为人们经常不会注意到它们(并且它们在Android中的标准较少而不是iOS)。

5. Ensure that导航控制在旋转木马内,不在它下面或用折叠分开。

这种设计实践有助于避免大型和小型显示屏上的问题。

A giant, illustration of an atom dominates the homepage while three tiny, superimposed thumbnails provide a way to select which image is displayed.
IBM offers an engaging carousel with clickable image buttons within the carousel, except that the buttons are small, and there is no descriptive text with the buttons.
A photo of a baby is shown with carousel controls below, but the tab bar on the bottom of the screen covers most of them.
在iPhone上观看时,闪亮的星星治疗部位上的旋转木马控件被切断。最好的血液效果比没有控制的效果更好,但看到全套控件甚至更好。

6.如果为每个帧提供导航按钮(而不是箭头滚动的箭头),请确保each button looks different, and represents the frame.

John Deere的主页提供具有文本作为按钮的图像,它们出现在旋转木马内,这都是有用的。(它也有箭头向前和倒回转盘。)但是,文本非常小且难以读取,并且用作按钮的图像对于分配给它们的小空间太密集了。

拖拉机的照片在行动的,看见从上面看。

前端装载机的照片,带有发光球的负荷,意味着“明亮的想法”。

白色和灰色海洋发动机

7. Make links and按钮足够大以解密并点击

小小的按钮,靠近在一起,或在繁忙背景的顶部不容易注意到或单击。

由于与背景缺乏对比,极其视觉繁忙的页面设计的微弱,褪色箭头非常难以注意到。
On the Roku website, the arrows on the right and left of the carousel are easy enough to notice and click when they appear in frames with light backgrounds, but are not visible enough in frames that have busier backgrounds.
页面的底部显示视频促销图像,覆盖着半透明的箭头控件,在彩色背景上会更难以注意到。
The Roku website, scrolled.

Auto-Forwarding

Auto-forwardingthrough the frames in a carousel leads people through the information. But there are some instances where auto-forwarding is not recommended.

Do not auto-forward if:

  • You are not sure you can get the定时对,使大多数人在指定的时间内读取并吸收内容。有时旋转木马太快地行动,用户无法阅读信息,这对他们来说是令人沮丧的,而且不利于试图做出一点的组织。有时旋转木马移动得太慢,所以当他们做动画时,对用户来说令人惊讶。
  • Your contentresemblesadvertisements。用户更多可能忽略一个看起来像广告的动画物品(如果他们不是在购物心态中)。我们的eyetracking research揭示了这一点动画广告看起来是27%的时间。

自动转发提示

  • Do not auto-forward on mobile devices, because: (1) it slows down the page, and (2) because pages are short, users often scroll quickly, so by the time the carousel changes, the user is likely lookingbelow the foldand won’t see the change anyway.
  • Test for the right timing, or at least estimate how long it might take the average user to read the text and process the images. We use3 words per secondas a guideline.
  • Don’t stop at the last frame.继续骑行框架(and displaying which frame is selected).

Static (Non-Auto-Forwarding) Carousel Tips

确保用户感兴趣的旋转木马that there is more than just the currently displayed image/content. Offer clear visual elements thatrepresent the notion of more content, such as:

  • navigation links and icons (as noted above)
  • cutting off, or “bleeding” an image and displaying part of the next image.
一系列航空公司飞行选项显示为满是数字和时间的矩形卡。最后一个被切断,仅显示厘米或其内容。
Windows 8的Skyscanner应用程序在页面(右侧)上出现内容,以指示更多未来。

结论

If you are using a carousel in the hope that people will see a variety of content, know that some people will only see the first frame or none at all. So ensure that important content is also placed mindfully in the IA and on another page of your site. Consider using a static carousel or hero image instead of a rotating one. And in any carousel’s navigation, ensure the buttons and links are clear, large enough to decipher and click, and the selected frame's button appears selected. That way, you’ll create a fanciful amusement, not ahouse of horrors