暗黑模式界面的设计技巧

  • A+
所属分类:经验思维

本文来源: 暖风(公众号:UX小学), 共 1417 字

暗黑模式近几年越来越火,所有支持深色模式的APP,都获得了大量的用户好评。包括iOSAndroid,也都将其融入到了系统设计部分并作为重点功能宣传。这主要还是因为在暗黑模式下,屏幕大面积的亮色会降低,在夜晚时间段,能更好地缓解视觉疲劳,给用户能带来更为舒适的体验。其次在使用OLED屏的手机中,使用暗黑模式能极大延长手机续航时间,亲测效果也非常好。恰好前段时间有粉丝在问,那么今天就给大家带来几个关于暗黑模式的设计技巧

1、避免使用纯黑色作为背景

首先,暗黑设计中,千万记得不要使用纯黑背景#000000搭配使用纯白文本#ffffff,因为这样的高对比度,视觉上看起来其实更为难受。推荐深灰色做为层叠的组件基本颜色,这样搭配的一些浅色文字,更能减轻视觉疲劳。而且使用深灰色后,能更好的保留到一些类似阴影的细节。所以对于颜色域的广度延伸,也是更有帮助的。目前 Material Design中的Dark Model,对背景色给的色值为#121212,用深灰色和浅灰色做过渡,所以大家可以尝试使用这个作为参考。

暗黑模式界面的设计技巧

2、避免在深色背景上使用高饱和色

在白色背景上很好看的饱和色,在黑色上其实看起来会很难受,产生眩光效果,较为刺眼睛。因此对于暗黑模式下中的彩色,使用饱和度较低一点的颜色,往往看起来能够更为高级,而且更利于阅读。

暗黑模式界面的设计技巧 暗黑模式界面的设计技巧

3、使用更为规范的颜色对比标准

为了在暗黑模式下,让文字更清晰利于阅读,所以深色背景必须要足够暗,才能识别清楚文字,不能过于浅灰色。谷歌的 Material Design中,给出了一个较为专业的色值,文字与背景之间的对比度,至少需要15.8:1。比率中两个数字间的差异越大,色彩亮度差异也会更大。这里给大家提供一个可进行对比度测试的网站 https: //hexnaw.com/.com/大家可以把相关色值输入进这个网站里做衡量,保持颜色比例大于15.8。

暗黑模式界面的设计技巧

4、文字颜色用透明度定层级

刚刚有说到深色背景下,使用纯白颜色文字会较为刺眼。所以给浅灰一点的文字会更高。这里建议不同优先级的文字,给不同的透明度,这样能有效保证阅读效率的同时,还能更好的区分清楚逻辑关系。谷歌的 Material Design中,同样给了大家几个参考的色值:

高强调文字的不透明度应为87%。

中度强调文字的使用率为60%。

禁用的文本使用38%的不透明度。

另外深色背景下,普通的正常体都会看起来比较粗,所以像正文中,用更细的字体阅读效果会更好。

暗黑模式界面的设计技巧

5、层级关系用颜色明度来拉开差异

深色模式中,可以不需要给卡片增加一些投影来拉开层级关系,主要加了投影,颜色很黑也不一定能看清楚。所以更建议大家,用颜色来拉开不同层级的逻辑关系。给层级更高的模块,提供更亮的颜色即可,层级低的颜色给更暗。因为在黑色模式下,亮颜色往往代表信息层级更高,暗颜色往往代表的层级更低。

暗黑模式界面的设计技巧

Ps:其实 Android跟iOS中的设计规范中,对于暗黑模式的解读已经讲的很清楚很明白了,包括颜色、字体、图标以及一些事项都很详细。所以只要按照原生系统规范来,设计出来的稿子基本能够很舒适。除了规范,官方还提供了较为系统的暗黑模式设计组件库,如果感兴趣,这里大家也是可以去自行下载研究的。

暗黑模式界面的设计技巧

可能有很多同学找不到设计手册的地址,找到了后可能也因为外网限制的原因也没法访问,所以小编帮大家把资料都下载下来了,链接: https://pan.baidu.com/s/10n03aqjQh_ydMFpsemG_CA (提取码: rpi2)



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: