如何设计出色的深色主题界面？

本文分享了作者为应用程序设计深色主题的经验和经验，希望能帮助您设计深色主题。 深色主题是应用界面设计的最新趋势。MacOS去年推出深色主题模式后，Android和iOS随后，推出了自己的深色主题模式。 曾经罕见的深色主题受到了公众的广泛期待。 如果设计得当，深色主题可以带来很多好处，可以缓解视觉疲劳，在弱光下更容易阅读。此外，根据屏幕的不同，电池消耗可以大大降低。 然而，设计一套优秀的深色主题并不容易，而不仅仅是重复使用颜色或逆转颜色。如果这样做，效果会适得其反：注意疲劳，在弱光下更难阅读，甚至打破界面的信息水平结构。 本文主要讲解如何设计可读、均衡、优秀的深色主题。 一、深暗浅明 大多数深色主题UI设计遵循这一原则：深界面较暗，浅界面略亮。它模拟了从上面投射光线的环境，带来了熟悉和放心的物理效果。 在设计深色主题时，通过反转浅色主题很容易达到效果。然而，这样做会使底部变亮，表面变暗。这违背了物理规律，让人感到不自然。 与上述方法不同，我们应该从浅色主题的主界面中选择颜色，反转颜色，以获得深色主题的主界面颜色。然后在近表面照亮颜色，并在底部变暗。 在Superhuman，我们的深色主题由五种灰色阴影组成。表面界面为浅灰色；底部界面为深灰色。 表面界面越浅，底层界面越深。 二、重新审视感知对比度 在设计深色主题时，重新审视感知和比较是非常重要的。换句话说，关键是看一个元素的差异，而不是数值。 例如，在我们的浅色主题中，联系信息是60%不透明的黑色。但在我们的深色主题中，我们将联系信息设置为65%不透明的白色。 虽然两者的对比度都超过了AA但额外的5%可以防止视觉疲劳，尤其是在弱光条件下。 这些补偿没有严格的规定。相反，我们将根据文本区域、字体大小和行宽调整每个元素，以确保深色主题和浅色主题一样清晰易读。 三、少用大面积亮色 在浅色主题中，我们经常使用大面积的亮色，效果通常很好，因为我们最重要的元素可能会更亮。但在深色的主题中，大面积的亮色会吸引我们的注意力。 例如，参考提醒我界面。在浅色主题中，粉色的蒙古层不会吸引用户从更亮的对话框中吸引用户的注意力。但在深色主题中，相同的蒙古层会吸引注意力。因此，我们删除了蒙古层，使用户能够快速、轻松地关注重要部分。 少用大面积亮色可以让重要信息更受关注 四、避免纯黑或纯白 在Superhuman，我们不会在黑暗主题中使用纯黑色或纯白色。 有四个原因： 4.1 真实性 真正的黑色不存在于我们的日常环境中(麻省理工学院开发的一种未命名的材料，世界上最黑的物体，离真正的黑色还有0.005%。 ）。因此，我们的视觉已经适应了将相对黑暗视为黑色。 这就是为什么#万万会让人觉得这么不和谐，尤其是和浅元素比较的时候，和我们通常看到的一切都不匹配。 4.2 黑色拖影 当浅元素在纯黑色背景上被拖动或滚动时，就会产生黑色涂抹的视觉失真。 这种效果出现了OLED这种屏幕在屏幕上越来越普遍。在这些屏幕上，纯黑色像素被关闭(这就是为什么深色主题比浅色主题消耗更少的电量)。 然而，这些像素的开启和关闭速度比改变颜色慢，因此这种变量反应导致拖影效果。 iOS时钟应用程序的黑色拖影(必须在OLED在屏幕上观看) 你可以用深灰色来避免黑色拖影，因为像素不会关闭。这甚至适用于#010101等深灰色，仍然比浅色主题更省电。 4.3 深度 如果在背景中使用纯黑色，则无法显示深度。 例如，如果界面背景是纯黑色的，你想在上面画一个通知界面，通知应该漂浮在背景上，所以你必须用阴影来传达深度。然而，阴影很难检测到，因为没有什么比纯黑色更黑的了。 如果你的背景不是纯黑色的，你可以用不同不透明度的阴影和模糊来表达深度。例如，参考Superhuman的通知: 如果背景不是纯黑色，可以用阴影来表达深度。 4.4 光晕 纯白文本与纯黑背景的最高对比度是21:1。WCAG（Web就内容无障碍指南的使用条件而言，这是最佳输出比较。 但在设计黑暗主题时，一定要注意对比度很高，对比度过高会导致眼睛疲劳和光晕。 当在非常暗的背景下设置非常明亮的文本时，文本会显示为背景出血。这对我们散光患者的影响甚至更大。 杰森·他说： 散光患者（约占总人口的50%）发现黑底白字比白底黑字更难阅读。这在一定程度上与光有关：在明亮的显示器（白色背景）下，虹膜更紧密地关闭，减少了变形镜头的影响；在黑色背景下，虹膜会打开以接收更多的光线，镜头的变形会使眼睛产生更模糊的焦点。 在Superhuman，我们必须特别注意光晕，因为应用程序的文本太多了。我们将白色文本设置为90%的不透明度，使黑暗背景混合在一起。这平衡了对比度和亮度，使应用程序在各种光条件下易于阅读。 五、加深颜色 因为为了避免眼睛疲劳和光晕，我们把文本的颜色变暗，所以颜色元素和按钮可能看起来太亮了。为了更好地适应深色的主题，必须调整这些颜色。 首先，我们降低亮度，使这些颜色不会抓住附近文本的视觉焦点。然后，增加饱和度，使其保持原始特征。 例如，如果直接使用浅色主题中的紫色，与附近的文本相比就太亮了。在实际的深色主题中，我们加深了这种颜色，使用户能够专注于文本。 为黑暗主题创造更深的颜色：保持颜色，降低亮度，增加饱和度。 结论 深色主题有很多好处，现在被广泛期待。 然而，设计一个深色主题并不容易。简单地重复使用颜色和反转颜色会增加眼睛疲劳，使其在弱光下更难阅读，甚至打破视觉和信息水平。 我们找到了一种系统的设计深色主题的方法，具有很强的可读性、平衡性和卓越性，只需遵循以下步骤： 深暗浅明 重新审视感知对比度 少用大面积亮色 避免纯黑或纯白 加深颜色 本文译自Teresa Man的How to design delightful dark themes，作者是邮件客户端Superhuman首席设计师 原文链接：https://heydesigner.com/blog/how-to-design-delightful-dark-themes/ 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。