首页 体育 教育 财经 社会 娱乐 军事 国内 科技 互联网 房产 国际 女人 汽车 游戏

如何用 5 个步骤,快速设计出优秀的深色模式?

2020-01-03

深色主题是运用界面规划的最新趋势。MacOS 上一年推出了深色主题形式后,Android 和 iOS 也紧随其后,推出了各自的深色主题形式。

从前稀有的深色主题现已遭到群众的广泛等待。

假设规划妥当,深色主题能够带来许多优点,能够缓解视疲惫,弱光下更易读。而且,依据屏幕的不同,能够大大削减电池耗费。

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

这篇文章主要将阐明怎么规划可读、均衡和超卓的深色主题。

大多数深色主题的 UI 规划都遵从这一准则:深层界面更暗,浅层界面略亮。这模拟了从上方投射光线的环境,带来了解且令人安心的物理作用。

在进行深色主题规划时,很简略就会经过回转淡色主题来完成作用。可是,这样做反而会使底层变亮,而表层变暗。这有悖于物理规则,会让人感觉不自然。

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

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

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

在经过参阅淡色主题来规划深色主题时,很重要的是要从头审视感知比照。也便是说,关键是看一个元素体现出来的差异,而不是看数值终究是多少。

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

尽管两者的比照度都超越 AA 规范,可是额定的 5% 却能够防止视觉疲惫,特别是在弱光条件下。

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

在淡色主题中,咱们常常运用大面积的亮色,作用一般还不错,由于咱们最重要的元素或许会更亮。但在深色主题中是行不通的,大面积亮色会把咱们的注意力招引曩昔。

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

△ 少用大面积亮色能够让重要信息更受重视

在 Superhuman,咱们不会在漆黑主题中运用纯黑或纯白。

有以下四个理由:

真实的黑色并不存在于咱们的日常环境中。因而,咱们的视觉现已习惯了将相对的漆黑视为黑色。

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

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

这种作用出现在 OLED 屏幕上,这种屏幕越来越遍及。在这些屏幕上,纯黑色像素会被封闭。

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

△ iOS 时钟运用程序的黑色拖影

你能够经过运用深灰色来防止黑色拖影,由于那样的话像素将不会被封闭。这乃至适用于像 #010101 这样的深灰色,而且依然比淡色主题更省电。

假设在布景中运用纯黑色,你就无法去体现深度。

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

假设你的布景不是纯黑色的,你能够运用不同不透明度的暗影和含糊来表达深度。例如,参阅 Superhuman 的告诉:

能够用暗影来表达深度,条件是布景不是纯黑色的。

纯白文本与纯黑布景构成最高比照度是 21:1。从量化的 WCAG的运用条件来看,这简直是最佳输出比照。

可是,在规划漆黑主题时,必定要注意比照度,比照度太高会导致眼睛疲惫和光晕。

将十分亮堂的文本设置在十分暗的布景下时,文本会显现为布景出血。关于咱们这些散光患者来说,这种影响乃至更强。

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

散光患者发现,黑底白字比白底黑字更难阅览。这在必定程度上与光线有关:在亮堂的显现器下,虹膜闭合得更紧,削减了「变形」镜片的影响;在黑色的布景下,虹膜会翻开以接纳更多的光线,而透镜的变形会使眼睛发生更含糊的焦点。

在 Superhuman,咱们有必要特别注意光晕,由于运用程序的文本太多。咱们把白色的文字设置为 90% 的不透明度,这样漆黑的布景就会混在一同。这平衡了比照度和亮度,使运用程序很简略在各种光线条件下阅览。

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

首要,咱们下降亮度,使这些色彩不会抢邻近文本的视觉焦点。然后,添加饱和度,使他们依然坚持原有特征。

例如,假设直接运用淡色主题中的紫色,它与邻近文本比照显得太亮了。在实践的深色主题中,咱们加深了这种色彩,这样用户才能够专心于文本。

为漆黑的主题发明更深的色彩:坚持色彩,下降亮度,添加饱和度。

深色主题有许多优点,现在被等待广泛运用。

可是,想要规划好一款深色主题并非易事。简略地重复运用色彩和回转色彩会添加眼睛疲惫,使其在弱光下更难阅览,乃至或许打破视觉和信息层次。

咱们找到了一种体系的方法来规划可读性强、均衡、超卓的深色主题,只需遵从以下过程:

原文链接: 《How to design delightful dark themes》

欢迎重视译者的微信大众号:「海外规划参阅」

热门文章

随机推荐

推荐文章