Back to Details

ui-density

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Density

UI密度

Density describes how much information and how many interactive elements appear in a given area. The right density is not a universal standard — it depends on platform, user type, and session context.
密度指的是特定区域内呈现的信息量与交互元素数量。合适的密度并无统一标准——它取决于平台、用户类型以及会话场景。

Platform Defaults

平台默认值

PlatformDefault densityReason
DesktopMedium to highLarge screen, precise input, often primary work surface
TabletMediumTouch input, larger than phone but less than desktop
MobileLowSmall screen, touch targets need space, interrupted sessions
Never port a dense desktop layout directly to mobile. Remove, collapse, or deprioritise features rather than shrinking them.
平台默认密度原因
桌面端中到高屏幕尺寸大，输入精准，通常是主要工作场景
平板端中等触控输入，屏幕比手机大但小于桌面端
移动端低屏幕尺寸小，触控目标需要预留空间，会话易被中断
切勿直接将高密度的桌面端布局移植到移动端。应移除、折叠或降低功能优先级，而非单纯缩小元素。

User Type and Density

用户类型与密度

User typeAppropriate densityExamples
Power user / enterpriseHigh density acceptableTrading platforms, ERP, analytics, developer tools
Occasional / general userMedium — clear visual breathing roomSaaS dashboards, project management
Consumer / first-time userLow — guided, unclutteredOnboarding flows, consumer apps, e-commerce
A trading platform operator sits in the product for 8 hours a day and has learned every pixel — high density serves them. A user visiting a settings page once a month needs clear space and obvious labels.
Domain experts tolerate complexity — if it solves the right problem quickly. People who know the domain (especially in internal tools) will happily use dense, complex, feature-rich interfaces, because the complexity maps to a mental model they already hold. Two conditions make this work rather than overwhelm:
  • Terminology matches their vocabulary. The labels, abbreviations, and jargon are the ones they already use. A term that's opaque to a consumer is a precise, fast signal to an expert — don't dumb it down for an audience that isn't there.
  • The outcome stays quickly reachable. Density is fine as long as the result — the answer they came for, or the action they need — is fast to see or do, typically through an obvious primary action (see [[visual-emphasis-and-hierarchy]]). Complexity that surrounds a clear path to the outcome is power; complexity that buries the outcome is clutter.
Design a power-user mode around this: high density, expert terminology, keyboard-driven, primary action always in reach — distinct from a casual/first-time mode that guides and unclutters. The same product may offer both; match the mode to who is actually using the view.
用户类型适配密度示例
高级用户/企业用户可接受高密度交易平台、ERP系统、分析工具、开发者工具
偶尔/普通用户中等——预留清晰的视觉呼吸空间SaaS仪表盘、项目管理工具
消费者/首次用户低——引导式、简洁无冗余新手引导流程、消费类应用、电商平台
交易平台的操作员每天在产品中工作8小时，对每一处细节都了如指掌——高密度界面更适合他们。而每月仅访问一次设置页面的用户则需要清晰的空间和明确的标签。
**领域专家能够接受复杂度——前提是它能快速解决正确的问题。**熟悉领域的用户（尤其是内部工具用户）会乐于使用密集、复杂、功能丰富的界面，因为这种复杂度与他们已有的心智模型相契合。要让这种设计有效而非造成困扰，需满足两个条件：
  • **术语符合他们的词汇体系。**标签、缩写和行话都是他们日常使用的内容。对消费者来说晦涩的术语，对专家而言却是精准、高效的信号——无需为不存在的受众简化内容。
  • 结果触手可及。只要用户寻求的答案或需要执行的操作能快速找到或完成（通常通过明确的核心操作，参见[[visual-emphasis-and-hierarchy]]），高密度就是可行的。围绕清晰路径的复杂度是助力；掩盖核心目标的复杂度则是冗余。
基于此设计高级用户模式：高密度、专业术语、键盘驱动、核心操作始终触手可及——与引导式、简洁的普通/首次用户模式区分开。同一产品可同时提供两种模式；根据当前使用者匹配对应模式。

Density Tokens

密度令牌

