【Darkmode教學】你的平台適合dark mode嗎?進來評估!並一文睇清dark mode設計要點 | 文章 – 滙豐機滙

Apple於09年為各種產品介面新增了dark mode,遂不少平台介面都設計屬於它們的 dark mode。但每一個平台都需要顧及多項細節方可完善dark mode介面,為什麼還要花工程去做?有什麼好處?本文為你介紹dark mode特性,讓你評估你的平台需不需要它,並附上要考慮的各項細節。

設計  ·    ·  8 mins read

Apple 於 2019 年為各種 Apple products 新增了 dark mode(暗黑模式),同時帶動了 dark mode 成為新的 UI 趨勢,不少平台或產品如 Youtube、WhatsApp、Google Keep、Facebook、Gmail、Instagram 都紛紛設計屬於產品的 dark mode。大家都或者會發現 一些應用程式會跟隨手機 dark mode 的設定也一併轉為 dark mode,整個過程看起來有沒有很自動化?其實,每一個獨立的應用程式都需要設計屬於它們的一套 dark mode 樣式,並非簡單將畫面轉「黑底白字」就成事。簡單一個 dark mode 需要考慮得那麼細緻,為什麼還要花工程去做?有什麼好處?本文為你介紹 dark mode 的特性,讓你考慮你的平台需不需要它;如果想一試,你又有什麼細節要注意,並跟設計師溝通呢?

Dark mode 特性

  • 讓用家眼睛看得舒適,協助延長停留於平台的時間

都市人面對電子產品的時間只有越長,越易勞累,而 87% 的智能電話用户都在睡前一小時使用手機,一般 light mode 的螢幕的藍光會更會影響睡眠質素。故螢幕的舒適度都是 UX(用户體驗)的一環。Dark mode 可減少藍光,降低對眼睛的壓力,其實是減少一個用家離開你平台的理由,間接增加停留時間甚至轉換率的機會。

不過但這項特性有個前設, dark mode 的細節設置有配合好平台的配置,例如運用黑色的地方,是否跟平台某些固定顏色的元素和階共存,還是需要再調節。文章下一部分將分享 dark mode 應用的貼士。

  • 突出內容重點ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

    Dark mode 讓內容呈現對比色,相比 light mode 更易突出內容:

    ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

不過,注意 dark mode 並非只是將背境換上黑色或深色就算完成,背後的色彩理論及應用將於下文提及到。

Netflix 亦是一個典型例子,以暗黑做背境,觀眾才可以將注意力集中在內容上,跟電影院的原理相同:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

在思考平台要不要設計 dark mode?決定前考慮以下因素:

  • 你的平台需要長時間閱讀嗎?

最簡單的答案是閱讀時間較短用 light mode,長時間則用 dark mode

一般而言,平台閱讀時間相對較短,指的是以分鐘計(一小時內)的閱讀時長,這些平台籠統而言為如網誌、新聞網站*、公司網站,由於平均閱讀時間較短,反而需以閱讀清晰度跑出;相反閱讀時間相對較長的平台,如熱門論壇連登、Netflix、甚至 coding app (以小時計)則較依賴長時間閱讀的舒適度。

Apple UI Designer Raymond Sepulveda 曾解釋 dark mode 的應用:

只有閱讀或內容創作型的 App 才需要長期啟用 dark mode,如文字或 coding editor。Dark mode 會借助黑底白字的高對比度提高用户集中度。

不過,並不是每個新聞網站都適用 light mode,這個十分視乎平台性質,以及開發者搜集得來的用家數據,始終以用家一般停留在平台上的平均時長為依歸。以 The Economist 為例,供 dark mode 可選的它,原因之一是有較多長時間閱讀的用家;第二是,一般用家不單純當它新聞網,而是一本由新聞,學術至生活內容俱備的權威雜誌,它一般的忠實讀者都能花上一小時以上去閱讀它。ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學▲The Economist 設有 dark mode 配合長時間閱讀用家。

ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學▲LIHKG 自 2018 年起啟用 dark mode,平台發跡後越多「長開閱讀」的用户。

  • 用家什麼時候最活躍?

又給你一個簡單的答案,如晚上時份較多活躍用家的話可提供 dark mode 選項,而白天較多活躍用家則可用 light mode 便夠。簡單來說,晚上時份活躍的用家更需要護眼,dark mode 螢幕顯示更柔和,飽和度更低,眼睛壓力降低,增加在線時長。

其中一個例子是閱讀應用程式「簡書 app」,它每天的用户訪問率在 10PM 最為活躍,比起早上 10AM 平均高出 36.7%,另外 42% 用户每晚睡前都會使用此 APP。考慮到用家需於 APP 長時間閱讀,加上閱讀習慣以晚上為主,便提供 dark mode 以提高舒適度。

  • 用家由搜尋引擎按進你的平台的體驗?

