用户界面密度意味着什么以及如何为其设计

界面变得越来越不密集。

我通常对怀旧情绪和“我们喜欢那样”的偏见持怀疑态度，但将2024年的网站和应用程序与2000年代的同类产品进行比较，软件的扩散是难以忽视的。

为了解释这一趋势，并提出我们如何可能恢复密度，我首先从询问UI密度究竟是什么开始。它不仅仅是界面在某一时刻的外观；它是关于一个界面在一系列时刻能够提供的信息量。它是关于这些时刻是如何通过设计决策连接的，以及这些决策是如何与软件提供的价值相关联的。

我想分享我的发现。希望这次探索能帮助您以具体和可用的术语定义用户界面密度。如果您是设计师，我希望您质疑您正在创建的界面的密度；如果您不是设计师，使用用户界面密度的视角来理解您使用的软件。

视觉密度

我们首先用眼睛考虑密度。乍一看，密度只是我们在给定空间中看到的东西的数量。这是视觉密度。一个视觉密集的软件界面在屏幕上放置了很多元素。一个视觉稀疏的界面在屏幕上放置了较少的元素。

彭博社的终端可能是这种密度最常见的例子。在仅仅一个屏幕上，您将看到滚动的主要市场指数的迷你图表、详细的交易量分解、带有数十行和列的表格、滚动的包含世界各地机构最新新闻的标题，以及带有键盘快捷键和快速操作的所有上述内容的用户界面标志。

终端界面的截图。通过Objective Trade在YouTube上

终端界面的截图。通过Objective Trade^[1]在YouTube上

Craigslist是另一个视觉密集的例子，它的数百个普通链接指向类别和简朴的搜索和过滤界面。McMaster-Carr的网站在非常小的空间内列出了许多产品变体的详细信息，具有相似的设计提示。

Craigslist首页的截图McMaster-Carr产品页面的截图

大约2024年的Craigslist首页和McMaster-Carr产品页面的截图。

您可以通过在图像上看一眼的一小部分时间形成对这些网站密度的意见。这种意见来自我们的潜意识，所以它快速且直观。但像其他快速判断一样，它是有偏见且不可靠的。例如，这些图像中哪一个更密集？

两个矩形。左边的矩形填充了许多随机排列的点。右边的矩形填充了相同数量的点，但它们整齐地排列在行和列中。

两张图像都有相同数量的点（500个）。它们都占据了相同的空间。但乍一看，大多数人会说图像B看起来更密集。1^[2]

那么这两个图像呢？

两个矩形。左边的矩形填充了许多整齐地排列在行和列中的点。右边的矩形填充了相同数量的点，排列成两个整齐有序的点组。

同样，两张图像都有相同数量的点，大小也相同。但将点组织成组改变了我们对密度的感知。视觉密度——我们对密度的第一种、本能的判断——是不可预测的。

在设计问题上，我们不可能完全客观。但如果我们想要讨论密度，我们应该尽可能地寻求最一致、最有意义和最有用的定义。

信息密度

在《定量信息的视觉展示》中，爱德华·塔夫特从基础开始探讨图表和图形的设计：

图形上的每一点墨水都需要有理由。而且几乎总是这个理由应该是墨水呈现了新信息。

塔夫特引入了“数据墨水”的概念，定义为给定可视化中有用的部分。塔夫特认为，不严格传达数据的视觉元素，无论是刻度值、标签还是数据本身，都应该被消除。

数据墨水不仅仅是图表所占用的空间。一些图表使用非常少的额外墨水，但仍然占据了很多物理空间。塔夫特谈论的是信息密度，而不是视觉密度。

信息密度是一个可测量的数量：要计算它，您只需将图表中的“数据墨水”数量除以打印它所需的总墨水量。当然，什么是和不是数据墨水有点主观，但这不是重点。重点是尽可能接近1的比率。

您可以通过两种方式增加比率：

1. 添加数据墨水：提供额外（有用的）数据

2. 移除非数据墨水：擦除图形中不传达数据的部分

元素周期性的图像。它使用了许多不必要的视觉元素，如不传达信息的网格标记。改进后的元素周期性图像。它移除了网格标记，并在相同的空间中添加了额外的信息。

塔夫特关于数据墨水比率低（第一张）和高（第二张）的图形示例。摘自爱德华·塔夫特的《定量信息的视觉展示》

信息密度有一个上限，这意味着您可能会减去太多的墨水，或者添加太多的信息。受众也很重要：在他们的四显示器桌面上的债券交易员将有一个相当高的阈值；阅读教科书的二年级学生将有一个低阈值。

