信息过载 or 简约美？一文讲清界面设计应该遵循的依据

用户界面的信息密度正在变得越来越小了。

我一般对怀古抑今和“以前我们就喜欢那种样子”的偏见持怀疑态度，但如果我们对比 2024 年的网站和应用程序与它们在 2000 年代的前辈的话，软件界面摊大饼的趋势还是很难被忽略的。

为了解释这一趋势的成因，并给出我们该如何找回密度的建议，我要解答的第一个问题就是究竟何为 UI 密度。它不只是用户界面在某一时刻的样子；它关系的是界面在一系列时点上可以提供的信息量，也关系着这些时点如何与一系列设计决策关联起来，以及这些决策如何与软件提供的价值建立关联。

本文中我想分享我的探索结果。希望本文能帮你用一些具体和可用的术语来定义 UI 密度。如果你是一名设计师，我希望你去思考和质疑自己正在创建的界面的密度；如果你不是设计师，请使用 UI 密度这个视角来观察和理解你所使用的软件。

视觉密度

我们首先用双眼的维度来考虑密度这个概念。乍一看，密度就是我们在给定空间中所看到的事物数量，这就是视觉密度。视觉上很密集的软件界面会在屏幕上显示很多东西。视觉上较稀疏的界面在屏幕上显示的东西较少。

彭博终端也许是这种密度概念中最常见的例子。只在一个页面上，你就会看到主要市场指数的滚动火花线、详细的交易量细分信息、包含数十行和数十列的表格、包含来自世界各地机构的最新消息的滚动标题，以及上述所有内容的 UI 指示牌，这些指示牌还有很多键盘快捷键和快速操作。

彭博终端界面的屏幕截图

Craigslist 是另一个视觉密集的例子，它有数百个简单的类别链接和简洁的搜索和过滤界面。McMaster-Carr 的网站分享了类似的设计线索，它们在非常小的空间中列出了许多产品变体的详细信息。

Craigslist 主页的截图

McMaster-Carr 产品页面的截图

扫一眼上面的图片，你就能形成对这些网站视觉密度的印象。这种印象来自我们的潜意识，所以快速而直观。但就像其他快速判断一样，它是有偏见和不可靠的。比如说，下面这些图片中哪一个在视觉上更密集？

两张图片的点数量是相同的（都是 500）。两者占用的空间是一样的。但乍一看，大多数人认为图像 B 看起来更密集。

下面这两张图片呢？

同样，这两张图片的点数和大小都是一样的。但将点分组会改变我们对密度的感知。视觉密度——我们对密度的直觉判断——是不可预测的。

在设计领域要做到完全客观是不可能的。但如果我们想讨论密度，就应该尽可能追求最一致、最有意义和最有用的定义。

信息密度

在《定量信息的可视化显示》一书中，Edward Tufte 从头开始思考图表和图形的设计：

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

Tufte 引入了“数据墨水”的概念，其定义为给定可视化内容中有用的那部分。Tufte 认为，应该消除那些没有严格传递数据的视觉元素，无论这些元素是刻度值、标签还是数据本身。

数据墨水不只是图表所占用的空间。有些图表使用的无意义墨水很少，但仍占用了大量物理空间。Tufte 谈论的是信息密度，而不是视觉密度。

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

你可以通过两种方式增加这个比率：

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

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

元素周期性的示意图，使用了许多不传达信息的多余视觉元素，例如网格标记 

元素周期性示意图的改进版本，删除了网格标记并在同一空间中添加了其他信息 

以上是 Tufte 的数据墨水低（上图）和高（下图）比率的图形示例。

信息密度有一个上限，这意味着你可以减去很多很多墨水，或添加许许多多的信息。受众也是很重要的：在放着 4 台显示器的办公桌前工作的债券交易员能接受的信息密度阈值会很高；在阅读教科书的二年级学生的这个阈值会很低。

信息密度与视觉密度是可以有关联的。一般来说，信息密度越高，视觉上看起来就越密集。

以 E.J. Marey 于 18852 年发布的火车时刻表为例，它显示了从巴黎到里昂的 13 个站点的数十列火车的到达和离开时间。横轴是时间，纵轴是空间。图表上站点之间的距离反映了它们在现实世界中的距离。

这张图的数据墨水比接近 1，也就是说它将大量信息（超过 260 个到达和离开时间）打包到了一个相对较小的空间中。

