怎样计划精彩的深色主题界面？

文章分享了作者为应用计划深色主题的心得和履历，但愿对您计划深色主题的界面有所辅佐。

深色主题是应用界面计划的最新趋势。MacOS客岁推出了深色主题模式后，Android和iOS也紧随厥后，推出了各自的深色主题模式。

曾经有数的深色主题现已受到公共的普及等候。

假如计划适合，深色主题可以带来诸多甜头，可以缓解视疲惫，弱光下更易读。并且，按照屏幕的差异，可以大大镌汰电池耗损。

然而，想要计一律套精彩的深色主题并非易事，不能只是简朴地一再行使颜色或反转色调。假如这样做，结果将揠苗助长：加重视疲惫，弱光下更难阅读，乃至也许冲破界面的信息条理布局。

这篇文章首要将声名怎样计划可读、平衡和精彩的深色主题。

一、深暗浅明

大大都深色主题的UI计划都遵循这一原则：深层界面更暗，浅层界面略亮。这模仿了从上方投射光泽的情形，带来认识且令人定心的物理结果。

在举办深色主题计划时，很轻易就会通过反转淡色主题来实现结果。然而，这样做反而会使底层变亮，而表层变暗。这有悖于物理纪律，会让人感受不天然。

与以上要领差异，我们应该从淡色主题的主界面取色，反转此颜色，以得到深色主题的主界面颜色。然后在近表层调亮这种颜色，在底层调懊魅这种颜色。

在Superhuman，我们的深色主题是由五种灰色阴影组成的。表层界面面行使较浅的灰色;底层的界面行使较深的灰色。

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

二、从头审阅感知比拟度

在通过参考淡色主题来计划深色主题时，很重要的是要从头审阅感知比拟。也就是说，要害是看一个元素示意出来的差别，而不是看数值毕竟是几多。

譬喻，在我们的淡色主题中，接洽人信息笔墨为不透明度为60%的玄色。可是在我们的深色主题中，我们将接洽方法配置为不透明度为65%的白色。

固然两者的比拟度都高出AA尺度，可是特另外5%却可以防备视觉疲惫，出格是在弱光前提下。

对付这些赔偿并没有严酷的划定。相反，我们会按照文本地区、字体巨细和行宽别离调解每一个元素，以确保深色主题和淡色主题一样清楚、易于阅读。

三、罕用大面积亮色

在淡色主题中，我们常常行使大面积的亮色，结果凡是还不错，由于我们最重要的元素也许会更亮。但在深色主题中是行不通的，大面积亮色会把我们的留意力吸引已往。

譬喻，参考“提示我”界面。在淡色主题中，粉赤色的蒙层不会把用户的留意力从颜色更亮的对话框上吸引走。可是在深色主题中，同样的蒙层却会吸引留意力。以是我们拿掉了这种蒙层，这样用户就可以快速、等闲地存眷到重要的部门。

罕用大面积亮色可以让重要信息更受存眷

四、停止纯黑或纯白

在Superhuman，我们不会在暗中主题中行使纯黑或纯白。

有以下四个来由：

4.1 真实性

真正的玄色并不存在于我们的一般情形中（天下上最黑的物体，麻省理工学院开拓的一种尚未定名的原料，离真正的玄色还差0.005% ）。因此，我们的视觉已经顺应了将相对的暗中视为玄色。

这就是为什么#000000会让人感受云云反面谐，尤其是在与较浅的元素比拟时，它与我们凡是看到的任何对象都不匹配。

4.2 玄色拖影

当较浅的元素被拖动或转动在纯玄色配景上时，就会发生玄色涂抹这种视觉失真。

这种结果呈此刻OLED屏幕上，这种屏幕越来越广泛。在这些屏幕上，纯玄色像素会被封锁（这就是为什么深色主题比淡色主题耗损更少的电量）。

然而，这些像素的开启和封锁比改变颜色要慢，因此这个变量相应导致了拖影结果。

iOS时钟应用措施的玄色拖影（必需在OLED屏幕上寓目）

你可以通过行使深灰色来停止玄色拖影，由于那样的话像素将不会被封锁。这乃至合用于像#010101这样的深灰色，而且如故比淡色主题更省电。

4.3 深度

假如在配景中行使纯玄色，你就无法去示意深度。

打个例如，若是界面配景是纯玄色的，你想在上面画一个关照界面，关照应该漂流在配景之上，以是你要行使阴影来通报深度。可是，这种环境下阴影是难以察觉的，由于没有什么比纯黑更黑。

假如你的配景不是纯玄色的，你可以行使差异不透明度的阴影和恍惚来表达深度。譬喻，参考Superhuman的关照:

可以用阴影来表达深度，条件是配景不是纯玄色的。

4.4 光晕

纯白文本与纯黑配景形成最高比拟度是21:1。从量化的WCAG（Web内容无障碍指南）的行使前提来看，这的确是最佳输出比拟。

然而，在计划暗中主题时，必然要留意很是高的比拟度，比拟度太高会导致眼睛疲惫和光晕。

将很是豁亮的文本配置在很是暗的配景下时，文本会表现为配景出血。对付我们这些散光患者来说，这种影响乃至更强。

杰森·哈里森是感知与互动研究组的博士后研究员，他说:

散光患者（约占总生齿的50%）发明，黑底白字比白底黑字更难阅读。这在必然水平上与光泽有关:在豁亮的表现器（白色配景）下，虹膜闭合得更紧，镌汰了“变形”镜片的影响；在玄色的配景下，虹膜会打开以吸取更多的光泽，而透镜的变形会使眼睛发生更恍惚的核心。

在Superhuman，我们必需出格留意光晕，由于应用措施的文本太多。我们把白色的笔墨配置为90%的不透明度，这样暗中的配景就会混在一路。这均衡了比拟度和亮度，使应用措施很轻易在各类光泽前提下阅读。

五、加深颜色

由于为了停止眼睛疲惫和光晕，我们把文本的颜色调暗了，以是彩色元素和按钮也许会显得太亮了。必需调解这些颜色，以更好地顺应深色的主题。

起首，我们低落亮度，使这些颜色不会抢四面文本的视觉核心。然后，增进饱和度，使他们如故保持原有特性。

譬喻，假如直接行使淡色主题中的紫色，它与四面文本比拟显得太亮了。在现实的深色主题中，我们加深了这种颜色，这样用户才可以专注于文本。

为暗中的主题缔造更深的颜色：保持色调，低落亮度，增进饱和度。

结论

深色主题有许多甜头，此刻被受到普及等候。

然而，想要计划好一款深色主题并非易事。简朴地一再行使颜色和反转色调会增进眼睛疲惫，使其在弱光下更难阅读，乃至也许冲破视觉和信息条理。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!