案例研究

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

阅读用时：3 分钟
查看 Charles Munger 的个人资料
Prateek Batra 开发者关系工程师，Android 自适应应用

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

JioHotstar 是印度领先的在线媒体平台，服务超过 4 亿用户。该平台拥有庞大的内容库，包含超过 33 万小时的视频点播 (VOD) 内容，并实时直播重大体育赛事，运营规模十分庞大。

为了确保为广大观众提供优质体验，JioHotstar 针对可折叠设备和平板电脑优化了其应用，从而提升了观看体验。为此，他们遵循了 Google 的自适应应用指南，并利用示例、Codelab、指南和文档等资源，在各种显示尺寸上打造了一致、流畅且引人入胜的体验。

JioHotstar 的大屏挑战

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

他们需要采取的行动

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

策略

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

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 层级要求。该团队利用自适应应用指南，并参考示例、Codelab、实战宝典和文档，采纳了这些建议。

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

现在，用户可以在大屏设备上观看 JioHotstar 中自己喜爱的内容，享受更出色、更优化的观看体验。

“与 Google 携手达成第 1 层级大屏设备应用标准，是我们共同愿景的有力见证。在 JioHotstar，我们始终坚信，针对大屏设备进行优化不仅仅是为了适应屏幕尺寸，更是为了提升观众的观看体验，因为他们正在迅速拥抱可折叠设备、平板电脑和联网电视。

借助 Google 的 Jetpack 库和指南，我们将自身对内容消费的洞察与 Google 在平台创新方面的专业知识相结合。通过此次合作，双方团队得以突破界限、弥补不足，并共同打造出在各种屏幕尺寸上都能顺畅运行的沉浸式体验。

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

作者：
继续阅读