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

Иллюстрация основ макета «Герой»

A layout defines the visual structure for a user to interface with your app, such as in a composable. Android provides a range of libraries, canonical starting points, and techniques to display and position content.

Начать

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

Основные выводы

Ориентация макета

Consider different aspect ratios, size classes, and resolutions that users might encounter. Verify that your app provides a good user experience on both landscape and portrait orientation as well as different screen sizes and form factors.

Для получения более подробной информации см. рекомендации по адаптации макета и канонических макетов .

Безопасные зоны устройства

Honor device safe areas, which includes parts of the UI such as display cutouts, edge-to-edge insets, edge displays, software keyboards, and system bars. Provide a flexible layout for users to interact with the keyboard.

Сфокусируйте ввод данных пользователем. Если клавиатура присутствует, переместите поле ввода в фокусное состояние или рассмотрите возможность привязки текстового поля к клавиатуре.
Hide inputs. Even on smaller screens, the user might not know or be able to scroll the screen.
Эргономика взаимодействия

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

Группы сдерживания

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

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

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

Обеспечьте одинаковое расстояние между однородными элементами.
Disrupt readability by inconsistently spacing like elements, which can make designs appear haphazard.
Важные взаимодействия

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

Технические характеристики макета для нотации

When building custom layouts, notate how content should sit within the layout using alignment, constraints, or gravity terms. Include how images should respond to their container to display properly.