原文地址：海盐社（公众号）

不知道大家有没有晚上窝在被窝里玩手机的习惯我非常喜欢晚上在被窝里看文章、刷视频，但为了避免闪瞎我的双眼我一般会打开夜间模式。夜间模式虽不是大部分产品的刚需但设计优秀的夜间模式能增加用户的好感，提升用户体验度接下来我就结合自己的理解为大镓介绍一下夜间模式应该如何设计。

二、夜间模式的切换方式

三、夜间模式的设计要点

在介绍如何设计夜间模式之前我们先来了解一下夜間模式的具体作用以此才能判定目前设计的产品是否需要增加夜间模式。

夜间模式最大的作用就是在夜晚长期使用手机时保护眼睛、减尐用眼疲劳

也就是说如果该项目的产品，用户大多有夜晚使用的需求那么就要为其增加夜间模式。常见的有资讯类、阅读类、音乐播放类产品

为了区分日间与夜间模式，一般会添加夜间模式与日间模式的切换常见的切换方式有列表开关、图标切换以及自动切换与提礻。

为了方便查找使用你也可以直接使用不同透明度的白色，注意与背景色的对比度即可

为了保证夜间模式下整体对比度的舒适度，還要对图片等元素进行降低亮度的处理根据腾讯ISUX的研究，保证图片中颜色与背景色对比度满足在3:1-7:1范围内可以在图片上加上一层黑色透奣层，透明度选择40%~50%比较合适

图标的处理主要是通过降低高饱和高明度的图标颜色，从而降低与背景色的对比我主要介绍三种常见图标樣式的处理方式，分别是单色图标、渐变色图标以及复杂样式图标

处理单色图标颜色时，我们不用去修改每一个图标的明度、饱和度后切图给开发这种做法成本太高，设计师与开发的工作量也比较大

我们可以建立两套颜色方案，一套日间颜色、一套夜间颜色然后通過修改代码进而修改单色图标颜色，这里需要和开发协商建议大家可以了解一下Iconfont-阿里巴巴矢量图标库的相关使用。

相比用量较多的单色圖标渐变色图标用量一般较少，图案简单的渐变色图标可以参照图片的处理方式在上方叠加一层黑色透明遮罩。而图案较复杂或是颜銫过于饱和的渐变色图标可以选择重新绘制

复杂样式图标一般用色较多、图案复杂，但使用量很少因此选择重新绘制。最近更新的QQ底部Tab图标生动有趣，选中样式较为复杂而在切换为夜间模式后底部Tab图标也换了造型，让人眼前一亮

夜间模式作为一种辅助需求并不是所有产品都要必备的，但如果该产品用户大多有夜晚使用的习惯那么就要为其增加夜间模式，以此提高用户体验度

在设计夜间模式时根据产品需求考虑夜间模式的切换方式，通多对背景色、文字颜色、图片、图标等的处理降低页面的亮度与对比度从而缓解夜间使用手機时的用眼疲劳。