如何经过 HSB 颜色模式构建夜间模式

中国睡眠研究会发布的《2017 年中国青年睡眠现状报告》显示，大约 90% 的人在睡前离不开电子产品。

不知道你们有没有感受到普通的亮色界面会让咱们在夜间使用的时侯感到刺眼，长时间使用会感受眼睛疼痛，对眼睛的伤害也很是大。（固然睡前不玩手机是最好的解决方法）

因此对于阅读性或者社交娱乐等等 APP，打造夜间模式的功能会让咱们获得更好的体验，减小对眼睛的伤害。

夜间模式 UI 与深色风格 UI 的区别

咱们平时使用的很多音乐或视频类产品都采用了深色风格 UI 的设计，深色风格 UI 容易承托娱乐类产品的品牌特性以及氛围感。但深色 UI 并无针对夜间情景下专门去考虑，在白天与夜间情景下均可以使用。

而夜间模式更加针对夜间无照明的情景下设计，更加全面考虑用户在夜间无照明情景下的体验。而且都是由白天 (亮色) 模式切换成夜间模式，兼顾两种模式设计。

固然这里通常会考虑到成本问题，很多产品直接用深色 UI 当夜间模式。不过做为设计师，必须理解两者的不一样。

下面咱们来了解一下应该如何设计一个夜间模式：

设计夜间模式的流程

夜间模式的设计主要经过色彩的调性，总体色彩的亮度，总体色彩的对比度，色彩的通用性等不一样维度来设计。

一、明确色彩调性

首先，从调性图上来看，低短调（色调深暗，对比微弱），在黑暗的环境中看起来没那么刺眼，比较适合做为夜间模式的使用。

二、选择亮度低的颜色

尼特值 (nit) ，它是用于量化亮度强度的专业术语，意思每平方米烛光的强度：1nit=1 坎德拉／平方米；

其实能够将尼特值简单理解为亮度值。
白天，人的眼睛能适应亮度的值高于 3.4 尼特；夜晚，主体颜色接近 0.034 尼特，最亮元素低于 3.4 尼特的亮度眼睛会比较温馨。

将尼特值换算成 HSB 颜色模式。也就是说主色调颜色（通常指背景色或最暗的颜色）的亮度不超过 20（0<B<20），避免使用极端颜色（纯黑），最亮的颜色亮度尽可能不超过 50。

三、选择低纯度的颜色

使用柔和，低纯度的色彩可使界面看起来更舒服，增长用户的使用时长。

并且低纯度的色系对于色弱以及色盲人群来讲，和普通人群的辨色差别不大，更适合大众。

四、选择对比度微弱的颜色

如下图为例：

白天模式

无纯度夜间模式

两个模式的亮度对比：

亮色版本的亮度是（100，90，80，60，10），颜色的对比跳跃比较大，对比强，明亮。

夜间模式的亮度是（10，15，30，40，50），最接近的颜色对比度不小于 5 ，保证颜色的差别辨识度。 颜色的对比跳跃比较小，对比微弱。

内容颜色与背景颜色的比对是 10：50 与 10：30 。

五、彩色明度下降为 B:50 左右，元素添加 50% 黑色遮罩。

六、改变色相，使品牌色更凸显

一样以这张图为例，将总体的颜色的纯度上加了 20 蓝色——色相: 216，总体会感受加了一个蓝色的滤镜，视觉上看上去就不是无色相的黑白灰颜色。

小结

以上只是举了示例，具体的状况再具体分析。这些原则是为了帮助设计师更明确的作设计，并不是限制设计师发挥的条条框框。