個案研究

超越智慧型手機：JioHotstar 如何針對摺疊式裝置和平板電腦最佳化使用者體驗

閱讀時間：3 分鐘
查看 Charles Munger 的個人資料
Prateek Batra Android 自動調整應用程式開發人員關係工程師

Beyond Phones: How JioHotstar Built an Adaptive UX

JioHotstar 是印度首屈一指的串流平台，使用者人數超過 4 億。該平台規模龐大，擁有超過 33 萬小時的隨選影片 (VOD) 內容，並即時轉播重大體育賽事。

為了確保廣大觀眾享有優質體驗，JioHotstar 針對摺疊式裝置和平板電腦最佳化應用程式，提升觀看體驗。他們遵循 Google 的自動調整應用程式指南，並運用範例、程式碼實驗室、指南和說明文件等資源，在各種螢幕尺寸上打造一致、流暢且引人入勝的體驗。

JioHotstar 的大螢幕挑戰

JioHotstar 在標準手機上提供優異的使用者體驗，團隊希望善用新的板型規格。首先，團隊根據大螢幕應用程式品質指南評估應用程式，瞭解需要進行哪些最佳化，才能將使用者體驗延伸至折疊式裝置和平板電腦。為了達到第 1 級大螢幕應用程式標準，團隊實施了兩項策略性更新，讓應用程式適應各種板型規格，並在摺疊式裝置上提供差異化體驗。JioHotstar 致力於解決摺疊式裝置和平板電腦帶來的獨特挑戰，希望在所有螢幕大小和顯示比例上，都能提供高品質的沉浸式體驗。

需要採取的行動

JioHotstar 的使用者介面主要是針對標準手機螢幕設計，因此在調整主頁橫幅顯示比例、選單和節目畫面，以配合其他板型規格的多種螢幕大小和解析度時，遇到了困難。這通常會導致圖片裁剪、上下黑邊、低解析度和未利用空間，尤其是在橫向模式下。為了充分發揮平板電腦和摺疊式裝置的功能，並在這些裝置類型上提供最佳使用者體驗，JioHotstar 著重於調整 UI，確保在更多裝置上提供最佳版面配置彈性、圖片算繪和導覽功能。

具體措施

為了在大螢幕上提供更優質的觀看體驗，JioHotstar 主動強化應用程式，整合 WindowSizeClass，並針對精簡、中等和展開寬度建立最佳化版面配置。這讓應用程式的使用者介面能配合各種螢幕尺寸和顯示比例調整，確保在不同裝置上都能呈現一致且美觀的 UI。

JioHotstar 採用 Material 3 Adaptive 程式庫，遵循這個模式，瞭解應用程式有多少可用空間。首先叫用 currentWindowAdaptiveInfo() 函式，然後根據三種視窗大小類別使用新的版面配置：

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

中斷點會依序從最大到最小排列，因為 API 會在內部檢查是否大於或等於，因此任何至少大於或等於 EXPANDED 的寬度一律會大於 MEDIUM。


JioHotstar 可提供摺疊式裝置獨有的優質體驗：免手持模式。當摺疊式裝置處於半折疊狀態時，這項功能會將影片播放器移至螢幕上半部，並將影片控制項移至下半部，方便使用者免持觀看。

如要達成這個目標，您也可以使用 Material 3 Adaptive 程式庫，透過相同的 currentWindowAdaptiveInfo() 查詢免手持模式。裝置進入免手持模式後，可以變更版面配置，配合上下半部的型態，使用資料欄將播放器放在上半部，控制器放在下半部：

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

JioHotstar 現在符合大螢幕應用程式品質指南的第 1 級標準。團隊參考自動調整式應用程式指南，並運用範例、程式碼實驗室、食譜和說明文件，將這些建議融入開發流程。

為進一步提升使用者體驗，JioHotstar 將影片探索頁面的觸控目標大小增加至建議的 48dp，確保大螢幕裝置使用者能輕鬆操作。影片詳細資料頁面現在會根據螢幕大小和方向調整。他們不只縮放圖片，還運用視窗大小類別即時偵測視窗大小和密度，並為各種板型規格載入最合適的主頁橫幅，提升視覺逼真度。此外，我們也改善了導覽功能，版面配置會根據不同螢幕大小自動調整。

現在，使用者可以在大螢幕裝置上觀看 JioHotstar 的喜愛內容，享受更優質、更流暢的觀看體驗。

「與 Google 合作，讓應用程式達到第 1 級大螢幕標準，是我們共同願景的重要里程碑。JioHotstar 始終認為，針對大螢幕裝置進行最佳化，不只是為了適應不同螢幕，更是為了提升觀眾的觀看體驗，因為越來越多人使用摺疊式裝置、平板電腦和連網電視。

我們運用 Google 的 Jetpack 程式庫和指南，結合我們對內容消費的洞察，以及 Google 在平台創新方面的專業知識。這項合作讓雙方團隊得以突破極限、解決問題，並共同打造出流暢、沉浸式的體驗，在各種螢幕尺寸上都能完美呈現。

我們很榮幸能攜手合作，為數百萬名使用者提供更優質的體驗，並為印度和全球的串流體驗樹立新標竿。」
- Sonu Sanjeev，資深軟體開發工程師

作者：
繼續閱讀