Terra 會向偏好使用深色模式的使用者顯示深色主題，因此跳出率降低 60%，單次工作階段閱讀頁數也增加了 170%。
Terra 是巴西最大的媒體公司之一，每月使用者人數高達 7,500 萬人，跳出率降低 60%，電腦使用者偏好使用深色模式的電腦版網頁閱讀次數，多了 170%。
在本文中，我們會分析 Terra 如何找出「深色模式」同類群組的大小、套用自訂深色主題，最後評估這個實作對主要 KPI 的影響。
60%
跳出率降幅
170%
單次工作階段頁數更多
什麼是深色模式？
裝置過去使用的使用者介面都是以「淺色模式」顯示，也就是在淺色介面上方顯示黑色文字。另一種做法是「深色模式」，淺色文字搭配深色背景，例如灰色或黑色。
深色模式對於使用者體驗有好處。但有些人偏好美觀或融入無障礙設計。它還有其他優點，例如節省裝置的電池續航力。使用者可以透過裝置的設定，表示偏好的深色模式視作業系統而定。舉例來說，以下螢幕截圖顯示「Dark Theme」 設定選項在搭載 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
}
識別「較輕度」與「深色」使用者同類群組
在本文於 2021 年 12 月，Chrome 平台狀態判定約有 22% 的網路流量來自採用「偏好深色」設定的使用者。
這是匯總資料，因此「偏好暗網站」的使用者實際百分比可能會有差異。因此，如要瞭解這個客群的規模，建議在內部評估中運作。
以下程式碼會建立 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) 而言，相較於偏好「深色」(dark) 的使用者，跳出率和單次工作階段頁數相比，前者的跳出率和單次工作階段頁數並未有顯著差異：
電腦 (Windows)
以電腦 (Windows) 為例，相較於偏好「淺色」(淺膚色) 的使用者，偏好「深色」這組使用者在網站上停留的時間少了很多，除了跳出率的兩倍，閱讀的網頁也多半：
根據這項資料，Terra 假設網站缺少深色主題，因此偏好「深色」的使用者在電腦裝置上可停留較少。
下一步，Terra 決定採用「深色主題」策略，看看能否提升這類使用者族群的參與度。
實作深色主題
大多數網站採用深色主題，方法為透過 prefers-color-scheme 媒體查詢監聽使用者設定變更，並採用先前顯示的簡單策略，並據此變更樣式。
Terra 決定為使用者提供更多控制選項：當他們偵測到裝置已開啟「偏好深色」設定 (透過媒體查詢) 時，系統會提示使用者詢問是否要以「夜間模式」進行導航。只要使用者不拒絕提示 (點選「忽略」按鈕)，就會遵循使用者的 OS 設定，並套用自訂深色主題：
為了加強這個策略，他們在「設定」畫面中提供其他設定選項，讓使用者能決定是否明確偏好「淺色」、「深色」，還是要依賴基礎裝置設定。
Terra 的「夜間模式」外觀如下：
評估 Terra 深色主題的影響
為了評估深色主題的影響，Terra 採取了開啟「偏好深色」設定的使用者族群，並比較了顯示「淺色」和「DarK」主題時的參與度指標。 以下是行動裝置 (Android) 和電腦 (Windows) 的搜尋結果：
行動裝置 (Android)
雖然跳出率維持不變，但當使用者接觸到深色主題時，網頁和工作階段數會翻倍 (2.47 到 5.24)：
2X
單次工作階段頁數更多
電腦 (Windows)
顯示深色主題時，這兩項指標都有所改善：跳出率從 27.25% 提升至 10.82%，單次工作階段頁數幾乎是 3.7 至 9.99 的三倍。
60%
跳出率降幅
170%
單次工作階段頁數更多
根據這些資料，Terra 可確認導入深色主題的優點，並決定繼續維持該網站的核心功能。
結論
深色模式是一種偏好設定，使用者可以在裝置上開啟，將螢幕畫面的樣式變更為深色主題。這項技術指出，對於使用者體驗和裝置的各個面向 (例如節省電池電力) 都有所改善。
在本文中，我們瞭解如何針對 Terra 使用者在裝置上開啟偏好的深色模式設定，提供自訂深色主題，從而提升參與度指標。
如果公司有資源要實作替代深色主題，則建議採用這種做法。如果你沒時間開發這項功能，Chrome 將開始推出自動深色模式功能。