首页   

【第3285期】UI密度

前端早读课  · 前端  · 1 月前

前言

探讨了用户界面(UI)密度的概念,分析了视觉密度、信息密度和设计密度,并探讨了时间和价值密度在界面设计中的重要性。今日前端早读课文章由 @飘飘 翻译分享。

正文从这开始~~

UI 密度指的是用户界面元素在屏幕上的密度,即界面元素在屏幕上所占的比例。设计时,需要考虑用户界面元素的密度,确保它们在屏幕上排列有序,不会显得杂乱无章。同时,还需要确保用户界面元素的密度与用户的预期相符,这样用户才能在使用时感到舒适和愉悦。

UI 密度变得越来越低。

我通常对怀旧情绪和 "我们喜欢过去的样子" 的偏见持怀疑态度,但将 2024 年的网站和应用软件与 2000 年的同类产品相比,软件的分散化趋势很难被忽视的。

为了解释这一趋势,并提出如何恢复 UI 密度的方法,我首先询问了用户界面密度究竟是什么。它不仅仅是界面在某一时刻的外观,它是指界面在一系列时刻内所能提供的信息量。它还涉及到设计决策如何将这些时刻连接起来,以及这些决策如何与软件提供的价值相关联。

我想与大家分享我的发现。希望这项探索能帮助您以具体且实用的方式定义 UI 密度。如果你是一名设计师,我希望您能质疑自己所创建界面的密度;如果您不是设计师,请使用 UI 密度的视角来理解您使用的软件。

【第3186期】B端加载设计指南:优化用户体验与性能

视觉密度

我们首先用眼睛来考虑密度。乍一看,密度就是我们在特定空间内看到事物的数量。这就是视觉密度。视觉密度高的软件界面会在屏幕上显示很多内容。视觉密度低的界面则会放置较少的内容。

彭博终端可能是这种高密度的典型例子。仅在一个屏幕上,你就能看到主要市场指数的滚动折线图、详细的交易量拆分表、拥有数十行和列的表格、以及包含全球各地机构最新的新闻滚动标题,以及用于访问所有上述内容的键盘快捷键和快速操作。

终端界面截图。来自 Objective Trade 在 YouTube 上的视频

Craigslist 是另一个视觉密度很高的例子,其页面上有数百个链接到不同类别的简单链接,以及一个朴素的搜索和筛选界面。麦克马斯特 - 卡尔(McMaster-Carr)的网站也有类似的设计风格,在极小的空间内列出了许多产品的详细信息。

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

您只需看几秒钟的图片,就能对这些网站的密度形成看法。这种看法来自于我们的潜意识,因此它既快速又直观。但与其他快速判断一样,它也有失偏颇且不可靠。例如,哪张图片的密度更高?

两幅图像的点数相同(500)。它们占用的空间也相同。但乍一看,大多数人都会说图片 B 看起来更密集 1。

这两幅图又是怎么回事呢?

同样,这两幅图都有相同的点数,并且大小相同。但将这些点组织成组却改变了我们对密度的感知。视觉密度 -- 我们对密度的第一直觉判断 -- 是不可预测的。

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

【早说】十年业务开发,如何做好高效高质量的价值交付

信息密度

在《量化信息的可视化展示》一书中,爱德华 - 塔夫特(Edward Tufte)从根本上探讨了图表和图形的设计:

图表上的每一点墨点都需要理由。通常情况下,这个理由应该是墨点提供了新的信息。

塔夫特提出了 "数据墨水" 的概念,指的是视觉化中具有实际用途的部分。Tufte 认为,那些不能严格传达数据的视觉元素,无论是刻度值、标签还是数据本身,都应该被剔除。

数据墨水并不仅仅指图表所占用的空间。有些图表只使用了很少的多余墨水,但仍然占据了很大的物理空间。塔夫特说的是信息密度,而不是视觉密度。

信息密度是一个可测量的量:要计算它,只需将图表中的 “数据墨水” 量除以打印该图表所需的墨水量即可。当然,什么是数据墨水,什么不是数据墨水,多少有些主观性,但这不是问题的关键。问题的关键在于尽可能使比率接近 1。

您可以通过两种方法提高比率:

  • 添加数据墨水:提供更多有用的数据

  • 删除非数据墨水:擦除图形中不传递数据的部分

弗特的低数据 - 墨水比(左图)和高数据 - 墨水比(右图)的图形示例。摘自爱德华・图弗特的书

信息密度是有上限的,也就是说,你可以去掉太多的墨水,或者增加太多的信息。观众也很重要:一个坐在拥有 4 个显示器的交易台前的债券交易员的阈值会很高;而一个阅读教科书的二年级学生的阈值则会很低。

信息密度与视觉密度有关。通常,信息密度越高,可视化效果看起来就越密集。

