不管什么APP 都会加上的「夜间模式」，腾讯是怎么设计的？

大都知道，设计一定没有单纯的「感性的设计」与「性的设计」。

年以前，我在一书中读到么一段对绘画和设计异同的描述：「绘画是主观的，设计是客观的。绘画是绘画者对自身情感的表达与宣泄，为的是取悦自己。而设计是设计师最大度摒除自我见识所带来的障碍，为的是取悦大众。」

虽然这个类方法还是显得简粗暴了些，但是大体上深以为然。

下会讲到是我以前接手过个项目——设计 app 「夜间模式」。在这个项目中，为了能够达用户观的最佳舒适度，不断的调验，其中也融入了一些方法，算是在性计基础上，多了一些理性的考量。

下文我会从两大块进说明：设计+实现。

一、如何设计出舒适的夜间模式

1. 背景：为何要做夜间模式

我们的 app 受众以低龄学生为主，工内，低龄学生用户需要早上学，受此影响，他们习惯在早上的饭或上学途中、课间或休，用碎化时间阅读漫画。

也习惯在睡前和熄灯后，把没完的漫画读完，此是使用较为集中的间段，因此对夜间阅读功能有一定需求，目前的版本在夜晚来实在过闪耀了。

2.设计目标

提高夜间使用 app 的舒适度。

3. 设计思考

确定计目标以后，下来就要先捋一捋可能会面临的各种问题。界面中，包含了图片、文字、图标、背景色、割线等，首要确定的是背景色值，因为它决定了夜晚模式的基调。那背景色值什相关呢？会按照下图顺序一个个的来解答。

4. 背景色之亮度思考

先说说亮度，亮度其以被测量，也有相对应的单位。（此处有参考 qq 夜间模式）

常用来描述光的物理量有4个：发光度/光通量/光照度/亮度。

这最后项「亮度」正是我们想要。亮度是指物体明暗程度，定义是单位积发强度，它单位是 nit（尼特）；1nit=1 cd/m²。

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

结论：夜晚，我们终的屏幕亮度应该保证0.034cd/m²左右较合的。

（题外话：有种东西叫亮测试仪，可测量亮。）

5. 背景色之彩度思考

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

官方解释：杆状细胞要负责夜晚及周边视觉。相较于锥状细胞，杆状细胞对光更为敏感，较容易看到微弱的亮光，因此在极低的照，人眼仅依赖杆状细胞，称为暗视觉，无法分辨颜色，故有表面看起来仅有灰阶明暗的差异；人眼约有一亿两千万个杆状细胞，仅存在于视膜的周边，因该处缺乏锥状细胞，致我们对视野的周边份有辨色上的困难。杆状细胞的损伤则导致夜盲。

通俗一点释：人眼在夜间辨识出的颜种类少，所以不用和白天一样使用缤纷的彩表现；还有一点需要注意，上长时间注视着高饱和度的彩，得刺眼，舒适度不够。

结论：夜晚，应使用低彩度的色彩、且尽量减少颜色的种类。

除了低度，有另个问题也值注意：不色相下暗色系需要保持相视觉亮度均衡。

下图中的暗色系，通过亮度公式，换算灰色系之后，亮度还会稍差异，实际取色中注意均衡这一点，保证视觉舒度。（亮度公式：0.299*R + 0.587*G + 0.114*B=y）

6. 背景色之护眼模式

在夜，常情况下，我们屏幕距离会比白天更近，在长时近距离注视下，眼睛伤害比白天更大。使我们眼睛造成伤害是 HEV 蓝，然，蓝眼造成伤害程度取决于很多原，括屏幕技术、屏幕大小、屏幕亮度、色温和用户脸部距离和持续时。

下图中可以看出，各手机厂商的护眼模式，通过降低亮度，蓝光得到效控制；蓝黄一对互补色，如果从色温降低蓝色，黄色自然会增强。

题话：如我们将「蓝下降比-亮度下降比」值近似看成在亮度条件样情况下蓝减少量，那么除了苹（过60%）其余7款手蓝量下降了25%左右，苹鼓掌。