E.J. Marey 于 1885 年发布的火车时刻表图示

Tufte 明确了这个想法：

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

他将这个表述改成更简洁的“收缩原则”：

图形可以大大缩小

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

等式的前半部分——信息——适用于屏幕页面。我们应该最大限度地增加界面中每个部分显示的信息量。

但等式的后半部分——墨水——有点难以理解。人们很容易认为像素和墨水是等价的。但任何包含多个元素的界面都需要分隔符、结构元素和指示牌来帮助用户理解每个部分之间的关系。

要遵循 Tufte 的收缩原则，试图消除 UI 中的所有空白也是很有吸引力的事情。但有些空白部分的意义几乎与图形元素中较暗的像素一样重要。我们甚至还没有谈到阴影、渐变或颜色高光呢；它们在数据墨水等式中扮演什么角色？

因此，虽然信息密度是一个有用的起点，但很明显它只是整个蓝图的一部分而已。我们如何才能将界面中的所有设计决策都纳入对密度的更客观、定量的理解中呢？

设计密度

你可能已经意识了在设计决策方面定义密度时面临的第一个挑战：什么行为才能算作决策？

在 UI、UX 和产品设计中，我们会有意识和无意识地做出许多决定，用来传达信息和想法。但为什么这些特定的选择会传递它们所传达的意义？哪些决策是非常优秀的，哪些又仅仅是美学层面的？哪些决策是真正担负重任的？

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

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

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

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

4. 对称性：如果我们看到彼此对称的形状，我们会将它们视为围绕中心点形成的一组对象。

5. 共同命运：当物体移动时，我们会在心理上将以相同方式移动的物体归为一组对象。

6. 连续性：即使物体重叠，我们也可以将它们视为独立的物体

7. 过去的经验：即使在陌生的环境中，我们也能识别出熟悉的形状和图案。我们会基于过去自己从这些形状和图案的相关经验中学到的东西来建立对它们的期望。

8. 图形 - 背景关系：我们以三维方式解释自己所见的内容，即使是平面的 2d 图像也可以有前景和背景元素。

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

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

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

• 接近性原则解释了为什么当图表靠近一个标题时，这个标题会被自然认为所指的是这个图表。出于同样的原因，紧密排列的一组元素网格看起来是相关的，并且如果这组元素与上方的菜单之间有足够的空间，用户就会觉得菜单和这些元素是分离的。

• 得益于我们使用开关的已有经验，结合图形 - 背景原则，拨动开关的拟物化设计会让用户清楚地了解如何立即启用某个功能。因此，我们不会关注像素，而是将设计决策视为我们有意使用格式塔原则来传达含义的方式。就像 Tufte 的数据墨水比率是严格必要的墨水与打印图表所用的总墨水之比一样，我们也可以计算格式塔的比率，计算严格必要的设计决策与设计中使用的总决策之比。这就是设计密度。

对同一信息做四种处理，分别使用不同类型和数量的格式塔原则。上面哪种最密集？

这个概念依旧是主观的：对某些人来说看起来非常必要的设计决策对其他人来说可能就是多余的。我们的偏见，无论是个人品味还是文化规范，都会扭曲我们的评估结果。但涉及到用户界面时，对设计决策进行计算比单独计算数据或“墨水”的数量更有用。

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

时间密度

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

加载时间是时间密度的最大因素。界面对操作的响应和加载新页面或屏幕的速度越快，UI 就越密集。与二维图像中的空白不同，对操作之间时间空白（或者说延迟）的需求几乎没有下限。

彭博终端可即时加载满屏的数据

在当今软件日益臃肿的情况下，让用户界面在时间维度上更密集，比在每个屏幕上塞入更多内容更有影响力。这就是为什么彭博终端仍然是金融分析领域的主导工具；它几乎可以即时加载数据。熟练的终端用户可以在几毫秒内浏览数十个图表和图形。有很多方法可以将大量财务数据塞进一个表格中，但无延迟加载才是终端真正的超能力。

但是，假设你已经从应用程序的加载时间中挤出了每一秒空白，接下来呢？有些事情是无法加快速度的：你无法改变用户的互联网连接速度或他们设备 CPU 的计算速度。有些操作（如上传文件、等待客户支持响应或处理付款）会用到有很多不可预测变量的复杂系统。在这些情况下，你可以改变人们对时间的感知，而不是改变各个任务之间的时间长度：

