個案研究

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

3 分鐘小故事
Prateek Batra
Android 彈性應用程式開發人員關係工程師

超越手機：JioHotstar 如何建構適應性使用者體驗

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

為確保廣大觀眾享有優質體驗，JioHotstar 針對摺疊裝置和平板電腦最佳化應用程式，提升觀影體驗。他們遵循 Google 的自適應應用程式指南，並運用範例、程式碼研究室、食譜和文件等資源，在所有螢幕尺寸上提供一致的流暢體驗，吸引使用者目光。

JioHotstar 的大螢幕挑戰

JioHotstar 在標準手機上提供優異的使用者體驗，因此團隊想善用新的板型規格。首先，團隊根據大螢幕應用程式品質指南評估應用程式，瞭解將使用者體驗擴展至折疊式裝置和平板電腦所需的最佳化措施。為達到第 1 級大螢幕應用程式狀態，團隊實作了兩項策略性更新，以配合各種板型規格調整應用程式，並在折疊式裝置上提供差異化體驗。JioHotstar 致力於解決折疊式裝置和平板電腦帶來的獨特挑戰，在所有螢幕尺寸和長寬比的裝置上提供高品質的沉浸式體驗。

他們需要採取的行動

JioHotstar 的使用者介面主要為標準手機螢幕設計，因此在調整主視覺圖片的長寬比、選單和節目畫面時，會遇到其他板型規格的螢幕大小和解析度不同的問題。這通常會導致圖片遭到裁剪、出現上下黑邊、解析度偏低，以及空間未充分利用，尤其是在橫向模式下。為充分運用平板電腦和折疊式裝置的功能，並在這些裝置類型上提供最佳化的使用者體驗，JioHotstar 專注於改善 UI，確保在各種裝置上都能提供最佳的版面配置彈性、圖片算繪和導覽體驗。

具體措施

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

JioHotstar 採用這種模式，使用 Material 3 適應性程式庫瞭解應用程式可用的空間大小。首先，叫用 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 適應性程式庫，即可使用相同的 currentWindowAdaptiveInfo() 查詢桌面模式。將裝置置於桌面模式後，即可變更版面配置，配合姿勢的上半部和下半部，並使用欄將播放器放在上半部，控制器放在下半部：

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

JioHotstar 現在符合第 1 級的大螢幕應用程式品質指南。該團隊運用自適應應用程式指南，並參考範例、程式碼研究室、食譜和文件，將這些建議納入考量。

為進一步提升使用者體驗，JioHotstar 在影片探索頁面將觸控目標大小增加到建議的 48 dp，確保大螢幕裝置的無障礙功能。影片詳細資料頁面現在會自動調整，配合螢幕大小和方向。他們不再只是簡單地縮放圖片，而是利用視窗大小類別即時偵測視窗大小和密度，並為每種板型規格載入最合適的輪播圖片，有助於提升視覺保真度。此外，他們也改善了導覽功能，讓版面配置配合不同螢幕大小調整。

現在使用者可以在大螢幕裝置上觀看 JioHotstar 的喜愛內容，享受經過改良且高度最佳化的觀看體驗。

「與 Google 合作，讓應用程式達到第 1 級大螢幕狀態，是我們共同願景的里程碑。在 JioHotstar，我們一直認為針對大螢幕裝置進行最佳化，不僅僅是適應性，更是要提升觀眾的觀看體驗，因為他們正迅速接受摺疊式裝置、平板電腦和連網電視。」

我們運用 Google 的 Jetpack 程式庫和指南，結合內容消費洞察資料與平台創新專業知識，共同突破界限、解決問題，並在各種螢幕尺寸上打造流暢沉浸式體驗。

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

撰寫者：

繼續閱讀