作者 / Android 自適應應用開發(fā)者關系工程師Prateek Batra

突破手機: JioHotstar 如何構建自適應用戶體驗

JioHotstar是印度領先的流媒體平臺，用戶人數(shù)超過 4 億。該平臺擁有龐大的內(nèi)容庫，包括超過 33 萬小時的點播視頻 (VOD) 和重大體育賽事的實時轉播，運營規(guī)模龐大。

為了確保向廣大受眾提供優(yōu)質(zhì)體驗，JioHotstar 針對可折疊設備和平板電腦，對其應用進行了優(yōu)化，以提升觀看體驗。為此，該公司遵循了 Google 的自適應應用指南，并利用了示例、Codelab、Cookbook及文檔等一系列相關資源，以推動在所有尺寸的顯示設備上創(chuàng)建一致、流暢且引人入勝的體驗。

JioHotstar 的大屏挑戰(zhàn)

JioHotstar 在傳統(tǒng)標準手機上已提供了出色的用戶體驗，其團隊希望能充分利用新的設備形態(tài)達到進一步的提升。首先，團隊根據(jù)大屏應用質(zhì)量指南對現(xiàn)有應用進行了評估，以了解將用戶體驗擴展到可折疊設備和平板電腦需要哪些優(yōu)化。為達成 "第一層級 (Tier 1)" 大屏應用的最佳實踐，該團隊實施了兩次戰(zhàn)略更新，以便讓應用適應各種設備形態(tài)，并在可折疊設備上打造差異化體驗。通過應對可折疊設備和平板電腦帶來的獨特挑戰(zhàn)，JioHotstar 力求在所有顯示尺寸和寬高比設備上為用戶提供高質(zhì)量的沉浸式體驗。

需要實現(xiàn)的目標

JioHotstar 的界面主要是為標準手機顯示屏設計的，因此需要根據(jù)多種設備類型的屏幕尺寸和分辨率，調(diào)整主視覺圖寬高比、菜單和節(jié)目詳情頁，這一切都讓團隊面臨挑戰(zhàn)。尤其是在橫屏模式下，容易出現(xiàn)圖像被裁剪、出現(xiàn)遮幅黑邊、分辨率降低和空間利用不充分等問題。為了充分利用平板電腦和可折疊設備的功能，并優(yōu)化這些設備類型上的用戶體驗，JioHotstar 專注于改進界面，以確保在更廣泛的設備上實現(xiàn)最佳的布局靈活性、圖像渲染效果和導航體驗。

采取的策略

為了在大屏上為用戶提供更好的觀看體驗，JioHotstar 主動進行應用優(yōu)化，引入了WindowSizeClass并針對緊湊、中等和擴展的不同寬度創(chuàng)建優(yōu)化布局。這使得該應用能根據(jù)各種屏幕尺寸和寬高比調(diào)整其界面，確保界面在不同設備上均能保持一致且美觀的視覺呈現(xiàn)。

JioHotstar 使用 Material 3 Adaptive 庫遵循這種模式，以了解應用有多少可用空間。首先需要調(diào)用currentWindowAdaptiveInfo()函數(shù)，然后根據(jù)三種窗口尺寸類別，相應啟用新的布局:

valsizeClass=currentWindowAdaptiveInfo().windowSizeClass
if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
  showExpandedLayout()
}elseif(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
  showMediumLayout()
}else{
  showCompactLayout()
}

斷點的判定遵循從大到小的優(yōu)先級順序，因為 API 在內(nèi)部檢查時使用 "大于或等于" 條件進行比較，因此任何符合大于或等于 "EXPANDED" 條件的屏幕寬度，也將始終滿足大于 "MEDIUM" 的條件。

JioHotstar 能夠在可折疊設備上提供獨有的高級體驗:桌面模式。當可折疊設備部分折疊時，此功能可方便地將視頻播放器重新布局到屏幕的上半部分，并將視頻控件調(diào)整到下半部分，無需用戶動手即可體驗。

為實現(xiàn)這一效果，同樣使用 Material 3 自適應庫，相同的currentWindowAdaptiveInfo()函數(shù)可用于查詢是否處于桌面模式。一旦設備處于桌面模式后，就可以根據(jù)這種物理姿態(tài)對上下半屏的布局進行相應調(diào)整，即使用 Column (列布局) 將視頻播放器放置在屏幕上半部分，并將控制面板置于下半部分:

valisTabletTop=currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode){
 Column {
   Player(Modifier.weight(1f))
   Controls(Modifier.weight(1f))
 }
}else{
 usualPlayerLayout()
}

JioHotstar 現(xiàn)在已符合大屏應用質(zhì)量指南"第一層級 (Tier 1)" 的標準。團隊運用了自適應應用指南，并調(diào)動了一系列資源，如示例、Codelab、Cookbook和文檔，充分整合了這些資源中的建議。

為了進一步提升用戶體驗，JioHotstar 將視頻發(fā)現(xiàn)頁面的觸摸點擊區(qū)域增加到推薦的 48dp，從而確?？绱笃猎O備的無障礙體驗。該團隊的視頻詳情頁現(xiàn)已實現(xiàn)自適應，可根據(jù)屏幕尺寸和屏幕方向進行調(diào)整。這種調(diào)整不僅限于簡單的圖像縮放，還利用窗口大小類實時檢測窗口大小和密度，為每種設備形態(tài)加載最合適的主視覺圖，從而幫助提高視覺保真度。通過布局自動適配不同的屏幕尺寸，導航功能也因此得到了優(yōu)化。

現(xiàn)在，用戶可以在大屏設備上觀看自己最喜愛的 JioHotstar 內(nèi)容，獲得改進后極致優(yōu)化的觀看體驗。

獲評 Google 的 "第一層級 (Tier 1)" 大屏應用是一個里程碑，反映了我們共同愿景的力量。JioHotstar 始終相信，針對大屏設備的優(yōu)化不只限于適配性，更需要為那些日益增長的可折疊設備、平板電腦和聯(lián)網(wǎng)電視的用戶群體提供更優(yōu)質(zhì)的觀看體驗。

依托 Google 的 Jetpack 庫和指南，我們可以將自身對內(nèi)容消費趨勢的洞察與 Google 在平臺創(chuàng)新方面的專業(yè)知識相結合。這種合作使雙方團隊得以打破壁壘，彌補不足，并在各種屏幕尺寸上聯(lián)手創(chuàng)造流暢的沉浸式體驗。

能夠為數(shù)百萬用戶帶來這一升級后的觀看體驗，并為印度乃至全球的流媒體行業(yè)樹立新的標桿，我們倍感自豪。

高級軟件開發(fā)工程師 Sonu Sanjeev