怎样计划令人愉悦的深色主题？
深色主题是应用步伐计划中的最新趋，本文作者论述了怎样计划可读、均衡且令人愉悦的深色主题，给出了相干发起。http://pics1.baidu.com/feed/0bd162d9f2d3572ce59b06791935922263d0c3c3.jpeg?token=8d3a31ba592ec3897e780f67f472ff72&s=381340944F282719CE6C7D8503007088
深色主题是应用步伐计划中的最新趋势：MacOS于客岁推出了暗模式，Android上个月推出了Dark主题，iOS 在已往的两周里遇上了。
曾经很少见的暗中主题已成为人们广泛盼望的主题。
假如做得好，深色主题会带来许多利益。它们淘汰了眼睛疲惫，在弱光下更易于阅读，大大淘汰电池斲丧。
但是，很难创建令人愉悦的深色主题。
我们不能简朴地重用我们的颜色或反转我们的阴影，假如如许做，我们将得到与想要的相反的效果：我们将增长眼睛疲惫，并使其在弱光下更难以阅读，我们乃至大概冲破我们的信息条理布局。
在这篇文章中，我们分享了怎样计划可读、均衡且令人愉悦的深色主题。
使远处的外貌变暗
在深色主题中，UI元素的配景颜色遵照一个引导原则：该层离用户越近（比方，模态），则外貌积越轻。该模子雷同于从上方投射光源的情况。一层背面越深，吸收到的光线越少，进进配景的光线就越多。
创建深色主题时，大概会想反转现有的淡色主题。但是，远处的外貌将变亮，而近处的外貌将变暗，这会粉碎身材并感觉不天然。
仅接纳灯光主题的主外貌颜色，反转此颜色可产生深色主题的主外貌颜色，变浅此颜色可得到较近的外貌，变深的颜色可得到较远的外貌。
在《超人》中，我们的暗中主题由五种灰色阴影构成。较近的外貌利用较浅的灰色。较远的外貌利用较深的灰色。
http://pics3.baidu.com/feed/dcc451da81cb39db420630fe4330f821aa183004.jpeg?token=a3d9287d71612b280b4c25633d573f86&s=2AA271227E84B49E9F00F88D010030E1
较近的外貌利用较浅的灰色，较远的外貌利用较深的灰色
回首知觉对比
通过引用淡色主题计划深色主题时，重新审阅感知对比度很紧张。不管数字大概暗示什么，这就是元素看起来有多少对比度。
比方，在我们的淡色主题中，接洽方式为玄色，不透明度为60％。但是在暗中主题中，我们将接洽方式设置为白色，不透明度为65％。固然两个对比度均凌驾AA尺度，但额外的5％可以防止疲惫，尤其是在弱光条件下。
对于这些偏移量没有硬性规定。相反，我们会根据文本巨细，字体粗细和线条宽度来分别调解每个项目，以确保深色主题与淡色主题一样清楚易读。
http://pics0.baidu.com/feed/b21bb051f8198618d9784e1ad2cbdf768bd4e61a.jpeg?token=5d952935d6fd0e5718ac7ee6970da6dd&s=88205D321EC89A01A84CF1CD0100A0B1
淘汰大块美丽的色彩
在淡色主题中，我们常常利用大块豁亮的颜色。通常这很好：我们最紧张的元素大概还会更亮。但是在暗中的主题中，它不起作用：大块的颜色将核心从我们最紧张的元素中提取出来。
比方，思量我们的“提示我”屏幕。在我们的淡色主题中，粉赤色的覆盖层不会分散对话框的亮度。但是在我们的暗中主题中，雷同的覆盖层吸引了我们的留意力。我们完全删除了叠加层，以便可以快速，轻松地关注紧张内容。
http://pics5.baidu.com/feed/94cad1c8a786c917a852387f5d1b81ca3ac757cb.jpeg?token=3242da2fbf14ca764f460477597767aa&s=9C0A7C32629E879ADE2DD5CE0300A0A5
淘汰大块美丽的色彩，以使您可以轻松专注于紧张事项
制止纯玄色或白色
在《超人》中，我们不会在暗中主题中利用任何纯玄色或白色。如许做有四个缘故原由。
4.1 实际主义
在我们的一样平常情况中不存在纯玄色。（天下上最暗中的物体，是麻省理工学院开辟的一种尚待定名的质料，仍旧比真玄色低0.005％！）因此，我们的视野已顺应将相对暗中感知为真玄色。这就是为什么#000000会感到云云难听逆耳的缘故原由，尤其是当与较轻的元素打仗时。它不符合我们通常看到的任何内容。
4.2 玄色涂片
玄色拖尾是在较浅的内容在纯玄色配景上拖动或转动时发生的视觉失真。
这种效应发生在越来越广泛的OLED屏幕上。在这些屏幕上，纯玄色像素被封闭。（这是暗中主题比轻主题斲丧更少能量的方式。）但是，打开和封闭这些像素比改变颜色要慢。这种可变的相应产生拖尾效应。
http://pic.rmb.bdstatic.com/176f890ef5ce19501bc976ad219cd4528346.gif
iOS Clock应用步伐中的玄色污迹（必须在OLED屏幕上检察）
您可以通过利用深灰色来制止玄色污点，由于如许像素将不会封闭。乃至可以利用像暗中一样深的灰色，#010101而且仍旧比轻主题斲丧更少的能量！
4.3 深度
假如在配景元素中利用纯玄色，则会失往某些转达深度的本领。
比方，假设您的配景是纯玄色的。在此之上，您将表现一条关照。关照应漂泊在配景上方，因此您可以利用阴影来转达深度。除了阴影是无法察觉的，由于没有什么比纯玄色更暗。
假如您的配景不是纯玄色，则可以利用具有差别不透明度的阴影，并利用含糊来转达深度。比方，思量超人中的关照：
http://pics1.baidu.com/feed/3bf33a87e950352a191eeabfc6650af7b2118b33.jpeg?token=9865006bafa865e5f85c01edf816e020&s=2EA675220E94BE9E9E1991870100A0E1
假如配景不是纯玄色，则可以利用阴影来转达深度
4.4 光晕
纯玄色配景上的纯白色文本可产生最高的对比度：21：1。用定量WCAG可访问性术语来说，这是空想的输出。
但是，在计划深色主题时，请务必留意极高的对比度。对比度太高会导致眼睛疲惫和晕圈。
当非常豁亮的文本设置在非常暗中的配景上时，该文本大概会渗透配景。对于我们这些散光的人来说，这种结果乃至更强。根据感官知觉和互动研究小组的博士后研究员Jason Harrison的说法：
散光患者（约占总生齿的50％）发现，阅读好坏色笔墨比阅读好坏色笔墨更难。这部门与亮度有关：在豁亮的表现（白色配景）下，虹膜会闭合得更多一些，从而低落了“变形”透镜的结果。假如表现为深色（玄色配景），则虹膜会打开以吸收更多的光线，而且镜头的变形会在眼睛上产生更加含糊的核心。
在超人类中，我们必须特殊留意光晕，由于我们的应用步伐文本非常极重。我们将白色文本设置为90％不透明度，以使深色配景融合在一起。这均衡了对比度和亮度，因此该应用步伐在各种光照条件下都易于阅读。
http://pics2.baidu.com/feed/5882b2b7d0a20cf479596af8e12fba33adaf99fc.jpeg?token=c84ebfe99a85564b31e43cc039a97081&s=0213EB221F85BA9A7717C09C0100C0A3
加深色彩
由于我们调低了文本的色彩以制止眼睛疲惫和晕眩，因此我们的彩色口音和按钮大概显得太亮。如今，我们必须调解这些颜色以在暗中主题中更好地工作。起首，我们低落亮度，以使这些颜色不会压倒四周的文本。其次，我们增长饱和度，以便它们仍旧具有特性。
比方，假如我们直接利用淡色主题中的紫色，则对于四周的文本而言，它显得太亮了。在我们现实的深色主题中，我们加深了这种颜色，以便用户可以专注于文本。
http://pics6.baidu.com/feed/2e2eb9389b504fc2ddbb730073fb161491ef6dff.jpeg?token=8666c906019bb399c62b868ef630b5d2&s=08225D321695BF9AA53AF5CE010030E1
为深色主题创建更深的颜色；保持色调，低落亮度并增长饱和度。
结论
暗中主题有许多利益，如今人们广泛等待它。但是，它们很难很好地实行。重用颜色和颠倒阴影的简朴方法将增长眼睛疲惫，使其在弱光下更难阅读，乃至大概粉碎视觉和信息条理。
我们找到了一种体系的方法来构建可读，均衡且令人愉悦的暗中主题。只需按照以下步调操纵：
使远处的外貌变暗回首知觉对比淘汰大块美丽的色彩制止纯玄色或白色加深色彩我盼望这可以资助您计划令人愉悦的深色主题。
泉源：http://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f
本文由 @CANAAN 翻译发布于大家都是产物司理，未经允许，克制转载
题图来自Unsplash，基于CC0协议
http://www.fyguaji.com
页:
[1]