夜间模式（感性设计的理性思考） / 木子杰软件教程

阅读此文大约需要10分钟时间

大家都知道，设计一定没有单纯的“感性的设计”与“理性的设计”。多年以前，我在一本书中读到过这么一段对于绘画和设计异同的描述：“绘画是主观的，设计是客观的。绘画是绘画者对自身情感的表达与宣泄，为的是取悦自己。而设计是设计师最大限度摒除自我见识所带来的障碍，为的是取悦大众。”虽然这个分类方法还是显得简单粗暴了些，但是大体上我深以为然。下面会讲到的是我以前接手过的一个项目——设计app的“夜间模式”。在这个项目中，为了能够达到用户观看的最佳舒适度，不断的调试试验，其中也融入了一些方法，算是在感性设计基础上，多了一些理性的考量。下文我会从两大块进行说明： 设计+实现

我们的app受众以低龄学生为主，工作日内，低龄学生用户需要早起上学，受此影响，他们习惯在早上的吃饭或上学途中、课间或午休，利用碎片化时间阅读漫画。
他们也习惯在睡前和熄灯后，把白天没看完的漫画读完，此时是使用较为集中的时间段，因此他们对夜间阅读功能有一定需求，目前的白天版本在夜晚看来实在太过闪耀了！

提高夜间使用app的舒适度

确定设计目标以后，接下来就要先捋一捋可能会面临的各种问题。界面中，包含了图片、文字、图标、背景色、分割线等，我们首要确定的是背景色值，因为它决定了夜晚模式的基调。那么背景色值又与什么相关联呢？我会按照下图顺序一个个的来解答！

先说说亮度，亮度其实可以被测量，也有相对应的单位。（此处有参考qq夜间模式）我们常用来描述光的物理量有4个： 发光强度/光通量/光照度/亮度；这最后一项“亮度”正是我们想要的。亮度是指物体明暗的程度，定义是单位面积的发光强度，它的单位是nit(尼特)；1nit=1 cd/m²。

上图是人眼细胞的一些特性，划横线出可以看出，主要负责夜晚视觉的杆状细胞，作用范围是0.034cd/m²。

结论：夜晚，我们最终的屏幕亮度应该保证在0.034cd/m²左右是较为合适的。 （题外话：有种东西叫亮度测试仪，可以测量亮度。）

夜晚中，我们对图片中颜色的判断会有误差，如下图，单看右边图中的色彩，很难猜到其真实的色彩；因为在夜晚，主要是我们人眼的杆状细胞起作用；

官方解释：杆状细胞主要负责夜晚及周边视觉。相较于锥状细胞，杆状细胞對光更为敏感，较容易看到微弱的亮光，因此在极低的照度下，人眼仅以来杆状细胞，称为暗视觉，其无法分辨顏色，故所有表面看起來仅有灰阶明暗的差异；人眼约有一億二仟万个杆状细胞，仅存在於视网膜的周边，因该处缺乏锥状细胞，以致我们对视野的周边部份有辨色上的困难。杆状细胞的损伤则导致夜盲。通俗一点解释：人眼在夜间可辨识出的颜色种类较少，所以不用和白天一样使用缤纷的色彩表现；还有一点需要注意，晚上长时间注视着高饱和度的色彩，会觉得刺眼，舒适度不够；

结论：夜晚，应使用低彩度的色彩、且尽量减少颜色的种类。除了低彩度，还有另一个问题也值得注意：不同色相下的暗色系需要保持相对的视觉亮度均衡；下图中的暗色系，通过亮度公式，换算成灰色系之后，亮度上还是会稍有差异，在实际取色中要注意均衡这一点，保证视觉舒适度；（亮度公式：0.299*R + 0.587*G + 0.114*B=y）

在夜间，通常情况下，我们面对屏幕的距离会比白天更近，在长时间近距离的注视下，对眼睛伤害比白天更大。使得我们眼睛造成伤害的就是HEV蓝光，当然，蓝光对人眼造成的伤害程度取决于很多原因，包括屏幕的技术、屏幕大小、屏幕亮度、色温和用户脸部的距离和持续的时间。下图中可以看出，各大手机厂商的护眼模式，通过降低亮度，蓝光得到有效控制；而蓝黄是一对互补色，如果想从色温上降低蓝色，黄色自然会增强；