/引言

前面 01 篇我们探讨了暗黑模式是什么和为什么，那“我们怎样设计暗黑模式”是接下来需要研究的问题。

从浅色模式过渡到暗黑模式，我们不能简单地理解为“在浅色模式的基础上，将浅色元素转变成深色元素”，这样会让我们陷入到仅仅从视觉角度进行设计的误区，用户体验设计要求我们始终围绕“用户”为中心，视觉设计仅仅只是用户体验的一部分。所以我们在设计之前，首先要抽离自己的惯性思维，从用户视角出发，用产品思维探讨：用户想要看到的界面和想要得到的结果应该是怎样的。

/“由理有剧”系列篇02：我们怎样设计暗黑模式

文章大纲

1、暗黑模式的设计原则；

2、暗黑模式的设计要点；

3、暗黑模式的设计实践

一、暗黑模式的设计原则

我们优先探讨暗黑模式的设计原则，就是为了在设计之前，首先建立对于暗黑模式设计的正确思维，确立我们设计的出发点及落脚点，也就是说设计的开始和设计的结束总是以我们所提出的设计原则为中心的。

1、保证操作上的熟悉性

“将浅色模式下形成的操作习惯延续到深色模式”，是我们应该遵循的第一个原则。这个原则要求我们无论产品的外观如何变化，都不应该影响用户的惯性操作动线，即使有更多的颜色模式，用户依然能够通过相同的操作并得到相应的预期结果，这也就是不破坏用户对产品已经形成的心理模型。

2、维持平台上的一致性

平台上的各个产品线，要保持属性上的一致性，颜色外观、模式切换也是品牌属性的一部分。所以，暗黑模式的设计工作不是仅仅针对于一个产品进行的，而是针对公司平台所有的产品。这就要求我们综合各个产品线的特点，通过不断试验总结出通用的元素变化规律，这里可以理解为元素颜色的适配性，目的就是维持产品的一致性。

3、清晰的信息层级

从浅色模式过渡到深色模式，用户在相同界面所关注的内容是一致的，这也就要求我们在设计暗黑模式的过程中，继续保持浅色模式上的信息层级特性。比如一个界面内主要的触发操作、关键的信息呈现等，都要始终保持最高的视觉层级，让用户可以在暗黑模式下，同样轻松地获取想要的信息、完成主要的操作。

4、无障碍操作

我们需要将“无障碍操作”这一设计原则分解为四个方面，一是视觉无障碍设计，针对弱视（ 视力障碍）的人群，在设计中应遵循WCAG（Web内容无障碍指南）；二是听觉无障碍设计，针对听不清/听不到到界面发出的声音的人群，在设计中确保界面上的所有空间在没有声音时，仍可正常使用；三是行动无障碍设计，针对不能操作鼠标、或键盘、或触屏的小部分人群，在设计中应给予辅助功能（如语音控制功能）帮助用户完成操作；四是认知无障碍设计，针对不能直接理解内容文本信息的人群，在设计中应配备辅助理解工具（如翻译、释义、链接等）帮助用户理解其含义，并保证信息的正确性。而在暗黑模式的设计中，我们要着重关注的则是第一条：视觉无障碍设计。

5、保持简单

简单交互一直是用户体验设计的核心，科尔伯恩在《简约至上》一书中完整阐释了简单交互的设计原理及方法，目的将简单这一抽象概念融入到产品设计中，让产品更易于被我们使用，甚至是没有经验的用户也可以通过简单的学习快速掌握产品的使用方法和诀窍。暗黑模式的设计应继续延续浅色模式下简单交互的原则，保持获取简单、操作简单、掌握简单。

二、暗黑模式的设计要点

上面的设计原则偏向‘交互’，这里讨论的设计要点则更偏向‘视觉’，从颜色对比、层级设置的问题出发，探讨我们在视觉方面怎样做好暗黑模式的呈现。

1、避免使用纯黑色

纯黑色在我们的认识里往往会定义其为百搭色，但将其放入我们的用户界面中则是一个极为尴尬的颜色，即使是在浅色模式的界面上，我们也很少看到、用到甚至设计使用纯黑色的元素，通常使用重灰色来代替纯黑色，这也许是一个设计的“潜规则”。

从上图我们可以感受到，纯白背景与纯黑文字组合的卡片看起来更“吃力”一些，究其原因便是巨大的颜色亮度落差令我们的眼睛接受到的光线亮度对比悬殊，造成视觉刺激，这个时候我们的眼睛需要一定的时间去适应这种亮度差，长时间观看眼睛会明显感受到疲劳。