信息密度可以与视觉密度相关。通常，信息密度越高，可视化看起来就越密集。

例如，看看E.J. Marey在1885年发布的火车时刻表2^[3]。它显示了从巴黎到里昂的13个站点上数十列火车的到达和出发时间。水平轴是时间，垂直轴是空间。图表上站点之间的距离反映了它们在现实世界中的远近。

数据墨水比率接近1，允许大量的信息——超过260个到达和出发时间——被打包到一个相对较小的空间中。

从巴黎到里昂的火车时刻表的可视化。水平轴是时间，垂直轴是空间。图表上站点之间的距离反映了它们在现实世界中的远近。

E.J. Marey在1885年发布的时刻表可视化。摘自爱德华·塔夫特的《定量信息的视觉展示》

塔夫特明确提出了这个观点：

在合理的范围内（同时利用可用数据展示技术的最大分辨率），最大化数据密度和[数据量]。

他更简洁地称之为“收缩原则”：

图形可以大幅度缩小

信息密度显然对图表和图形很有用。但我们能将其应用于界面吗？

等式的前半部分——信息——适用于屏幕。我们应该最大化每个部分的界面显示的信息量。

但等式的后半部分——墨水——有点难以翻译。很容易认为像素和墨水是等价的。但任何超过几个元素的界面都需要分隔符、结构元素和标志，以帮助用户理解每个部分与其他部分的关系。

也很想遵循塔夫特的收缩原则，试图消除界面中的所有空白。但有些空白的意义几乎和图形元素的暗像素一样显著。我们甚至还没有触及阴影、渐变或颜色高光；它们在数据墨水方程中扮演什么角色？

所以，虽然信息密度是一个有用的垫脚石，但很明显它只是更大画面的一部分。我们如何将界面中的所有设计决策纳入一个更客观、量化的密度理解？

设计密度

您可能已经在用设计决策来定义密度时看到了第一个挑战：什么算是一个决策？

在UI、UX和产品设计中，我们有意识和无意识地做出许多决策，以传达信息和想法。但为什么这些特定的选择会传达它们的意义？哪些是卓越的或仅仅是美学的，哪些实际上在做重活？

这些问题激发了20世纪德国心理学家探索人类如何理解和解释形状和模式。他们称这个领域为“格式塔”，在德语中意为“形式”。在他们的探索过程中，格式塔心理学家描述了一些原则，这些原则描述了为什么某些事物看起来有序、对称或简单，而其他事物则不是。虽然这些心理学家不是设计师，但他们在某种意义上发现了设计的基本原理：

1. 接近性：我们认为彼此靠近的事物组成了一个单一的组

2. 相似性：在形状、大小、颜色或其他方面相似的对象，看起来彼此相关。

3. 闭合性：我们的大脑会在设计中填补空白，因此我们倾向于看到完整的形状，即使没有形状

4. 对称性：如果我们看到彼此对称的形状，我们认为它们是围绕一个中心点形成的组

5. 共同命运：当对象移动时，我们心理上会将以相同方式移动的对象分组

6. 连续性：即使它们重叠，我们也可以将对象视为分开的

7. 过去经验：即使在不熟悉的上下文中，我们也能识别熟悉的形状和模式。我们的期望基于我们过去对这些形状和模式的学习经验。

8. 图形-背景关系：我们以三维的方式解释我们所看到的，允许即使是平面的2D图像也有前景和背景元素。

接近性（左）、相似性（中）和闭合性（右）的原则示例。

格式塔原则解释了为什么UI设计超越了屏幕上的像素。例如：

• 由于相似性原则，用户会理解具有相同大小、字体和颜色的文本在界面中具有相同的目的。

• 接近性原则解释了为什么当图表靠近标题时，很明显标题指的是图表。同样的原因，紧密排列的元素网格看起来相关，并且与上方由充足空间分隔的菜单分开。

• 由于我们对开关的过去经验，结合图形-背景原则，一个模拟开关的拟态设计将让用户立即明白如何打开一个功能。

所以，我们不是专注于像素，而是将设计决策视为我们有意使用格式塔原则来传达意义。就像塔夫特的数据墨水比率比较了打印图表所必需的严格必要的墨水与所使用的总墨水量一样，我们可以计算一个格式塔比率，该比率比较了设计中严格必要的设计决策与所使用的总决策。这是设计密度。

