案例研究

超越智能手机：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 中自己喜欢的内容，并获得经过改进和高度优化的观看体验。

“达到第 1 层级的大屏设备应用状态是 JioHotstar 的一个里程碑，体现了我们共同愿景的实力。在 JioHotstar，我们始终认为，针对大屏设备进行优化不仅仅是适应性，而是要为快速接受可折叠设备、平板电脑和联网电视的受众群体提升观看体验。

利用 Google 的 Jetpack 库和指南，我们可以将自己对内容消费的洞见与他们在平台创新方面的专业知识相结合。这种合作使双方团队能够突破界限、弥补差距，并在各种屏幕尺寸上共同打造流畅的沉浸式体验。

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

作者：

继续阅读