Terra 如何借助深色模式提升用户互动度

通过向偏好在设备上使用深色模式的用户显示深色主题，Terra 将跳出率降低了 60%，并将每次会话阅读的网页数量提高了 170%。

André Cipriani Bandarra
Demián Renzulli
Demián Renzulli
X GitHub 故障
Guilherme Moser de Souza
Guilherme Moser de Souza
X LinkedIn

Terra 是巴西最大的媒体公司之一，拥有 7500 万月活跃用户。该公司通过提供自定义深色主题，针对偏好深色模式的桌面用户，将跳出率降低了 60%，并将每次会话浏览的网页数提高了 170%。

在本文中，我们将分析 Terra 从确定“深色模式”同类群组的规模，到应用自定义深色主题，最后衡量此实现对其主要 KPI 的影响的历程。

    60%

    降低跳出率

    170%

    每次会话浏览更多页面

什么是深色模式？

传统上，设备中的界面会以“浅色模式”显示，这通常意味着在浅色界面上显示黑色文本。另一种是“深色模式”，即在深色背景（例如灰色或黑色）上使用浅色文本。

深色模式对用户体验有益处。有些人出于美观或无障碍方面的原因而更喜欢这种方式。它还有其他优势，例如延长设备的电池续航时间。用户可以通过设备中的设置表明他们更喜欢深色模式，具体取决于操作系统。例如，以下屏幕截图显示了在搭载 Android Q 的设备中深色主题配置选项的外观：

Android Q 深色模式设置。
Android Q 深色主题设置。

为了向偏好“深色模式”的用户提供更好的体验，您可以使用 prefers-color-scheme 媒体查询，其值为 light 或 dark。此媒体查询反映了用户在其设备上的选择。然后，您可以为偏好深色主题的用户加载自定义深色主题。例如，通过加载“深色”CSS 文件并更改字体和背景颜色等值。以下代码展示了相关示例：

@media (prefers-color-scheme: dark) {
   // apply a dark theme
}

@media (prefers-color-scheme: light) {
  // apply a light theme
}

浏览器支持

  • Chrome：76.
  • Edge：79。
  • Firefox：67.
  • Safari：12.1。

来源

确定“偏好浅色”与“偏好深色”的用户同类群组

在撰写本文时（2021 年 12 月），Chrome 平台状态确定，大约 22% 的网络流量来自将“偏好深色”设置为开启的用户。

这是汇总数据，因此访问某个网站的用户中偏好深色主题的用户的实际百分比可能会有所不同。因此，建议您开展内部衡量，以了解此类用户群体的规模。

以下代码会创建一个 Google Analytics 维度，用于衡量偏好 light 的用户与偏好 dark 的用户的表现：

function getColorScheme() {
    let colorScheme = 'Unknown';
    if (window.matchMedia) {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            colorScheme = 'Dark';
        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
            colorScheme = 'Light';
        }
    }
    return colorScheme;
}

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date; ga('create', 'UA-ID', 'auto');
ga('set', 'color-scheme-preference', getColorScheme());
ga('send', 'pageview');

Terra 在其网站中实现了此代码，并比较了移动设备（Android）和桌面设备（Windows）上这两组代码的行为。当时 Terra 尚不提供自定义深色主题，因此此实验的目标如下：

  • 确定偏好深色主题的用户群组的大小。
  • 找出规律：例如，与偏好浅色主题的用户相比，偏好深色主题的用户是否会更快离开网站？

了解这一点有助于您做出决策，例如：是否需要提供自定义深色主题。这是 Terra 在测试 14 天后获得的结果：

移动设备（Android）

在移动设备（Android）上，与偏好“深色”的用户相比，偏好“浅色”的用户的跳出率和每次会话内浏览的网页数没有明显差异：

显示模式 跳出率 每次会话浏览页数
首选浅色 25.84% 3.96
首选深色 26.10% 3.75

桌面设备（Windows）

对于桌面设备（Windows），偏好“深色”的用户群组在网站上的停留时间要短得多：与偏好“浅色”的用户相比，他们的跳出率几乎翻了一番，并且阅读的网页数量只比他们略多：

显示模式 跳出率 每次会话浏览页数
首选浅色 13.20% 7.42
首选深色 24.12% 4.68

根据这些数据，Terra 推测，由于网站不支持深色主题，因此偏好“深色”的用户在桌面设备上的停留时间较短。

作为后续措施，Terra 决定制定“深色主题”策略，看看能否提高偏好深色主题的一组用户的互动度。

实现深色主题

大多数网站通过之前介绍的简单策略实现深色主题，即通过 prefers-color-scheme 媒体查询监听用户的配置更改，并据此更改样式。

Terra 决定为用户提供更多控制权：当他们检测到用户在设备中开启了“首选深色”设置（通过媒体查询）时，会显示提示，询问用户是否希望在“夜间模式”下浏览。只要用户不拒绝该提示（通过点击“忽略”按钮），系统就会遵循用户的操作系统设置，并应用自定义深色主题：

Terra 浅色主题的屏幕截图，提示用户接受深色模式。
Terra 会检测用户在设备上偏好深色模式，然后向用户显示一个提示，询问他们是否希望在深色模式下浏览。

为了完善此策略，它们在“设置”屏幕中提供了其他配置选项，用户可以在其中决定是明确偏好“浅色”“深色”还是想依赖于底层设备设置。

Terra 配置界面的屏幕截图，用于选择启用或停用深色模式。
Terra 的主题配置允许用户在“深色”和“浅色”主题之间进行选择，或依赖于设备的设置。

Terra 的“夜间模式”如下所示：

Terra 深色主题的屏幕截图。
Terra 的深色主题“夜间模式”。

衡量 Terra 深色主题的影响

为了衡量深色主题的影响，Terra 选取了一组在设备上开启了“首选深色”设置的用户，并比较了显示“浅色”主题与“深色”主题时的互动指标。 以下是移动设备（Android）和桌面设备（Windows）的结果：

移动设备（Android）

虽然跳出率保持不变，但在用户看到深色主题后，网页浏览量和会话量几乎翻了一番（从 2.47 增加到 5.24）：

显示模式 跳出率 每次会话浏览页数
首选浅色 26.91% 2.47
首选深色 23.91% 5.24

    2X

    每次会话浏览更多页面

桌面设备（Windows）

采用深色主题后，这两个指标都得到了提升：跳出率从 27.25% 降至 10.82%，每次会话浏览页数几乎翻了三倍（从 3.7 增加到 9.99）。

显示模式 跳出率 每次会话浏览页数
首选浅色 27.5% 3.7
首选深色 10.82% 9.99

    60%

    降低跳出率

    170%

    每次会话浏览更多页面

基于这些数据，Terra 可以确认实现深色主题对用户有益，并决定将其继续维护为网站的核心功能。

总结

深色模式是一种偏好设置，用户可以在设备上开启此设置，以将屏幕样式更改为深色主题。有报告称，这种技术对用户体验和用户设备的不同方面（例如延长电池续航时间）都有益处。

在本文中，我们了解了如何通过提供自定义深色主题，提升了在设备中开启首选深色模式设置的一组 Terra 用户的互动指标。

对于有资源实现备选深色主题的公司，我们建议采用这种方法。对于没有时间投入此类功能的用户，Chrome 开始推出自动深色模式功能。