Site icon AppTractor

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

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

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

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

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

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

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

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

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

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

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

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

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

Лента

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

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

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

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

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

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

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

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

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

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

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

Две страницы

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

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

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

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

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

Источник

Exit mobile version