本文由阅文体验设计YUX成员制作。请尊重原创。转载请联系阅文体验设计微信公众号（id：YUX_design）获得授权，并注明作者、出处和链接。

预计阅读时间：9 分钟

关键词

深色主题、组件映射、夜间模式

前言

越来越多的人习惯睡前阅读来缓解疲劳。如何提升夜间或弱光环境下（以下统称夜间）的产品使用体验，是设计师需要面对的新课题。本文总结了起点阅读的夜间模式设计实践，与大家探讨如何提升产品的夜间阅读体验。

1.增加深色主题的价值

深色主题占用的屏幕亮度更少，有效缓解手机屏幕对眼睛的刺激，还可以减少电池消耗，增强用户的掌控感。从 Yosemite 到 Mojave，苹果系统不断扩大黑暗主题的覆盖范围。用户开启深色主题后，还可以打开系统中所有深色主题应用。谷歌旗下的YouTube等产品也推出了深色主题。在今年11月的Android开发峰会上，谷歌再次肯定了黑暗​​主题的开发价值。

2、起点夜间模式现状

起点的夜读体验并不完美。除了阅读页面的背景外，它并没有覆盖整个阅读路径。如果在阅读过程中发表评论或查看目录，从黑到白的明显亮度变化会造成强烈的视觉刺激。

起点中文网通过降低屏幕亮度、过滤蓝光等方法来提高夜间阅读的舒适度。但“一刀切”的做法有点粗糙，整体界面的识别度变得不可控。有些页面的对比度太强，有些页面的背景本身就很差。对比度较弱，添加遮罩并去除蓝光后，页面上的信息层次有点模糊。

新红袖读书[1]的夜间模式做法非常彻底。从底层代码上解决了全局颜色变化的问题，优化了响应速度。对于起点的夜间模式转型具有很大的参考意义。

3.起点夜间模式设计策略

3.1 起点中文网用户阅读行为研究

通过观察一天中不同时段的用户活跃度分布，我们发现晚上7点之后用户活跃量持续上升，在22:00到23:00之间达到全天最高值。起点中文网iOS和Android用户的日常行为曲线基本相似。从晚上7点到凌晨，用户活跃度逐渐增加。在此时间段内，用户处于弱光或即将处于弱光环境中。

起点日用户活跃度分布

我们希望以最小的成本提升用户的夜间阅读体验。作为阅读产品，核心路径就是阅读。通过用户访谈和数据挖掘，剔除一些过路页面和到达率低的页面，锁定核心阅读路径：目录、段落评论、发帖/回复评论、订阅、投票打赏以及最后一篇关注更新的用户每天都会到达的阅读页面。

核心阅读路径

3.2 设计目标及可行性分析

权衡新老用户的习惯和开发效率，我们决定从阅读路径向外辐射起点读书软件，逐步完成全球夜间模式的目标。

① 降低屏幕亮度

屏幕发出的短波蓝光对健康有害[2]。过度的蓝光刺激会导致感光细胞的光化学紊乱，甚至导致其变形和视网膜损伤。

在白色界面上覆盖一层黄色或黑色遮罩不会有太大的改善。事实上，只要屏幕发光，蓝光就会一直存在。真正减少蓝光的方法是将整体界面调整为水墨屏的效果起点读书软件，减少大面积的白色界面，可以减少对眼睛的刺激。

②减少冷色区域

色温也会影响视觉体验。当屏幕色温低于3000K[3]时，屏幕会发出暖色光线，感觉更加舒适。

很多手机系统都有调节色温的功能，比如iOS Night Shift。在特定时间段内，屏幕颜色会自动调整为暖色调。此外，以f.lux为代表的第三方护眼软件也可以灵活调节色温。

上述改变屏幕色温的方法在一定程度上提高了视觉舒适度，但全局泛黄会导致色彩失真，解决方案并不完美。白天和夜间的产品界面需要区别对待，在降低屏幕亮度的同时应保留原有的色彩外观。

3.3 组件映射设计方案

夜间模式是一种设计驱动的优化，我们不想给设计和开发团队带来额外的工作负担。

起点阅读[4]改版后，设计者和开发者共同开发了组件库[5]。夜间模式可以以组件为基础，围绕夜间阅读的核心路径拆分为一组独立的“夜间模式组件”。然后使用Libraries快速调整新界面。开发者可以将组件分组，整理特定路径下的组件样式，并根据颜色映射进行调整和调用，最终完成夜间模式的开发。

4.如何设计夜间模式映射

4.1 白色UI不能直接反转

起点的主色和辅助色都在蓝色范围内，直接用在深色背景上。整个页面更冷，颜色显得更清晰。使用对比度[6]发现主色与深色背景之间的对比度仅为1.98，不符合WCAG标准。

既然白色UI无法直接反转并用在深色主题上，那么夜间模式调色板应该如何定义呢？我们研究了iOS Design和Material Design的深色主题设计，发现深色主题下的颜色有一定的渐变图案。

Apple和Google开发的系统应用程序

4.2 建立夜间模式颜色映射关系

夜间模式颜色库需要遵循一定的规则，并且应该映射到白色 UI 的基色。仔细观察Sketch颜色面板，不难发现这实际上是一个扩展的Hexcone Model [7]颜色模型。横轴是饱和度，纵轴是亮度。对于颜色平面中的任何颜色，将色环水平向左滑动。纵轴为去除彩度后颜色的亮度。您可以使用此方法将白色 UI 的基本颜色转换为灰色。

Sketch 颜色选择器分析

以文字为例，将白色UI的主色和辅色转换为夜间模式的主色和辅色。

基本颜色映射

以同样的方式，可以提取一组背景颜色。

夜间模式映射规范和颜色库

使用对比度测试工具检测到当前对比度已提升至9.42，处于合理范围内，符合WCAG标准。对于界面上的一些特定颜色来说，它们是信息层次结构的一部分，去除色度会削弱视觉表现。

段评两种设计方案的比较

以段落评论信息模块的夜间模式为例，第一个选择是完全去除颜色，弱化需要强调的内容，例如帖子荣誉标签和操作反馈。与第一个选项相比，第二个选项页面的整体亮度处于相同的亮度。红色饱和度降低后，原来的荣誉标签依然保留，点赞反馈也比较清晰。

4.3 图标

起点阅读主要使用SVG/PDF格式的剪切图像。单色图标是最常用的样式。黑色单色图标可以根据颜色映射规范直接转换为灰色。多色图标需要分类处理。全彩色图标被视为一个整体，其透明度会降低。对于黑色和彩色图标，需要拆卸图形，并在夜间模式下对每个元素进行单独的颜色映射。

单色和多色图标的映射

起点全局图标切换为SVG/PDF后，定位和调整变得简单。不仅批量修改方便，还减小了安装包的大小。后期维护只需要同步变量即可，效率很高。

需要注意的是，图标转换为SVG/PDF后，对设计者绘制图形的要求提高了。设计者的源文件应该保持干净。对复杂图形进行布尔运算后，应仔细检查其是否损坏，图形的交点和填充方法是否准确。否则会出现编译错误。

4.4 按钮及其他

夜间模式下，按钮需要继承白色UI的默认状态、点击状态、选中状态和禁用状态。以网页文章订阅的半弹层为例，根据夜间模式色彩映射规范，将白色UI组件的文字、背景、复选框、渐变等元素拆解，逐一映射到深色背景上。一。