• 相隔不到 100 毫秒的操作会让人感觉它们是同时发生的。如果你点击一个图标，100 毫秒后出现一个菜单，用户会感觉两个操作之间根本没有经过任何时长。因此，如果两个操作之间有动画（例如菜单滑入），这种同时性的幻觉就可能被打破。对于这种最小的时间间隔来说，动画和过渡会让应用给人的感觉更慢。

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

• 1 到 10 秒之间的差距不能仅靠动画来弥合；研究表明，用户最有可能在前 10 秒等待时间内就放弃浏览目标页面。这意味着，如果两个操作相隔足够远，用户将离开页面而不是等待第二个操作。如果你无法减少这两个操作之间的时间，请显示一个没有准确预期时间的加载指示器，也就是一个小动画，告诉用户系统运行是正常的。

• 10 秒到 1 分钟之间的差距更难填补。在看到不确定的加载器转了超过 10 秒后，用户可能会将其视为静态的而非动态的元素，并开始认为页面没有按预期工作。相比之下，你可以使用确定的加载指示器，比如更大的进度条，来清楚地指示距离下一个操作发生还剩多少时间。事实上，正确的设计可以让等待时间看起来比实际更短；苹果的“Aqua”设计系统中高亮的向后移动条纹使等待时间看起来缩短了 11%。

• 对于 超过 1 分钟的间隔，最好让用户离开页面（或以其他方式执行其他操作），然后在发生下一个操作时通知他们。不让用户利用超过一分钟的等待时间去做其他事情会让人感到沮丧。此外，漫长而复杂的过程也容易出错，这会加剧挫败感。

但最终，让 UI 在时间和空间上更加密集只是一种手段。没有哪个 UI 的价值是来自于其外观的。界面的价值在于它们实现的结果——无论这些结果关联的是商业软件中的金钱收益，还是娱乐或教育等无形价值。

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

价值密度

以下是界面如何体现价值密度的一个例子：对于任何基于表单的界面，一个常见的建议是将长表单分解成较小的块，然后将这些块放在一个向导类型的界面中，以便你在填写它们时保存进度。这是因为只填了一半的表单没有任何价值；将所有问题放在一页上可能看起来更密集，但如果填写时间更长，许多用户根本不会提交。

此表单分为多个部分，并带有清晰的错误和解决方法说明

为了让用户能以更少的错误完成表单，我们可能需要占用更多设计空间。这可能需要更多步骤，花费更多时间。但是，如果视觉和时间密度的权衡会让结果更有价值（无论是提高提交率还是让用户付出的时间更有价值），那么我们就提高了整体的价值密度。

同样，如果我们可以让表单更紧凑、加载速度更快、更不容易出错，从而在增加视觉和时间密度的同时不会降低用户或企业的价值，那么这就带来了整体密度的提升。

按照 Tufte 的说法，我们应该尽可能地增加价值密度。

解决这个优化问题时可能会产生一些违反直觉的结果。在互联网刚诞生时，Craigslist 等公司通过聚合和整理信息，并将信息显示在充满链接的页面中来创造价值密度。雅虎和 Altavista 等公司提供了搜索这些信息的能力，但它们仍然将聚合页面放在了首位。谷歌采取了一种截然不同的方法：使用互联网长链列表收集的信息来支持一个搜索框。信息正在自我聚合；用户只需输入一段文本即可访问整个网络。

2001 年谷歌主页的屏幕截图

2001 年雅虎主页的屏幕截图

2024 年谷歌主页的屏幕截图

2024 年雅虎主页的屏幕截图

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

有的用户界面在视觉上不那么密集，但价值密度却高出几个数量级。结果不言而喻：谷歌从 2004 年的 230 亿美元估值增长到今天的 2 万亿美元以上——增长了近 100 倍。雅虎从 2000 年的 1250 亿美元市值跌至 48 亿美元，不到其峰值的 3%。

总     结

针对 UI 密度做设计的方法不只关注界面的视觉密度。它包括了我们做出的所有隐式和显式设计决策，以及我们选择在屏幕上显示的所有信息。它还包括了用户从软件中获取有价值事物所需的所有时间和操作。

因此，最后我们终于有了 UI 密度的具体定义：UI 密度是用户从界面获得的价值与界面占用的时间和空间的比率。

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

原文链接：

https://matthewstrom.com/writing/ui-density

声明：本文为 InfoQ 翻译，未经许可禁止转载。