Categories
程式開發

優酷暗黑模式(九):消費場景落地(Android)


優酷播放頁的暗黑模式是在設計標準化的基礎上,參考了DesignToken來實現設計的。之前播放頁已經接入了組件標準化,為暗黑模式的適配提供了很大的便利。

一、播放頁業務介紹

播放頁作為用戶視頻消費場景的落地頁,主要提供包括視頻播放、內容介紹、互動、推薦、花絮、周邊、推薦等。業務類別及頁面元素都比較複雜,頁麵類別有:劇集、電影、綜藝、少兒、體育、新知等;其元素主要有:組件、半屏、tab等。

常見的幾種頁麵類別及元素如下圖所示。

優酷暗黑模式(九):消費場景落地(Android) 1

二、播放頁場景特殊性

相對於其它場景,播放場景有其特殊性。

首先,用戶在觀看視頻的時候切換暗黑模式不能打斷用戶的操作(如定時切換),需要實現無縫切換以達到良好的播放體驗,所以在切換模式的選擇上和其它場景會有區別。

其次,播放頁組件有30多個,同時還會有半屏(包括native及H5),彈框,及少兒、評分、評論等其他業務團隊頁面的承接,UI適配涉及改動點比較廣。

最後,播放頁原先已經具備沉浸式觀影模式,在某些劇集上會生效,它也屬於氛圍的一種,需要做好隔離,避免與暗黑模式相互影響。

三、頁面適配架構

優酷暗黑模式(九):消費場景落地(Android) 2

播放頁架構的最底層是優酷的統一渲染架構以及標準化組件。如前文所述,因為播放頁有沉浸式觀影模式,我們做了一層資源管理層,用於隔離沉浸式模式和暗黑模式,同時可以更好的統一管理播放頁的資源,便於維護。最上層則為要適配的頁面相關組件、半屏等。

四、頁面適配方案

1、資源適配

資源適配主要有顏色適配和資源適配,兩者都是採用標準化的方式來適配,適配方式可以參考《暗黑模式的技術支撐(Android)》。

2、刷新模式對比

2.1 Android系統的兩種刷新模式

Android 10系統對於暗黑模式與正常模式的刷新採用兩種刷新方式:

(1) recreate方式:該方式下正常模式與暗黑模式切換時,會對整個Activity進行recreate,繪製時根據模式,獲取不同的顏色進行繪製,

(2) uimode方式:即業務根據需要自行刷新模式,正常和暗黑模式切換時並不會recreate整個Activity,需要業務自己去刷新要適配的頁面和組件。這種模式需要在AndroidManifest的configChanges配置uimode,防止進入recreate模式。

2.2 兩種模式對比

recreate方式:

  • 優點:適配簡單,在適配時直接修改顏色為DesignToken動態色,資源放置在drawable-night下即可。當系統切換模式,recreate整個Activity的時候自動獲取顏色繪製。
  • 缺點:模式切換之後對於用戶的體驗不好,每次切換以後都會重新加載,用戶之前的觀看及操作會丟失,需要重新加載。

uimode方式:

  • 優點:用戶體驗比較好,模式切換的時候可以無感知切換,不影響用戶觀看及之前的操作;
  • 缺點:適配刷新比較複雜,不會recreate Activity要主動去刷新,需要考慮彈框,半屏,及前後台切換影響。顏色適配及資源適配都需要手動獲取設置。

對於兩種刷新模式的選擇,需要根據業務場景來選擇適合哪種模式。對於優酷的分發頁面,頁面重建對於用戶操作影響並不大,可以採用recreate模式,適配起來不用考慮主動觸髮刷新。

3、播放頁具體刷新方案

從用戶體驗的角度出發,用戶在觀看視頻的時候,並不想在任何時候被打斷,最終採用uimode的方式來刷新整個頁面,做到無感知刷新,防止recreate頁面之後播放重新開始。這種情況下就需要頁面主動去觸髮刷新。

播放頁有30個多個組件,加上半屏、彈窗如果每個單獨去刷新適配工作量太大,且像選集有很多分季tab及分集,單獨去做刷新顯然不太可能,所以需要比較通用的方式去刷新,做到一次調用整體刷新。

最終採用的方案是,將刷新分為三類:最底層整體頁面與tab、組件、半屏及彈窗,具體適配方案如下:

刷新適配時,通知刷新部分及資源選取(上面提到的資源適配)採用系統提供的方式,後面刷新過程中顏色處理還是按照組件標準化的統一規則(上面提到的顏色適配)來進行刷新適配。

3.1 觸髮刷新(系統的刷新方案)

採用系統提供的uimode模式,在manifest配置uimode模式防止recreate activity

