折叠面板和标签页怎么选？
一句话做出判断
折叠面板会在页面中展开，也能同时打开多段。标签页一次只显示一段内容。
问答或需要一起阅读的内容，用折叠面板。少量分开的内容一次只看一个时，用标签页。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Accordion
↗ 手风琴折叠面板
手风琴折叠面板会上下排列多个区块，每个标题都能展开或收起自己的内容。
手风琴折叠面板
手风琴折叠面板会上下排列多个区块，每个标题都能展开或收起自己的内容。
适合使用
内容可以选择阅读，而且每一块都有清楚的独立标题时，就使用折叠面板。
常见问题会先显示问题，点开后就能在同一页看到答案。
- 什么时候用
- 内容可以选择阅读，而且每一块都有清楚的独立标题时，就使用折叠面板。
- 什么时候不要用
- 不要只为了让页面整齐，就把简短而必要的信息藏起来。
- 代码里的名称
<details><summary>
Tabs
↗ 选项卡
选项卡是一排标签，会切换同一个内容区，但不会离开当前的主要任务。
“概览”“动态”和“权限”会切换下方内容，但仍留在同一个项目里。
- 什么时候用
- 只有少量同一级的内容区，而且标签要一直看得到时，就使用选项卡。
- 什么时候不要用
- 不要把选项卡当成跳转到无关页面的小链接。
- 代码里的名称
role="tablist"
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 手风琴折叠面板Accordion | 内容可以选择阅读，而且每一块都有清楚的独立标题时，就使用折叠面板。 | 不要只为了让页面整齐，就把简短而必要的信息藏起来。 | <details><summary> |
| 选项卡Tabs | 只有少量同一级的内容区，而且标签要一直看得到时，就使用选项卡。 | 不要把选项卡当成跳转到无关页面的小链接。 | role="tablist" |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 手风琴折叠面板（Accordion）、选项卡（Tabs） 中，为真实用户流程选出最合适的界面模式。判断规则：折叠面板会在页面中展开，也能同时打开多段。标签页一次只显示一段内容。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。