结论：硬件与时间不能改的况下，通过面提到的降低亮度调整屏幕色温也能降低 hev 蓝光对眼睛的伤害。

小结：夜晚，背景色应该择低彩、色相偏、亮值在0.034-34之间。

根据以上结论，选出夜间模式的背#1A1714。

7. 对比色的处理

背确立之，需要注意的有两点：

背/文字/图的区分处理

下图，在夜长时间观看的情况下，左边一组「图/文字/辅助文字」的组合比右边来的舒适；由此得出，在夜间，对比度不需要太明显，需要柔和一，视舒适度更高；否则对比太明显，文字或亮或暗。

多机验证

有了上述的大致思路后，就是进行海量的机测试了；经过一时间真实晚上场景的测试，及对热门且夜晚模式舒适较的 app 做了研究，我得：

• 文字与背景对比度—3:1～5:1
• 图片色与背景对—4:1～6.5:1

下图夜间模式的部分设稿：

（对比度可通过软件 Colour Contrast Analyser 测出）

面是我挑了几个肉眼看上舒适的 app，对它们的夜间模式做了些研究，看看是否符合我上的研究，结果如：基本与我拟订的范围贴合很。（y 表示的是总亮）

二、如何把设计稿实现出来

思考实这部分的时候，很多的疑问。整 app 的页面太多，我全部出，再给发标注吗？icon 如何处理，我需重新制作一份夜间模式的 icon 吗？夜间模式换肤其实很，可不可以复用呢？如何到把设发投入产出比化呢？

面就一一来讲解，我将这分分为来说明：字+图片+icon。

1. 文字

面对的问题：页面太多，无法针对每个页面做视觉稿。

决方案：找出共，归纳白天文字，针对每个值给出对应的夜间值；根据前面的分析，夜间模式的对比度是不需要做明显区分的，所以我把以下5种文字，缩减成2种带透明度的白：45%、30%。辅助文字的选取注意上面说的视平衡，以用亮度式来判断。

方案延展：我为什么选用带透明度的白呢？因为夜间模式其也是一种换肤，个方案是否以为以的换肤做准备呢？最我把分割与文字由纯变成带透明度的值，么做能适任意值背（除浅背下），为续换肤打基础（局背&弹框背除外）。

按照以上的规律，把白天的文字做减法，归纳为以下的表；只要把个表给到开，让他们按照表去施，就能够完美的现夜间模式的文字替换。

2. 图片

图片变暗的方式有两种，各有优缺点，但可解决大分的图片变暗问题。

方法一：图处顶，背设置为黑，改变图透明度，达到图视变暗的效果。

存在的问题：图变透明以，能露出底的某隐藏控件。

结论：可以面积使用

法：图片处于底层，上覆盖层黑色透明层，到图片视觉变暗效。

存在问题：开发实现法在这里不细说了，这两实现法会稍有内存开销， gif 图不适用。

结论：目比较合的方案，可以使用。

3. icon

Icon 的表形式比较的多样化，但还规律可循，我把 icon 分三种：单色、非单色、特殊置。

单色icon

问题：这么多 icon？难道我重新画一遍，切图给发吗？

答案：肯定。我先统一收拢了 icon 的颜色种类，只留牌色、正色、可点击色，分别对这种给相应的色值，再配合一代码即可；这样为后的换肤做准备，同的肤颜色，只需要潇洒的给开发一个颜色值即可得到的效果。

非单色icon

非单色的 icon 指包含两种及两种以的颜色的 icon，此类 icon 可以参考图片的实方式即可。

特殊置的icon

些部分的 icon 不能用码实变暗的，比如下图中的旁的「VIP身份标识」，这些 icon 就只能重新设夜间模式的样子，切图给发。

总结

我们来回顾下上说夜模体过程是什么？

希望个设计背后，都有可以支持理论依据，不纯是主观臆想，我们也正在这条路上慢慢摸索，以上有不正确地，欢迎指正。

欢迎关注「TCD设中」公众：