暗黑模式(Dark Mode)知多少

暗黑模式（Dark Mode）相信大家一点都不陌生，从19年开始，安卓系统和 iOS 系统纷纷推出了暗黑模式，我们常用的微信、QQ和淘宝等应用，包括 iOS、macOS、Win10等系统都已支持暗黑模式。

今年年初开始，我使用的70%软件和手机应用都开启了暗黑模式，恨不得都应用暗黑模式。但经过一年的使用，逐渐感觉眼睛散光更加严重。所以重新翻查了一下资料，分享如下。

什么是暗黑模式？

暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。

暗黑模式的主要优势是在于弱光环境下具有更高的可读性。暗黑模式降低了设备屏幕的亮度。它改善了视觉工程学，并能在特定的光照条件下得到更好的调节。正因如此，在夜晚及深夜使用数码设备会更加舒适。

其优缺点可以概括如下：

优点：

• 减轻眼睛疲劳
• 构造视觉层次
• 使界面更神秘
• 营造高端感
• 提高在夜间提高可读性
• 确保夜晚使用环境
• 可节省使用OLED显示器设备的功率

缺点：

• 在户外白天使用
• 有很多文字可供阅读

暗黑模式和夜间模式有什么区别？

1、出发点和呈现效果不一样

从业务信息的传达效率考虑：暗黑模式是了突出内容，后置背景等辅助元素，将文本、按钮突出来，整体画面有可能对比度高、有可能对比度低，也就是说暗黑模式在暗淡环境中使用可能会存在晃眼的效果。

从用户使用舒适性考虑：夜间模式是为了护眼和增加整体页面的可阅读性，整体画面一定是对比度较低，对眼睛视觉刺激压力小。

2、使用场景不一样

暗黑模式使用环境可能是光线暗淡环境，也可能是明亮环境。

夜间模式使用环境就是在光线暗淡环境中。

3、页面通用的可能性

当页面的目的为了突出内容，又需要兼顾夜间阅读的舒适性，设计和开发是需要定义两套页面，至少夜间模式的对比度需要降低。

当页面的目的为了突出内容，暗淡环境不太需要考虑，设计和开发是定义一套暗黑模式页面即可。

什么情景下适合开启暗黑模式？

当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。

当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。

如同在电影院看电影时要全场关灯，是一样的原理。

暗黑模式设计需要注意什么？

1、设计原则

内容的舒适性

暗黑模式下避免使用对比很强的色彩或内容，长时间使用会带来疲劳感。

信息的一致性

暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。

2、设计提示

• 专注于内容
• 尽量不要用100%的纯黑色
• 考虑把颜色饱和度降低
• 做两个调色板–用于暗黑模式和明亮模式
• 避免使用阴影
• 必要时设计单独的标志符号，以实现浅色和深色外观
• 增强可访问性

暗黑模式到底可以节省多少电量呢？

在**OLED**屏幕上使用官方应用，一个开启暗黑模式，一个没有开启暗黑模式，结果显示暗黑模式有显著的节能效果。在50%的亮度下，暗黑模式与正常模式相比，可以节省大约14%的电量；当屏幕亮度为100%时，暗黑模式与正常模式相比，可以节省差不多60%的屏幕所消耗的电量。这和LED显示屏不一样，LED显示屏不管显示黑色还是亮色，其耗电程度都是一样的。

来源：2018年安卓开发者大会

暗黑模式护眼吗？

相比于“浅色模式”，“深色模式”的屏幕亮度更低，可以让用户在暗黑的环境下更友好地体验产品，同时，也可以最大程度地减缓眼睛疲劳。但其护眼效果跟“心理安慰剂”差不多。

为什么说暗黑模式不能护眼？首先在苹果和谷歌都没有说明新系统中的“暗黑模式”能够护眼。他们对于暗黑模式的描述中仅仅是注明“改善电池寿命，改善视力不佳和强光的人的可视性，以及在弱光环境中更好地使用设备”。所以说“暗黑模式”护眼仅仅是一些人士主观臆断而已。事实上，在面对暗黑模式的屏幕时，我们的瞳孔会不自觉放大；同理，在亮色模式下，我们的瞳孔会缩小。瞳孔的缩放是为了适应我们眼睛对色彩的吸收。对近视或者散光的人群来说，暗黑模式完全是一种累赘。

“暗黑模式”仅仅是关闭了背景亮度，同时调整了可视内容的颜色，比如暗黑模式下文字以白色为主等等。它实际上并没有改变屏幕的“频闪”问题，所以说你看屏幕的时候依旧会有视觉疲劳的症状。

唯一有用的是夜览模式，开启后会页面变黄，一定程度上会减少蓝光的摄入。

想通过电子设备的手段保护眼睛是不够的，只有正确认识眼睛的使用和休息方式，才能从根本上保护我们的视力。

不知道你现在用的是正常模式还是暗黑模式？

参考资料

• https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/
• https://material.io/design/color/dark-theme.html
• https://www.ibm.com/design/language/color/
• https://ant.design/docs/spec/dark-cn
• https://www.zhihu.com/question/42023866
• http://www.360doc.com/content/21/0207/12/20854507_961134595.shtml

本文图片来源于苹果开发者官网