夜间模式设计探索-以起点读书为例【百科全说】

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

如何从视觉角度提升夜间阅读体验，如何借助组件库建立色彩映像，高效推动设计落地，本文一一揭晓

关键字

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

一、深色主题价值提升

深色主题占用更少的屏幕亮度，有效缓解了手机屏幕对眼睛的刺激，另外还可以降低电池损耗，强化用户的操控感。从 Yosemite 到 Mojave，苹果系统不断延展深色主题的覆盖范围，用户开启深色主题后可以一并开启系统内所有有深色主题的应用。Google 旗下的 Youtube 等产品也相继推出深色主题，今年11月的安卓开发峰会上，Google 再次肯定了深色主题的开发价值。

二、起点夜间模式现状

起点的夜间阅读体验并不完善，除了阅读页背景，没有覆盖全整条阅读路径，阅读过程中如果发表评论，或者查看目录，从黑色到白色，明显的亮度变化造成强烈的视觉刺激。起点曾使用降低屏幕亮度和过滤蓝光的方法，改善夜间阅读的舒适度，但是「一刀切」的做法有些粗暴，整体界面的辨识度变得不可控，有些页面对比度过强，有些页面图底本身就对比度弱，加了蒙版且去掉蓝光之后，页面的信息层级有些模糊不清。

新红袖读书 [1] 的夜间模式的做法是非常彻底的，从底层代码上解决了全局换色的问题，且优化了响应速度，对起点夜间模式改造有很大的借鉴意义。

三、起点夜间模式设计策略

3.1 起点用户阅读行为研究

通过观察一天内不同时间段的用户活跃分布，我们发现晚上7点以后用户活跃量不断攀升，22:00 – 23:00 达到当天最大值。起点 iOS 和 Android 用户每日行为曲线基本类似，从晚上7点到凌晨，用户活跃量逐渐增加，在该时间段内，用户处于弱光或即将处于弱光环境下。

起点每日用户活跃分布

我们希望用最小成本提升用户夜间阅读体验。作为一款阅读产品，核心路径是阅读，通过用户访谈和数据埋点，剔除掉部分过路页和到达率较低的页面，锁定核心阅读路径为：目录、段评、发表/回复评论、订阅、投票和打赏，以及追更用户每日都会到达的阅读末页。

核心阅读路径

3.2 设计目标与可行性分析

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

①降低屏幕亮度

屏幕发出的短波蓝光危害健康 [2] ，过多的蓝光刺激使得感光细胞产生光化学扰动，甚至引起其畸变造成视网膜损伤。给白色界面覆盖一层黄色或黑色蒙版并不会有很大改善，事实上，只要屏幕发光，蓝光就一直存在，真正的降低蓝光，是将界面整体调整为墨水屏的效果，减少大面积的白色界面，才能降低对眼睛的刺激。

②减少冷色面积

色温也影响视觉感受，当屏幕色温低于 3000K [3] 时，屏幕会发出暖光，感觉会比较舒适。很多手机系统都有调节色温的能力，比如 iOS 夜览，在特定时间段，屏幕颜色将自动调节为较暖的色调。另外，以 f.lux 为代表的第三方护眼软件也可以灵活调节色温。

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

3.3 组件映射设计方案

夜间模式是设计侧驱动的优化项，我们并不希望给设计和开发团队带来额外的工作负担。起点读书改版 [4] 之后，设计师和开发同学一起开发了组件库 [5] ，夜间模式可以以组件为基础，围绕夜间阅读的核心路径，拆分出一套独立的「夜间模式组件」，再借助于 Libraries，快速调整新界面。开发同学可以组件为宗，梳理特定路径下的组件样式，按照色彩映射调整并调用，最终完成夜间模式的开发。

四、如何设计夜间模式映射

4.1 白色 UI 不能直接反色

起点的主色和辅助色均在蓝色区间，直接使用在深色背景上，整体页面偏冷，颜色显得较为尖锐。使用 Contrast Ratio [6] 发现，主色与深色背景的对比度仅为 1.98，不符合 WCAG 标准。既然白色 UI 不能直接反色用到深色主题上，那么应该如何定义夜间模式色板呢？我们研究了 iOS Design 和 Material Design 的深色主题设计，发现在深色主题下的色彩有一定的梯度规律。

Apple 和 Google 开发的系统应用

4.2 建立夜间模式下的色彩映射关系

夜间模式色彩库需要遵循一定的规则，且应该与白色UI的基础色形成映射。仔细观察 Sketch 颜色面板，不难发现这其实是一个被展开的 Hexcone Model [7] 色彩模型，横轴是饱和度，纵轴是明度，色彩平面的中的任何一个颜色，向左横向滑动色圈至纵轴，均为该色去彩度之后的明度，可以通过此种方法将白色UI的基础颜色转换为灰色。

Sketch 颜色拾取器分析