反观暗黑模式下的颜色，如下图纯黑背景与纯白文字组合的卡片看起来同样吃力，与刚刚我们谈论到的浅色模式下所呈现的视觉感受殊途同归，结论不言而喻：我们在设计暗黑模式下的用户产品/界面时，应该避免使用纯黑色。

2、避免使用高纯色

在浅色模式下，纯度/饱和度较高的颜色往往会给我们激情、生动、活力的感受，我们不会觉得这些颜色纯度违和或刺眼，是因为它们与浅色背景的对比度，可以让我们的眼睛很好地适应并很快地接受。如果我们将这些颜色直接放入到暗黑模式中，结果会是怎样？

可以很明显地看出，个别颜色直接放到深色背景上，呈现出恍惚、震动的视觉感受，可读性差，这样的阅读场景会让我们的眼睛更易疲劳，直接影响到用户体验。这个时候我们就需要对颜色进行去饱和度处理，也就是降低纯度，使各个颜色更易被识别、阅读。

3、规范使用颜色对比

元素颜色与背景颜色的对比度，应该是我们在设计过程中始终要关注的问题，无论是文字、图标、图表甚至是图像，理论上都应该遵循“网页无障碍阅读指南（WCAG）”的标准进行设计，目的帮助我们周围的视力障碍、阅读困难的人群更好地使用产品，另一方面提升产品价值。

根据WCAG2.0 对比度的标准，界面元素和背景的对比度至少要满足 AA 级标准，即最低 4.5:1 的对比度；在iOS的规范中，建议对比度至少满足7:1；在谷歌的规范中，因为涉及到不同背景层级的概念，甚至要求主要文字和最深色背景的对比度达到15.8:1。

我们可以根据产品特性，建立属于自己团队的对比度规范标准，上图中的三个标准我们可以用来参考，但至少在我们的设计中，准备让用户看到且影响用户判断的元素，其与背景颜色的对比度不能低于4.5:1的AA级标准。

4、规范设置元素层级

界面内的各个元素是用户获取信息的途径，规范地设置界面内元素的层级，让它们呈现出不同的先后秩序，是我们提升产品体验的关键。从浅色模式过渡到暗黑模式，各个元素层级的设置应保持一致，而在暗黑模式下需要一套全新的设计理论方法。

1）组件

界面内的组件我们可以理解为区块、卡片，Material Design 中对于界面内的组件层级建议在覆盖层设置不同的透明度，通过其与背景色不同的明度对比，产生视觉上的海拔差（高度差），这样用户就可以清晰地分辨出哪一块的内容离自己更近，同样我们借助这种方式呈现界面，让用户第一时间看到他们想要看到的东西。

Material Design 给出的组件设置分为10个层级，这些表面覆盖值旨在最大程度地提高可读性，同时确保彼此之间可以分辨出不同的海拔高度。而我们在设计中可以借鉴这其中的原理，最高透明度不超过16%，过高则会影响组件内的信息呈现；在实际应用中我们用不到这么多层级，我们可以选择明度差跨度较大（间隔选择）的覆盖值来应用到设计中，如下图。

在浅色模式中，我们为了突出组件与背景的区别，往往使用增加阴影的方式来表现更高的海拔，而过渡到暗黑模式中，Material Design 给出的部分设计案例中也采用了这种添加阴影的方式。但作者并不建议这么做，原因有二，一是从产品角度出发，界面从浅色模式过渡到深色模式，组件自身颜色和所处的背景颜色发生巨大反差，阴影颜色势必随之改变，需要设计师重新设计出一套适用于各个组件的阴影色值，开发团队也需要随之逐个更新，这样则会给整个项目带来开发压力、增加项目成本、降低了上线效率，即使上线也会拖慢模式切换的渲染时间，降低用户体验；二是从设计角度出发，足够深的灰色背景上，如果给组件增加黑色阴影，仅仅微弱地提升了组件边缘的清晰度，实际产生的效益并无提升组件本身的明度来得直接。

2）文本

文本信息在界面设计中处于重中之重的位置，一个界面文本的设计呈现，很大程度影响着用户的阅读感官体验，这也就直接影响着该界面的用户留存率。Material Design 建议不同优先级的文字，设置不同的透明度，这样能有效保证阅读效率的同时，还能更好地区分清楚逻辑关系。

从上图可以看出，Material Design 的设计理论中不仅要保证了文字的识别性、可读性，而且明确地区分开了三种文字信息在视觉上的层级，当然颜色上的对比度只是一方面，另一方面我要对次要的信息进行缩放，如字体大小，减小其占据的视觉面积，对信息层级复杂的界面起到了视觉降噪的作用，由此用户能够更加清晰、轻松地获取主要信息，借鉴这种方式，在注意对比度的前提下，设置出属于自己的文本色方案。

