На Android Developer Summit 2022 Google представил «Галерею больших экранов», которая предоставляет рекомендации по компоновке для приложений для планшетов и складных устройств по категориям: Социальные сети и общение, Медиа, Продуктивность, Покупки и Чтение.
По словам Google, эти «канонические макеты для больших экранов — это проверенные, универсальные макеты приложений, которые обеспечивают оптимальный пользовательский интерфейс на устройствах с большими экранами» (планшеты, складные устройства и ChromeOS), а также на телефонах. Они основаны на рекомендациях Material Design и являются адаптивными по своей природе. Цель — быть «эстетичными и функциональными».
Канонические макеты — это композиции для больших экранов, служащие отправной точкой для дизайна и реализации.
Существует три макета для организации общих элементов приложений для планшетов/складных устройств:
- Представление списка-детали: «Многие макеты могут быть установлены на основе отношения списка и представления детали. Отношение устанавливается пространственно, занимая левую сторону экрана для отображения списка, а правую — для показа деталей списка.»
- Вспомогательная панель: «Макет вспомогательной панели — это метод расширения экрана. Макеты вспомогательной панели отличаются от макетов представления списка-детали тем, что основные и второстепенные фокусные точки считаются одинаково важными и взаимосвязанными одновременно.»
- Лента: «Ленты — это распространенный макет для новостей и социального контента. Ленты используют сетчатую композицию для обеспечения просмотра и обнаружения контента.»
- «На складных устройствах, однако, ленту можно оформить как более иммерсивное представление благодаря большему размеру экрана.»
Приложения для социальных сетей и общения
- Используйте представление списка-детали для:
- «Список разговоров рядом с деталями разговора»
- «подборка видео, которые пользователи могут просматривать и выбирать, воспроизводить и ставить на паузу — все на одном экране»
- Используйте вспомогательную панель для:
- Инструменты: Например, редактирование изображений
- Комментарии
- Используйте ленту для:
- «коллаж из постов в гибком формате сетки. Используйте размер и положение, чтобы создавать группы или привлекать внимание к prominent постам.»
- Дифференцированные возможности:
- Настольный режим: Google рекомендует поддерживать режим Tabletop без рук на складных устройствах, когда экран открыт под углом 90 градусов.
- Перетаскивание: «удобные перетаскивания — внутри приложений и, в режиме многозадачности, между приложениями»
- Картинка в картинке
- Многозадачность: «Исследуйте, одновременно с написанием, ищите во время чата, планируйте во время видеозвонка.»
Медиа
- Используйте ленту для:
- Поиск медиа: «Создайте насыщенную медиаленту, которая позволит пользователям находить новый контент, новых исполнителей, новые рекомендации и обзоры.»
- Просмотр медиа: «Создайте медиа-киоск, который позволит пользователям просматривать, сортировать, фильтровать и выбирать свои любимые фильмы, музыку или телешоу из обширной медиаколлекции на большом экране.»
- Используйте вспомогательную панель для:
- Медиа+: «Улучшите просмотр или прослушивание медиа на расширенном пространстве больших экранов с помощью прокручиваемого списка похожих названий, опубликованных обзоров или дополнительных работ тех же исполнителей или актеров.»
- Иммерсивный режим: «Встройте вспомогательную панель для контекста, релевантности или справки, сохраняя при этом иммерсивный опыт просмотра.»
- Используйте представление списка-детали для:
- Простая навигация: «Создайте интерактивный медиабраузер, чтобы сделать поиск медиа продуктивным и увлекательным. Позвольте пользователям просматривать во время просмотра или прослушивания.»
- Дифференцированные возможности:
- Настольный режим: «Разместите воспроизводимый медиаконтент выше основной области, а элементы управления и дополнительный контент — ниже, для просмотра или прослушивания без рук.»
- Картинка в картинке
- Многозадачность: «Позвольте пользователям работать в многозадачном режиме с двумя приложениями бок о бок, чтобы просматривать коллекцию фильмов, одновременно проверяя актерский состав и персонажей, или слушать музыку, одновременно ища обложки или последние новости и обзоры музыки.»
Продуктивность
- Используйте ленту для:
- Просмотр и фильтрация файлов
- Используйте представление списка-детали для:
- Элементы и обзоры
- Используйте вспомогательную панель для:
- Инструменты и настройки
- Обзоры и комментарии
- Дифференцированные возможности:
- Многозадачность: Посмотрите Google Docs/Sheets/Slides в качестве примера открытия нескольких экземпляров документов
- Перетаскивание: Более быстрый обмен (как реализовано в приложениях Workspace)
- Настольный режим: «Создавайте макеты для настольного режима, которые позволяют пользователям отвлечься от того, что они делают, и сосредоточиться на важном — презентации коллеги, видеоконференции — при этом имея легкий доступ к другому контенту и элементам управления приложениями без рук.»
Покупки
- Используйте представление списка-детали для:
- Характеристики продукта
- Используйте ленту для:
- Каталоги и акции
- Используйте вспомогательную панель для:
- Поддержка продаж: «вспомогательные функции, такие как фильтры продуктов для целевого поиска или контрольный список вариантов продукта для ненавязчивого повышения продаж.»
- Дифференцированные возможности:
- Многозадачность: «позволяет покупателям просматривать товары в одном окне, одновременно изучая рейтинги, отзывы и отчеты о продуктах в другом»
- Перетаскивание: «Сделайте покупки быстрыми и легкими с помощью корзины с функцией перетаскивания. Сохраняйте потенциальные покупки в списке желаний с функцией перетаскивания.»
Чтение
- Используйте иммерсивный режим для:
- Читаемость в полноэкранном режиме: «Большие экраны в иммерсивном режиме оптимизируют читаемость за счет длинных строк и обильного количества пустого пространства для приятного и комфортного чтения.»
- Используйте ленту для:
- Списки книг и покупки: «Позвольте покупателям книг сканировать ряд за рядом последние издания в большой многоколоночной сетке, которая демонстрирует бестселлеры или лучшие предложения с выделенным размером и положением.»
- Что внутри: «Сделайте просмотр книг информативным и увлекательным, включив синопсисы или текстовые фрагменты для выбранных названий в списки нескольких книг.»
- Используйте вспомогательную панель для:
- Дополнительный контент: «Дополните основной контент вашего приложения поучительной, познавательной информацией во вспомогательной панели.»
- Инструменты разметки
- Дифференцированные возможности:
- Многозадачность: Книга на одной стороне и заметки на другой
- Книжная поза: «Воссоздайте опыт чтения реальной книги с двухстраничным макетом на большом складном экране, открытом как переплетенная книга.»
- Перетаскивание: Для более легкого копирования в приложения для заметок/документов или обмена сообщениями