本文内容大纲
1.为什么要为应用设计DarkMode
2.如何选择合适的DarkMode设计思路
3.DarkMode的视觉设计需要注意什么
4.如何协同不同业务的设计师快速适配DarkMode
为什么要做DarkMode
DarkMode的开发和设计不是一个小工程,开始后可能会耗费团队内部比较大的资源,如何说服团队的决策者开发DarkMode,下面是一些比较客观的参考理由:
OLED的省电特性
随着OLED屏幕的逐渐普及,为使用OLED的设备开启DarkMode可以有效降低设备的功耗。因为在OLED屏幕下,黑色的区域是完全关闭了像素单元的使用。
引用:AnandTech和NotebookCheck的OLED分析显示了功耗如何取决于OLED屏幕的亮度水平。我们可以看到,当有一个全黑的屏幕时,OLED显示屏在任何亮度下的功耗都保持恒定,对于白色的屏幕,曲线会逐渐变陡。但是大约5%的白色屏幕和1%的明亮屏幕的曲线几乎相同,只是在较高的亮度范围内变化很小。
注意:在OLED下使用纯黑色背景会暴露的问题是,因为黑色是完全关闭像素,所以在纯黑色背景上展示内容,在滑动的时候因为开启关闭像素点的延迟会产生拖尾的模糊效果,部分应用的解决方案是不使用纯黑色的背景,使用深灰的背景色,我们设计的时候特意和Apple的人咨询过该问题,对方给的答复是:这个是他们已知的问题,后期应该会有相应技术上的优化。
专注
就像我们为什么在设置弹窗的时候都要用黑色的遮罩作为弹窗的背景,发布会都会用黑色的背景来突出演示的内容,黑色的背景能让用户更加专注于核心的内容。在办公场景下,专注是一件非常重要的事,提升用户对使用内容的专注度才能提升用户的工作效率。
你一眼就看见了幕布上的内容,和库克的肤色
美学选择
引用MacOSHIG里的一句话:
给予用户多一种美学的选择,给予用户使用界面的新鲜感和惊喜感,会增加用户使用应用的愉悦度和粘性。但是注意,DarkMode不是夜间模式,用户可以在任何时间任何环境下使用它。
选择合适的DarkMode设计思路
市面上有好多版本的DarkMode,有iOS和安卓系统的「可用性优先」设计,还有知乎等大部分阅读类软件为领头的「护眼式」设计,每个方法有各自的优势和缺点:
可以看到,在界面上,文字和背景对比在两种设计思路上的差异
钉钉作为一个有众多人使用的工具型应用,不需要用户过于沉浸式的阅读,所以即使在深色下,仍然要追求信息的高效传达,保障用户使用时信息的对比度和可读性。
DarkMode的视觉设计要点
在钉钉的DarkMode设计中,并不是在设计一个夜间使用的钉钉,用户有可能在白天,在户外阳光下使用DarkMode的钉钉,为了满足这些极端场景,界面的UI视觉需要注意以下几点:
1、足够的颜色对比:保障可用性
前面说到深色模式不是夜间模式,所以界面的元素一定要让用户能清晰的识别,阅读,使用。
根据WCAG2.0对比度的标准,界面元素和背景的对比度至少要满足AA级标准,即最低4.5:1的对比度。在iOS的规范中,建议对比度至少满足7:1;在谷歌的规范中,因为涉及到不同背景层级的概念,甚至要求主要文字和最深色背景的对比度达到15.8:1。钉钉在设计的时候,主要考虑优先适配iOS平台,所以整体的颜色设计对比上,对于主要的文字信息要求满足7:1的对比标准,而彩色信息至少满足4.5:1的对比度标准。
使用软件在设计时实时测试颜色的对比是否符合标准
关于如何测试该颜色是否符合该对比度标准,有很多在线网站或者工具都可以测试,我们使用了Contrast这款工具,可以在Macappstore付费下载。
2、避免大面积的鲜艳彩色使用:
在深色模式下突然出现的大面积鲜艳彩色因为会有较高的明度和饱和度,会和深色背景形成强烈的对比,从而让用户不适。所以在DarkMode的设计中,尽量避免出现大面积和鲜艳彩色和深色背景的界面。如果一定要出现,建议适当降低彩色的饱和度和明度尽可能减少对视觉的冲击。
3、适当调整某些彩色的展示效果
某些在白色背景下符合对比度标准的彩色,在深色背景下不一定符合对比度标准或者看着舒适,所以在深色背景下,要适当调整这些色彩的饱和度和明度。
为了适配深色模式,钉钉的彩色均做了不同程度的调整
4、弱化白色界面
如果应用中不可避免的要出现一些白色背景的界面,可以使用遮罩或者降低白色明度的方式来处理,避免在界面切换时对眼睛的刺激。
如何协同不同业务的设计师快速适配DarkMode
确定了视觉设计的方案之后,如何协同更多设计师快速适配,针对大的设计团队是很大的难题。钉钉早期还没遇到DarkMode的时候就有考虑过未来多主题设计的需求,并根据这样的需求思考了一套特殊的颜色管理方案,因为主题切换涉及到业务线内大量的设计师协同工作,对于一个几十个人的设计团队,如何让不同设计师更快的协同起来,降低设计师重复工作的成本,适配自己所在业务的界面,是工作中不得不思考的一个问题。钉钉这套颜色管理方案在DarkMode的设计,多业务协同中发挥了巨大的作用。
在钉钉早期的版本中,设计颜色库的管理十分换乱,命名也是没有任何含义的简单代码,当开发遇到没有颜色字典中没有的对应颜色或者是字典中已经有这个颜色但是开发找不到的时候,久而久之,颜色字典就会变成如下的局面:
描述:同样的颜色对应了多个无序的颜色代码,设计师和开发也不知道这个颜色用在了什么地方。
如果用这样的方案做多主题适配,每个设计师要熟知不通主题下的配色,十分复杂。
这就是我们这套颜色方案的核心思路:让每位设计师简单记住一套颜色,即可适配多套主题
下面带大家一步步开始了解钉钉如何建立全新的颜色库:
1、为颜色建立命名系统
为了解决上述问题,首先我们要赋予每个颜色特定的含义,也就是这个颜色在代码中对应的「代号」应该是能让后续使用的人知道这个颜色会被用在什么地方的。设计师使用这些颜色的时候,不应该是记忆16进制的代码,应该是记忆这个颜色的「代号」,也就是颜色的key。接下来我们以钉钉的新颜色库作为案例说明:
在这套颜色中,我们赋予每个颜色一个key来代表他们的名字,方便设计师更好的记忆颜色:
基础的UI颜色用「Common.使用场景.color」命名,比如背景色,我们命名为