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

Иллюстрация основных принципов создания главного макета

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

Начать

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

Выводы

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

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

Подробнее о том, как адаптировать макет и какие макеты считаются каноническими…

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

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

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

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

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

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

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

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

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

Не предлагайте пользователю слишком много действий за один просмотр.

Как добавить примечания к спецификациям макета

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