ui-density

UI 密度

密度描述了给定区域内包含的信息量和交互元素数量。合适的密度没有通用标准，取决于平台、用户类型和会话情境。

平台默认密度

平台	默认密度	原因
桌面端	中到高	屏幕大、输入精准，通常是主要工作界面
平板	中	触控输入，屏幕比手机大，但不如桌面端
移动端	低	屏幕小，触控目标需要留出空间，会话也容易被打断

绝不要将密集的桌面布局直接移植到移动端。应移除、折叠或降低功能优先级，而不是一味缩小它们。

用户类型与密度

用户类型	合适的密度	示例
高级用户／企业用户	可接受高密度	交易平台、ERP、分析工具、开发者工具
偶尔使用的用户／普通用户	中 — 留出清晰舒适的视觉空间	SaaS 仪表板、项目管理
消费者／首次使用的用户	低 — 有引导、布局简洁	新手引导流程、消费类应用、电商

交易平台的操作人员每天会在产品中工作 8 小时，并且熟悉每个像素，因此高密度能为他们提供帮助。每月才访问一次设置页面的用户，则需要清晰的空间和醒目的标签。

领域专家可以接受复杂性 — 前提是它能快速解决 正确的 问题。 了解该领域的人（尤其是在内部工具中）会乐于使用密集、复杂且功能丰富的界面，因为这些复杂性符合他们已有的心智模型。满足以下两个条件，复杂性就会发挥作用，而不是造成负担：

• 术语符合他们的用词习惯。 标签、缩写和行话都应是他们熟悉的。对消费者来说晦涩的术语，对专家而言却是精准且高效的信号 — 不要为了并不存在的受众而把术语简化。
• 结果始终触手可及。 只要用户要找的 结果 — 他们来此寻找的答案或需要执行的操作 — 能够快速看到或完成，通常通过醒目的 主要操作（参见 [[visual-emphasis-and-hierarchy]]），高密度就没有问题。围绕清晰结果路径的复杂性是一种优势；掩盖结果的复杂性则是杂乱。

围绕这一点设计 高级用户模式：高密度、专家术语、以键盘操作为主，并始终能触及主要操作 — 与提供引导、布局简洁的 休闲／首次使用模式 区分开来。同一款产品可以同时提供两种模式；应根据实际使用该视图的人群匹配模式。

密度令牌

定义间距比例时要考虑密度。紧凑变体可在不改变结构的情况下缩小内边距：

/* Default density */
--density-row-height:    44px;
--density-cell-padding:  var(--space-3) var(--space-4);
--density-gap:           var(--space-4);

/* Compact (enterprise / data-heavy) */
[data-density="compact"] {
  --density-row-height:    32px;
  --density-cell-padding:  var(--space-2) var(--space-3);
  --density-gap:           var(--space-2);
}

/* Spacious (consumer / onboarding) */
[data-density="spacious"] {
  --density-row-height:    56px;
  --density-cell-padding:  var(--space-4) var(--space-6);
  --density-gap:           var(--space-6);
}

各平台的功能数量

并非每项功能都适用于每个平台。针对每项功能，都要询问：移动端用户现在需要它吗？

优先级	移动端	平板	桌面端
核心任务	始终显示	始终显示	始终显示
次要操作	折叠（菜单／抽屉式面板）	显示	显示
筛选和排序	可访问但不固定显示	可折叠	固定侧边栏或工具栏
批量操作	隐藏或精简	精简	完整
高级设置	链接到单独页面	链接或面板	内嵌或面板
数据可视化	简化（仅显示关键指标）	精简图表	完整图表

移动端的密度与功能精简

在较小的视口上，可以移除、折叠或重新调整区块和功能的位置，而不只是缩小它们。

• 移除： 装饰性侧边栏、次要数据列、促销横幅
• 折叠： 筛选器、高级选项、折叠到手风琴面板或底部抽屉中的次要导航
• 调整位置： 工具栏从顶部移到底部（方便拇指触及），侧边栏移入抽屉
• 简化： 多列数据表转换为卡片列表；完整图表转换为单个关键指标

渐进式呈现是核心原则：只显示完成主要任务所需的最少内容，并按需展示更多内容。

阅读需要时间

在高密度界面中，最容易被低估的成本是阅读。用户为了解界面而必须阅读的每个词，都会耗费时间，而且会不断累积——需要阅读的内容越多，每次使用时，整个界面给人的感觉就越慢。密度不只是“屏幕上能放多少内容”，还包括“用户为了采取行动必须阅读多少内容”。减少这项负担：

• 先删减文字，再考虑缩小字号。 屏幕空间局促时，通常应该减少内容，而不是缩小字体（参见 [[modular-scale-typography]]）。
• 在概念有明确、通用的图标时，用易识别的图标替代文字。 眼睛识别形状比阅读文字更快（参见 [[brand-visual-language]]）。
• 但不要过度堆砌图标。 错误或装饰性的图标只会增加需要解读的内容，而不是减少负担；到处都是图标本身也会造成干扰。只在相关位置使用恰当的图标。
• 把便于扫读的内容放在前面。 将用户要查找的词或数字放在行或标签开头，这样他们就不必读完整段内容才能找到它。

目标：用户应该能够一瞥就知道自己身处何处、接下来该做什么，而不必仔细阅读。

审查清单

• 密度是否适合主要平台（桌面端可以更密集，移动端则必须更简洁）？
• 密度是否适合用户类型（高级用户适合更高密度，普通用户则需要更多留白）？
• 是否使用间距令牌定义密度，而不是使用一次性的内边距值？
• 在移动端，是否折叠、重新定位或移除了次要功能，而不是仅仅缩小它们？
• 即使在紧凑密度变体中，触控目标是否仍 ≥ 44×44px？
• 对于用户个人偏好差异较大的企业工具，是否提供了密度切换选项？