关于 information-density
用于设计可调节信息显示密度的界面技能，指导设计师在紧凑、舒适和宽松布局间取得平衡，同时确保不同设置下内容完整且易访问。
主要功能
- 01紧凑、舒适和宽松选项
- 02密度控制与偏好记忆
- 03调整间距、文字和元数据
- 04保持内容与易访问性一致
- 05根据视口和偏好调整默认值
- 06评估检查清单
适用场景
- 01设计可调密度的数据表和列表
- 02为仪表板设置密度控制
- 03适配触控与低视力用户的界面
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/information-density确认已加载。
详细介绍
信息密度
设计界面，让用户可以控制一次看到多少信息——因为适合逐行浏览 200 行数据的高级用户的信息密度，并不适合需要留出空间来处理每个项目的用户。
密度范围
紧凑
- 间距极少、文字较小、可见项目更多
- 适合：高级用户、数据密集型任务、大屏幕
- 风险：可能令认知障碍人士难以应对；在触控设备上难以点按；低视力用户难以浏览
舒适（默认）
- 间距适中、文字大小标准、可见内容均衡
- 适合：大多数用户在大多数场景下使用
- 这应当作为默认设置——优先针对这种密度进行优化
宽松
- 间距充足、文字较大、可见项目较少
- 适合：认知障碍人士、低视力用户、触控设备、新用户、压力较大的场景
- 风险：有经验的用户需要滚动更多内容
设计模式
密度控制
- 提供 2–3 种密度选项（紧凑、舒适、宽松）
- 使用清晰的标签，而不只是图标开关
- 立即应用密度更改（无需重新加载页面）
- 跨会话记住用户偏好
- 将控制项放在其所影响的内容附近
密度变化的内容
- 项目之间的垂直间距
- 项目内的水平内边距
- 字号（保持在无障碍范围内——绝不低于 0.875rem）
- 行高（保持在无障碍范围内——正文绝不低于 1.5）
- 每个项目显示的元数据数量
- 缩略图或预览的尺寸
- 网格布局中的列数
密度不应改变的内容
- 内容含义——任何密度下都不应丢失信息
- 无障碍性——每种密度级别都必须满足 WCAG 要求
- 交互目标——无论密度如何，触控目标最小尺寸均为 44×44px
- 标题结构——结构保持一致
- 键盘导航——Tab 顺序保持合理
不同场景下的密度
- 列表和信息流： 控制行高和可见元数据
- 数据表格： 控制行内边距和可见列
- 仪表盘： 控制卡片尺寸和间距
- 收件箱： 控制预览长度和行高
- 日历： 控制事件详情的可见程度
适应场景的默认设置
基于视口的默认设置
- 大屏幕（1440px+）：舒适或紧凑
- 中等屏幕（768–1439px）：舒适
- 小屏幕（低于 768px）：舒适或宽松
- 触控设备：默认绝不使用紧凑模式
基于偏好的默认设置
- 如果系统文字大小已调大：默认使用宽松模式
- 如果启用了 prefers-contrast：稍微增加间距
- 新用户：默认使用舒适模式
- 允许用户覆盖所有默认设置
评估清单
- 至少提供两种密度选项
- 默认密度为舒适，而非紧凑
- 任何密度级别下都不会丢失信息
- 所有密度下都保持最小触控目标尺寸（44×44px）
- 所有密度下都保持最小字号（0.875rem）
- 所有密度下都保持最小行高（1.5）
- 跨会话记住密度偏好
- 密度会根据视口和系统偏好进行调整
评论
支持 Markdown