使用不同类型的格式塔原则和不同数量的格式塔原则处理相同信息的四种不同方式。哪一种是最密集的？

使用不同类型的格式塔原则和不同数量的格式塔原则处理相同信息的四种不同方式。哪一种是最密集的？

这仍然是主观的：对某些人来说似乎必要的设计决策对其他人来说可能是多余的。我们的偏见会扭曲我们的评估，无论是个人品味还是文化规范。但在用户界面方面，计算设计决策的数量比仅仅计算数据或“墨水”的数量更有用。

设计密度并不完美。用户界面的存在是为了工作、娱乐、消磨时间、创造理解、促进个人联系等。这些需要用户采取一个或多个行动，因此密度需要超越组件、布局和屏幕。密度应该包括用户在其旅程中采取的所有行动——它应该在空间和时间上计算。

时间中的密度

就像给定空间中的东西数量决定视觉密度一样，用户在给定时间内可以做的事情的数量决定时间——时间上的——密度。

加载时间是时间密度中最大的因素。界面对操作的响应速度越快，加载新页面或屏幕的速度越快，UI就越密集。与二维空白不同，时间间隔所需的空间几乎没有下限。

彭博社的终端瞬间加载了充满数据的屏幕

彭博社的终端瞬间加载了充满数据的屏幕

对于当今膨胀的软件来说，使UI在时间上更密集比仅仅在每个屏幕上挤压更多的东西更有影响力。这就是为什么彭博社的终端仍然是金融分析领域中如此占主导地位的工具；它几乎瞬间加载数据。一个熟练的终端用户可以在毫秒之间浏览数十个图表和图形。有很多方法可以将大量金融数据塞进一个表格中，但无延迟地加载它是终端的真正超能力。

但假设您已经从应用程序的加载时间中挤出了每一秒钟。接下来呢？有些东西就是无法加速：您无法改变用户的互联网连接速度，或者他们CPU的计算速度。一些操作，如上传文件、等待客户支持响应或处理支付，涉及具有不可预测变量的复杂系统。在这些情况下，与其改变任务之间的时间，不如改变时间的感知：

• 相隔不到100毫秒的行动会感觉同时发生。如果您点击一个图标，100ms后，一个菜单出现，感觉好像两个动作之间没有时间流逝。因此，如果两个动作之间有动画——例如，菜单滑入——同时性的幻觉可能会被打破。对于最小的时间空间，动画和过渡可以使应用程序感觉更慢。3^[4]

• 在100毫秒到1秒之间，两个动作之间的联系被打破。如果您点击一个链接，一秒钟内没有任何变化，怀疑就会潜入：您真的点击了什么吗？应用程序坏了吗？您的互联网工作正常吗？动画和过渡可以弥合这种感知上的差距。在这些空间中的视觉提示使UI在时间上感觉更密集。

• 在1到10秒之间的间隔不能仅用动画桥接；研究表明4^[5]用户最有可能在前10秒内放弃页面。这意味着如果两个动作足够远，用户将离开页面而不是等待第二个动作。如果您无法减少这些动作之间的时间，请显示一个不确定的加载指示器——一个小动画，告诉用户系统正在正常运行。

• 在10秒到1分钟之间的间隔更难填补。在看到不确定的加载器超过10秒后，用户可能会将其视为静态的，而不是动态的，并开始假设页面没有按预期工作。相反，您可以使用一个确定的加载指示器——像一个更大的进度条——清楚地指示直到下一个动作发生还有多少时间。事实上，正确的设计可以使等待时间看起来比实际短；苹果的“Aqua”设计系统中突出显示的反向移动条纹使等待时间看起来短了11%。5^[6]

• 对于超过1分钟的间隔，最好让用户离开页面（或做其他事情），然后在下一个动作发生时通知他们。超过一分钟阻止某人做任何有用的事情会造成挫败感。此外，漫长、复杂的过程也容易出错，这可能会加剧挫败感。

最终，使UI在时间和空间上密集只是一种手段。没有UI因其外观而有价值。界面之所以有价值，是因为它们能够实现的结果——无论是直接与商业软件的一些美元价值相关联，还是与娱乐或教育等无形价值相关联。

那么密度到底是关于什么的呢？它是关于在最少的时间、空间、像素和墨水中提供最高价值的结果。

价值密度

这里有一个价值密度如何体现的例子：对于任何基于表单的界面，一个常见的建议是将长表单分成较小的部分，然后将这些部分组合在一个向导类型的界面中，该界面在您进行过程中保存您的进度。这是因为部分填写的表单没有价值；将所有问题放在一个页面上可能看起来视觉上更密集，但如果填写时间更长，许多用户根本不会提交它。

