Большой экран — большие возможности: адаптация приложений под складные устройства

Для удобства пользователей в Android добавили панель задач, аналогичную настольной ОС, такой как Windows или macOS — узкая горизонтальная панель внизу экрана, на которую можно поместить ярлыки. Её особенность в том, что она остается на виду, когда пользователь открывает приложения или панели настроек.

Благодаря этому реализуется функция многозадачности: если запустить первое приложение, а затем перетащить значок второго приложения с панели задач на экран, включится режим разделения экрана. Можно менять размеры экранов, перетаскивая разделитель или же «смахнуть вверх» и вернуться домой.

Это позволяет смотреть видео на YouTube и одновременно читать новости или искать жильё в браузере Chrome для предстоящей поездки и сразу же выбирать подходящее местоположение на Google-картах.

Новая панель задач упрощает запуск и переключение приложений на лету. Пользователи могут открыть или скрыть эту панель в любой момент долгим нажатием. Но это добавляет и новые заботы разработчикам, так как нужно проверять, как отображается приложение в режиме разделённого экрана.

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

Разобравшись с тем, что нужно пользователям, можно переходить непосредственно к адаптации под большие экраны. Чаще всего используют два подхода:
1. Расширение и реорганизация.
2. Комбинирование контента.

Первый вариант предусматривает расширение уже созданных layout'ов экранов под появившееся пространство и реорганизацию содержимого. Например, можно разделить содержимое на несколько колонок или изменить компоновку изображений. Или же просто добавить воздуха, увеличив отступы.

Второй вариант — это объединение контента. Пользователь может видеть несколько экранов разной иерархии: например, экран списка чатов и самих переписок.

При выборе подхода стоит учитывать те основополагающие принципы, о которых мы говорили ранее. Обеспечит ли комфорт, функциональность, продуктивность и погружение данный способ? При этом подходы можно комбинировать между собой на разных этапах пользовательского сценария. К примеру, при открытии приложения использовать комбинированный подход, а когда идёт переход к более специализированным функциям, использовать реорганизацию контента, оставаясь на одном уровне иерархии приложения.

Выбрав подход, важно проанализировать блоки интерфейса, которые помогут правильно спроектировать экран приложения.

В качестве примера приведём экран разработанного нами приложения-трекера SAU app, которое состоит из трёх основных областей:

- body, которая используется для отображения основной части содержимого приложения;

- app bar содержит основные кнопки управления и действия, относящиеся к содержимому в области body;

- navigation, в котором отображаются компоненты навигации, такие как Navigation Drawer или Navigation Rail, позволяющие пользователю переключаться между экранами в приложении.

Так как области экрана меняются в зависимости от размера экрана, компоненты со схожим функционалом могут меняться. Например, bottom navigation bar можно заменить на navigation rail на маленьком планшете или на navigation drawer на большом. На сайте material.io представлены гайдлайны по адаптивному дизайну, где указаны группы компонентов, которые могут взаимозаменяться в зависимости от устройств.

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

При этом не всегда нужно изобретать велосипед, достаточно использовать уже готовые layout'ы, представляющие частые юзкейсы для организации области body:

- List detail. Этот layout применяется довольно часто и предусматривает отображение списка каких-то элементов (обычно на левой части) и детальную информацию выбранного элемента (на правой части).

- Supporting panel. Этот layout отличается от предыдущего тем, что панели функционально разделены и содержат не связанную напрямую информацию и действие. Примерами таких layout'ов являются редактирование документа и панель комментариев или видео и рекомендации к нему.

- Feed. Это привычный layout для новостных и социальных приложений. Показывает различные фрагменты контента в виде карточек разных размеров и списков. Такая компоновка призвана максимально завлечь пользователя и предоставить ему нужную информацию для выбора.

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

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

Ну, а мы, команда CleverPumpkin, готовы в этом помочь :)