神译局是36氪旗下编译团队,重视科技、商业、职场、日子等范畴,要点介绍国外的新技术、新观念、新风向。
编者按:跟着九月份的挨近,苹果iOS 13正式版也行将推出,随之而来的还有我们期盼已久的“深色形式”。前几天,苹果推送了iOS 13的beta 5版别。其间,“深色形式”还参加了过渡动画,作用看起来愈加流通天然。本文经授权翻译,原标题是8 Tips for Dark Theme Design,作者是闻名软件工程师Nick Babich。在文章中,Nick跟我们共享了规划“深色形式”的8个小技巧,期望对你有用。

图片来历:MacRumors
近几年来,越来越多的产品都推出了“深色形式”。无论是苹果,仍是谷歌,“深色形式”都已经成为其产品界面中不行短少的一部分。
比较于“淡色形式”,“深色形式”的屏幕亮度更低,能够让用户在暗黑的环境下更友爱地体会产品,一起,也能够最大程度地减缓眼睛疲惫。
那么,“深色形式”究竟应该怎样规划才好呢?以下,我总结了8条产品规划主张,期望对你有所协助。
1. 避免全黑规划
“深色形式”并不必定要求布景全黑或许字体全白。实际上,这种高反差也会让人看起来很难过。
安全起见的话,主张在页面上首要选用深灰色,而不要选用全黑色(色号#000000)。
比较于全黑色,深灰色布景下的淡色文字反差感稍弱,能够缓解用户的眼睛疲惫。此外,由于在灰色布景下(而非全黑布景)更简单看见暗影,所以选用深灰色,还能够更好地表现更多色彩、暗影以及立体感等内容。
依据谷歌等资料规划(Material design)准则,页面“深色形式”的主色最好选用#121212深灰色号。

2. 避免在“深色形式”中选用过度饱满色彩
在淡色布景下,饱满色彩看起来会十分生动形象。但是,假如在“深色形式”下选用饱满色彩,则会让人难以辨认有关元素或内容。
因而,在“深色形式”中,主色彩必定不要选用饱满色彩。主张运用淡色彩(色彩操控在50至200规模内),然后让页面内容在“深色形式”下表现更佳的可读性。

淡色彩不只不会影响用户体会,它还会在不形成眼睛疲惫的前提下坚持恰当的反差。

避免在“深色形式”中选用饱满色彩,否则会下降用户的可读性(如左图);主张选用淡色彩,保证根本的可读性(如右图)。
3. 契合色彩比照规范
此外,还要保证在“深色形式”下,页面内容也要坚持舒适和清晰度。布景色彩必需要满足深,然后反衬出页面淡色文字。
依据谷歌的资料规划准则,主张文字和布景的比照份额至少坚持在15.8:1。
你也能够经过色彩比照东西来测验有关比照份额。
4. 文本用色必定要“亮”
所谓“亮”,便是说要让用户能当即辨认页面文本内容。通常状况下,页面文本也必需要选用“亮”色。
关于“深色形式”,一般选用的“亮”色是纯白色(色号#FFFFFF)。不过,纯白色会给人十分亮堂的感觉,在必定程度上与深色布景结合在一起,会给人一种晕厥的感觉。
所以,依据谷歌的资料规划准则,主张在页面文本选色方面选用略微深一点的白色 :
关于要点着重的文本,能够将透明度设置为87%。
而最不重要的文本则能够将透明度设置为38%。
一般重要的则能够将透明度设置为60%。
小提示:比较于淡色布景下的深色文本,深色布景下的淡色文本会显得愈加扎实。因而,你可能会喜爱在“深色形式”中选用相对较细的文字。

选用略微深一点的白色,能够避免文本和布景色彩之间的显着比照发生的晕厥感。
5. 不要疏忽考虑规划中的情感要素
当你计划在现有产品中新增“深色形式”时,你必定期望能经过这种形式传达出原有的产品情感,对吧?但我主张最好不要有这种主意。
至于这背面的原因,我以为在不同布景色彩布景下,色彩原本便是独立存在的,一起也代表着特别的含义。
这便是说,“深色形式”不应该传达出和“淡色形式”相同的情感诉求。它们应该引发用户不同的情感。
所以,与其去处理这个问题,倒无妨顺着这个现实,让自己的产品表现不同寻常的特性。

Shift的数据面板。图片来历:Sergey Zolotnikov
6. 表现层次
和“淡色形式”的规划相同,在规划“深色形式”的界面时,也必需要表现出层次感,一起杰出页面布局中的重要元素。
要表现界面的层次感,能够使用海拔高度(elevation)这个东西。
译者注:海拔高度是指相对深度或间隔,是两个外表在Z轴上的间隔。其丈量单位和X轴及Y轴相同,通常是与密度无关的像素(dp)。
在“淡色形式”下,一般会选用暗影(shadow)来表达层次。页面元素显得更高,其暗影规模就会更广。
但是,这种方法却不适用于“深色形式”。究竟,很难幻想在深色布景下参加暗影是什么作用。因而,最好就经过提高各层次的亮度来完成这个意图。

在选用资料规划的“深色形式”下,海拔提高的页面及元素的色彩都是经过叠加不同透明度的白色来表现的。页面的海拔越高,相应的内容或元素就会更亮(暗示挨近光源)。
海拔越高,页面越亮。

Music Player的界面。图片来历:Martin Mroč
7. 让用户自在切换不同布景形式
假如能够让体系主动切换“深色形式”和“淡色形式”,听起来这样的规划可能会觉得十分友爱。但是,这种规划却可能会导致意想不到的糟糕体会。
假如体系会主动切换不同布景形式,相当于让用户失去了“操控”,而被逼承受体系为其挑选的布景形式。
因而,最好不要主动敞开产品的“深色形式”。你能够经过界面功用设置,让用户自在地翻开或封闭这项功用。用户也能够依据其体会产品时的需求和主意,自主选用这项功用。

设置中的“深色形式”开关
8. 在“深色形式”和“淡色形式”下进行测验
在终究推出产品之前,必定要在两种不同形式下进行测验,检查各个界面的显现状况,在必要的状况下进行相应调整。
你能够考虑在晚上的时分进行测验,最好在白炽灯照射下测验。
译者:井岛俊一