这个表单被分成了多个部分，有清晰的错误和解决指令。

这个表单被分成了多个部分，有清晰的错误和解决指令。

使用设计使用户能够以更少的错误完成表单可能需要占用更多空间。可能需要更多的步骤，并且需要更多的时间。但如果视觉和时间密度的权衡使得结果对用户或业务更有价值——无论是通过增加提交率还是使努力更值得用户的时间去完成——那么我们就增加了整体的价值密度。

同样，如果我们可以通过使表单更紧凑、加载更快、更少错误，而不减少对用户或业务的价值，来增加视觉和时间密度，那么这就是整体密度的增加。

借鉴塔夫特的观点，我们应该尽可能地增加价值密度。

解决这个优化问题可能会有一些违反直觉的结果。当互联网还很年轻的时候，像Craigslist这样的公司通过聚合和策划信息并以链接页面的形式展示来创造价值密度。像雅虎和Altavista这样的公司使得搜索那些信息成为可能，但仍然将聚合放在首位。谷歌采取了一种截然不同的方法：使用互联网的长链链接列表中获得的信息来驱动一个搜索框。信息正在自我聚合；用户需要访问整个网络只需要一个文本输入框。

2001年谷歌首页的截图

2001年雅虎首页的截图

2024年谷歌首页的截图

2024年雅虎首页的截图

从2001年（第一组截图存档）到2024年（第二组截图拍摄），谷歌和雅虎对数据、设计和价值密度的方法没有改变。这两家公司股票的价值反映了这些不同方法的结果。

UI在视觉上不那么密集，但价值密度却高出几个数量级。结果不言自明：谷歌的估值从2004年的230亿美元增长到今天超过2万亿美元——接近100倍的增长。雅虎从2000年的1250亿美元价值被出售为48亿美元——不到其峰值价值的3%。6^[7]

结论

为UI密度设计超越了界面的视觉方面。它包括我们做出的所有隐含和明确的设计决策，以及我们选择在屏幕上显示的所有信息。它包括所有时间和用户为从软件中获得有价值的东西而采取的所有行动。

那么，UI密度的具体定义是：UI密度是用户从界面获得的价值除以界面所占据的时间和空间。

速度、可用性、一致性、可预测性、信息丰富性和功能性都在这个等式中扮演了重要角色。通过考虑所有这些方面，我们可以了解为什么一些界面成功而其他界面失败。通过为密度而设计，我们可以帮助人们从我们构建的软件中获得更多的价值。

脚注 & 参考文献

1. 这是一个非常不科学的说法，基于对我20名同事的调查。可重复性值得怀疑。

2. 图表的出处很有趣。关于原始设计师查尔斯·伊布里（Charles Ibry）的了解不多；但我们所知道的指向了设计的更早版本。如果您感兴趣，请阅读桑德拉·伦登关于火车时刻表的迷人历史^[8]。

3. 我对这个说法没有科学依据，但我相信这是因为典型的眨眼发生在100ms内。当我们眨眼时，我们的大脑用我们看到的最后一件事填补空白，所以我们没有注意到眨眼。这就是为什么我们没有注意到两个动作之间不到100ms的间隔。您可以在这篇文章中阅读更多关于这种效应的信息：视觉感知：Saccadic Omission — Suppression or Temporal Masking?^[9]

4. Nielsen, Jakob. “How Long Do Users Stay on Web Pages?” Nielsen Norman Group, 11 Sept. 2011, https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/^[10]

5. Harrison, Chris, Zhiquan Yeo, and Scott E. Hudson. “Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations.” Carnegie Mellon University, 2010, https://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf^[11]

6. HackerNews指出这是一个荒谬的说法。它确实是。当然，价值密度不是谷歌在雅虎失败的地方成功的唯一原因。但作为每家公司如何思考他们的产品的反映，它是一个好的领先指标。

引用链接

[1] Objective Trade：https://www.youtube.com/watch?v=2ee-x6IXWK8

[2] 桑德拉·伦登关于火车时刻表的迷人历史：https://sandrarendgen.wordpress.com/2019/03/15/data-trails-from-paris-with-love/

[3] 视觉感知：Saccadic Omission — Suppression or Temporal Masking?：https://www.sciencedirect.com/science/article/pii/S0960982209011105

[4] https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/：https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

[5] https://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf：https://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf