什么是 深色模式（Black Mode） ？

苹果在2019年6月发布的iOS13中增加了“黑暗模式”，用户打开“黑暗模式”后，应用界面将会变为深色，随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统，不少APP纷纷推出了深色模式。

风格名称：

深色模式（Black Mode）

风格优点：

减少视疲劳、便于阅读

使用工具：

Figma，ProtoPie，Adobe，sketch

流行时间：

2019年6月—-至今

使用OLED屏幕的设备，在纯黑色下可以有效降低耗能，进一步延长续航时间。除此之外，深色模式还可以有效解决OLED屏烧屏、费眼的问题。
本人对几款常用APP的深色模式进行了体验，并为大家分享我的体验感受。从这些案例中，或许我们可以找到深色模式流行的原因。

应用实例

深色模式是一种可以降低视觉疲劳且有助于用户专注的全新外观。与传统夜间模式最大的区别是，深色模式不仅保证了弱光环境下的体验，在强光下仍具有可读性。

微 信
微信的深色模式中，使用了浅灰色作为字体颜色，既能保持清晰显示，又降低了对比度，减轻了用户的阅读负担。
Q Q
QQ在切换夜间模式时，则采用了一个平滑的渐变过渡，让用户可以快速适应场景切换。
豆 瓣
豆瓣的夜间模式和微信一样，同样保留了五颜六色的图标。同时，豆瓣在设计时始终保证内容有良好的对比度和清晰的视觉层级，保证了信息结构的准确传达。
知 乎
知乎的文本颜色选择了对比度更低的灰色，通过字重进行区分。虽然这样会让整体页面看起来比较和谐，但内容变得不够突出。
bilibili动画
在最近一次更新中，B站对深色模式进行了优化，适度提亮了视频封面和图标的亮度，将多彩型图标调整为了单线型图标，既统一了画面风格，又提升了界面阅读体验。
百度网盘
高饱和度的色彩会在深色背景上产生炫光的视觉效果，引发视觉疲劳。百度网盘的深色模式下，背景接近全黑，图标却没有太大的调整，给用户带来的阅读体验并不好。
摹 客
用户在进行设计时，深色界面不仅仅能降低眼睛疲劳度，还能突出你的设计内容，打造沉浸式的设计体验。
iOS 13
iOS 设计规范中对深色模式的解释是“people can choose to adopt a dark system-wide appearance called Dark Mode.”也就是全系统的深色外观模式叫做深色模式。

应用场景探索

在设计中应该注意：1.避免使用纯黑色；2.避免使用高饱和度的颜色；3.文本颜色选用高亮色，但不宜使用纯白；4.做好情感化设计；5.注意结构和层次感；6.允许用户自由切换深色模式和普通模式。

—— ——移动端探索

越来越多的产品都推出了深色模式,深色模式都已经成为其产品界面中不可缺少的一部分。

点击查看 →→
—— ——UI KIT探索

相比于浅色模式，深色模式的屏幕亮度低，可以让用户在暗黑的环境下更友好地体验产品。

点击查看 →→
—— ——客户端探索

相信2020年，深色模式设计也依旧会是个大趋势。

点击查看 →→
Black APP
2020年6月-2020年7月

Insurance made simple

深色主题有很多好处，现在被期待广泛应用。然而，想要设计好一款深色主题并非易事。简单地重复使用颜色和反转色调会增加眼睛疲劳，使其在弱光下更难阅读，甚至可能打破视觉和信息层次。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
Black APP ×

图片列表more
Black APP
2020年6月-2020年7月

Martina Wolna

大多数深色主题的 UI 设计都遵循这一原则：深层界面更暗，浅层界面略亮。这模拟了从上方投射光线的环境，带来熟悉且令人安心的物理效果。表层界面使用较浅的灰色；底层的界面使用较深的灰色。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
Black APP ×

图片列表more
Black APP
2020年6月-2020年7月

Dark and light

即使深色模式是现在的一个潮流趋势，但是你的设计也不要为了迎合潮流而进行不符合设计，对于用户界面来说哪个配色方案更好，是浅色还是深色，都是要根据实际情况来选择。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
Black APP ×

图片列表more
Black APP
2020年6月-2020年7月

Marvie IOS UI Kit

在进行界面设计的时候，尽量仔细测试每种色彩，而黑色的这种特性使得深色背景下的色彩搭配拥有更多的可能性。同样的，对比度也是确保可动性的辨识度和清晰的重要因素。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
Black APP ×

图片列表more
Black APP
2020年6月-2020年7月

Spooky Kennedy

为了避免眼睛疲劳和光晕，我们把文本的颜色调暗，所以彩色元素和按钮可能会显得太亮了。必须调整这些颜色，以更好地适应深色的主题。为黑暗的主题创造更深的颜色：保持色调，降低亮度，增加饱和度。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
Black APP ×

图片列表more
UI KIT
2020年6月-2020年7月

UI Kit dark light

一种系统的方式来设计可读性强、均衡、出色的深色主题，只需遵循以下步骤:深暗浅明、重新审视感知对比度、少用大面积亮色、避免纯黑或纯白、加深颜色。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
UI KIT ×

图片列表more
UI KIT
2020年6月-2020年7月

UI Kit dark

深色背景，如果没有合理规划细节的话，用户容易在布局间迷失。所以，一些问题是值得思考的：用户研究、竟品研究、用户测试、环境因素、内容量和内容属性。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
UI KIT ×

图片列表more
客户端
2020年6月-2020年7月

深色模式的客户端探索

深色，尤其是黑色比起其他的色彩来的更加深沉厚重，这也使得它更适宜于展示图片、数据、板块等内容。良好的布局和组织结构下，黑色能够显著的提升其他视觉元素的表现力，让内容更具有吸引力。

点击查看源文件
点击图片查看
(提示：figma服务器在国外，首次打开速度慢，请等完全加载完。)
客户端 ×

图片列表more

交互demo

深色模式逐渐成为APP设计的流行趋势。
无论深色或者浅色，都只是产品向用户呈现的一种界面状态，最终的目的是为了更良好的使用体验。