具體流程:

優酷暗黑模式(九):消費場景落地(Android) 3

3.2 tab與背景刷新

tab和背景整體可以看作是一個頁面承載底層,統一刷新來設置整個tab背景及頁面最底層背景。刷新過程中註意tab的錨定,比如當前在第二個tab,刷新之後也要錨定到第二個tab。

3.3 組件刷新

每個組件可以看作是RecyclerView的一個子View,所以刷新採用Adapter的notifyDataSetChanged方式。獲取到整個加載組件的列表即componentList,然後對每個Component的Adapter通過notifyDataSetChanged去調用整個組件的刷新,這個時候頁面數據已經在本地存在,相當於只是刷新View樣式。

這個過程中,遇到過一個問題就是播放頁數據刷新的時候做了多次刷新的保護(下圖中check組件是否可以刷新部分),所以如果不是數據的變化,則不會去執行刷新,要解決這個問題需要設置一個新的刷新狀態,由於組件過多,只能採用統一處理的方式,在組件數據的統一父類中設置狀態改變的方法;當判斷出組件已加載,且UI模式已切換後,則設置組件可以刷新,在組件刷新時可以很方便拿到這個狀態,判斷該狀態去刷新。

簡單刷新流程概括如下:

優酷暗黑模式(九):消費場景落地(Android) 4

優酷暗黑模式(九):消費場景落地(Android) 5

後台切換刷新,不會影響觀看

3.4 半屏及彈窗刷新

半屏及彈窗的刷新比較複雜,播放頁整個半屏採用View打開的方式,且半屏對應也有很多種樣式。比如多種展示View,多種不同背景,外部頁面(如評論部分,承接在播放頁,背景需要播放頁控制)透明背景等;同時也要考慮用戶當前打開了半屏,然後退到後台再切換模式的情況。

在半屏適配採用的方案是:每次半屏的打開需要記錄下來,刷新時判斷容器當前是否正在打開,半屏的背景用同一個tag標記,當接收到刷新通知之後,判斷當前打開的半屏,根據tag去刷新背景,這樣就不用再每個半屏去處理,直接通過tag統一刷新。對於特殊半屏的刷新,實現調用刷新方法做特殊Viewiew的刷新處理,調用該方法進行各自View的刷新,具體流程如下:

優酷暗黑模式(九):消費場景落地(Android) 6

優酷暗黑模式(九):消費場景落地(Android) 7

半屏刷新,不會關閉半屏,直接切換

3.5 與沈浸式模式隔離

在適配暗黑模式的過程中,沉浸式模式與其會互相影響,需要做到相互隔離。下面是沉浸式的一個樣式,該頁面可以給用戶更好的觀影體驗,背景採用高斯模糊圖的方式,可以開關控制。

從頁面可以看出,其效果也是對於不同樣式的處理,但是沉浸式是運營控制開關投放,背景是一層高斯模糊,對於背景,字體,顏色的處理還是不同,所以在適配的過程中需要做一層顏色及資源管理層(架構圖中的顏色資源管理層),來區分沉浸式氛圍及暗黑的處理。通過不同的開關控制背景處理及加載不同的資源、顏色。後期沉浸式將會接入全局統一氛圍配置,做到自動下發氛圍相關樣式,減少適配工作。

優酷暗黑模式(九):消費場景落地(Android) 8

五、總結

1、根據自身的業務場景選擇適合業務的刷新方式,比如播放頁不能打斷用戶操作及觀看,採用uimode方式;

2、模塊比較多的情況下,盡量考慮相互關聯的模塊一起去處理刷新,提高適配效率;

3、同一類View比如半屏背景,或者RecyclerView採用統一的管理方式,做到一次調用,全部刷新;

4、有其他UI樣式相關的處理比如換膚,氛圍,要考慮相互之間的影響;

5、對於使用uimode模式,要考慮用戶退出後台模式修改的情況,以及用戶設定了具體時間進入暗黑模式的情況。當重新回到App,做到無縫刷新;尤其在打開彈窗,半屏,tab錨定的時候,具體效果可看下面適配效果。

六、適配效果

優酷暗黑模式(九):消費場景落地(Android) 9

作者簡介

吉歐,阿里文娛無線高級開發工程師。

相關閱讀

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

優酷暗黑模式(二):如何建立設計語言標準化管理體系

優酷暗黑模式(三):暗黑模式設計指南

優酷暗黑模式(四):設計標準化的技術實現

優酷暗黑模式(五):暗黑模式的技術實現策略

優酷暗黑模式(六):暗黑模式的技術支撐 iOS

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5

優酷暗黑模式(八):分發場景落地(Android & iOS)