Эта страница переведена с помощью Cloud Translation API.

Основы макета

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

Вынос

Соблюдайте безопасные области устройства, которые включают в себя такие части пользовательского интерфейса, как вырезы дисплея, вставки по краям, боковые дисплеи, программные клавиатуры и системные панели.
Что нужно сделать: предоставить пользователям гибкую раскладку для взаимодействия с клавиатурой.
Видео 1. Обеспечение гибкого макета для взаимодействия пользователей

Держите важные взаимодействия, такие как основная навигация, в доступной области экрана.
Рисунок 1. Плавающие кнопки действий (FAB) обеспечивают видимую и доступную точку взаимодействия.
Используйте сдерживание для группировки связанного контента, чтобы направлять пользователя через контент и действия.
Рисунок 2. Карточки, использующие явное сдерживание для группировки контента по связанным действиям.
Обеспечьте согласованное соответствие между похожим контентом и элементами пользовательского интерфейса.
Не делайте этого: нарушайте читаемость из-за непоследовательного расположения одинаковых элементов, из-за чего дизайн может выглядеть беспорядочным.
Что нужно сделать: Установите одинаковое расстояние между одинаковыми элементами.
Рисунок 3. Не нарушайте читаемость
Не придерживайтесь портретной ориентации или идеализированного макета: рассмотрите различные соотношения сторон, классы размеров и разрешения, с которыми могут столкнуться пользователи.
Не перегружайте пользователя слишком большим количеством действий за просмотр.
При создании пользовательских макетов отмечайте, как контент должен располагаться в макете, используя выравнивание, ограничения или условия гравитации. Укажите, как изображения должны реагировать на контейнер для правильного отображения.

Части типичного экрана приложения Android

Большинство приложений Android состоят из областей, называемых системными панелями , областью навигации и телом.

Системные панели

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

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

Область тела

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

Объявите WindowCompat.setDecorFitsSystemWindows(window, false) для вставок от края до края.

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

Состав и структура контента

Создайте гибкий поток и ритм с помощью структуры и методов сдерживания вашего контента.

Базовая структура: используйте поля и столбцы для визуальных ограждений.

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

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

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

**Рис. 8.** Поля ( 1 ) и вставка системной панели ( 2 ).

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

**Рисунок 9.** Экраны мобильных устройств часто делятся на четыре столбца.

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

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

Видео 2: Начинаем добавлять текст в структуру макета. Поля защищают содержимое от краев экрана. Колонны обеспечивают единообразную структуру интервалов и выравнивания.

Используйте сдерживание для визуальной группировки элементов.

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

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

**Рисунок 10.** Разделение контента на две большие группы: заголовок и основной текст.

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

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

**Рисунок 11:** Пример неявного сдерживания

Позиционирование контента

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

**Рис. 12.** Пример компоновки, показывающий границы локализации и положение элементов.

Гравитация — это стандарт размещения объекта в потенциально большем контейнере для конкретных случаев использования. На следующем рисунке показаны примеры расположения объектов в начале и центре ( 1 ), сверху и по центру по горизонтали ( 2 ), внизу слева ( 3 ), а также в конце и справа ( 1 ).

**Рисунок 13.** Расположение гравитации дочернего контента и родительских представлений.

Масштабирование

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

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

**Рис. 14.** Изображение с обрезкой по центру, благодаря которому растение располагается по центру контейнера независимо от размера устройства.

Содержимое, не отмеченное нотациями, может выглядеть иначе, чем вы ожидаете или хотите.

**Рисунок 15.** Необозначенный контент может появиться неожиданным образом.

Закрепленный контент

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

Выравнивание

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

**Рисунок 16.** Не нарушайте читабельность

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

Что нужно сделать: Установите одинаковое расстояние между одинаковыми элементами.

Компоновка компонентов

Компоненты Material 3 предоставляют свои собственные конфигурации и состояния для взаимодействия и контента.

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

Макеты и шаблоны навигации

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

Сочетания макета и навигации

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

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

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

Вкладки «Материал 3» и нижняя панель приложения — это вторичные шаблоны навигации, которые можно использовать в качестве дополнения к основной навигации или для отображения в дочерних представлениях.

**Рис. 18.** Вкладки действуют как вторичный уровень навигации для группировки одноуровневого контента (вторичный).

Действия с макетом

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

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

**Рис. 19.** Плавающая кнопка действия (FAB), позволяющая пользователю быстро добавлять растения в галерею растений.

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

**Рис. 20.** Действие оповещения на верхней панели при отображении подробностей (слева) и значок переполнения в строке элемента списка (справа).

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

Канонические макеты

Используйте канонические макеты в качестве отправной точки, готовые к использованию композиции, которые помогают адаптировать макеты к распространенным сценариям использования и размерам экрана. Эти макеты эстетичны и функциональны и основаны на руководстве Материала 3 .

Платформа Android включает специализированные компоненты, которые делают реализацию макетов простой и надежной с использованием API-интерфейсов Jetpack Compose или API-интерфейсов представлений .

Подробный макет списка

