案例研究

超越智能手机：JioHotstar 如何针对可折叠设备和平板电脑优化用户体验

阅读用时：3 分钟
Prateek Batra
开发者关系工程师，Android 自适应应用

超越手机：JioHotstar 如何打造自适应用户体验

JioHotstar 是印度领先的流媒体平台，用户群超过 4 亿。该平台拥有庞大的内容库，包含超过 33 万小时的视频点播 (VOD) 内容，并可实时直播重大体育赛事，因此运营规模非常庞大。

为了确保广大观众获得优质体验，JioHotstar 针对可折叠设备和平板电脑优化了其应用，从而提升了观看体验。为此，他们遵循了 Google 的自适应应用指南，并利用了示例、Codelab、Cookbook 和文档等资源，帮助在所有显示尺寸下打造始终如一的流畅且富有吸引力的体验。

JioHotstar 的大屏挑战

JioHotstar 在标准手机上提供了出色的用户体验，而该团队希望充分利用新的设备类型。首先，该团队根据大屏设备应用质量指南评估了其应用，以了解需要进行哪些优化才能将用户体验扩展到可折叠设备和平板电脑。为了达到Tier 1大屏应用状态，该团队实施了两项战略性更新，以使应用能够适应各种设备规格，并在可折叠设备上实现差异化。JioHotstar 旨在解决可折叠设备和平板电脑带来的独特挑战，从而在所有显示屏尺寸和宽高比下提供优质的沉浸式体验。

他们需要做什么

JioHotstar 的用户界面主要针对标准手机显示屏设计，但在将主打图片宽高比、菜单和节目界面调整为适应其他设备规格的各种屏幕尺寸和分辨率时遇到了挑战。这通常会导致图片裁剪、信箱模式、分辨率低和空间未得到充分利用，尤其是在横屏模式下。为了充分利用平板电脑和可折叠设备的各项功能，并在这些设备类型上提供优化的用户体验，JioHotstar 专注于改进界面，以确保在更广泛的设备上实现最佳的布局灵活性、图像渲染和导航。

他们做了什么

为了在大屏设备上提供更好的观看体验，JioHotstar 主动增强了其应用，加入了 WindowSizeClass 并针对紧凑、中等和扩展宽度创建了优化布局。这样一来，应用便可根据各种屏幕尺寸和宽高比调整用户界面，从而确保在不同设备上提供一致且美观的用户界面。

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 层级要求。该团队利用自适应应用指南，使用示例、Codelab、Cookbook 和文档来采纳这些建议。

为了进一步改善用户体验，JioHotstar 在视频发现页面上将触摸目标大小增加到建议的 48dp，确保在大屏设备上实现无障碍功能。其视频详情页面现在具有自适应功能，可根据屏幕尺寸和方向进行调整。他们不再只是简单地缩放图片，而是利用窗口大小类实时检测窗口大小和密度，并为每种设备规格加载最合适的主打图片，从而提高视觉保真度。导航功能也得到了改进，布局可适应不同的屏幕尺寸。

现在，用户可以在大屏设备上观看 JioHotstar 中的喜爱内容，并获得经过改进和高度优化的观看体验。

“通过 Google 达到第 1 层级大屏设备应用状态是一个里程碑，体现了我们共同愿景的强大实力。在 JioHotstar，我们一直认为，针对大屏设备进行优化不仅仅是适应性问题，更重要的是提升观众的观看体验，因为他们正迅速接受可折叠设备、平板电脑和联网电视。

借助 Google 的 Jetpack 库和指南，我们将自己在内容消费方面的真知灼见与他们在平台创新方面的专业知识相结合。通过此次合作，两个团队得以突破界限、弥补不足，并共同打造出在各种屏幕尺寸下都能提供顺畅沉浸式体验的产品。

我们很荣幸能共同为数百万用户带来这种增强的体验，并为印度乃至全球的流媒体体验树立新的标杆。”
- Sonu Sanjeev，高级软件开发工程师

作者：

继续阅读