聚焦:黑暗UI设计原理

Miklos是一位设计领导者,作家和演讲者,在设计领域拥有超过18年的经验。

从移动屏幕到大型电视,人们都可以看到黑暗的UI设计。黑暗主题可以表达力量,奢华,精致和优雅。但是,为黑暗的UI设计会带来很多挑战,并且如果实施不当也无法满足期望。在跳入“阴暗面”之前,设计师应该先思考一下。

物理学家说,黑色并不是真正的颜色。 没有光。艾萨克·牛顿爵士(Isaac Newton)爵士在通过棱镜照耀阳光的实验中甚至没有将其包括在光谱范围内。

在色彩心理学中,大多数色彩代表不同的人不同的事物。 在西方文化中,黑人通常与死亡,神秘和邪恶联系在一起。由于自然,绿色常与增长相关。蓝色几乎可以使人平静,因为它与天空和水有关。颜色是 情感的 .

其他影响是文化的。 例如,紫色仍然与奢侈品联系在一起,因为在许多古代文化中,紫色昂贵且稀有-只有皇室才能负担得起。长期以来,它是文化时代精神的重要组成部分 成为人类心灵的一部分.

具有深色UI的数字产品-与力量,优雅和神秘联系在一起—是一个巨大的趋势。人们常说,黑暗模式可以减轻眼睛疲劳,但没有证据表明这是真的。下 某些情况下,这也可以节省电池寿命。 尽管如此,深色主题还是一种审美选择。

四个示例显示了红色,绿色,蓝色和灰色调色板-后者用于深色UI调色板。
深色UI设计使用类似于 类似的调色板.

深色UI与浅色UI

并非所有界面都适合深色主题。 设计师应考虑品牌契合度,文化适应性和 色彩心理学 并考虑 情感影响 在选择与一个人在一起之前。这是一个棘手的平衡行为。

针对千禧一代的金融应用程序可能会以深色主题达到炫酷效果,但对于以大众为目标的大型银行网站可能不合适。 太丰富,太暗,太时尚 当所有人都想检查余额并支付账单时,可能会变得更加沮丧。

B2B SaaS应用程序黑暗UI 众所周知,它们很难设计。标准的Web 用户界面 组件(例如数据表,窗口小部件,表单和下拉菜单)在黑暗的UI上看起来可能很奇怪。因为 许多配色方案效果不佳 在黑暗的用户界面下,某些品牌和产品(取决于类型,环境和环境因素)并不适合,可能会带来无法克服的挑战。

设计者 以前从未使用过深色UI设计并决定用两只脚跳进去的人可能会发现自己陷入崎rough不堪的海域。在黑暗用户界面的海洋中, 规范是弯曲的,规则是变化的,陷阱是很多的。

也就是说,使用黑暗的UI有很多充分的理由:

  • 当设计稀疏且极简的内容类型很少时
  • 适用于上下文和使用时,例如夜间娱乐应用程序
  • 创造醒目的戏剧性外观

而且,在某些情况下不建议这样做:

  • 大量文本时(在深色背景上阅读很困难)
  • 当混合内容类型很多时
  • 当设计需要多种颜色时

具有深色UI设计的数据可视化仪表板。
深色模式下的桌面应用信息中心。 (通过 骚动 )

深色UI设计的对比

