Back to Details

progressive-disclosure

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Progressive Disclosure - Show the Right Thing at the Right Time

Progressive Disclosure - 在正确的时间展示正确的内容

Progressive Disclosure is an interaction design technique that sequences information and actions across time, showing users only what they need when they need it. It reduces cognitive load by deferring complexity until the user is ready for it.
Progressive Disclosure是一种交互设计技术，它按时间顺序排列信息和操作，仅在用户需要的时候向其展示所需内容。它通过将复杂度延后到用户准备好接受时再展示，来降低认知负荷。

When to Use This Skill

何时使用该方法

  • Designing onboarding for complex products
  • Simplifying feature-rich interfaces
  • Creating multi-step forms and wizards
  • Building admin panels and settings pages
  • Introducing new features to existing users
  • Reducing support requests and confusion
  • 设计复杂产品的新手引导
  • 简化功能丰富的界面
  • 创建多步骤表单和向导
  • 搭建管理面板和设置页面
  • 向现有用户介绍新功能
  • 减少支持请求和用户困惑

Core Concepts

核心概念

The Hierarchy of Disclosure

披露层级

Level 0: Essential (always visible)
    |
    v
Level 1: Important (one click away)
    |
    v
Level 2: Useful (accessible but hidden)
    |
    v
Level 3: Advanced (buried intentionally)
Level 0: Essential (always visible)
    |
    v
Level 1: Important (one click away)
    |
    v
Level 2: Useful (accessible but hidden)
    |
    v
Level 3: Advanced (buried intentionally)

80/20 Rule Applied

80/20法则的应用

80% of users need 20% of features. Show that 20% prominently, progressively reveal the rest.
+------------------------------------------+
|  Primary Actions (20%)                   |
|  [Action 1] [Action 2]                   |
+------------------------------------------+
|  v Advanced Options                      |
|    +------------------------------------+|
|    | Secondary (30%)                    ||
|    | [Option 3] [Option 4]              ||
|    +------------------------------------+|
|    |  v More Options                    ||
|    |    +------------------------------+||
|    |    | Tertiary (50%)              |||
|    |    | [Rare settings...]          |||
|    |    +------------------------------+||
|    +------------------------------------+|
+------------------------------------------+
80%的用户仅需要20%的功能。优先突出展示这20%的内容，剩余内容逐步展示。
+------------------------------------------+
|  Primary Actions (20%)                   |
|  [Action 1] [Action 2]                   |
+------------------------------------------+
|  v Advanced Options                      |
|    +------------------------------------+|
|    | Secondary (30%)                    ||
|    | [Option 3] [Option 4]              ||
|    +------------------------------------+|
|    |  v More Options                    ||
|    |    +------------------------------+||
|    |    | Tertiary (50%)              |||
|    |    | [Rare settings...]          |||
|    |    +------------------------------+||
|    +------------------------------------+|
+------------------------------------------+

Types of Progressive Disclosure

Progressive Disclosure的类型

TypeMechanismExample
Click to revealExpand/collapse"Show more" sections
Hover to revealTooltip/popoverHelp text on hover
Scroll to revealBelow the foldLong-form content
Time-basedDelayed introductionFeature announcements
Skill-basedUnlock with usageAdvanced features
Role-basedPermission levelsAdmin controls
类型实现机制示例
点击披露展开/收起"Show more" 区块
悬停披露Tooltip/弹出框悬停展示帮助文本
滚动披露首屏以下内容长文本内容
基于时间延迟介绍功能公告
基于使用熟练度随使用解锁高级功能
基于角色权限等级管理员控制项

Analysis Framework

分析框架

Step 1: Audit Current Interface

步骤1：审核现有界面

List all elements users see:
ElementUser NeedFrequencyCurrent Visibility
[Element 1][Need][Daily/Weekly/Rare][Always/Sometimes/Hidden]
[Element 2][Need][Daily/Weekly/Rare][Always/Sometimes/Hidden]
列出用户可见的所有元素：
元素用户需求使用频率当前可见性
[Element 1][Need][Daily/Weekly/Rare][Always/Sometimes/Hidden]
[Element 2][Need][Daily/Weekly/Rare][Always/Sometimes/Hidden]

Step 2: Categorize by Priority

步骤2：按优先级分类

                    HIGH
                     |
    +----------------+----------------+
    |                |                |
    |  ESSENTIAL     |  CONTEXTUAL    |
    |  Always show   |  Show when     |
    |                |  relevant      |
FREQUENCY           |                NEED
    |                |                |
    |  ACCESSIBLE    |  HIDE          |
    |  One click     |  Deep menus    |
    |  away          |                |
    +----------------+----------------+
                     |
                    LOW
                    HIGH
                     |
    +----------------+----------------+
    |                |                |
    |  ESSENTIAL     |  CONTEXTUAL    |
    |  Always show   |  Show when     |
    |                |  relevant      |
FREQUENCY           |                NEED
    |                |                |
    |  ACCESSIBLE    |  HIDE          |
    |  One click     |  Deep menus    |
    |  away          |                |
    +----------------+----------------+
                     |
                    LOW

Step 3: Design Disclosure Pattern

步骤3：设计披露模式

StageWhat to ShowHow to Reveal Next
Initial view[Core elements][Trigger to Level 1]
Level 1[Secondary elements][Trigger to Level 2]
Level 2[Advanced elements][Trigger to Level 3]
阶段展示内容如何展示下一阶段内容
初始视图[Core elements][Trigger to Level 1]
层级1[Secondary elements][Trigger to Level 2]
层级2[Advanced elements][Trigger to Level 3]

Step 4: Test Understanding

