(翻译)轮播(Carousel )
问题概述
用户有一组项目要浏览,并可能选择其中的某一项。
示例
用途
- 用于显示很大一组项目,但又想让用户同一时间内只关注其中一小部分项目时;
- 用于提示用户,除了当前看到的内容,还有更多其它内容[1];
- 用于没有足够的空间一次性显示所有的项目内容;
- 用于显示包含精彩内容的项目,例如电影海报、相册封面、产品介绍等;
- 当项目无法可视化显示时,不要使用本模式,例如指向文本文档或pdf文档的链接等;
- 如果无法立即看出图片与其关联的内容之间的联系,不要使用本模式。
解决方案
水平方向排列一组项目,每个项目都附带一个缩略图(或每个项目仅由该图像表示)。项目数量虽多,但每次仅显示3到8个项目。[2]
要想看项目列表中的其它项目,需要点击导航控件,如指向上、下、左、右的箭头。点击任一箭头,载入后续“视图”,过场动画结束后,所要的项目映入眼底。以此方式向前、向后循环浏览项目列表,因此本模式称之为轮播。
说明
本模式以循环的方式显示一组图片集合中的子集,优化了屏幕空间。
本模式中的导航控件表明还有其它内容未显示,鼓励用户继续浏览内容。人因无法纵览全局而不快,本模式以此引导用户浏览项目列表中的所有内容[3]。
由于是循环轮播,项目列表到尾后又从头开始,这促使用户持续浏览项目列表中的内容[4]。
原文地址:http://ui-patterns.com/patterns/Carousel
[1]原文:Use when you want to tease the user by letting him or her know that there are more items available than what is currently shown.
[2]原文:Arrange a set of items on a horizontal line where each item preferably has an thumbnail image attached (or the item is only represented by the image). Even though the list of items is long, only 3-8 images are shown at the same time.
[3]原文:The carousel pattern can in this way be used as an extra incentive for the user to browse through all items of the list, as we as humans do not feel comfortable by not being aware of the “full picture”.
[4]原文:As the carousel is circular, the start of the list will be shown after the user has reached the end. This behavior encourages the user to continue browsing through the list.