轮播和滚动条幅怎么选？
一句话做出判断
轮播一次显示一张内容，并提供切换按钮。滚动条幅会让一串内容持续移动。
每个项目都需要慢慢看时，用轮播。滚动条幅只适合不重要的装饰内容，而且要能暂停或关闭动态。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Carousel
↗ 轮播
轮播是一组面板，可以用箭头、圆点或滑动手势，一次看一张或几张。
图片库有“上一张”和“下一张”按钮、当前页数、滑动手势，也能暂停自动播放。
- 什么时候用
- 项目有顺序，但页面空间不足以全部显示时，就使用轮播。
- 什么时候不要用
- 不要把重要选项藏在轮播里，也不要让内容自动切换得太快。
- 代码里的名称
aria-roledescription="carousel"
Marquee
↗ 滚动字幕带
一条会不断移动并重复内容的区域。对动效敏感的人要能暂停，或改看静态版本。
说出名称 · 验证 · 动手打造 · 发布
活动页让简短的赞助商名单慢慢移动。鼠标悬停或获得焦点时会暂停；开启减少动态效果后，则改成静态换行。
- 什么时候用
- 只用于简短、可重复，而且不是必要信息的内容。动效可以增加氛围，但不能妨碍阅读。
- 什么时候不要用
- 不要用于操作说明、长文、紧急信息，或任何需要追着移动才能读完的文字。
- 代码里的名称
overflow clip + duplicated track + prefers-reduced-motion
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 轮播Carousel | 项目有顺序，但页面空间不足以全部显示时，就使用轮播。 | 不要把重要选项藏在轮播里，也不要让内容自动切换得太快。 | aria-roledescription="carousel" |
| 滚动字幕带Marquee | 只用于简短、可重复，而且不是必要信息的内容。动效可以增加氛围，但不能妨碍阅读。 | 不要用于操作说明、长文、紧急信息，或任何需要追着移动才能读完的文字。 | overflow clip + duplicated track + prefers-reduced-motion |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 轮播（Carousel）、滚动字幕带（Marquee） 中，为真实用户流程选出最合适的界面模式。判断规则：轮播一次显示一张内容，并提供切换按钮。滚动条幅会让一串内容持续移动。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。