关于 progressive-disclosure
一种界面设计方法，让用户先看到必要信息，并在需要时逐步发现复杂内容。适用于复杂产品引导、表单、设置页和功能丰富的界面。
主要功能
- 01排列界面元素优先级
- 02规划信息展示层级
- 03选择内容展开方式
- 04盘点界面内容
- 05测试功能可发现性
适用场景
- 01设计复杂产品的引导流程
- 02简化功能丰富的界面
- 03组织多步骤表单
- 04让高级设置更易查找
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/progressive-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)
80/20 法则的应用
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...] |||
| | +------------------------------+||
| +------------------------------------+|
+------------------------------------------+
渐进式呈现的类型
| 类型 | 机制 | 示例 |
|---|---|---|
| 点击后呈现 | 展开/收起 | “显示更多”区域 |
| 悬停后呈现 | 工具提示/弹出框 | 悬停时显示帮助文本 |
| 滚动后呈现 | 首屏以下 | 长篇内容 |
| 基于时间 | 延迟介绍 | 功能公告 |
| 基于技能 | 随使用情况解锁 | 高级功能 |
| 基于角色 | 权限级别 | 管理员控件 |
分析框架
步骤 1：审查当前界面
列出用户看到的所有元素：
| 元素 | 用户需求 | 使用频率 | 当前可见性 |
|---|---|---|---|
| [元素 1] | [需求] | [每天/每周/很少] | [始终/有时/隐藏] |
| [元素 2] | [需求] | [每天/每周/很少] | [始终/有时/隐藏] |
步骤 2：按优先级分类
HIGH
|
+----------------+----------------+
| | |
| ESSENTIAL | CONTEXTUAL |
| Always show | Show when |
| | relevant |
FREQUENCY | NEED
| | |
| ACCESSIBLE | HIDE |
| One click | Deep menus |
| away | |
+----------------+----------------+
|
LOW
步骤 3：设计呈现模式
| 阶段 | 展示内容 | 如何呈现下一层 |
|---|---|---|
| 初始视图 | [核心元素] | [触发进入第 1 层] |
| 第 1 层 | [次要元素] | [触发进入第 2 层] |
| 第 2 层 | [高级元素] | [触发进入第 3 层] |
步骤 4：测试理解情况
- 用户无需展开就能完成主要任务吗？
- 用户需要时能找到高级功能吗？
- “展开”提示是否清晰？
输出模板
## 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] |
### 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]
### User Flow
1. User sees: [Initial state]
2. To access [feature], user: [Action]
3. 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] |
真实案例
示例 1：Gmail 撰写邮件
第 0 层：收件人、主题、正文、发送 第 1 层：抄送、密送（点击“抄送”即可呈现） 第 2 层：格式工具栏（点击“A”即可呈现） 第 3 层：机密模式、定时发送（菜单）
大多数用户从不需要抄送/密送，因此默认隐藏。
示例 2：Notion 属性
第 0 层：页面标题和内容 第 1 层：基本属性（点击展开） 第 2 层：添加属性、配置属性 第 3 层：数据库视图、关联、汇总
新用户看到的是简洁页面；高级用户可以解锁更多复杂功能。
示例 3：iPhone 相机
第 0 层：快门按钮、切换摄像头 第 1 层：滑动切换模式（视频、人像等） 第 2 层：轻点以调整曝光/对焦 第 3 层：在“设置”应用中调整高级选项
最佳实践
建议
- 让主要操作一目了然
- 使用清晰的展开提示（“显示更多”、箭头）
- 记住用户对呈现状态的偏好
- 为深层隐藏的功能提供搜索/筛选
- 同时向新用户和有经验的用户进行测试
避免
- 隐藏基本功能
- 常见任务需要点击很多次才能完成
- 产品各处的呈现模式不一致
- 令人困惑的导航（展开触发方式不清晰）
- 过度隐藏，导致用户无法找到功能
渐进式披露的呈现方式
| 模式 | 适用场景 |
|---|---|
| “显示更多”链接 | 文本内容、列表 |
| 折叠箭头 | 可展开的部分 |
| “...”菜单 | 操作、选项 |
| 标签页 | 并列的内容类别 |
| 悬停显示 | 工具提示、次要操作 |
| 模态框/抽屉 | 复杂的子流程 |
与其他方法结合
| 方法 | 组合使用方式 |
|---|---|
| Hick 定律 | 减少每个层级中可见的选项 |
| 认知负荷 | 管理工作记忆限制 |
| 光环效应 | 优先完善核心元素 |
| 待完成工作 | 按用户要完成的任务进行组织 |
资源
评论
支持 Markdown