Categories
程式開發

優酷暗黑模式(一):是什麼、為什麼、如何落地?


優酷主客從20191125版本開始,Android和iOS雙端均已全量支持“暗黑模式”,歡迎大家試用並提出寶貴意見。

一、緣起

隨著iOS 13和Android 10的正式發布,一個名詞”暗黑模式(Dark Mode)”逐漸走入了大家的視野。各大App都將暗黑模式的適配列入了開發日程,輿情上用戶們對暗黑模式支持的呼聲也非常的高。優酷主客也順應時勢,啟動了相應的技術預研。

優酷暗黑模式(一):是什麼、為什麼、如何落地? 1

從2019年11月開始,優酷主客Android端和iOS端使用了兩個版本的時間,推動各業務方基本完成了主要使用路徑上數十個頁面的改造,還使用同一套方案同步完成了部分Weex頁面和H5頁面的適配,並完整地通過了UED的視覺驗收。

當前,到App Store和各大Android市場下載的優酷App最新版本,均已全量支持“暗黑模式”,歡迎大家試用並提出寶貴意見。

我們邀請了參與優酷App暗黑模式設計/開發/測試的同學們編寫了一系列文章,全面介紹了整個項目的實施流程和經驗教訓,也是對整個項目做一個完整的總結。

隨著iOS13和Android10系統的佔比越來越高,相信暗黑模式的支持會逐步列入各位讀者的時間表。希望我們的心得分享能幫助到大家,也歡迎大家參考優酷實現暗黑模式的設計/技術方案,完成自己App的暗黑模式接入。

二、什麼是暗黑模式?

不考慮計算機工業早期的黑色底,綠色字符的終端界面,暗黑模式的概念主要來源於MacOS,該系統為用戶提供兩個外觀,即”淺色”和”深色”。

優酷暗黑模式(一):是什麼、為什麼、如何落地? 2

自從有了這個概念之後,很多網站都為用戶提供了“淺色”和“深色”兩套界面,便於用戶根據自己的習慣或愛好進行切換。

優酷暗黑模式(一):是什麼、為什麼、如何落地? 3

在MacOS之後,很多App和Android定制ROM也加入了所謂”深色模式”的支持; 在iOS 13和Android 10發布之後,“暗黑模式” 終於被添加到官方支持的特性列表。

三、為什麼要支持暗黑模式?

根據Apple官方的說法,暗黑模式可以“改善電池壽命,改善視力不佳和強光下的人的可視性,以及在弱光環境中更好地使用設備”。

優酷暗黑模式(一):是什麼、為什麼、如何落地? 4

1. 改善電池壽命

從下圖中notebookcheck的功耗分析可以看出,在使用OLED屏幕時,屏幕上顯示的內容決定了功耗。當屏幕基本全黑時,OLED屏在任何亮度下的功耗都保持恆定。顯示了白色內容的屏幕,功耗曲線會隨著亮度提高而逐漸變陡。

優酷暗黑模式(一):是什麼、為什麼、如何落地? 5

圖片來源:https://www.notebookcheck.net/Display-Comparison-OLED-vs-IPS-on-Notebooks.168753.0.html

2. 改善視力不佳用戶的可視性

我們面對的用戶群體中有一部分是色盲或者色弱用戶,暗黑模式對於色盲/色弱用戶群體是非常友好的。

3. 弱光環境中的使用

優酷暗黑模式(一):是什麼、為什麼、如何落地? 6

在溫暖的被窩中也可以舒服地看劇了,再也不用害怕被白色背景閃瞎眼了。

4. UI風格的統一

業務開發中難免會用到系統默認控件,而係統默認控件都支持了暗黑模式。如果自定義控件不支持的話,當用戶打開暗黑模式後,就會發現風格不統一的情況。

以iOS為例,在下圖的界面中,Tabbar已經被轉成暗黑模式的樣式,但畫面上方的組件、文字因為都是自定義顏色/樣式,並沒有隨著模式切換而自動調整,這也讓整個畫面看起來不太協調。

優酷暗黑模式(一):是什麼、為什麼、如何落地? 7

如果短時間內沒有精力支持暗黑模式,也可以在開發階段強制指定不支持暗黑模式。