70% 的應用程式都來自 Google search results,故它的呈現方式可以很影響你平台的 conversion rate 及 bounce rate。試幻想一下己啟用 dark mode 的讀者,由 Google 的暗黑頁面按進你平台的白光頁面,這背景轉換會不會使用家感到不自然?還是你的品牌色調或形像只跟 light mode 才契合呢?


Dark mode 三大注意事項

1.   Dark mode 並非搬字過紙,需設計一份配色配合 dark mode

上文提過,dark mode 並非只將背景改成深色便當完成設計。大部份適用於白色背景的配色,放上黑色背景則顯得對比度不足,故需要另設計一份專屬 dark mode 用家的配色。

寫作平台 Medium 示範一個簡單的反面例子,它內文使用白色以配合 dark mode,但沒有轉換 logo 的黑色,與背景撞色:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

另一個來自一個 mock application 的反面例子:

▼Dark mode 沒有有效 highlight 主要內容,對比不明顯分不清內容主次ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學


下圖你會發現, light mode 的顏色若要轉到 dark mode 需要經過調整才可以呈現一個合格的對比度:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

何謂合格的對比度?

一個良好的對比度可提升用家體驗。WCAG2.0 (Web Content Accessibility Guidelines)由 University of Wisconsin - Madison X W3C X Google 研發,提供一套國際標準去定義網站視覺上的可讀性的高低,及殘疾人仕是否都可無𥕞礙閱讀。當中對比顏色則是其中一個量度單位。這些基準被量化為 AAA(最高)、AA、及 A(最基本) 三種成功等級,如果設計都不符合這三種便 fail。

在 WCAG2.0 的世界,量度對比色的基準為 4.5:1 —— 即文字:背景的對比度,只要低於 4.5 就是不合格。

坊間有一些工具可測試顏色能否夠通過 WCAG2.0 的準則,讓我們來做個測試:

WCAG 2.0 Contrast Checker

以下我將黑色背景跟紅色進行測試。兩個色碼混合的結果是 Fail:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

換成較光亮的黃色便通過:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

2.   別盲目用黑,白色也要分層處理

  • 避開「絕對的黑」:調整 Saturation

「絕對的黑」指純黑色碼 #000000。之前提過設計 dark mode 要注意對比色的和諧度,另外其實還亦要避免純黑,否則用家很可能要瞇着眼晴閱讀。方法則是簡單運用飽和度低的色彩。

純黑 alternative:以灰色系作 dark mode 背景
Dark mode 的底色可選用深灰色,其中一個常用的安全色碼是 #121212ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

WhatsApp 則選用淺灰色 #3c4042 及 #21272bui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

對比色 alternative:以低飽和度的顏色作對比背景色

飽和度高的顏色在 light mode 看得自然舒服,但在 dark mode 的可讀性便降低。只要採用低飽和度的色調便可解決這問題,將選用的色調調至處於 50 至 200 飽和度ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

左圖的文字採用過高飽和度,無法有效突顯內容,失去了 dark mode 的意義;
右圖的介面將文字調至低飽和度,背景及文字內容的視覺效果都兼故得宜:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

  • 白字色彩黃金比例:調整 Opacity level

剛才說過要採用飽和低的色調,在文字上,運用白色時也並非不可以採用純白,但儘量只放在重點文字,不同重要性的文字都要分等應用不同 oapcity level:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

以 Apple 的 Reminder app 為例,它將 notes 的內容、「On my mac」、「Search」的主次按不同 Opacity 的 level 體現出來,使用家將注意力集中在重點內容。ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

3.   元素越近,色越淺

Dark mode 以黑色為主,但整個黑漆漆的畫面會令人分不清主次,故此我們需要將元素以不同深淺的黑色分出層次。而分層大原則是越突出的內容元素(即越近)用越淺的黑色:

下圖將主次元素分了 12 層,越近的元素以陰影顯示,而越近的元素應該越淺色:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

例子可參考下圖,在漆黑的場景,淺灰為重點內容「打燈」:ui 設計 暗黑模式 ui 設計 自學 ui 設計 dark mode  ui設計自學 網站 設計 香港網店設計 網頁 設計 ui app 設計 ui UI自學 UI設計自學

Dark mode的設計要點主要便是以上幾項了,記緊設計時的大原則是色彩運用要讓用家能看得清楚內容的同時,閱讀的感覺柔和不傷眼,便已是達成 dark mode 的初衷,這亦是一個很好的方式增加用家對你平台的 stickiness,幫助留住「回頭訪客」。




商場心理學
商場心理學