JioHotstar如何针对折叠屏与平板设备优化用户体验

作者 / 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