程序UI设计之用户界面密度
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
用户界面密度意味着什么以及如何为其设计界面变得越来越不密集。 我通常对怀旧情绪和“我们喜欢那样”的偏见持怀疑态度,但将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的比率。 您可以通过两种方式增加比率:
元素周期性的图像。它使用了许多不必要的视觉元素,如不传达信息的网格标记。改进后的元素周期性图像。它移除了网格标记,并在相同的空间中添加了额外的信息。 塔夫特关于数据墨水比率低(第一张)和高(第二张)的图形示例。摘自爱德华·塔夫特的《定量信息的视觉展示》 信息密度有一个上限,这意味着您可能会减去太多的墨水,或者添加太多的信息。受众也很重要:在他们的四显示器桌面上的债券交易员将有一个相当高的阈值;阅读教科书的二年级学生将有一个低阈值。 信息密度可以与视觉密度相关。通常,信息密度越高,可视化看起来就越密集。 例如,看看E.J. Marey在1885年发布的火车时刻表2[3]。它显示了从巴黎到里昂的13个站点上数十列火车的到达和出发时间。水平轴是时间,垂直轴是空间。图表上站点之间的距离反映了它们在现实世界中的远近。 数据墨水比率接近1,允许大量的信息——超过260个到达和出发时间——被打包到一个相对较小的空间中。 从巴黎到里昂的火车时刻表的可视化。水平轴是时间,垂直轴是空间。图表上站点之间的距离反映了它们在现实世界中的远近。 E.J. Marey在1885年发布的时刻表可视化。摘自爱德华·塔夫特的《定量信息的视觉展示》 塔夫特明确提出了这个观点:
他更简洁地称之为“收缩原则”:
信息密度显然对图表和图形很有用。但我们能将其应用于界面吗? 等式的前半部分——信息——适用于屏幕。我们应该最大化每个部分的界面显示的信息量。 但等式的后半部分——墨水——有点难以翻译。很容易认为像素和墨水是等价的。但任何超过几个元素的界面都需要分隔符、结构元素和标志,以帮助用户理解每个部分与其他部分的关系。 也很想遵循塔夫特的收缩原则,试图消除界面中的所有空白。但有些空白的意义几乎和图形元素的暗像素一样显著。我们甚至还没有触及阴影、渐变或颜色高光;它们在数据墨水方程中扮演什么角色? 所以,虽然信息密度是一个有用的垫脚石,但很明显它只是更大画面的一部分。我们如何将界面中的所有设计决策纳入一个更客观、量化的密度理解? 设计密度您可能已经在用设计决策来定义密度时看到了第一个挑战:什么算是一个决策? 在UI、UX和产品设计中,我们有意识和无意识地做出许多决策,以传达信息和想法。但为什么这些特定的选择会传达它们的意义?哪些是卓越的或仅仅是美学的,哪些实际上在做重活? 这些问题激发了20世纪德国心理学家探索人类如何理解和解释形状和模式。他们称这个领域为“格式塔”,在德语中意为“形式”。在他们的探索过程中,格式塔心理学家描述了一些原则,这些原则描述了为什么某些事物看起来有序、对称或简单,而其他事物则不是。虽然这些心理学家不是设计师,但他们在某种意义上发现了设计的基本原理:
接近性(左)、相似性(中)和闭合性(右)的原则示例。 格式塔原则解释了为什么UI设计超越了屏幕上的像素。例如:
所以,我们不是专注于像素,而是将设计决策视为我们有意使用格式塔原则来传达意义。就像塔夫特的数据墨水比率比较了打印图表所必需的严格必要的墨水与所使用的总墨水量一样,我们可以计算一个格式塔比率,该比率比较了设计中严格必要的设计决策与所使用的总决策。这是设计密度。 使用不同类型的格式塔原则和不同数量的格式塔原则处理相同信息的四种不同方式。哪一种是最密集的? 使用不同类型的格式塔原则和不同数量的格式塔原则处理相同信息的四种不同方式。哪一种是最密集的? 这仍然是主观的:对某些人来说似乎必要的设计决策对其他人来说可能是多余的。我们的偏见会扭曲我们的评估,无论是个人品味还是文化规范。但在用户界面方面,计算设计决策的数量比仅仅计算数据或“墨水”的数量更有用。 设计密度并不完美。用户界面的存在是为了工作、娱乐、消磨时间、创造理解、促进个人联系等。这些需要用户采取一个或多个行动,因此密度需要超越组件、布局和屏幕。密度应该包括用户在其旅程中采取的所有行动——它应该在空间和时间上计算。 时间中的密度就像给定空间中的东西数量决定视觉密度一样,用户在给定时间内可以做的事情的数量决定时间——时间上的——密度。 加载时间是时间密度中最大的因素。界面对操作的响应速度越快,加载新页面或屏幕的速度越快,UI就越密集。与二维空白不同,时间间隔所需的空间几乎没有下限。 彭博社的终端瞬间加载了充满数据的屏幕 彭博社的终端瞬间加载了充满数据的屏幕 对于当今膨胀的软件来说,使UI在时间上更密集比仅仅在每个屏幕上挤压更多的东西更有影响力。这就是为什么彭博社的终端仍然是金融分析领域中如此占主导地位的工具;它几乎瞬间加载数据。一个熟练的终端用户可以在毫秒之间浏览数十个图表和图形。有很多方法可以将大量金融数据塞进一个表格中,但无延迟地加载它是终端的真正超能力。 但假设您已经从应用程序的加载时间中挤出了每一秒钟。接下来呢?有些东西就是无法加速:您无法改变用户的互联网连接速度,或者他们CPU的计算速度。一些操作,如上传文件、等待客户支持响应或处理支付,涉及具有不可预测变量的复杂系统。在这些情况下,与其改变任务之间的时间,不如改变时间的感知:
最终,使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] 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 该文章在 2024/5/25 17:13:31 编辑过 |
关键字查询
相关文章
正在查询... |