Define spacing scale with density in mind. A compact variant reduces padding without changing structure:
css
/* 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);
}
结合密度定义间距尺度。紧凑变体可在不改变结构的前提下减少内边距：
css
/* 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);
}

Feature Count by Platform

各平台功能数量

Not every feature belongs on every platform. For each feature ask: does a mobile user need this right now?
PriorityMobileTabletDesktop
Core taskAlwaysAlwaysAlways
Secondary actionsCollapsed (menu/sheet)VisibleVisible
Filters and sortingAccessible but not persistentCollapsiblePersistent sidebar or toolbar
Bulk actionsHidden or minimalReducedFull
Advanced settingsLink to separate screenLink or panelInline or panel
Data visualisationSimplified (key metric only)Reduced chartFull chart
并非所有功能都适合所有平台。针对每个功能需思考：移动端用户当下是否需要它？
优先级移动端平板端桌面端
核心任务始终保留始终保留始终保留
次要操作折叠（菜单/底部弹窗）可见可见
筛选与排序可访问但非持久显示可折叠持久显示在侧边栏或工具栏
批量操作隐藏或极简精简完整呈现
高级设置链接至独立页面链接或面板内嵌或面板形式
数据可视化简化（仅显示关键指标）简化图表完整图表

Density and Feature Reduction on Mobile

移动端的密度与功能精简

Sections and features can be removed, collapsed, or repositioned on smaller viewports — not just resized.
  • Remove: Decorative sidebars, secondary data columns, promotional banners
  • Collapse: Filters, advanced options, secondary navigation into accordions or bottom sheets
  • Reposition: Toolbars move from top to bottom (thumb reach), sidebars move to drawers
  • Simplify: A multi-column data table becomes a card list; a full chart becomes a single key metric
Progressive disclosure is the principle: show the minimum needed to complete the primary task, reveal more on demand.
在小视窗下，板块和功能可被移除、折叠或重新定位——而非仅调整大小。
  • **移除：**装饰性侧边栏、次要数据列、推广横幅
  • **折叠：**筛选器、高级选项、次要导航，转为手风琴组件或底部弹窗
  • **重定位：**工具栏从顶部移至底部（方便拇指触及），侧边栏转为抽屉式
  • **简化：**多列数据表转为卡片列表；完整图表转为单一关键指标
渐进式披露是核心原则：仅展示完成核心任务所需的最少内容，按需显示更多信息。

Reading Is Time

阅读耗时

The most under-counted cost in a dense UI is reading. Every word the user must read to orient themselves is time spent, and it compounds — the more there is to read, the slower the whole interface feels, on every visit. Density is not just "how much fits on screen"; it's "how much the user has to read to act." Reduce that load:
  • Cut words before you shrink them. The fix for a cramped screen is usually less content, not smaller type (see [[modular-scale-typography]]).
  • Let recognisable icons replace reading where a concept has an unambiguous, standard icon — the eye recognises a shape faster than it reads a word (see [[brand-visual-language]]).
  • But don't over-ice with icons. A wrong or decorative icon adds a thing to interpret instead of removing one; and an icon on everything is its own noise. Right icon, relevant place only.
  • Front-load the scannable bit. Put the word or number the user scans for at the start of the line/label, so they don't read the whole thing to find it.
The goal: a user should be able to glance, not read, to know where they are and what to do next.
高密度UI中最易被忽视的成本是阅读时间。用户为定位所需信息而阅读的每一个字都需要花费时间，且会不断累积——内容越多，整个界面给人的感觉就越慢，每次访问都是如此。密度不仅是“屏幕能容纳多少内容”，更是“用户为执行操作需要阅读多少内容”。需降低这种负担：
  • **先精简文字再缩小尺寸。**解决屏幕拥挤问题的通常方法是减少内容，而非缩小字体（参见[[modular-scale-typography]]）。
  • 用可识别图标替代文字——当概念有明确的标准图标时，眼睛识别形状的速度比阅读文字更快（参见[[brand-visual-language]]）。
  • **但不要过度使用图标。**错误或装饰性图标会增加理解负担而非减轻；所有元素都加图标也会造成视觉噪音。仅在合适的位置使用恰当的图标。
  • **前置可扫描内容。**将用户会扫描的文字或数字放在行/标签的开头，这样他们无需阅读全部内容就能找到目标。
目标：用户只需扫视而非阅读，就能知道自己所处位置及下一步操作。

Review Checklist

审核清单

  • Is the density appropriate for the primary platform (desktop = can be denser, mobile = must be sparse)?
  • Is the density appropriate for the user type (power user = higher density, consumer = more space)?
  • Are spacing tokens used to define density — not one-off padding values?
  • On mobile: are secondary features collapsed, repositioned, or removed rather than shrunk?
  • Are touch targets ≥ 44×44px even in compact density variants?
  • Is a density toggle offered for enterprise tools where users have strong personal preferences?
  • 密度是否适配主平台（桌面端可更密集，移动端必须精简）？
  • 密度是否适配用户类型（高级用户可接受更高密度，消费者需要更多空间）？
  • 是否使用间距令牌定义密度——而非一次性内边距值？
  • 移动端：次要功能是否被折叠、重定位或移除，而非单纯缩小？
  • 即使在紧凑密度变体中，触控目标尺寸是否≥44×44px？
  • 针对企业工具，是否提供密度切换选项以满足用户的个性化偏好？