关于 progressive-disclosure
用于规划渐进披露界面的设计技能,帮助设计者按重要性和使用频率安排信息。它提供分层规则、常见呈现模式和可检验的设计流程。
主要功能
- 01按重要性划分四个展示层级
- 02保留主要操作的可见性
- 03运用展开区、提示框和标签页
- 04通过搜索定位深层设置
- 05测试任务完成度与可发现性
适用场景
- 01精简复杂设置界面
- 02决定哪些操作应默认显示
- 03设计多步骤配置流程
- 04检查高级功能是否易于找到
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ flpbalada/ fb-skills --skill progressive-disclosure安装后在 Claude Code 中输入/progressive-disclosure确认已加载。
详细介绍
渐进式呈现
展示用户当前需要的内容。 在需要时再展示更多内容。
目标
降低可见的复杂度,同时不隐藏重要工作。
规则
- 保持主要操作可见。
- 仅隐藏次要或高级选项。
- 使用清晰的展开控件。
- 保持展开模式一致。
- 在适当情况下记住用户偏好。
- 为深层设置提供搜索功能。
- 与新手和有经验的用户一起测试。
级别
- 级别 0:必需内容,始终可见。
- 级别 1:重要内容,只需一次操作即可查看。
- 级别 2:有用但不常用的内容。
- 级别 3:高级内容,有意放在更深层级。
模式
- 展开分区以显示额外字段。
- 使用工具提示提供简短帮助。
- 使用抽屉或模态框呈现子流程。
- 使用标签页划分同级类别。
- 使用更多菜单收纳次要操作。
- 使用向导完成多步骤设置。
流程
- 梳理可见元素。
- 标注用户需求和使用频率。
- 保持必需且常用的项目可见。
- 将上下文相关的项目放在一步操作即可到达的位置。
- 将少见的高级项目放在更深层级。
- 添加清晰的触发器标签或图标。
- 测试任务完成情况和内容可查找性。
资源
输出
## Progressive Disclosure Plan
Interface: [name]
Level 0:
- [element]
Level 1:
- Trigger: [control]
- Reveals: [elements]
Level 2+:
- Trigger: [control]
- Reveals: [elements]
Metrics:
- Task completion: [target]
- Time to complete: [target]
- Support tickets/confusion: [target]
检查
- 无需展开即可完成主要任务。
- 能找到高级功能。
- 展开提示一目了然。
评论
支持 Markdown