专业的短链接生成工具
链接域名
短网址有效期
如何设计令人愉悦的深色主题？
更新时间：2025-5-6 07:28:40 作者：爱短链
深色主题是应用程序设计的最新趋势。
本文作者阐述了如何设计可读、平衡、愉悦的深色主题，并提出了相关建议。
深色主题是应用程序设计的最新趋势：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 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
本文作者阐述了如何设计可读、平衡、愉悦的深色主题，并提出了相关建议。
深色主题是应用程序设计的最新趋势：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 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
