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

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

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

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

JioHotstar 的大屏挑戰

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

需要實現的目標

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

采取的策略

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

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

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

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

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

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

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

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

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

現在，用戶可以在大屏設備上觀看自己最喜愛的 JioHotstar 內容，獲得改進后極致優化的觀看體驗。

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

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

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

高級軟件開發工程師 Sonu Sanjeev