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的类型

Type	Mechanism	Example
Click to reveal	Expand/collapse	"Show more" sections
Hover to reveal	Tooltip/popover	Help text on hover
Scroll to reveal	Below the fold	Long-form content
Time-based	Delayed introduction	Feature announcements
Skill-based	Unlock with usage	Advanced features
Role-based	Permission levels	Admin controls

类型	实现机制	示例
点击披露	展开/收起	"Show more" 区块
悬停披露	Tooltip/弹出框	悬停展示帮助文本
滚动披露	首屏以下内容	长文本内容
基于时间	延迟介绍	功能公告
基于使用熟练度	随使用解锁	高级功能
基于角色	权限等级	管理员控制项

Analysis Framework

分析框架

Step 1: Audit Current Interface

步骤1：审核现有界面

List all elements users see:

Element	User Need	Frequency	Current 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：设计披露模式

Stage	What to Show	How 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

Interface: [Name] Date: [Date]

Element Inventory

Element	Priority	Disclosure Level	Reveal Trigger
[E1]	Essential	Always visible	-
[E2]	Important	Level 1	[Trigger]
[E3]	Advanced	Level 2	[Trigger]

Element	Priority	Disclosure Level	Reveal Trigger
[E1]	Essential	Always visible	-
[E2]	Important	Level 1	[Trigger]
[E3]	Advanced	Level 2	[Trigger]

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 sees: [Initial state]
To access [feature], user: [Action]
System reveals: [New state]

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

Success Metrics

Metric	Before	After Target
Task completion rate	[X%]	[Y%]
Time to complete	[X sec]	[Y sec]
Support tickets	[X/mo]	[Y/mo]

undefined

Metric	Before	After 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

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

披露操作提示

Pattern	When to Use
"Show more" link	Text content, lists
Chevron/arrow	Expandable sections
"..." menu	Actions, options
Tabs	Parallel content categories
Hover reveal	Tooltips, secondary actions
Modal/drawer	Complex sub-flows

模式	适用场景
"Show more" 链接	文本内容、列表
V形/箭头图标	可展开区块
"..." 菜单	操作、选项
Tabs	平行内容分类
悬停披露	Tooltip、次要操作
Modal/drawer	复杂子流程

Integration with Other Methods

与其他方法的结合

Method	Combined Use
Hick's Law	Reduce visible choices at each level
Cognitive Load	Manage working memory limits
Halo Effect	Polish the essential elements first
Jobs-to-be-Done	Organize by user jobs

方法	结合用法
Hick's Law	减少每个层级的可见选项
Cognitive Load	管理工作记忆上限
Halo Effect	优先打磨核心元素首先
Jobs-to-be-Done	按用户任务组织内容

progressive-disclosure

Original

Translation

Progressive Disclosure - Show the Right Thing at the Right Time

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

When to Use This Skill

何时使用该方法

Core Concepts

核心概念

The Hierarchy of Disclosure

披露层级

80/20 Rule Applied

80/20法则的应用

Types of Progressive Disclosure

Progressive Disclosure的类型

Analysis Framework

分析框架

Step 1: Audit Current Interface

步骤1：审核现有界面

Step 2: Categorize by Priority

步骤2：按优先级分类

Step 3: Design Disclosure Pattern

步骤3：设计披露模式

Step 4: Test Understanding

步骤4：测试理解度

Output Template

输出模板

Progressive Disclosure Design

Progressive Disclosure Design

Element Inventory

Element Inventory

Disclosure Hierarchy

Disclosure Hierarchy

User Flow

User Flow

Success Metrics

Success Metrics

Real-World Examples

实际案例

Example 1: Gmail Compose

案例1：Gmail 写信页

Example 2: Notion Properties

案例2：Notion 属性

Example 3: iPhone Camera

案例3：iPhone 相机

Best Practices

最佳实践

Do

推荐做法

Avoid

禁止做法

Disclosure Affordances

披露操作提示

Integration with Other Methods

与其他方法的结合

Resources

参考资源