近期微信的最新版本更新中，也升级了darkmode的模式，不由得觉得darkmode的趋势化越来越重要，所以自己去了解了一下关于darkmode的基本概念，以及在ui设计中如何应用。

Dark Mode 的优点

1. 夜间使用时不那么刺眼

Google 在去年提出了「Digital Wellbeing（数字健康）」的概念，注重在科技设备与使用者之间，找到一个健康的平衡点。顺着这种数字健康的概念，Dark Mode 自然也是不可缺少的一环，成为了今年两大移动端操作系统更新的亮点功能。

2. 让使用者沉浸于内容

黑色更有利于我们沉浸于内容本身，无论是生产内容还是消费内容。如果你细心观察，你会发现许多专业级的多媒体内容生产软件，一直以来都是黑色的界面。不管是 Adobe 系列的软件，还是苹果的 Final Cut Pro，或者是 Pixelmator、Affinity 系列软件，都是深色的主界面基调。同样的道理，你会发现许多视频网站或者影音播放工具，都是使用深色作为主基调。

3. OLED 屏幕节电

Dark Mode 之所以能达到省电的效果，是由于 LCD 和 OLED 屏幕的一个重要差异 —— 简单来说，LCD 屏幕分两层：像素层不发光，另外有背光面板照亮像素。而 OLED 屏幕只有一层，像素本身是自发光的。这样，在显示黑色时，OLED 的屏幕像素只需要关闭，就是纯正的黑色了。

在 macOS 的深色模式中，基底色并不是纯黑，而是带有一定灰度的黑色。而在 iOS 上，苹果设计 Dark Mode 的基底色就是纯黑，这样一方面来可以省电，另一方面也与「刘海」的衔接更加自然。

Dark Mode 的缺点

1.对视力正常用户的视力可能造成伤害

深色模式其实未必适合文字的阅读，以及即使开启了深色模式，在昏暗环境中使用电子设备对视力的伤害也不容小觑。虽然深色模式可能会为某些低视力（弱视，强光敏感以及白内障）用户带来一些优势，但研究证据指向了浅色模式对正常视力的用户更为妥善。换句话说，在视力正常的用户中，大多数情况下，浅色模式会带来更好的阅读性能。 在浅色模式下，整体光线更多，瞳孔收缩得更多，球面像差更少，景深更大，并且整体上更好地聚焦细节而又不累眼睛。

Dark Mode 的设计难点在哪？

1.Dark Mode 并不是简单的颜色反转

任意颜色可以由三原色组成，在电子设备上，一个色彩也可以表示成 RGB 值，即红绿蓝三种颜色的比例。每种颜色的取值范围是 0-255 之间，例如，白色可以表示为（255，255，255），黑色可以表示为（0，0，0）。那么，颜色反转实际上，是把一种颜色（R，G，B），自动变换到它的对立面，成为新的颜色（255-R，255-G，255-B），所以它并不是简单的颜色反转就可以搞定的。

2. 要重新考虑色彩对比度

内容与背景两者之间必须保持一定的对比度，才能使内容具有可读性。色彩对比率（Color Contrast Ratio），它能够提供两种颜色之间，相对亮度的一个衡量关系。色彩对比率的取值范围在 1:1 到 21:1 之间，数值越大，表示对比度越强烈，内容的可辨认度越高。Web 标准制定组织 W3C 在其 Web 内容无障碍指南（WCAG）中建议，对比一般的文本，其对比率应该不小于 4.5:1，而对于图像和界面元素来说，对比率应该不小于 3:1。在上图中，白色背景和图标的对比率是 18.65:1，而黑色背景的对比率只有 1.12:1。

3. 界面的层级与明暗关系

界面层级中，层级上离用户越近的区域，应该在视觉上更明亮一些。

我对darkmode的一些看法

首先我们要根据不同的产品制定不同的配色方案，其次我们还需要针对不同的用户群体，用户画像，对我们设计的配色进行年龄化，性别化上的定制。我们在思考配色时可以多以对比强烈的颜色icon或者图形来增加界面的酷炫感，使其模块更加突出醒目。在darkmode模式下，元素会更加整合和聚焦，用户可以在一瞬间，捕捉和沉浸到色彩鲜艳的物体上。若是在已有产品适配darkmode时我们需要保持品牌色的统一和可复用性。建立好设计规范，完善好控件库，在适配中能够有根据的统筹调整。

Dark mode在ios中的设计要点：

设计需聚焦于内容，UI作为背景来凸显内容；

Light和Dark模式需要保证界面能够正常使用，所以颜色和icon上可能需要作出不同调整；

Dark模式下无论怎么调整对比度和透明度，内容需要清晰舒适。

微信交流：MiriamBu（添加请备注来意）

微信公众号：补补的设计打卡

有帮助的话记得给个赞哟～比心～

Powered by Froala Editor