如何设计令人愉悦的深色主题？

深色主题是应用程序设计的最新趋势。本文作者阐述了如何设计可读、平衡、愉悦的深色主题，并提出了相关建议。 深色主题是应用程序设计的最新趋势：MacOS暗模式于去年推出，Android上个月推出Dark主题，iOS 过去两周赶上了。 曾经罕见的黑暗主题已经成为人们普遍期待的主题。 如果做得好，深色主题会带来很多好处。它们减少眼睛疲劳，在弱光下更容易阅读，大大降低电池消耗。 然而，很难创造出令人愉悦的深色主题。 我们不能简单地重用我们的颜色或逆转我们的阴影，如果我们这样做，我们会得到相反的结果：我们会增加眼睛疲劳，使它在弱光下更难阅读，我们甚至可能打破我们的信息水平结构。 本文分享了如何设计可读、平衡、愉悦的深色主题。 使远处的表面变暗 在深色主题中，UI元素的背景颜色遵循一个指导原则：层越接近用户（例如，模式），表面积就越轻。该模型类似于从上面投射光源的环境。一层后面越深，接收的光越少，进入背景的光就越多。 在创建深色主题时，你可能想要逆转现有的浅色主题。然而，远处的表面会变亮，近处的表面会变暗，这会破坏身体，感到不自然。 仅使用照明主题的主表面颜色，反转这种颜色可以产生深色主题的主表面颜色，浅色可以得到更近的表面，深色可以得到更远的表面。 在《超人》中，我们的黑暗主题由五个灰色阴影组成。较近的表面为浅灰色。较远的表面为深灰色。 较近的表面为浅灰色，较远的表面为深灰色 回顾知觉对比 在引用浅色主题设计深色主题时，重新审视感知对比度非常重要。无论数字可能暗示什么，这就是元素看起来有多少对比度。 例如，在我们的浅色主题中，联系信息是黑色的，不透明度是60%。但在黑暗主题中，我们将联系信息设置为白色，不透明度为65%。虽然两者都超过了AA但额外的5%可以防止疲劳，特别是在弱光条件下。 这些偏差没有硬性规定。相反，我们会根据文本的大小、字体的厚度和线条的宽度来调整每个项目，以确保深色主题和浅色主题一样清晰易读。 减少大块亮色 在浅色主题中，我们经常使用大而明亮的颜色。通常这很好：我们最重要的元素可能会更亮。但在黑暗的主题中，它不起作用：大的颜色从我们最重要的元素中提取焦点。 例如，考虑我们的提醒我屏幕。在我们的浅色主题中，粉色覆盖层不会分散对话框的亮度。但在我们的黑暗主题中，相同的覆盖层吸引了我们的注意。为了快速、轻松地关注重要内容，我们完全删除了叠加层。 减少大的亮色，让你很容易专注于重要的事情 避免纯黑或白 在《超人》中，我们不会在黑暗主题中使用任何纯黑色或白色。有四个原因。 4.1 现实主义 在我们的日常环境中没有纯黑色。(世界上最黑暗的物体是麻省理工学院开发的一种未命名的材料，仍低于真正的黑色.005%！)因此，我们的视野已经适应了将相对黑暗感知为真正的黑色。这就是为什么#万万万会感觉如此刺耳，尤其是当与轻元素接触时。它不符合我们通常看到的任何东西。 4.2 黑色涂片 黑色拖尾是在纯黑色背景上拖动或滚动的视觉失真。 这种效应越来越普遍OLED屏幕上。在这些屏幕上，纯黑色像素被关闭。(这是黑暗主题比轻主题消耗更少能量的方式。)但打开和关闭这些像素比改变颜色要慢。这种可变响应产生拖尾效应。 iOS Clock应用程序中的黑色污渍(必须在OLED查看屏幕) 你可以使用深灰色来避免黑色污渍，因为像素不会关闭。你甚至可以使用像黑暗一样深的灰色，#010101仍然比轻主题消耗更少的能量！ 4.3 深度 若在背景元素中使用纯黑色，则会失去一些传达深度的技巧。 例如，假设你的背景是纯黑色的。在此之上，您将显示一个通知。通知应漂浮在背景上方，因此您可以使用阴影来传达深度。除了阴影，没有什么比纯黑色更暗的了。 如果你的背景不是纯黑色的，你可以用不同不透明度的阴影和模糊来传达深度。例如，考虑超人通知： 如果背景不是纯黑色，阴影可以用来传达深度 4.4 光晕 纯黑背景上的纯白文本可以产生最高的对比度:21:1。定量使用WCAG对于可访问性术语来说，这是梦想的输出。 然而，在设计深色主题时，请注意高对比度。对比度过高会导致眼睛疲劳和头晕。 当一个非常明亮的文本设置在一个非常黑暗的背景中时，它可能会渗透到背景中。对我们散光的人来说，这种效果甚至更强。根据感官意识和互动研究小组的博士后研究员Jason Harrison的说法： 散光患者（约占总人口的50%）发现阅读黑白文本比阅读黑白文本更困难。这部分与亮度有关：在明亮的显示（白色背景）下，虹膜会更加封闭，从而降低变形透镜的效果。如果显示为深色（黑色背景），虹膜将打开以接收更多的光，镜头的变形将在眼睛上产生更模糊的焦点。 在超人类中，我们必须特别注意光晕，因为我们的应用程序文本非常重。我们将白色文本设置为90%的不透明度，以整合深色背景。这平衡了对比度和亮度，因此应用程序在各种光照条件下易于阅读。 加深色彩 由于我们降低了文本的颜色，以避免眼睛疲劳和头晕，我们的颜色口音和按钮可能看起来太亮了。现在，我们必须调整这些颜色，以便在黑暗主题中更好地工作。首先，我们降低亮度，以防止它们压倒附近的文本。其次，我们增加饱和度，使它们仍然具有特征。 例如，如果我们直接使用浅色主题中的紫色，它对附近的文本太亮了。在我们实际的深色主题中，我们加深了这种颜色，让用户专注于文本。 保持色调，降低亮度，增加饱和度。 结论 黑暗主题有很多好处，现在人们普遍期待它。然而，它们很难很好地实现。简单的重用颜色和倒置阴影的方法会增加眼睛疲劳，使其在弱光下更难阅读，甚至破坏视觉和信息水平。 我们找到了构建可读、平衡、愉悦黑暗主题的系统方法。只需遵循以下步骤： 使远处的表面变暗 回顾知觉对比 减少大块亮色 避免纯黑或白 加深色彩 我希望这能帮助你设计一个愉快的深色主题。 作者： Teresa Man；译者： CANAAN；译者微信官方账号:南设（ID：shemenglianmeng） 来源：https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。