5、自由切换

我们在启动暗黑模式的项目之初，会提出一个问题：“系统是否支持根据当前的时间自动切换两种模式？”这个问题似乎听起来合情合理，像我们的手机到了夜晚会自动切换到护眼模式，前提是你设置好了切换时间。然而，护眼模式不会将手机界面进行翻天覆地的改变，只是适当地增加了屏幕色温、降低了颜色对比度、延缓了眼睛疲劳。如果将暗黑模式按照这种方式自动切换，这样会很明显地改变我们对界面的视觉感受，而且“深色模式”不能够传达出和“浅色模式”相同的情感诉求，这可能不会得到好评，反而体验会更差。

自动切换不等同于自由切换，作者更建议将选择权交给用户，在应用的显眼位置或设置界面提供选项，让用户根据自己的喜好自由地、主动地完成模式切换。

6、场景测试

有时候我们在使用一些应用的暗黑模式时，并不是处在夜间或弱光环境中使用，有时候是在日间白天、灯光环境下，浅色模式本身白底黑字的特性，让其能够很好地适应日间光照环境，反而暗黑模式处于劣势，这个时候对于暗黑模式的考验极为特殊苛刻。

这个时候就需要我们根据不同的使用环境、场景的特性，针对暗黑模式中的元素进行反复测试调整，既能在夜间舒适地使用应用，又能在日间清晰地读取信息，达到最终的理想效果。

三、暗黑模式的设计实践

结合上面所提到的原则与要点，我们需要将这些理论融入暗黑模式实际的设计工作中，来验证这些理论是否符合公司的项目产品、用户的使用场景。由于作者的工作涉及金融资管类B端产品的界面设计，服务对象、服务目标更加明确，面对的用户基本都是坐在固定工位、固定设备前的运维人员，所以这里我将以Web端产品作为主要的实践模型，将我们在设计工作中的一些问题、经验和心得总结在这里，供大家参考。

1、产品框架

首先，在浅色模式下，对于产品框架层级的定义遵循行业通用规则。

第一层级：顶部导航

第二层级：左侧导航

第三层级：区块卡片

第四层级：界面容器

四个层级在颜色的设定上，通过对比的方式区分（结合下图）。

1）顶部导航：作为最高层级，使用一个深重的颜色作为底色，目的与浅色的背景及其他组件产生强烈的对比，这样产生的视觉优先级最高；

2）左侧导航：作为次要层级的导航，使用白色的底色，同卡片底色保持一致，但使用更重的投影与卡片拉开层级上的对比，目的表现出左侧导航与卡片都是用户获取信息的区域，但左侧导航的视觉优先级更高；

3）区块卡片：如上面对左侧导航的叙述，使用比左侧导航更轻的投影拉开层级对比，视觉优先级次之，纯白的底色能够更好地呈现出各种样式的信息内容；

4）界面容器：作为最低层级，使用一个较白色深一些的颜色，目的与纯白的侧导航、卡片产生颜色上的空间对比，使整个用户界面呈现出明确的层级关系。

在遵循浅色模式框架底色定义的前提下，我们需要讨论的是暗黑模式的框架怎样很好地继承这种层级设定。

层级设定最后都要落实到颜色的视觉对比上，所以我们就要运用到前面所提出的设计原则及要点方法。

1）保证操作的熟悉性、清晰的信息层级：暗黑模式的框架结构不改变，依然保持四个层级的设定；

2）规范地使用颜色对比、设置元素层级：在不使用纯黑色的情况下，就需要在纯黑背景上调整纯白色覆盖层的透明度来设定各个层级的颜色，这个时候我们就不需要使用阴影了，所以去掉框架内的所有阴影。

拿出前面参考Material Design创建的颜色表（上图），尝试着选取四个不同透明度的颜色带入到我们的框架中，经过反复实践，与各个产品、开发同事的讨论，下图中所选用的颜色基本符合了我们对界面框架的视觉需求，既保证了框架的优先级区别，又不会让层级之间产生过大的差距。

但这几个颜色并不一定是我们最终的方案，探索的过程任重道远，是否符合各个产品项目的通用场景和特殊场景，应该是我们之后时刻要关注的问题，不过目前我们先暂定这四个层级的色值。

2、文本内容

