夜间模式设计方法

1. 用户反馈

---

2. 亮度单位公式

尼特值（nit），亮度强度，即每平方米烛光的强度：1 nit = 1 坎德拉 / 平方米

白天，人的眼睛适应亮度的值高于 3.4 尼特

夜晚，人的眼睛适应亮度的值，主体颜色接近 0.034 尼特，最高元素低于 3.4 尼特

色彩亮度公式 ，0.229 X R +  0.587 X G + 0.114 X B = Y ，Y 为亮度

Y 的范围 0 - 225 ，Y 值越接近 0 亮度越低

对比度规范 ，文字与背景色对比度 3 : 1 ~ 4.5 : 1 范围，元素（头像，图片）与背景色对比度 3 : 1 ~ 7 : 1

以此来保证文字的清晰度，减少其他元素过亮的情况

由于界面元素的多样性，例如头像，歌曲，新闻等，该类元素如果不能满足亮度与对比度（3 : 1 ~ 7 : 1）的要求，需要再起上方添加黑色透明遮罩（不透明度 40% ~ 50%），从而降低对比度和亮度

---

3. 软件硬件

Sim  Daltonsim for Mac  测试色彩通用性软件

Colour Contrast Analyser  对比度测试软件

屏幕亮度测试仪  测试尼特值

---

4. 五项夜间模式设计原则

原则 1 ：保证色彩通用性 - 关注特殊人群

考虑色盲人群的特性，尽量保证他们所看到的颜色和我们接近一致，减少该类人群识色的差异性，增强设计统一性

无色彩更能减少正常人和色盲等特殊人群的识色差别

原则 2 ：选择低亮度，低饱和度和非极端的色彩（避免纯黑）

减少极端色，无彩色居多

从行业趋势看，Google Material Design 和 iOS 相继推出了夜间模式和深色主题设计及护眼模式

界面主体倾向无色彩 ，黑色居多。柔和，低饱和度色彩可以增加用户长时间观看界面的舒适度

设计初始应选择亮度较低的色彩，控制界面亮度，方法就是直接降低色彩本身亮度，但是要注意避免使用极端颜色（纯黑）

原则 3 ：保证界面在屏幕上呈现出低尼特值（低亮度）

主体背景颜色在屏幕上呈现的亮度应该接近 0.034 尼特，界面中最高亮度元素尽量低于 3.4 尼特

原则 4 ：保证文字，元素，背景的对比度在能看清的范围内

运用对比度规范，保证文字的清晰度，减少其他元素过亮的情况

原则 5 ：必要时为过亮元素添加黑色透明度遮罩

解决界面元素的多样性问题，在其上方添加黑色透明遮罩（不透明度40%~50%）

---

5. 设计方法步骤

确定通用性色彩 - 选择色彩亮度 - 确定文字对比度 - 为元素添加遮罩降低元素亮度对比度 - 设备检测界面尼特值