例如,1885 年 E.J. Marey 出版的火车时刻表。它显示了从巴黎到里昂的 13 个站点的几十列火车的到达和出发时间。横轴是时间,纵轴是空间。图表上各站之间的距离反映了它们在现实世界中的距离。

数据与墨水的比例接近 1,这使得大量的信息(超过 260 个到达和出发时间)能够被压缩到相对较小的空间中。

埃德蒙・朱利安・马雷(E.J. Marey)于 1885 年发表的火车时刻表可视化图表。引自爱德华・塔夫特(Edward Tufte)的作品。

Tufte 明确提出了这一观点:

在合理的范围内,最大限度地提高数据密度和 [数据量](但同时利用现有数据显示技术的最大分辨率)。

他更简洁地将其表述为 "缩减原则":

图形可以缩小

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

方程式的第一个部分(信息)适用于屏幕。我们应该最大化界面的每个部分所显示的信息量。

但方程式的第二部分 —— 墨水 —— 要翻译起来就有点困难了。我们很容易认为像素和墨水是等价的。但是,任何包含多个元素的界面都需要分隔符、结构元素和路标,以帮助用户理解每个元素与其他元素之间的关系。

人们也很容易受到图特的 “缩减原则” 的影响,试图将 UI 中的所有空白都消除掉。但是,有些空白的意义几乎与图形元素中较暗的像素同样显著。我们还没有讨论阴影、渐变和颜色高亮的作用,它们在数据 - 墨水方程式中扮演着什么角色呢?

因此,尽管信息密度是一块有用的垫脚石,但显然它只是整个画面的一部分。我们如何将界面中的所有设计决策整合成一个更客观、量化的信息密度理解呢?

设计密度

你可能已经注意到,用设计决策来定义密度的第一个挑战是:什么才算作决策?

在 UI、UX 和产品设计中,我们有意识或无意识地做出了许多决策,以传达信息和想法。但是,为什么这些特定的选择能传达出它们所传达的意义?哪些是卓越的或仅仅是审美上的,哪些实际上才是承担重任的关键因素?

这些问题激发了 20 世纪德国心理学家对人类如何理解和解释形状和模式的研究。他们将这一领域称为 "Gestalt",在德语中的意思是 "形式"。在研究过程中,格式塔心理学家描述了描述某些事物看起来有序、对称或简单的原则。而另一些则不然。尽管这些心理学家不是设计师,但在某种程度上,他们发现了设计的基本法则:

  • 邻近性:我们将距离较近的事物感知为一个整体。

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

  • 封闭性:我们的大脑会填补设计中的空白,因此我们倾向于看到完整的形状,即使实际上并不存在。

  • 对称性:如果我们看到彼此对称的形状,我们会将其视为围绕中心点形成的一组形状。

  • 共同命运:当物体移动时,我们会在心理上将那些以相同方式移动的物体归为一组。

  • 连续性:即使两个物体重叠,我们也能感知到它们的分离。

  • 过去的经验:即使在不熟悉的环境中,我们也能辨认出熟悉的形状和图案。我们的期望是基于我们过去对这些形状和图案的经验。

  • 图形与背景的关系:我们以三维的方式来解读我们所看到的事物,即使是平面的二维图像也有前景和背景元素。

邻近原则(左图)、相似原则(中间图)和封闭原则(右图)的示例。

格式塔原则解释了为什么 UI 设计不仅仅是屏幕上的像素。例如:

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

  • 邻近原则解释了为什么当图表靠近标题时,很明显该标题指的是图表。出于同样的原因,紧密排列的元素看起来是相关的,并且与上方通过大量空间分隔的菜单不同。

  • 得益于我们过去在开关的经验,结合 "前景 - 背景" 原则,为切换开关设计的拟物化设计将使用户能够立即清楚地知道如何打开一个功能。

因此,我们不再专注于像素,而是将设计决策看作是利用格式塔原则有意识地传递信息的方式。就像 Tufte 的数据 - 墨水比率比较了印刷图表中严格必需的墨水与总墨水的使用量,我们可以计算出格式塔比率,比较设计中严格必需的设计决策与总决策的使用量。这就是设计密度。

对同一信息采用四种不同的处理方式,使用了不同类型的完形原理(Gestalt principles),其中哪一种最为紧凑?

这仍然是主观的:在某些人看来必要的设计决策,在其他人看来可能是多余的。我们的偏见会影响我们的评估,无论是个人偏好还是文化规范。但在用户界面方面,计算设计决策的数量比仅计算数据或 “墨水” 的数量更有用。

设计密度并非完美无缺。用户界面的存在是为了完成工作、获得乐趣、消磨时间、增进理解、促进人际交流等等。这些都需要用户采取一项或多项行动,因此密度不能仅仅局限于组件、布局和屏幕。密度应该包含用户在使用过程中所采取的所有行动 —— 无论是空间还是时间上的。

