作者 / Android 自適應(yīng)應(yīng)用開(kāi)發(fā)者關(guān)系工程師Prateek Batra

突破手機(jī): JioHotstar 如何構(gòu)建自適應(yīng)用戶體驗(yàn)

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

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

JioHotstar 的大屏挑戰(zhàn)

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

需要實(shí)現(xiàn)的目標(biāo)

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

采取的策略

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

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

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

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

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

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

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

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

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

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

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

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

能夠?yàn)閿?shù)百萬(wàn)用戶帶來(lái)這一升級(jí)后的觀看體驗(yàn)，并為印度乃至全球的流媒體行業(yè)樹(shù)立新的標(biāo)桿，我們倍感自豪。

高級(jí)軟件開(kāi)發(fā)工程師 Sonu Sanjeev