谈谈深色模式(Dark Mode) 中的对比度设计

在深色模式的设计中,对比度是十分重要的,合适的对比度可以保证产品具备可用性和易用性。深色模式需要兼顾光线强弱两种条件下用户对于内容仍然能够充分进行识别,还要避免在弱光线环境中受到眩光的影响。可以说,对比度控制的好不好,影响着用户的使用体验。


01

从平台指南了解对比度设计


iOS

在iOS人机界面色彩准则中,给出了深色灰阶。

由图中可以看出,iOS的规范指南将最大对比度拉到了出人意料的最大值,直接在纯黑色背景层上使用了纯白文字!这似乎和我们之前的常规认识有点不同:就像我们在设计浅色模式时,在白色背景下不会使用纯黑文字;在黑色背景下也不会使用纯白色字体。

这或许是因为苹果在推出深色模式之初,所希望打造的就是一个不论在白天和夜晚都可以使用的色彩模式,而不是仅为弱光环境打造的“夜间模式”。它需要同时兼容不同光线情况下人眼对于光线的捕捉,从这一点上来讲,深色模式的设计会比夜间模式更难,不是单纯的降低对比度就是对的。

同时Apple提供了9种预定义的系统颜色,这些颜色是经过精心选择以保证在不同模式之间能保持一致的感觉。

而对于除系统颜色以外的自定义颜色,官方给出的对比度建议是7:1。



Material Design System

Google在色彩对比度上的设计比Apple保守一点,在背景色的选择上更偏爱深灰色。

在深灰色背景上使用浅色字体的对比度会比在黑色背景上低,更有助于减少用眼疲劳。在设计上, 谷歌常用阴影来表现层级关系,在更换为深色模式时,系统会保留默认的阴影,使用深灰色背景也更容易看到这些灰色阴影。

官方定义对于深色表面和白色文本的对比度至少为15.8:1。



WCAG

WCAG全称为Web内容无障碍指南,其中包含分为可感知性、可操作性、可理解性、可兼容性和一致性五大类的相关建议,这些建议可使网站内容更容易访问。iOS人机界面准则以及Material Design System都是基于WCGA之上。其中关于色彩对比度的部分,分别是条例1.4.3、1.4.6、1.4.11。这边仅简述,有兴趣的可以自行搜索一下全文。

对于最小对比度(AA级):文本及文本图像至少需要4.5:1的对比度;大号文本及大号文本图像则至少要3:1的对比度。

加强对比度(AAA级):文本及文本图像至少需要7:1的对比度;大号文本及大号文本图像则至少要4.5:1的对比度。

非文本对比度(AA级):用户界面组件及图形图像等在视觉呈现时,与相邻颜色的对比度至少为3:1。



02

根据产品差异选择合适的对比度

以上平台设计指南给出的终究只是一个建议参考,在深色模式的设计中,除了要考虑适配平台规则之外,更应该思考的是适用于产品的定位和使用场景。   

钉钉

钉钉的整体深色模式设计很明显更偏向于适配iOS设计。

从上图可知,在主要文字信息的对比度上已经大于了15.8:1,其他颜色的对比度也大于4.5:1。其中整个页面的最大对比度达到了满值。

钉钉从产品上说属于工具型的产品,使用场景更多是在企业办公,为了让信息内容突出,加大对比度的刺激可以保证用户在使用时更为清晰,更为高效。



微信

微信在深色模式设计中并未使用iOS官方模式。而是降低了整个页面的对比度,整体以较为灰暗的样式呈现。

可以看到文字信息的对比度仅大于7:1。更多的是考虑微信的聊天场景中,用户可能长时间沉浸式使用。这里微信将深色模式与夜间模式进行了兼容,避免大的对比造成强烈的视觉刺激,可以在深夜环境下获得更好的感知度。

以上两者在深色模式的设计上差异虽然较大,但其宗旨都在于为用户服务,都是在充分考虑使用场景及定位之后,希望提供更为良好的用户体验。所以深色模式中的对比度设计不应该死搬硬套平台规范指南,更多的还需要分析自身产品的特性,适合的才是最好的。



03

对比度的计算

在对对比度设计有了一定了解之后,怎么才能知道自己选择的颜色对比度是多少呢?其实对比度是通过色彩的相对亮度来计算的。在WCAG中已经告诉了我们相对亮度的计算公式。

For the sRGB colorspace, the relative luminance of a color is defined as

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

where R, G and B are defined as:

* if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

* if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

* if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

* RsRGB = R8bit/255

* GsRGB = G8bit/255

* BsRGB = B8bit/255

上面的R8bit、G8bit、B8bit其实就是我们色彩面板中显示的通道数值。这里要注意,这里使用的色彩文件需要是sRGB色彩。

有了相对亮度,就可以计算对比度了:

(L1+0.05)/(L2+0.05)

其中L1为浅色的相对亮度,L2为深色的相对亮度。


如果没看懂公式也没关系,这里推荐一个网站,直接输入两个色的色值,就能直接计算出对比度。 

对比度查询工具:

https://contrast-ratio.com/?ref=uxprocc#

可以使用多种色彩值表达方式,可以直接输入常规色的英文,也可以使用#333333,或者hsla(200,0%,0%,.7)都可以。这样就很方便的可以查询自己的配色是否符合最小对比度了。

以上希望能对于设计深色模式有所帮助!



*参考:

Material Design Dark theme:

https://material.io/design/color/dark-theme.html#usage

iOS Human Interface Guidelines:

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

Web内容无障碍指南(WCAG)2.1 中文版:

https://www.w3.org/Translations/WCAG21-zh/


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249