时间密度

就像在一个特定的空间内物品的数量决定了视觉密度一样,在一个特定的时间内用户可以完成的任务数量决定了时间上的密度。

加载时间是时间密度的最大影响因素。界面响应操作和加载新页面或屏幕的速度越快,UI 的密度就越高。与二维空白空间不同,时间间隔之间的空间几乎不存在最低限度。

彭博终端可瞬间加载满屏数据

在当今臃肿的软件环境中,让用户界面在更短的时间内提供更多信息比仅仅在每个屏幕上塞入更多内容更有影响力。这就是彭博社终端在金融分析领域仍然占据主导地位的原因;它几乎可以即时加载数据。一个熟练的终端用户可以在几毫秒内在数十个图表和图表之间切换。有很多方法可以将大量金融数据塞入表格中,但无延迟加载数据才是终端真正的超能力。

但是,如果您已经将应用程序的加载时间压缩到了每秒。接下来怎么办?有些事情是无法加快的:你无法改变用户的网络连接速度,也无法改变他们 CPU 的运算速度。一些操作,如上传文件、等待客户支持响应或处理付款,涉及复杂的系统,存在不可预知的变量。在这些情况下,与其改变任务之间的时间间隔,你可以改变人们对这段时间的感知:

  • 相隔不到 100 毫秒的操作会让人感觉是同时进行的。如果你点击一个图标,100 毫秒后出现一个菜单,那么你会觉得这两者之间几乎没有时间间隔。因此,如果这两个动作之间有一个动画,例如菜单滑入,那么同时性的错觉就会被打破。对于最短的时间间隔,动画和过渡可能会让应用程序感觉更慢。

  • 在 100 毫秒到 1 秒之间,两个动作之间的连接会中断。如果您点击了一个链接,但一秒钟内没有任何变化,您就会产生怀疑:您是否真的点击了什么?应用程序坏了吗?网络是否正常?动画和过渡效果可以弥补这种感知上的差距。在这些空间中的视觉提示可以让 UI 在时间上感觉更密集。

  • 1 秒到 10 秒之间的间隙仅靠动画无法来弥补;研究表明,用户最有可能在前 10 秒内离开页面。这意味着如果两个动作相隔太远,用户会离开页面而不是等待第二个动作。如果你无法缩短这两个动作之间的时间,请显示一个不确定的加载指示器 —— 一个告诉用户系统正在正常运行的小动画。

  • 在 10 秒到 1 分钟之间的间隔更难填补。如果用户连续等待超过 10 秒后仍看不到任何动态内容,他们很可能会认为页面卡住了,而不是在加载。。相反,你可以使用一个确定性加载指示器 -- 比如一个更大的进度条 -- 来清楚地显示距离下一个操作发生还剩多少时间。实际上,正确的设计可以让等待时间看起来比实际时间更短;苹果 “Aqua” 设计系统中突出显示的向后移动的条纹使等待时间看起来缩短了 11%。

  • 对于超过 1 分钟的间隙,最好让用户离开页面(或做其他事情),然后在下一个操作发生时通知他们。让用户在 1 分钟以上的时间内无法做任何有用的事情会带来挫败感。此外,长时间、复杂的流程也容易出错,这会加剧挫败感。

但归根结底,让 UI 在时间和空间上变得密集只是达到目的的一种手段。UI 的价值不在于其外观,而在于它所带来的结果 —— 无论是在商业软件中与某些美元价值直接相关,还是与娱乐或教育等无形价值相关联。

那么,密度的真正意义是什么呢?那就是用最少的时间、空间、像素和墨水提供最高价值的结果。

价值密度

这里有一个例子可以说明价值密度是如何体现的:对于任何基于表单的界面,常见的建议是将长表单分成小块,然后将这些小块组合在一个类似于向导的界面中,以便在您填写表单时保存您的进度。这是因为如果表单未填写完毕,就没有任何价值;虽然将所有问题放在一张页面上可能会使视觉密度更高,但如果填写时间更长,许多用户可能根本不会提交表单。多用户就根本不会提交。

该表格被分为多个部分,其中包含明显的错误和解决方法说明。

让用户在填写表单时减少出错的可能性可能需要设计占用更多的空间。这可能需要更多的步骤,并且需要更多的时间。但是,如果视觉和时间密度的权衡使得结果更有价值 —— 无论是通过提高提交率还是让用户觉得这些努力是值得的 —— 那么我们就提高了整体价值密度。

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

按照塔夫特的说法,我们应该尽可能提高价值密度。