對於iOS,需要在App的Info.plist裡面添加名稱為User Interface Style, 類型為String的項目,將User Interface Style 的值設置為Light,聲明”只支持Light Mode”,就可以避免系統控件轉換為暗黑狀態。

對於Android,需要在App的Application裡面調用下面的代碼,聲明不支持暗黑模式。

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

四、暗黑模式的官方文檔

暗黑模式的官方設計指南,可以參考iOS和Android的官方文檔

iOS:

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

Android:

https://developer.android.com/guide/topics/ui/look-and-feel/darktheme

https://material.io/design/color/dark-theme.html

要支持暗黑模式,絕不是將界面上的淺色元素改為深色元素就大功告成; 否則我們只需要編排一份淺色和深色色值的顏色轉換錶,以及一份適用於暗黑模式的素材, 然後簡單地對App進行改寫就可以了。

以iOS為例,為了支持系統級別的暗黑模式主題,以及系統內置App同步支持暗黑模式下的界面,iOS系統在屏幕(Screen), 視圖(View), 菜單(Menu)和組件(Controls)上使用了Apple 新定義的“Darker Color Palette”。

這套 Color Palette 的主要目的,在於透過調整顏色的飽和度, 做出視覺層級,提升顏色的對比性,讓所有組件能夠以合適的狀態在暗黑模式中進行操作。

基於暗黑模式進行的界面設計並不是一個顏色調整一下就可以快速解決的任務。由於暗色系的一些特性,原本用來建立視圖層級(例如陰影)或者色彩對比(白底黑字)的概念都需要被重新設計,設計師們需要以全新的思維去應對視覺上的每個細節。

也因為新增暗黑模式支持這一大幅度的改動,Apple 也重新定義了自己的UI設計指南,除了強調設計師們應該“更專注於內容”,也在原有的設計”Light Mode”基礎上,提出5個原則進行調整。

  • 維持操作上的熟悉性
  • 維持平台上的一致性
  • 清楚的信息層級
  • 無障礙操作
  • 保持簡單

五、暗黑模式的設計

由此可見,暗黑模式帶來的是一整套的全新設計理念。對應而來的,就是對現有App設計元素的全盤重構,這在設計和開發側來講,都是龐雜繁瑣的工程,涉及優酷幾乎全部業務的的界面適配。

在《優酷暗黑模式設計指南》一文中,優酷的UED們講述了他(她)們對於暗黑模式在優酷App實際落地的深度思考。

六、暗黑模式的架構支撐

在UED給出了完整設計方案之後,我們的技術架構同學需要給出完整的技術支撐方案,完美地還原UED的視覺設計。

然而,具體落地到實現上,我們不得不回答如下幾個問題

  • iOS和Android的實現方案如何盡可能地保持一致性
  • 如何在iOS 12和Android 9及其以下系統也能支持暗黑模式,並與iOS 13和Android 10以上系統保持技術方案的統一
  • 如何復用Native端的實現方案,同步支持Weex/H5,甚至延伸至未來的小程序和Flutter

在“優酷設計標準化體系的技術實現”,“暗黑模式的技術支撐(Android)”,“暗黑模式的技術支撐(iOS)”“暗黑模式的技術支撐(Weex & H5)”這幾篇文章中,我們通過實現“優酷設計標準化體系”,完整地給出了技術側的思考。

七、暗黑模式的業務改造

當底層架構設計已經完畢,就要對優酷主客的所有頁面進行適配,改造工作涉及數十位UED和開發同學。

在如此短的開發週期之內,既要完成正常的業務開發,又要完成如此大規模的改造,還要通過UED的視覺驗收。

我們的業務側開發同學是如何完成這個艱鉅任務的呢?

請看“優酷暗黑模式在分發場景的落地(Android&iOS)”,“暗黑模式在優酷消費場景的落地(iOS)”,“暗黑模式在優酷消費場景的落地(Android)》”。

八、暗黑模式的測試和上線

暗黑模式的最終上線,涉及優酷App幾乎全部頁面的適配和改造,為QA同學的測試工作帶來的前所未有的挑戰。

那麼,他(她)們是如何完成繁重的測試任務,保證了優酷App按時發布上線的呢?

請看文章“優酷App暗黑模式的質量保證”。

作者簡介

凱馮,阿里文娛無線開發專家。