夜间模式 注意这16个小细节，轻松做好夜间模式与深色设计

一、夜间模式&深色设计的区别

夜间模式保证了黑暗环境下界面信息的可读性，避免了屏幕光线的刺激，使用户更加关注自己的操作任务，节约了能源。

由于深色容易营造出高端、神秘、奇妙等特点，所以深色设计常用于高端品牌、纯艺术展、娱乐潮流风格插画海报等视觉设计中。

虽然两者乍一看都是黑色的，但设计目的并不一致。黑暗设计更注重视觉表达，而夜间模式更注重黑暗环境下信息的可读性。

二、视觉理论和设计方法

2.1根据感光度选择颜色

人眼有锥形细胞和棒状细胞。锥形细胞用于区分颜色，而杆状细胞对弱光敏感。在明亮的地方，中央凹陷处只有锥形细胞，具有最高的视敏度和色觉功能，在黑暗中，人眼的锥形细胞不工作，此时只有杆状感光细胞活跃。视网膜周边部分灵敏度最高，能感受到弱光刺激，但分辨率低，没有色彩感。

2.1.1颜色的数量、饱和度和亮度

在黑暗的环境中，即使使用多种颜色进行视觉表达，人眼也不能像白天那样识别出那么多。为了提高夜间模式的舒适度，需要使用饱和度较低的颜色，尽量减少颜色的种类。

如果是深色设计，就要用比白色背景更亮更饱和的颜色来增加颜色识别度。

2.1.2颜色的色调和色温

色温会影响视觉体验。很多手机的夜间模式和护眼模式打开后，界面会变成暖黄色，让人感觉很舒服。

在夜间模式的设计中，经常选择暖色，减少冷色的使用。

2.1.3颜色对比

为了在夜间模式下获得更舒适的阅读体验，在保证文本可读性的前提下，需要采用较弱的对比度，减少对眼睛的刺激。

就像白色背景不能用纯黑#000000一样，黑色背景也不能用纯白#FFFFFF。纯白的文字在黑色背景下会带来强烈的刺激，容易产生视觉疲劳，不利于文字识别。

2.2合理布局，避免辐射现象

有一种由辐射现象引起的视错觉:

同样大小的直线在黑白背景色中会在视觉上表现出不同的大小:黑色背景中的白线会有放射状扩展的视觉感觉，显得更粗；白色背景上的黑线会有聚拢收缩的视觉感觉，显得更细。

2.2.1单词

所以在暗装设计中，需要细化白字或者增加行距来提高阅读体验。

2.2.2图标

同理，白色图标在黑色背景上会显得更“胖”，超大图标图形高亮时需要细化调整。

2.2.3排版

在空之间的布局中，由于辐射现象的放大效应，使得空之间的布局更加拥挤，需要更多的空白空间来平衡视觉布局。

三、夜间模式适应方法和黑暗设计手法

大多数夜间模式是从“白天模式”改编而来的；深色设计直接从零开始制作。

3.1颜色的处理

3.1.1无色系统的适应

夜间模式:

根据色温理论，应该选择#000000到黄色附近的颜色，比如#1F1C19。

对于文字颜色的选择，由于夜间模式不需要很强的对比度，所以可以用一种代替“白天模式”中几种级别相近的白色，即减少文字颜色级别的区分。

深色设计:

黑色背景不需要暖色，可以试试冷黑，只要不是纯黑；白文的层次可以少，但要强调层次关系。

3.1.2其他颜色-按钮、装饰元素和暗示元素

在适应夜间模式时，为了保证视觉上的统一，需要在白色背景的基础上降低颜色的亮度和饱和度，保持色相不变，通过贴图建立夜间和黑暗模式下的颜色库。

暗设计需要保证信息层次的对比，让用户明确设计主题。因此，需要选择高度饱和的装饰色彩元素来区分信息层次，增强设计感。

3.1.3对比试验

为了保证可读性，需要使用对比度测试工具对色彩调整后的对比度进行测试，以确保符合WCAG标准。

3.1.4输出

可读性测试结束后，将夜模式颜色库和白模式颜色库整理成表格，交给开发学生进行代码替换。

3.2图片处理

使用夜间模式时，画面的亮度会降低，所以用黑色透明遮罩覆盖画面是一种快速方便的方法。

3.3图标的处理

3 . 3 . 1 SVG格式的图标

Svg图标维护非常方便，只需定义颜色值，交给开发实现即可。

3.3.2非svg格式的图标

对于单色图标，可以调整不透明度，或者定义颜色值后，请开发学生配合代码实现；图标需要重绘为复杂的颜色。

3.4布局的处理

为了平衡辐射现象带来的放大效果，需要更多的空白空间来平衡视觉布局。

增加元素之间的距离，如文本行距。

四.摘要

夜间模式主要适用于阅读，夜间长时间使用是为了提高舒适度，而黑暗设计是一种视觉传达的设计手法，侧重点和设计方法不同。

文章由以下部分组成:

夜晚模式-腾讯动画TCD

夜模式设计探索——以阅读为例——阅读体验设计YUX

高级技能！谈谈LOGO设计中的视觉修正——译者:@doo-plus

黑暗界面下需要注意的细节——网易UEDC

“如果你想使用一个黑暗的UI，你必须明白这些注意事项”——米克罗斯·菲利普斯

网站资源:

WCAG标准测试:https://contrast-ratio.com/

材料设计黑暗主题:https://material.io/design/color/dark-theme.html

iOS暗模式:https://developer . apple . com/design/human-interface-guidelines/IOs/visual-design/Dark-mode/