对于B端方向的应用产品来说，文本占据着主导地位，而文本在界面表现中多以表格、列表的方式呈现，这类产品更加倾向于文本信息的准确、精简、整齐，表格的形式再好不过了。作者的团队在日常的工作过程中多半都是和表格打交道，所以这里也以表格的暗黑模式设计为主要的阐述角度。

首先列举目前上线产品中在浅色模式下较为典型的表格形式，其中含有标题列和表格两个部分，我们在针对这个表格形式向暗黑模式设计的过程中，涉及到的文本类型包括主要文字、次要文字、失效文字、水印文字、可点击的文字按钮等，而文字之外的我们还需要考虑到标题底色、列表分割线、文本框边线、图标填充色。

1）首先，将前面调配的框架底色填充到表格上，包括界面容器底色和区块卡片底色。

2）其次，将前面我们所讲到的文字调色方式运用到表格上，调配过程，我们要对主要文字、次要文字、图标填充这三种类型文本的对比度着重关注，这些关键信息需要遵循前面我们所提到的原则：“在我们的设计中，准备让用户看到且影响用户判断的元素，其与背景颜色的对比度不能低于4.5:1的AA级标准。”

文字颜色的调配规律保持尽量简单，依次分别为85%-70%-55%-40%，中间相隔15个百分比，唯一调整的就是失效文字，将本来的25%提升到30%，失效文字本身不会影响对关键信息的读取，但我们也不能将其与背景色的对比降低到“不可见”的程度，经过反复试验，30%的透明度设置基本适应了所有场景的应用。浅色模式下的亮蓝色是我们产品上通用的主意色/品牌色，这个颜色直接放入到暗黑模式中导致其对比度不足，影响了文字的识别性，所以在原本#5477FF色值的基础之上，适当降低饱和度值，从而提升与背景的对比，得到新色值#6E8BFF。

3）最后，我们要为表格添加标题底色、分割线、组件边框线等，这也是较为关键的一步，我们要明确一个原则，无论是在浅色模式中还是暗黑模式中，分割线、边框线等一些辅助元素的应用，既要起到分割画面的作用，又不能与主要信息抢镜，也就是不能‘喧宾夺主’。

分割线使用了#FFFFFF20%的透明度，色值为#333333；

标题底色使用了#FFFFFF15%的透明度，色值为#262626；

搜索框的边框颜色使用了#FFFFFF40%的透明度，色值为#666666。

这些颜色的选取满足了分割画面但不影响信息获取的作用。

3、映射色彩

映射色彩的意义为颜色代表语言，遵循“红灯停、绿灯行、黄灯等一等”这样约定俗成的准则，在产品应用中的表现如红色表示警告、失败，黄色表示提醒、等待，绿色表示正常、成功等，在作者所从事的金融行业中，“红涨绿跌”代表着股市的走势。而在浅色模式下的这些映射色彩，能否直接应用于我们的暗黑模式中？

首先将我们在项目系统中常规使用到的功能色列举出来，并带入到暗黑模式的环境下进行试验。

上图中可以简单的看出，在浅色模式下所用到的功能色，在纯白色的背景上并无违和感，当带入到深色背景上，绿色还能够保持比较不错的识别性，但红色稍表现出刺激、犀利，橘黄色稍表现出暗淡、无力，短时间阅读并无大碍，一旦用户投入工作并长时间关注这两个颜色的时候，眼睛会明显感到疲劳，阅读体验降低。这就要遵循我们前面所提到的设计要点-避免使用高纯色的内容，要求我们对纯度过高的颜色进行去和饱和度操作。

我们根据Material Design建议的方式，通过采用浅色模式的功能色同样采用百分比透明度的白色覆盖使其变亮，以提高与背景色的对比度。Material Design推荐使用40%白色覆盖层来取色，这里我们为了延续在浅色模式中功能色高亮的特点，不过分地降低其纯度，所以分别采用20%和15%的白色覆盖层来取色。从图中可看出，红色及橘黄色明显降低了纯度，与背景的对比度（色块左下角的数值）也较调整前提升了接近1.00，也同时满足了文本AA级标准，我们可以代入到表格中查看论证一下颜色的适应性。

颜色调整前，红色给我们最大的感受是会产生一定的视觉震动，影响阅读体验和信息获取；

调整后的颜色，相较调整前看起来更加清晰且透气，长时间阅读也无较大压力，更好地满足了阅读需求。

而在金融行业中，用户每日要面对的不仅仅是一张张报表，还有大量的由表格转化的可视化图表，可视化图表对于色彩映射的要求同样严格，而我们对于数据映射色彩的设计又该使用怎样的方法呢？

有兴趣的小伙伴，可进入作者主页查看03篇：《暗黑模式可视化配色分析及研究》