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

超、凢脫俗 2021-12-22 16:15 185阅读 0赞

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

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

所以对于阅读性或者社交娱乐等等 APP，打造夜间模式的功能会让我们得到更好的体验，减少对眼睛的伤害。

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

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

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

当然这里一般会考虑到成本问题，不少产品直接用深色 UI 当夜间模式。不过作为设计师，必须理解二者的不同。

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

# 设计夜间模式的流程 #

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

#### 1、明确色彩调性 ####

首先，从调性图上来看，低短调（色调深暗，对比微弱），在黑暗的环境中看起来没那么刺眼，比较适合作为夜间模式的使用。  
[![图片][fc487703-0061-472d-b47e-1d9a518dcea6.png]][fc487703-0061-472d-b47e-1d9a518dcea6.png]

#### 2、选择亮度低的颜色 ####

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

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

将尼特值换算成 HSB 颜色模式。也就是说主色调颜色（一般指背景色或最暗的颜色）的亮度不超过 20（0<B<20），避免使用极端颜色（纯黑），最亮的颜色亮度尽量不超过 50。  
[![图片][8e5ca8c5-6775-4ddb-85b5-80ccd50aa287.png]][8e5ca8c5-6775-4ddb-85b5-80ccd50aa287.png]

#### 3、选择低纯度的颜色 ####

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

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

#### 4、选择对比度微弱的颜色 ####

以下图为例：

白天模式  
[![图片][ab385140-58b7-403e-b177-decc6943dccf.png]][ab385140-58b7-403e-b177-decc6943dccf.png]  
无纯度夜间模式  
[![图片][4582169a-5db5-4b75-ba45-2e4f69b97781.png]][4582169a-5db5-4b75-ba45-2e4f69b97781.png]

两个模式的亮度对比：  
[![图片][cb914cf5-4e91-4c0e-90e2-b82275ff5683.png]][cb914cf5-4e91-4c0e-90e2-b82275ff5683.png]

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

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

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

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

[![图片][4659bde7-34fb-45d1-bc8c-d7d65daa4da9.png]][4659bde7-34fb-45d1-bc8c-d7d65daa4da9.png]

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

同样以这张图为例，将整体的颜色的纯度上加了 20 蓝色——色相: 216，整体会感觉加了一个蓝色的滤镜，视觉上看上去就不是无色相的黑白灰颜色。  
[![图片][4629bbf9-5af8-4a74-bffb-d3228d8f467c.png]][4629bbf9-5af8-4a74-bffb-d3228d8f467c.png]

# 小结 #

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

转载于:https://www.cnblogs.com/Coding-net/p/6673967.html

[fc487703-0061-472d-b47e-1d9a518dcea6.png]: https://dn-coding-net-production-pp.qbox.me/fc487703-0061-472d-b47e-1d9a518dcea6.png
[8e5ca8c5-6775-4ddb-85b5-80ccd50aa287.png]: https://dn-coding-net-production-pp.qbox.me/8e5ca8c5-6775-4ddb-85b5-80ccd50aa287.png
[ab385140-58b7-403e-b177-decc6943dccf.png]: https://dn-coding-net-production-pp.qbox.me/ab385140-58b7-403e-b177-decc6943dccf.png
[4582169a-5db5-4b75-ba45-2e4f69b97781.png]: https://dn-coding-net-production-pp.qbox.me/4582169a-5db5-4b75-ba45-2e4f69b97781.png
[cb914cf5-4e91-4c0e-90e2-b82275ff5683.png]: https://dn-coding-net-production-pp.qbox.me/cb914cf5-4e91-4c0e-90e2-b82275ff5683.png
[4659bde7-34fb-45d1-bc8c-d7d65daa4da9.png]: https://dn-coding-net-production-pp.qbox.me/4659bde7-34fb-45d1-bc8c-d7d65daa4da9.png
[4629bbf9-5af8-4a74-bffb-d3228d8f467c.png]: https://dn-coding-net-production-pp.qbox.me/4629bbf9-5af8-4a74-bffb-d3228d8f467c.png