本文来自Matthew Ström的《UI Density》，探究UI密度意味着什么以及如何设计，银泰商业设计中心所译。
前言
如果设计师注意不同时期的数字化产品UI设计，不难发现一个客观且潜在的事实——UI正在变得越来越不密集。
我通常对怀旧和“我们喜欢那样”的偏见持怀疑态度，但当我们将 2024 年的网站和应用程序与 2000 年代的网站和应用程序进行比较，软件UI的变迁和趋势很难被忽视。
为了解释这一趋势，并建议我们如何重新获得密度，我们首先需要了解 UI 密度到底是什么——这不仅仅是界面在某一时刻的外观；它是关于界面在一系列时刻可以提供的信息量。这是关于这些时刻如何通过设计决策联系起来，以及这些决策如何与软件提供的价值联系起来。
我想分享我的发现，并且希望这种探索可以帮助设计师用具体且可用的术语定义 UI 密度。如果你是一名设计师，我希望你可以客观地质疑你正在创建的界面的密度；如果您不是设计师，也可以通过本文来站在 UI 密度的视角来了解您使用的软件。
视觉密度
我们首先用我们的眼睛来考虑密度。乍一看，密度就是我们在给定空间中看到的东西的数量。这就是视觉密度。视觉密集的软件界面会在屏幕上显示很多内容。视觉上稀疏的界面在屏幕上显示的内容较少。
彭博终端可能是这种密度最常见的例子。仅在一个屏幕上，您就可以看到主要市场指数的滚动迷你图、详细的交易量细分、具有数十行和列的表格、包含来自世界各地机构的最新新闻的滚动标题，以及所有市场的 UI 路标。上面有键盘快捷键和要采取的快速操作。
Craigslist 是另一个视觉密集的例子，它有数百个简单的类别链接和斯巴达的搜索和过滤界面。麦克马斯特卡尔的网站具有类似的设计线索，在很小的空间内列出了许多产品变体的详细信息。
只需查看图像几分之一秒，您就可以对这些网站的密度形成看法。这个意见来自我们的潜意识，所以它是快速且直观的。但就像其他仓促的判断一样，它是有偏见的且不可靠的。例如，这些图像中哪一个更密集？
两个图像具有相同的点数 (500)。两者占用相同的空间。但乍一看，大多数人都说图像 B 看起来更密集。
如果我们稍加变动，所产生的下面这两张图中密集程度又是如何？
同样，两个图像具有相同的点数和相同的大小。但将点组织成组会改变我们对密度的看法。视觉密度——我们对密度的第一本能判断——是不可预测的。
实际上，在设计方面不可能完全客观。但如果我们想就密度进行讨论，我们应该尽可能找到最一致、最有意义、最有用的定义。
信息密度
在定量信息的视觉显示中，Edward Tufte 从头开始设计图表和图形：
Every bit of ink on a graphic requires reason. And nearly always that reason should be that the ink presents new information.
图形上的每一点墨水都需要理由。几乎总是这个原因应该是墨水提供了新的信息。
Tufte 引入了“数据墨水”的概念，定义为给定可视化的有用部分。 Tufte 认为，不严格传达数据的视觉元素，无论是比例值、标签还是数据本身，都应该被消除。数据墨水不仅仅是图表占用的空间。有些图表使用很少的无关墨水，但仍然占用大量物理空间。塔夫特谈论的是信息密度，而不是视觉密度。
信息密度是一个可测量的量：要计算它，您只需将图表中的“数据墨水”量除以打印该图表所需的墨水总量即可。当然，什么是数据墨水、什么不是数据墨水有些主观，但这不是重点。重点是使比率尽可能接近 单位1。
您可以通过两种方式增加该比率：
- 添加数据墨水：提供额外的（有用的）数据
- 删除非数据墨水：擦除图形中不传达数据的部分
信息密度有一个上限，这意味着您可以减去太多墨水，或添加太多信息。当然产品受众观众也很重要：坐在有 4 个显示器的办公桌前的债券交易员的门槛相当高；而相应地，小学二年级学生阅读教科书的难度则会很低。
信息密度与视觉密度相关。通常，信息密度越高，可视化看起来就越密集。
例如，以 E.J. 发布的火车时刻表为例，它显示了从巴黎到里昂的 13 个车站的数十趟列车的到达和出发时间。横轴是时间，纵轴是空间。图表上停靠点之间的距离反映了它们在现实世界中的距离。其数据墨水比率接近 1，允许将大量信息（超过 260 个到达和出发时间）打包到相对较小的空间中。
Tufte 明确表达了这个想法：
Maximize data density and the [amount of data], within reason (but at the same time exploiting the maximum resolution of the available data-display technology).
在合理范围内最大化数据密度和[数据量]（但同时利用可用数据显示技术的最大分辨率）。
他将其更简洁地表述为“收缩原则”：
Graphics can be shrunk way down图形可以缩小
信息密度对于图表和图表显然很有用。但我们可以将它应用到UI设计中吗？
等式的前半部分——信息——适用于屏幕。我们应该最大限度地增加界面每个部分显示的信息量。但等式的后半部分——墨水——翻译起来有点困难。人们很容易认为像素和墨水是等效的。但是任何包含多个元素的界面都需要分隔符、结构元素和路标来帮助用户理解每个部分之间的关系。
遵循 Tufte 的收缩原则并尝试消除 UI 中的所有空白也是很诱人的。但某些空白的含义几乎与图形元素的较暗像素一样显着。我们甚至还没有涉及阴影、渐变或颜色高光；它们在数据墨水方程式中扮演什么角色？
因此，虽然信息密度是一个有用的垫脚石，但很明显它只是大局的一部分。我们如何才能将界面中的所有设计决策纳入对密度更客观、定量的理解中？
设计密度
您可能已经看到了根据设计决策定义密度的第一个挑战：什么算作设计决策？
在 UI、UX 和产品设计中，我们有意识和无意识地做出许多决策，以便传达信息和想法。但为什么这些特定的选择传达了它们的含义呢？哪些是最高级的或只是美观的，哪些实际上是在做繁重的工作？
这些问题激发了 20 世纪德国心理学家探索人类如何理解和解释形状和图案。他们将这个领域称为“格式塔”，在德语中意为“形式”。在探索过程中，格式塔心理学家描述了一些原理，这些原理描述了一些事物如何显得有序、对称或简单，而另一些事物则不然。虽然这些心理学家不是设计师，但从某种意义上来说，他们发现了设计的基本规律：
- Proximity:
邻近性：我们感知到的事物紧密相连，构成一个整体 - Similarity:
相似性：形状、大小、颜色或其他方面相似的物体看起来彼此相关。 - Closure:
闭合：我们的思维会填补设计中的空白，以便我们倾向于看到完整的形状，即使没有形状 - Symmetry:
对称性：如果我们看到彼此对称的形状，我们会将它们视为围绕中心点形成的一组 - Common fate:
共同的命运：当物体移动时，我们会在心里将那些以相同方式移动的物体分组 - Continuity:
连续性：即使物体重叠，我们也可以将它们视为分离的 - Past experience:
过去的经验：即使在不熟悉的环境中，我们也能认出熟悉的形状和图案。我们的期望基于我们从过去对这些形状和图案的经验中学到的知识。 - Figure-ground relationship:
图底关系：我们以三维方式解释我们所看到的内容，甚至允许平面 2D 图像具有前景和背景元素。
格式塔原则解释了为什么 UI 设计超越了屏幕上的像素。例如：
- 由于相似性原则，用户会明白相同大小、字体和颜色的文本在界面中具有相同的用途。
- 邻近原则解释了为什么当图表靠近标题时，标题显然指的是图表。出于同样的原因，紧密排列的元素网格看起来会相关，并且与其上方的菜单分开，并由足够的空间分隔。
- 得益于我们过去在开关方面的经验，结合图形背景原理，拨动开关的拟物化设计将使用户清楚如何立即打开某项功能。
因此，我们不关注像素，而是将设计决策视为我们如何有意使用格式塔原则来传达意义。就像 Tufte 的数据墨水比率将严格必要的墨水与用于打印图表的总墨水进行比较一样，我们可以计算格式塔比率，将严格必要的设计决策与设计中使用的总决策进行比较。这是设计密度。
这仍然是主观的：对某些人来说似乎必要的设计决策对其他人来说可能是多余的。我们的偏见会扭曲我们的评估，无论是个人品味还是文化规范。但当涉及到用户界面时，计算设计决策比单独计算数据或“墨水”量要有用得多。
设计密度并不完美。用户界面的存在是为了工作、娱乐、浪费时间、建立理解、促进个人联系等等。这些事情需要用户采取一项或多项操作，因此密度需要超越组件、布局和屏幕。密度应包含用户在旅程中采取的所有操作 – 它应计入空间和时间。
时间密度
就像给定空间中的东西数量决定了视觉密度一样，用户在给定时间内可以做的事情的数量决定了时间（时间方面）密度。
加载时间是时间密度的最大因素。 界面响应操作和加载新页面或屏幕的速度越快，UI 就越密集。与二维空白不同，时间时刻之间所需的空间几乎没有下限。
在当今臃肿的软件中，及时使 UI 变得更加密集比仅仅在每个屏幕上压缩更多内容更具影响力。这就是为什么彭博终端仍然是金融分析领域的主导工具。它几乎立即加载数据。熟练的终端用户可以在几毫秒内在数十个图表和图形之间导航。有很多方法可以将大量财务数据塞入表中，但无延迟加载才是 Terminal 真正的超能力。
但是假设您已经挤出了应用程序加载时间的每一秒。接下来是什么？有些事情是无法加快的：您无法更改用户的互联网连接速度或其 CPU 的计算速度。某些操作（例如上传文件、等待客户支持响应或处理付款）涉及具有不可预测变量的复杂系统。在这些情况下，您可以改变对时间的感知，而不是改变任务之间的时间量：
- 相隔不到 100 毫秒的动作会让人感觉是同时发生的。如果您点击一个图标，100 毫秒后会出现一个菜单，感觉这两个操作之间根本没有经过任何时间。因此，如果两个操作之间存在动画（例如菜单滑入），那么同时性的幻觉可能会被打破。对于最小的时间空间，动画和过渡可能会让应用程序感觉更慢。
- 在 100 毫秒到 1 秒之间，两个动作之间的联系被断开。如果你点击一个链接，但一秒钟没有任何变化，你就会产生怀疑：你真的点击过任何东西吗？应用程序坏了吗？你的网络正常吗？动画和过渡可以弥补这种感知差距。这些空间中的视觉提示使用户界面在时间上感觉更加密集。
- 1 到 10 秒之间的间隔无法仅用动画来弥补；研究 4 表明用户最有可能在前 10 秒内放弃页面。这意味着如果两个操作相距足够远，用户将离开页面而不是等待第二个操作。如果您无法减少这些操作之间的时间，请显示不确定的加载指示器 – 一个小动画，告诉用户系统正在正常运行。
- 10 秒到 1 分钟之间的间隙更难填补。在看到不确定的加载程序超过 10 秒后，用户可能会认为它是静态的，而不是动态的，并开始假设该页面没有按预期工作。相反，您可以使用确定的加载指示器（例如更大的进度条），它清楚地指示距离下一个操作发生还剩多少时间。事实上，正确的设计可以让等待时间看起来比实际更短； Apple“Aqua”设计系统中突出的后移条纹使等待时间似乎缩短了 11%。
- 对于超过 1 分钟的间隙，最好让用户离开页面（或以其他方式执行其他操作），然后在发生下一个操作时通知他们。阻止某人做任何有用的事情超过一分钟会让人感到沮丧。此外，漫长而复杂的流程也容易出错，这会加剧挫败感。
但最终，让 UI 在时间和空间上变得密集只是达到目的的一种手段。任何 UI 都不会因为它的外观而有价值。界面在其所带来的结果中很有价值——无论是与商业软件的某些美元价值直接相关，还是与娱乐或教育等某些无形价值相关。
那么，密度到底是什么？它是用最少的时间、空间、像素和墨水提供最高价值的结果。
价值密度
以下是价值密度如何体现的示例：对于任何基于表单的界面，一个常见的建议是将长表单分解为较小的块，然后将这些块放在一个向导类型的界面中，以便在您进行操作时保存进度。这是因为部分填写的表格没有任何价值；将所有问题放在一个页面上可能看起来在视觉上更加密集，但如果需要更长的时间来填写，许多用户根本不会提交。
为了让用户能够以更少的错误到达表单的末尾，可能需要设计占用更多的空间。它可能需要更多步骤，并且需要更多时间。但是，如果视觉和时间密度的权衡使结果更有价值——无论是通过提高提交率还是让用户的时间更值得付出努力——那么我们就增加了整体价值密度。
同样，如果我们可以通过使表单更紧凑、加载速度更快、更不易出错来增加视觉和时间密度，而不降低用户或业务的价值，那么这就是密度的整体增加。
解决这个优化问题可能会产生一些违反直觉的结果。当互联网还很年轻的时候，像 Craigslist 这样的公司通过聚合和整理信息并将其显示在链接页面中来创造价值密度。雅虎和 Altavista 等公司使搜索这些信息成为可能，但仍然将聚合放在首位。谷歌采取了一种截然不同的方法：使用互联网长链链表收集的信息来为搜索框提供动力。信息正在自我聚合；用户只需输入一个文本即可访问整个网络。
上图是2001-2024年将近20年时间内，谷歌和雅虎的数据、设计和价值密度方法没有改变。两家公司股票的价值反映了这些不同方法的结果。
用户界面的视觉密度要低得多，但价值密度要高出几个数量级。结果不言而喻：Google 的估值从 2004 年的 23B 美元上升到今天的 2T 美元以上，接近 100 倍的增长。雅虎的市值从 2000 年的 $125B 跌至 $4.8B，不到其峰值的 3%。
结论与总结
UI 密度设计超出了界面的视觉方面。它包括我们做出的所有隐式和显式设计决策，以及我们选择在屏幕上显示的所有信息。它包括用户从软件中获取有价值的东西所花费的所有时间和操作。
所以，最后，UI 密度的具体定义：UI 密度是用户从界面获得的价值除以界面占用的时间和空间。
速度、可用性、一致性、可预测性、信息丰富性和功能都在此等式中发挥着重要作用。通过考虑所有这些方面，我们可以理解为什么有些接口成功而另一些接口失败。通过密度设计，我们可以帮助人们从我们构建的软件中获得更多价值。
原文链接：
