UI设计优秀公司，深色主题是应用界面设计的最新趋势。MacOS去年推出了深色主题模式后，Android和iOS也紧随其后，推出了各自的深色主题模式。

　　曾经稀有的深色主题现已受到大众的广泛期待。

　　假如设计妥当，深色主题能够带来诸多优点，能够缓解视疲惫，弱光下更易读。并且，根据屏幕的不同，能够大大削减电池耗费。

　　可是，想要设计一套超卓的深色主题并非易事，不能仅仅简略地重复使用色彩或回转色彩。假如这样做，作用将拔苗助长：加重视疲惫，弱光下更难阅读，乃至或许打破界面的信息层次结构。

　　UI设计优秀公司，这篇文章主要将说明怎么设计可读、均衡和超卓的深色主题。

　　深暗浅明

　　大多数深色主题的UI设计都遵从这一原则：深层界面更暗，浅层界面略亮。这模拟了从上方投射光线的环境，带来熟悉且令人安心的物理作用。

　　在进行深色主题设计时，很容易就会经过回转浅色主题来实现作用。可是，这样做反而会使底层变亮，而表层变暗。这有悖于物理规律，会让人感觉不自然。

　　与以上方法不同，咱们应该从浅色主题的主界面取色，回转此色彩，以取得深色主题的主界面色彩。然后在近表层调亮这种色彩，在底层调暗这种色彩。

　　在Superhuman，咱们的深色主题是由五种灰色暗影构成的。表层界面使用较浅的灰色；底层的界面使用较深的灰色。

　　越接近表层的界面使用较浅的灰色，接近底层的界面使用较深的灰色。

　　从头审视感知对比度

　　UI设计优秀公司，在经过参阅浅色主题来设计深色主题时，很重要的是要从头审视感知对比。也便是说，关键是看一个元素表现出来的差异，而不是看数值终究是多少。

　　例如，在咱们的浅色主题中，联系人信息文字为不透明度为60%的黑色。可是在咱们的深色主题中，咱们将联系方式设置为不透明度为65%的白色。

　　虽然两者的对比度都超越AA标准，可是额外的5%却能够防止视觉疲惫，特别是在弱光条件下。

　　关于这些补偿并没有严格的规则。相反，咱们会根据文本区域、字体大小和行宽别离调整每一个元素，以确保深色主题和浅色主题相同明晰、易于阅读。

　　少用大面积亮色

　　在浅色主题中，咱们经常使用大面积的亮色，作用一般还不错，因为咱们最重要的元素或许会更亮。但在深色主题中是行不通的，大面积亮色会把咱们的注意力招引过去。

　　例如，在浅色主题中，粉红色的蒙层不会把用户的注意力从色彩更亮的对话框上招引走。可是在深色主题中，相同的蒙层却会招引注意力。所以咱们拿掉了这种蒙层，这样用户就能够快速、轻易地关注到重要的部分。

　　防止纯黑或纯白，有以下四个理由：

　　1.真实性

　　UI设计优秀公司，真实的黑色并不存在于咱们的日常环境中（世界上最黑的物体，麻省理工学院开发的一种尚未命名的资料，离真实的黑色还差0.005%）。因此，咱们的视觉现已习惯了将相对的漆黑视为黑色。

　　这便是为什么#000000会让人感觉如此不和谐，尤其是在与较浅的元素对比时，它与咱们一般看到的任何东西都不匹配。

　　2.黑色拖影

　　当较浅的元素被拖动或滚动在纯黑色布景上时，就会发生黑色涂改这种视觉失真。

　　这种作用出现在OLED屏幕上，这种屏幕越来越普遍。在这些屏幕上，纯黑色像素会被封闭（这便是为什么深色主题比浅色主题耗费更少的电量）。

　　可是，这些像素的敞开和封闭比改动色彩要慢，因此这个变量响应导致了拖影作用。

　　你能够经过使用深灰色来防止黑色拖影，因为那样的话像素将不会被封闭。这乃至适用于像#010101这样的深灰色，并且仍然比浅色主题更省电。

　　4.光晕

　　UI设计优秀公司，纯白文本与纯黑布景形成最高对比度是21:1。从量化的WCAG（Web内容无障碍攻略）的使用条件来看，这简直是最佳输出对比。

　　可是，在设计漆黑主题时，必定要注意对比度，对比度太高会导致眼睛疲惫和光晕。

　　3.深度

　　假如在布景中使用纯黑色，你就无法去表现深度。

　　打个比方，假如界面布景是纯黑色的，你想在上面画一个告诉界面，告诉应该漂浮在布景之上，所以你要使用暗影来传达深度。可是，这种情况下暗影是难以察觉的，因为没有什么比纯黑更黑。

　　假如你的布景不是纯黑色的，你能够使用不同不透明度的暗影和模糊来表达深度。

　　加深色彩

　　为了防止眼睛疲惫和光晕，咱们把文本的色彩调暗，所以彩色元素和按钮或许会显得太亮了。必须调整这些色彩，以更好地习惯深色的主题。

　　UI设计优秀公司，首先，咱们降低亮度，使这些色彩不会抢邻近文本的视觉焦点。然后，增加饱和度，使他们仍然保持原有特征。