黑暗主题不是黑色主题。 最好将其视为“低光”主题。深色UI的主要问题之一是获得足够的对比度,以使视觉元素分离并且文本清晰易读。大多数设计师会认为使用黑色是获得强烈对比度的最佳选择。但是,最好 不要使用真黑 (#000000) 用于背景或表面颜色。黑色最好保留给其他UI元素,并尽量少用。例如,纯黑色可用于较小的UI元素或周围的边框。

Google的 材质设计深色主题 建议使用 深灰色 (#121212)作为深色主题表面颜色,“以表示深度范围更广的环境中的高度和空间。”此外,许多设计师建议在定义配色方案时在深灰色中添加微妙的深蓝色。它倾向于为数字屏幕创建更好的深色调,并为UI调色板提供更令人愉悦的色调。

软件工程师Brittany Chiang'的网站将深灰色和蓝色色调融合在一起,形成了令人愉悦的深色UI主题。
布列塔尼·蒋(Brittany Chiang)的网站将深灰色和蓝色色调融合在一起,形成了令人愉悦的深色UI调色板。

使用一定范围的灰色的优点在于,它可以赋予设计人员一定的自由度,因为可以表示更广泛的颜色。灰色调色板还有助于创建深度,因为相对于灰色与黑色,可以更轻松地看到阴影。

需要特别注意黑暗UI中的文本对比度。

Web内容可访问性准则 (WCAG)要求“文本的视觉呈现方式至少要有一个对比度 4.5:1”),大文本的对比度至少应为 3:1。因此, 设计师 需要确保内容在黑暗模式下仍可清晰辨认。

测试其他UI元素(例如卡,按钮,字段和各种显示器和设备上的图标)之间的正确对比也是个好主意。如果UI元素之间没有明显的分离,则设计会融合得太多,并有可能变得乏味。

深色UI设计的对比度好坏对比。
左侧深色UI设计中的文字和背景之间的对比度不足。

重点注意:颜色

颜色在深色UI中脱颖而出。最好使用浅色,不饱和强调色的方案。 避免在深色UI中使用饱和色, 因为它们可以在视觉上在深色表面上振动。此外,作为最佳做法,颜色必须至少通过WCAG的AA标准 4.5:1 与文字一起使用时。

在为深色UI定义配色方案时,Google建议使用数量有限的配色,以确保大部分空间可用于深色表面。使用 分割互补色 能够帮助。该方案有一种主色和两种与主色的补色相邻的颜色。这样做可以提供所需的对比度,而不会产生互补色方案的紧张。

Jabra Elite 75t耳塞采用深色UI模式,并在其移动应用程序中使用了颜色。
Jabra Sound +应用程序将其深色UI调色板限制为仅两种强调色。

正确的配色方案可以帮助创建良好的对比度。 可着色 是用于选择文本和背景颜色符合辅助功能的颜色组合的有用工具。

文字和基本元素(例如按钮和图标)在深色背景上显示时应符合易读性标准。如上面的Jabra Sound +应用程序所示,文本和图标可以使用白色以外的其他颜色。

Google的材料设计 现场 有一个有用的调色板生成器(在“颜色选择工具”下),设计人员可以使用它生成调色板并将其应用于UI。颜色组合的可访问性级别也可以与同伴一起测量 色彩工具.

“使用强烈对比的颜色以提高可读性。许多因素都会影响颜色的感知,包括字体大小和粗细,颜色亮度,屏幕分辨率和照明条件。” 苹果人机界面指南

深色UI调色板示例:最佳深色模式应用程序使用有限数量的颜色。
遵守深色UI设计的最佳做法:最佳深色模式应用程序使用数量有限的颜色。

少即是多:利用负空间

成功的深色UI设计的基本要素之一是巧妙使用负空间。 如果设计不当,深色的UI可能会使数字产品显得笨拙。 为了平衡,设计人员可以利用稀疏的负空间来使黑暗的UI更轻巧, 简约设计。极简设计既要解决问题,又要解决问题。巧妙地使用负空间将使黑暗的UI更易于扫描,并使人们更容易吸收信息。

法国作曲家 克劳德·德彪西 曾经有人说, ”音乐是音符之间的空间。”对于可扫描性来说,同样的观点是正确的-元素之间的负空间是使布局起作用的原因。 用户界面 元素周围的大量负空间使它们得到了定义。 它强调重要内容,并提供必要的呼吸空间,以确保设计不会感到密集和混乱。如果没有呼吸空间,人脑扫描兴趣点的可能性就较小,而漫游的可能性就更大。

元素和文本过多的界面是高质量深色UI设计的祸根。 通过仔细考虑黑暗用户界面中的视觉层次结构, 设计师 可以使他们的作品更易于扫描,从而提升用户体验。

极简主义的深色UI网页设计。
极简主义的深色UI网页设计。 (通过 丹尼斯·蒂林斯基)

样式词:排版

黑暗用户界面中的每一段文字都需要仔细检查。 关注点是双重的:可读性和对比性。首先,关于尺寸。文字必须足够大,以确保清晰易读(深色背景上的小文字难以阅读)。其次,文本和背景之间必须有足够的对比。

成千上万的可用性 数字字体 轻松显示对标题和英雄消息有影响的消息。设计人员可以通过增加对比度并为较小的文本调整字体大小,字符间距和行高来减轻可读性问题。

W3C AAA建议常规尺寸的文本(如果不是粗体,则小于18点)的对比度应为 至少7:1。这也适用于其他UI元素:图标,文本图像和文本标签,例如按钮标签。它有责任 设计师 确保所有人都能使用所有数字产品。它不仅可以提高可用性,而且可以提高用户体验, 这是法律大多数国家.

设计人员可以使用无数种选择来获取在黑暗UI中能很好工作的出色字体。 Google字体, 字体库Adobe Typekit 提供便捷的应用程序或网站集成以及多种选择的一些工具。

AirPods Pro页面使用深色的UI调色板,具有较大的字体和强烈的对比度,以最大程度地发挥作用。
Apple网站上的AirPods Pro页面使用超大字体和强烈的对比度,以发挥最大的影响。

沟通深度:高程

黑暗的主题并不意味着扁平。 在明亮的主题下,照明,阴影和阴影会产生深度感。对于深色UI,这更具挑战性,因为它们主要包含带有稀疏颜色强调的深色表面。仍然, 设计师 可以使用三个或四个海拔高度以及相应的配色方案来传达文字的深度。

为什么要深度? 大多数现代设计系统都使用高程系统来传达深度。深度感与自然世界相对应。我们的愿景具有深度感知能力,我们生活在3D世界中。 深度有助于强调界面的视觉层次。 例如,前景中的元素会引起注意,例如警告对话框。

表面的照明方式不同,以表示不同的海拔高度。 表面在高空堆栈中的位置越高(越接近隐式光源),表面就越轻。较亮的表面可以更容易地区分组件之间的高度,并且有助于查看阴影,使每个表面的边缘更加明显。

可以通过使表面靠近隐式光源使表面更轻来描述黑暗UI中的深度。
可以通过使表面靠近隐式光源使表面更轻来描述黑暗UI中的深度。 (通过 材料设计)

设计每个级别的表面颜色需要谨慎。 最好不要超过四个或五个级别。设计师需要考虑文本的对比度,因为表面在堆栈中的位置更高并且更轻。如果背景颜色不够深,无法在白色文字和表面之间达到至少15.8:1的对比度,则最高(和最浅)凸起表面上的文字将无法通过4.5:1标准。在某些情况下,最好将元素的文本颜色指定为 真黑 (#000000)在设计系统中获得浅灰色背景上的良好对比度。

黑暗UI设计灵感

考虑到上述原则,以下是深色UI设计的一些出色示例:

黑暗UI设计灵感:Atom  金融 。
原子金融 网站。

原子金融 利用深色主题打造精致外观,并将其强调色限制为三种。该布局使用负空间和稀疏的极简设计,用于复杂的金融网站。该站点很好地使用了细微的阴影来指示UI中不同的组件高程。

黑暗的UI设计灵感:Aer电子商务设计。
黑暗主题电子商务网站作者 丹尼尔·克洛珀(Daniel Klopper).

黑暗的UI设计灵感:电子商务网站设计。
黑暗主题电子商务网站作者 达里恩·米切尔(Darion Mitchell).

这两个极简主义的深色主题网站都使用粗体印刷。使用带有单一强调色的小心阴影与深色UI设计最佳做法保持一致。

黑暗UI设计灵感:IBM B2B SaaS设计。
资讯主页 鲁本·费尔南德斯(Ruben Fernandez) 对于 IBM公司 公司 .

尽管为SaaS应用程序使用深色主题存在挑战,但此数据可视化仪表板可用于 IBM公司 公司 是示范。强调色的数量保持最少,并且该网站使用细微的阴影显示不同的UI高程。

黑暗UI设计的灵感:来自Wego,Spotify和Apple的移动应用程序很好地完成了黑暗UI设计。
可以正确执行深色UI设计的移动应用程序:Wego,Spotify和Apple(Android和iOS)。

这些移动应用通过使用以下方法来遵循深色UI设计最佳实践 真黑 仅适用于边框,针对不同海拔高度和有限数量的强调颜色适当设置元素的阴影。

概要

必须谨慎地决定在传统的UI设计上使用深色UI设计。 不应出于错误的原因选择它-时髦,与众不同或模仿他人的设计。 设计者 应该有一个 他们选择的强烈理由 并考虑内容,使用环境以及将在其中显示设计的设备。

深色主题适用于某些数字产品,但要实现其他主题确实很困难。 简洁是关键。它们非常适合呈现简约的内容,数据可视化,媒体站点和娱乐平台。它们不适用于复杂的,数据繁重的B2B平台,文本繁多的页面以及各种内容。

对于有勇气的设计师准备跨越新的风格边界,并通过情感和美学的视角探索黑暗的用户界面,他们提供了一个充满无限可能性的令人兴奋的游乐场-在“黑暗的一面”。


让我们知道您的想法!请在下面留下您的想法,评论和反馈。

•••

在Toptal设计博客上进一步阅读:

了解基础

您如何制作深色UI?

设计深色UI时,需要建立一组深色以作为深色UI调色板的基础。其次,需要确定两种或三种不饱和原色。第三,设计人员应保持设计稀疏和最小化,并确保所有文本具有良好的对比度以提高可读性。

暗模式好还是坏?

处于暗模式的数字产品不一定好坏,但在文化适应性,品牌契合度和情感影响方面需要仔细考虑。例如,深色UI调色板(通常由奢侈品牌使用)可以很好地工作,因为它代表了力量,精致,风格和优雅。

什么是UI颜色?

界面的调色板包含由UI设计师确定的颜色,以最佳地满足特定设计的要求。它们既美观又是用户体验设计的选择。 用户界面 颜色通常被称为UI颜色方案,旨在突出显示UI元素(例如按钮)并定义文本颜色。

颜色在UI设计中的主要作用是什么?

如深色UI调色板中所用,UI颜色的主要作用是赋予UI元素定义和对比度,以使界面美观。 用户界面 设计中的颜色可以分配给文本,按钮,图标和其他UI组件。此颜色系统称为UI调色板。

用户界面 设计选择和使用颜色的正确方法是什么?

用户界面 设计的颜色通常根据品牌配色方案,美学和风格需求进行选择。还考虑了颜色心理学,因为它在UI设计中起着重要的作用。例如,对于深色UI调色板,将选择一组深灰色阴影以及两种或三种强调色。