Не только смартфоны: как JioHotstar оптимизирует UX для складных устройств и планшетов

Не только телефоны: как JioHotstar создали адаптивный интерфейс

JioHotstar – ведущая стриминговая платформа в Индии с пользовательской базой более 400 миллионов человек. Обширная библиотека контента включает более 330 000 часов видео по запросу и прямые трансляции крупных спортивных событий.

Чтобы обеспечить высокое качество обслуживания для своей огромной аудитории, JioHotstar оптимизировала приложение для складных устройств и планшетов. Для этого они следовали рекомендациям Google по адаптивным приложениям и использовали такие ресурсы, как примеры, практические работы, руководства и документация. Это помогло им создать удобный и привлекательный интерфейс для экранов всех размеров.

Проблема 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. Команда использовала рекомендации по созданию адаптивных приложений, а также примеры, практические работы, руководства и документацию.

Чтобы сделать приложение ещё удобнее, разработчики JioHotstar увеличили области прикосновения на страницах поиска видео до рекомендуемых 48 dp. Это позволило улучшить доступность на устройствах с большим экраном. Страница сведений о видео стала адаптивной и теперь подстраивается под размер и ориентацию экрана. Они не просто масштабировали изображения, а использовали классы размеров окон, чтобы определять размер и плотность окон в реальном времени и загружать наиболее подходящее главное изображение для каждого форм-фактора, что помогло повысить точность визуализации. Также была улучшена навигация, а макеты стали адаптироваться к разным размерам экрана.

Теперь пользователи могут смотреть любимый контент из JioHotstar на больших экранах с улучшенным и оптимизированным качеством.

"Получение статуса приложения первого уровня для больших экранов от Google – это важная веха, которая отражает силу нашего общего видения. В JioHotstar мы всегда считали, что оптимизация для устройств с большими экранами – это не просто адаптация, а улучшение качества просмотра для аудитории, которая быстро осваивает складные телефоны, планшеты и подключенные телевизоры.

Использование библиотек и руководств Google Jetpack позволило нам объединить наши знания о потреблении контента с их опытом в области инноваций платформ. Это сотрудничество позволило обеим командам расширить границы, устранить пробелы и совместно создать удобный и захватывающий интерфейс для экранов любого размера.

- Сону Санджив (Sonu Sanjeev), старший инженер по разработке ПО