(翻译)轮播(Carousel )

轮播图模式是一种用于展示大量项目但每次仅显示少量项目的UI设计模式。它通过水平排列项目并利用导航控件实现循环浏览,适用于内容丰富且希望用户逐项关注的情景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题概述

  用户有一组项目要浏览,并可能选择其中的某一项。

示例

这里写图片描述

用途
  • 用于显示很大一组项目,但又想让用户同一时间内只关注其中一小部分项目时;
  • 用于提示用户,除了当前看到的内容,还有更多其它内容[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.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值