Шаблоны проектирования для больших экранов

На первом Android Dev Summit в 2022 году Google анонсировал обновленное руководство по дизайну для больших экранов, галерею и советы по разработке для складных устройств. Эти обновления включали список канонических макетов, которые дополняют шаблоны dual-screen дизайна, представленные в документации для разработчиков Surface Duo. Материальный дизайн также был обновлен, поэтому дизайнеры, стремящиеся создавать новые возможности, выходящие за рамки маленького экрана телефона, получили большую поддержку.

Эта статья поможет дизайнерам и разработчикам, стремящимся создавать приложения как складных устройств, так и для устройств с большим экраном, объединить оба источника рекомендаций для создания адаптивного пользовательского интерфейса. Для разработчиков, работающих с кроссплатформенными инструментами, такими как Flutter, Xamarin, .NET MAUI или React Native, примеры реализации доступны на сайте разработчиков Surface Duo.

Список-детали

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

Этот макет может адаптироваться к меньшим и большим экранам легко понятными способами:

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

Подробное каноническое руководство для Android содержит советы по разработке с помощью различных инструментов:

• Compose с помощью TwoPane из библиотеки Accompanist
• View с использованием SlidingPaneLayout
• Activity Embedding из Jetpack Window Manager

Лучшие практики использования этого шаблона включены в Surface Duo Design Kit, а примеры доступны для Views и Compose и других платформ.

Вспомогательная панель

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

Чтобы адаптироваться к другим размерам экрана:

• На телефонах дополнительный вид может находиться под основным видом или внутри bottom sheet. В зависимости от доступного места вторичное представление также может складываться (с подмножеством доступной информации или элементов управления) с возможностями пользовательского интерфейса для отображения полного представления.
• На планшетах и ​​настольных компьютерах дополнительный вид обычно меньше основного и может располагаться вдоль правого или нижнего края. Вторичное представление может изменять размер или скрываться, в зависимости от варианта использования.

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

Руководство по поддержке вспомогательной панели в Android содержит советы по созданию с помощью View или Compose.

Лента

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

Фид может адаптироваться к складному устройству по-разному:

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

Другие шаблоны для двух экранов

В наборе Surface Duo Design Kit представлены шаблоны расширенного холста, двойного представления и двухстраничного дизайна.

Расширенный canvas

Шаблон расширенного холста отлично подходит для таких случаев, как карты, электронные таблицы или поверхности для рисования. Ключевая адаптация заключается в том, чтобы любые элементы фокуса на холсте (например, «текущее местоположение» на карте) или любые палитры или интерактивные элементы не были скрыты сгибом.

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

Двойное представление

Двойное представление определяется как «отображение двух представлений одних и тех же данных» и обычно используется одним из двух способов:

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

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

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

Две страницы

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

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

Отзывы и ресурсы

В GitHub Android есть коллекция примеров их канонических макетов. У команды Surface Duo есть документация и примеры для всех этих пользовательских интерфейсов, написанные с помощью View и Jetpack Compose, а также с различными кроссплатформенными инструментами, включая Flutter, React Native, Xamarin и .NET MAUI.

Наконец, присоединяйтесь к нашей трансляции для разработчиков с двумя экранами в 11:00 (по тихоокеанскому времени) каждую пятницу — отметьте ее в своем календаре и просмотрите архивы на YouTube.

Источник