步骤4：测试理解度

  • Can users complete primary tasks without expanding?
  • Can users find advanced features when needed?
  • Is the "expand" affordance clear?
  • 用户无需展开即可完成核心任务吗？
  • 用户需要时能找到高级功能吗？
  • "展开"的操作提示清晰吗？

Output Template

输出模板

markdown
undefined
markdown
undefined

Progressive Disclosure Design

Progressive Disclosure Design

Interface: [Name] Date: [Date]
Interface: [Name] Date: [Date]

Element Inventory

Element Inventory

ElementPriorityDisclosure LevelReveal Trigger
[E1]EssentialAlways visible-
[E2]ImportantLevel 1[Trigger]
[E3]AdvancedLevel 2[Trigger]
ElementPriorityDisclosure LevelReveal Trigger
[E1]EssentialAlways visible-
[E2]ImportantLevel 1[Trigger]
[E3]AdvancedLevel 2[Trigger]

Disclosure Hierarchy

Disclosure Hierarchy

Level 0 (Always visible):
  • [Element list]
Level 1 (One interaction):
  • Trigger: [How user reveals]
  • Contents: [Element list]
Level 2 (Two interactions):
  • Trigger: [How user reveals]
  • Contents: [Element list]
Level 0 (Always visible):
  • [Element list]
Level 1 (One interaction):
  • Trigger: [How user reveals]
  • Contents: [Element list]
Level 2 (Two interactions):
  • Trigger: [How user reveals]
  • Contents: [Element list]

User Flow

User Flow

  1. User sees: [Initial state]
  2. To access [feature], user: [Action]
  3. System reveals: [New state]
  1. User sees: [Initial state]
  2. To access [feature], user: [Action]
  3. System reveals: [New state]

Success Metrics

Success Metrics

MetricBeforeAfter Target
Task completion rate[X%][Y%]
Time to complete[X sec][Y sec]
Support tickets[X/mo][Y/mo]
undefined
MetricBeforeAfter Target
Task completion rate[X%][Y%]
Time to complete[X sec][Y sec]
Support tickets[X/mo][Y/mo]
undefined

Real-World Examples

实际案例

Example 1: Gmail Compose

案例1：Gmail 写信页

Level 0: To, Subject, Body, Send Level 1: CC, BCC (click "Cc" to reveal) Level 2: Formatting toolbar (click "A" to reveal) Level 3: Confidential mode, schedule send (menu)
Most users never need CC/BCC, so it's hidden by default.
Level 0: 收件人、主题、正文、发送按钮 Level 1: 抄送、密送（点击 "Cc" 展开） Level 2: 格式工具栏（点击 "A" 展开） Level 3: 机密模式、定时发送（菜单内）
大多数用户从来不需要抄送/密送功能，因此默认隐藏。

Example 2: Notion Properties

案例2：Notion 属性

Level 0: Page title and content Level 1: Basic properties (click to expand) Level 2: Add property, configure property Level 3: Database views, relations, rollups
New users see a simple page; power users unlock complexity.
Level 0: 页面标题和内容 Level 1: 基础属性（点击展开） Level 2: 添加属性、配置属性 Level 3: 数据库视图、关联、汇总
新用户看到的是简洁的页面；高级用户可以解锁复杂功能。

Example 3: iPhone Camera

案例3：iPhone 相机

Level 0: Shutter button, switch camera Level 1: Swipe for modes (Video, Portrait, etc.) Level 2: Tap for exposure/focus controls Level 3: Settings app for advanced options
Level 0: 快门按钮、切换摄像头 Level 1: 滑动切换模式（视频、人像等） Level 2: 点击调出曝光/对焦控制 Level 3: 设置app内的高级选项

Best Practices

最佳实践

Do

推荐做法

  • Make primary actions immediately visible
  • Use clear affordances for expanding ("Show more", arrows)
  • Remember user preferences for disclosure state
  • Provide search/filter for deeply hidden features
  • Test with both new and experienced users
  • 核心操作立即可见
  • 使用清晰的展开提示（"Show more"、箭头）
  • 记住用户对披露状态的偏好
  • 为深度隐藏的功能提供搜索/筛选功能
  • 同时面向新用户和有经验的用户进行测试

Avoid

禁止做法

  • Hiding essential functionality
  • Requiring many clicks for common tasks
  • Inconsistent disclosure patterns across the product
  • Mystery meat navigation (unclear expand triggers)
  • Over-hiding to the point of unfindability
  • 隐藏核心功能
  • 常见任务需要多次点击才能完成
  • 产品内披露模式不一致
  • 神秘导航（展开触发按钮不清晰）
  • 隐藏过深导致功能无法被找到

Disclosure Affordances

披露操作提示

PatternWhen to Use
"Show more" linkText content, lists
Chevron/arrowExpandable sections
"..." menuActions, options
TabsParallel content categories
Hover revealTooltips, secondary actions
Modal/drawerComplex sub-flows
模式适用场景
"Show more" 链接文本内容、列表
V形/箭头图标可展开区块
"..." 菜单操作、选项
Tabs平行内容分类
悬停披露Tooltip、次要操作
Modal/drawer复杂子流程

Integration with Other Methods

与其他方法的结合

MethodCombined Use
Hick's LawReduce visible choices at each level
Cognitive LoadManage working memory limits
Halo EffectPolish the essential elements first
Jobs-to-be-DoneOrganize by user jobs
方法结合用法
Hick's Law减少每个层级的可见选项
Cognitive Load管理工作记忆上限
Halo Effect优先打磨核心元素首先
Jobs-to-be-Done按用户任务组织内容

Resources

参考资源