夜间模式设计探索-以起点读书为例

原创徐萌萌阅文体验设计YUX

原创声明

本文为阅文体验设计 YUX 成员出品，请尊重原创，转载请联系阅文体验设计微信公众号 ( id: YUX_design ) 获取授权，并注明作者、出处和链接。

预计阅读时间：9分钟

关键字

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

前言

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

一、深色主题价值提升

深色主题占用更少的屏幕亮度，有效缓解了手机屏幕对眼睛的刺激，另外还可以降低电池损耗，强化用户的操控感。从 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 颜色拾取器分析

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

基础色彩映射

同理，可提取一组背景色。

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

使用对比度测试工具检测出当前对比度已经提升至 9.42，处于合理区间，符合 WCAG 标准。对于界面上一些特定的彩色，他们是信息层级的一部分，去除彩度后会削弱视觉表现。

段评两种设计方案比较

以段评信息模块的夜间模式为例，方案一完全去彩色，削弱了需要强调的内容，如帖子荣誉标签和操作反馈。对比方案一，方案二页面整体处于一个亮度，红色降低饱和度之后，依然保留了原有的荣誉标签，点赞反馈也比较明确。

4.3 图标

起点读书采用的是多为 SVG / PDF 格式的切图。单色图标是使用最多的样式，黑色的单色图标按照色彩映射规范可以直接转为灰色。多色图标需要分类处理，全彩色图标将其视为一个整体，降低其透明度；对于黑色搭配彩色的图标，需要将图形拆解后，各元素分别做夜间模式色彩映射。

单色与多色图标的映射

起点全局图标切换为 SVG / PDF 之后，定位和调整都变得简单，不但批量修改方便，也减少了安装包体积，后期维护只需同步变量即可，非常高效。

需要注意的是，图标转为 SVG / PDF 之后，提高了对设计师绘制图形的要求。设计师的源文件应保持整洁，复杂图形执行完布尔运算之后应该仔细检查是否破损，图形交插点和填充方式是否准确，否则会导致编译出错。

4.4 按钮和其他

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

订阅弹层页面和部分组件

对于页面中的其他元素，如书封、广告位、用户的头像和上传的社区向内容等UI之外的图片，整体增加50%蒙版，以保持和其他深色UI同等亮度。

五、结语

任何一处的设计提升都不是凭空想象。夜间使用体验不佳最早由我们的交互设计师 @剑剑提出的，阅读页发表或回复段评都不得不唤起一个白色界面，由黑到白，强烈的亮度反差非常刺眼。这个问题在新段评第二个版本得到解决，在之后的几个版本中，我们把夜间模式做的更成体系。

夜间模式的设计只是起点不断更新和完善过程中的一件小事，我们会继续努力。如果你对本文有任何疑问或建议，欢迎留言与笔者讨论，如果你在使用起点时有任何问题或不便，可以在起点账户页左上角「设置 —— 吐个槽」告诉我们。

最后，感谢精诚协作的小伙伴，设计师亚宁、燕雯、雪松、剑剑；客户端开发周林、石健。