渐进式披露
Progressive Disclosure
别名:Progressive Disclosure渐进式披露逐步展开分步显示折叠收起详情点开看更多显示高级选项
这是什么
把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到"展开""下一步""显示更多"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 设置页中低频的高级选项
- 表单中选填或仅在特定条件下需要的字段
- 长内容的摘要与全文分层
✕ 不适用场景
- 高频功能被折叠后难以被发现
- 用户需要横向对比全部选项
- 关键路径操作，隐藏会直接阻断任务
常见形式
折叠展开
Collapsible section
折叠面板承载次要信息，箭头指示状态
摘要 + 显示更多
Excerpt + show more
先给节选，点击展开完整列表或全文
分步呈现
Stepwise reveal
向导式逐屏揭示，一步只做一件事
实现要点
max-height transitiongrid-template-rowsaria-expandedrotate触发器绑定 aria-expanded 与 aria-controls，展开区用 max-height 或 grid-template-rows: 0fr/1fr 过渡高度；默认收起时次级内容不渲染或 hidden， 避免隐藏字段参与校验。箭头图标随状态旋转，动画尊重 prefers-reduced-motion。
相关概念
由多个可折叠区块组成的垂直列表：点击标题展开内容、再点收起，可互斥（同时只开一项） 也可多开。用于在有限空间里收纳成组内容，让用户按需展开。
组件搭配使用在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式相似概念用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面：每一步只露出一个关键区域并就地解释， 上一步/下一步与步骤指示器控制节奏，可随时跳过。它把功能说明放在功能发生的位置， 而不是让用户去文档里自己找。
交互模式相似概念从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件搭配使用悬停在元素上短暂出现的小型文字气泡，用来解释图标按钮、缩写或被截断的文本。 纯提示、不可交互，移开即消失；通常延迟约 300ms 出现以避免扫过时闪烁。
组件搭配使用