Progressive Disclosure
渐进式呈现
WebMobileDesktop上手难度: 进阶
默认只给用户最需要的东西，剩下的藏在「展开更多」后面。
Live Demo
真的可以点订单合计¥128
- 相框 · 原木色 × 1¥68
- 冲印服务 · 20 张¥45
- 优惠券−¥15
你刚才看到的这个：订单详情页只显示「总计 ¥128」+「展开明细」，用户点开才看到每一项；App 权限申请时先说「需要相机权限」而不是甩出一屏说明。
它到底是什么
Progressive Disclosure 是一种「延迟满足」的策略：先给 80 分的信息，让用户决定要不要看剩下的 20 分。它解决的是「选择过载」——选项太多时，用户会僵住。
渐进披露progressive disclosure分层展示逐步展开分步揭示
Anatomy · 它由什么组成
Summary摘要
默认可见的 80 分信息
Trigger展开触发
「展开更多 ›」
Detail详情
隐藏的 20 分
State状态记忆
记住上次选择
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 信息量很大但多数用户只用一小部分 | 用 |
| 高级选项会吓跑新手 | 用 |
| 可以按用户熟练度分层 | 用 |
| 信息缺失会导致误用 | 不用 |
| 隐藏的内容恰好是安全相关的 | 不用 |
把「删除」这种关键操作藏进「更多」是灾难性的。
不要用它隐藏价格、费用、风险这类必须让用户看到的信息。
Similar Patterns
别搞混一句话区分：默认只给用户最需要的东西，剩下的藏在「展开更多」后面。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
订单详情默认只显示总计和「查看明细」链接，展开后显示每一项的明细行；状态记住用户上次的展开选择。
不要只对 AI 说
Bad → Better不要这样对 AI 说
先只显示一部分，其他折叠起来。
改成这样说
实现 Progressive Disclosure：默认只显示摘要 + 「查看明细」文字按钮（aria-expanded），展开用 0fr→1fr 过渡，并把用户的展开选择存到 localStorage 以便下次保持——但价格、风险、安全信息不可隐藏。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。