Макет с подробностями списка позволяет пользователям просматривать списки элементов, которые имеют описательную, пояснительную или другую дополнительную информацию — сведения об элементе. На экранах компактных размеров виден только список или подробный вид. Отображая коллекцию контента в виде строк, списки составляют наиболее распространенную форму макетов для приложений. List-detail идеально подходит для приложений обмена сообщениями, менеджеров контактов, файловых браузеров или любого приложения, где контент может быть организован в виде списка элементов, раскрывающих дополнительную информацию.

Контент может быть статическим или динамическим.

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

Файл Now in Android Figma содержит несколько примеров макетов. В следующем примере показана одномерная коллекция контента.

**Рисунок 22.** Одномерная коллекция контента.

Изучите списки материалов 3, чтобы получить дополнительные рекомендации по проектированию компонентов и спецификаций списков.

Макет ленты

**Рис. 23.** Фотогалерея в виде сетки — распространенный формат ленты.

Макет ленты упорядочивает эквивалентные элементы контента в настраиваемой сетке для быстрого и удобного просмотра большого объема контента. (См. Рекомендации по использованию карточек в коллекции в Материале 3. ) Каналы могут иметь конфигурацию на основе списков или сеток на компактных дисплеях, обычно в виде карточек или плиток. Контент может быть динамическим, то есть он «подается» из динамического внешнего источника, такого как API.

Макет сетки состоит из строк и столбцов, составленных по подразумеваемым или явным принципам включения. (Дополнительную информацию см. в разделе «Содержание» на этой странице.) Разметку сетки можно применять более жестко или располагать в шахматном порядке, чтобы варьировать строки и столбцы. Оба должны иметь последовательное применение интервалов и логики, чтобы не вводить пользователей в заблуждение. Изучите рекомендации Материала 3 по созданию каналов .

Вы можете реализовать макет канала в Compose с помощью ленивых списков или ленивых сеток или в представлениях с помощью RecyclerView или CardView .

Поддержка макета панели

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

**Рисунок 24.** Нижние листы могут выступать в качестве вспомогательного контента для основного представления.

Узнайте о направляющих M3 для нижних листов .

Относительные макеты

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

Макеты также могут использовать комбинацию типов макетов. Например, вы можете объединить карусель или горизонтальную прокрутку с вертикальными карточками. Или вы можете представить собственную диаграмму с данными вертикального списка.

Вы можете представить контент в виде прокручиваемых строк или столбцов с помощью ленивых строк и ленивых столбцов.

Узнайте больше об основах компоновки компоновки и о том, что представляет собой составной объект.

**Рисунок 25.** Макеты могут содержать комбинацию группировок, списков и сеток.

Аутентификация — это распространенная относительная схема, как показано на следующем рисунке.

**Рисунок 26.** Аутентификация как стандартная схема.

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

**Рис. 27.** Полноэкранный макет, используемый в режиме погружения.

Если вы работаете с представлениями вместо компоновки, вы можете использовать ConstraintLayout для компоновки представлений в соответствии с отношениями между одноуровневыми представлениями и родительским макетом, что позволяет создавать большие и сложные макеты. ConstraintLayout позволяет создавать полностью путем перетаскивания вместо редактирования XML с помощью редактора макета. Узнайте больше о создании пользовательского интерфейса с помощью Layout Editor .

Адаптировать макеты

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

Рекомендации по проектированию адаптации макетов к расширенным размерам экрана см. в руководстве разработчика «Поддержка экранов разных размеров» в разделе «Компоновка» и на странице «Применение макета M3». Вы также можете просмотреть каноническую галерею больших экранов Android, чтобы получить вдохновение и реализовать макеты больших экранов.

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

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

Дополнительную информацию о макетах см. на странице «Ознакомление с макетом Material Design 3 (M3)» .

Веб-просмотры

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

Вынос

Соблюдайте безопасные области устройства, которые включают в себя такие части пользовательского интерфейса, как вырезы дисплея, вставки по краям, боковые дисплеи, программные клавиатуры и системные панели.
Что нужно сделать: предоставить пользователям гибкую раскладку для взаимодействия с клавиатурой.
Видео 1. Обеспечение гибкого макета для взаимодействия пользователей

Держите важные взаимодействия, такие как основная навигация, в доступной области экрана.
Рисунок 1. Плавающие кнопки действий (FAB) обеспечивают видимую и доступную точку взаимодействия.
Используйте сдерживание для группировки связанного контента, чтобы направлять пользователя через контент и действия.
Рисунок 2. Карточки, использующие явное сдерживание для группировки контента по связанным действиям.
Обеспечьте согласованное соответствие между похожим контентом и элементами пользовательского интерфейса.
Не делайте этого: нарушайте читаемость из-за непоследовательного расположения одинаковых элементов, из-за чего дизайн может выглядеть бессистемным.
Что нужно сделать: Установите одинаковое расстояние между одинаковыми элементами.
Рисунок 3. Не нарушайте читаемость
Не придерживайтесь портретной ориентации или идеализированного макета: рассмотрите различные соотношения сторон, классы размеров и разрешения, с которыми могут столкнуться пользователи.
Не перегружайте пользователя слишком большим количеством действий за просмотр.
При создании пользовательских макетов отмечайте, как контент должен располагаться в макете, используя выравнивание, ограничения или условия гравитации. Укажите, как изображения должны реагировать на контейнер для правильного отображения.