解决这个优化问题可能会产生一些反直觉的结果。在互联网刚刚兴起的时候,Craigslist 等公司通过聚合和整理信息,并将其展示在链接页面上,创造了信息密度。雅虎和 Altavista 这样的公司使搜索信息成为可能,但仍将聚合放在首位。谷歌采用了一种截然不同的方法:利用互联网长链中的链接列表收集信息,为搜索框提供动力。信息本身就是一种聚合;用户只需输入一个文本,就能访问整个网络。




从 2001 年(第一次截图被存档)到 2024 年(第二次截图被拍摄),谷歌和雅虎对于数据、设计和价值密度的处理方式并没有改变。这两家公司的股价反映了这些不同做法的结果。

用户界面的视觉密度大大降低,但价值密度却高出几个数量级。结果不言自明:谷歌的估值从 2004 年的 230 亿美元上升到今天的 200 多亿美元,接近 100 倍的增长。雅虎从 2000 年的价值 1 250 亿美元到以 48 亿美元的价格出售 -- 不到其峰值的 3% 。

结论

为用户界面的密度进行设计不仅仅是考虑界面的视觉效果。它还包括我们所做的所有隐含和明确的设计决策,以及我们在屏幕上选择显示的所有信息。它还包括用户为从软件中获取有价值的内容而花费的时间和采取的行动。

最后,我们来给 UI 密度下一个具体的定义:UI 密度是指用户从界面中获得的价值与界面所占用的时间和空间的比值。

速度、易用性、一致性、可预测性、信息丰富度和功能性都是这个方程式中重要的因素。通过考虑所有这些方面,我们可以理解为什么有些界面成功而另一些失败。通过设计以密度为中心,我们可以帮助人们从我们构建的软件中获得更多的价值。

观点

  • 视觉密度是用户界面设计的基础,但不应仅仅依赖于直观的视觉感受。

  • 信息密度应该通过最大化数据墨水比例来提升,这意味着要减少非数据墨水,确保界面中的每个元素都传递有效信息。

  • 设计密度考虑了所有设计决策与必要设计决策之间的关系,强调了 Gestalt 原则在界面设计中的重要性。

  • 时间密度关注于用户操作与界面响应之间的时间关系,认为快速响应和合理的过渡动画可以提升用户体验。

  • 价值密度是衡量界面设计成功与否的关键,即用户从界面中获得的实际价值与所需时间和空间的比例。

  • 设计者应该追求提高 UI 密度,即在不降低用户体验和价值的前提下,尽可能地减少界面所占用的时间和空间。

UI 密度

UI 密度是指用户界面(UI)中包含的信息量与界面所占用的时间和空间的比例。它是一个综合性的概念,涵盖了以下几个方面:

  • 视觉密度:界面中一眼可见的信息量,即界面上的元素数量和排列密集程度。

  • 信息密度:界面中 strictly necessary data-ink(有效数据墨水)与总墨水的比例,即界面中每个元素传递的有效信息量与整体视觉元素的比例。

  • 设计密度:界面中 strictly necessary design decisions(必要的设计决策)与 total decisions(总设计决策)的比例,考虑了 Gestalt 原则在界面设计中的应用。

  • 时间密度:用户在特定时间内能够完成的操作数量,即界面响应速度和用户操作之间的时间关系。

  • 价值密度:用户从界面中获得的实际价值与所需时间和空间的比例,即界面为用户带来的效益大小。

UI 密度的核心在于,设计出能够在最小的时间和空间内提供最大价值的界面。这要求设计者不仅要关注界面的视觉表现,还要考虑信息的有效传递、用户操作的流畅性以及整体用户体验。

关于本文
译者:@飘飘
作者:@matthew strom
原文:https://matthewstrom.com/writing/ui-density/

这期前端早读课
对你有帮助,帮” 
 “一下,
期待下一期,帮”
 在看” 一下 。

推荐文章
前端早读课  ·  【第3318期】加快 JavaScript ...  ·  3 天前  
前端大全  ·  前端项目路径别名终极解决方案  ·  6 天前  
前端早读课  ·  【早阅】npm vs npx - 基本区别是什么?  ·  4 天前  
前端早读课  ·  【第3317期】2个提升页面体验的小贴士  ·  4 天前  
前端早读课  ·  【第3315期】审核平台前端新老仓库迁移  ·  6 天前  
CareerIn投行PEVC求职  ·  周杰伦IP变现公司下周正式赴港招股!母亲叶惠 ...  ·  1 年前  
美国驻华大使馆  ·  #英语学习#与美国留学有关的词汇: ...  ·  2 年前  
北京亦庄  ·  我在亦城过大年 | ...  ·  3 年前  
医学影像沙龙  ·  收藏!全身各部位断层影像解剖  ·  4 年前  
© 2022 精读
删除内容请联系邮箱 2879853325@qq.com