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

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

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

Конкурс JioHotstar на большие экраны

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

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

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

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

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

Вместе мы гордимся тем, что предоставляем этот улучшенный опыт миллионам пользователей и устанавливаем новые стандарты того, как Индия и весь мир воспринимают потоковое вещание.
- Сону Санджив, старший инженер-разработчик программного обеспечения