2019.06

未来产品的主流将是「深色模式」

在苹果发布的 iOS 13 新系统中,苹果推出了全新的深色模式功能。新的深色模式选项为 iOS 系统和各种应用带来了精美的深色配色方案,用户也可以手动或定时自动开启该模式,从而让用户在相对环境下更友好地使用苹果设备。这篇文章原标题是 The future is dark,作者 Ilke Verrelst 在文中强调了一个观点,即深色模式已经变成如今产品设计的发展趋势。此外,ilke 还在文中介绍了深色模式及有关设计的注意事项,希望对你有用。

什么是深色模式?

首先,“深色” 不等同于 “黑色”。不能单纯地把白色背景改为黑色背景,否则界面上的元素无法通过阴影呈现出来。不过值得注意的是,一定要在设计上采用基本的遮光设计原则。

对于相对突出的界面元素,应模仿现实生活中的有关光线和阴影,所以阴影不能太重。按照这种方式的设计,可以更好地区分界面不同元素以及其层次关系。

▲ 两个相同大小的灰色阴影方框对比图。其中,左边是 100% 黑色背景,右边背景则采用的是 #121212 色号。当凸显方框元素时,该元素的灰色阴影颜色明显变浅。

在谷歌的材料设计(Material Design)指南中,谷歌介绍了其在设计深色模式的默认错误提示界面上,通过在原色调的基础上新增了一层 40% 透明的白色图层,从而改变了界面的错误提示主色调。

这种设计方法就非常值得学习,它可以瞬间提升界面的对比效果。当然,在你的设计过程中,也可以根据实际情况采用不同的色调,但前提是要保证对比效果。

你也可以借助 Sketch 的 Stark 插件,来了解两种不同颜色的图层的对比显示效果。

文字方面的设计又该怎么处理?

其实,就文字方面的设计规则而言,你只需要关注的是,不要在纯白背景上显示纯黑文字,当然反之亦然。

白色会凸显光线的波长,而黑色则会吸收光线的波长。如果在纯黑背景上采用纯白文字,文字将反射光线,让人更难辨别具体文字内容,从而影响界面文字的可读性。

同理,如果纯白背景上采用纯黑文字,同样也会因为文字光线太强,而影响文字的可读性。

你可以尝试将界面的白色部分柔和处理,比如白色背景换成浅灰色背景,或者白色文字换成浅灰色文字。这样在阅读过程中,眼睛不会太吃力,从而也可以防止或缓解眼疲劳。

所以,无论是在说明数字设备上,无论是什么软件或应用,深色模式必然是设计的发展趋势。我们唯一能做的,就是做好准备,让一切都变成深色吧。

1