Появление складных девайсов, занявших нишу между обычными смартфонами и планшетами заставило пересмотреть сценарии взаимодействия с приложениями и учитывать новые возможности мобильных устройств. Представляем обзор изменений, анонсированных на Android Developer Summit 2021, от Android Lead Developer'а Анатолия Шулипова и дизайнера Федора Миронова.

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

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

Новый формат и новые сценарии использования привели к тому, что производителям и разработчикам потребовалось пересмотреть работу операционной системы и адаптировать дизайн приложений.  Google на Android Developer Summit 2021 представил множество изменений, позволяющих создавать красивые приложения и интерфейсы для больших экранов с помощью Material Design для Android-приложений.

Необходимость адаптации

Но действительно ли необходимо оптимизировать приложения? Почему нельзя использовать старый способ и просто растянуть мобильную версию? 

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

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

Гибкая перестройка

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

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

Важные приложения всегда под рукой

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

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

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

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

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

Приложения создаются для пользователей

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

Дизайнер будущего приложения должен найти ответы на следующие вопросы:

• Как меняется контекст? В каких ситуациях пользователь использует смартфон в сложенном состоянии, в каких в развёрнутом?

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

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

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

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

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

3. Продуктивность. Большие экраны переносят многозадачность на передний план. Дополнительное пространство позволяет пользователям выполнять одновременно более одной задачи.

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

Как адаптировать приложение

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

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, готовы в этом помочь :)