Приложения, использующие адаптивные макеты и автоматически адаптирующиеся к разным размерам экрана, предлагают пользователям дополнительную ценность и обеспечивают более продуктивный и увлекательный пользовательский опыт.
Адаптивные макеты динамически форматируют и позиционируют элементы, такие как кнопки, текстовые поля и диалоги, для оптимального пользовательского опыта. Автоматически предлагайте пользователям вашего приложения дополнительную ценность на больших экранах, используя методы адаптивного дизайна. Будь то больше текста, видимого с первого взгляда, больше действий на экране или более крупные, более доступные цели нажатия, адаптивные методы обеспечивают улучшенный опыт для пользователей больших экранов.
Добавьте ценности с помощью адаптивного дизайна
Делать
- Используйте библиотеку компонентов M3 Compose, которая имеет встроенное адаптивное поведение.
- Используйте адаптивные макеты, которые автоматически и плавно подстраиваются под доступное пространство на экранах разных размеров.
Не
- Растягивайте элементы пользовательского интерфейса, включая текстовые поля, кнопки, диалоговые окна, чтобы заполнить дополнительное пространство.
- Увеличьте размер шрифтов, если только они не предназначены в первую очередь для графических целей.
Создавайте адаптивные приложения и плитки для Wear OS
Адаптивные пользовательские интерфейсы растягиваются и изменяются, чтобы максимально эффективно использовать все доступное пространство экрана, независимо от размера экрана, на котором они отображаются.
При проектировании адаптивных макетов на круглом экране прокручиваемые и непрокручиваемые представления имеют уникальные требования для поддержания масштабирования элементов пользовательского интерфейса и сохранения сбалансированной компоновки и композиции. Для прокручиваемых представлений используйте проценты для определения всех верхних, нижних и боковых полей, чтобы избежать обрезки и обеспечить пропорциональное масштабирование элементов. Для непрокручиваемых представлений используйте проценты и вертикальные ограничения для всех полей. Таким образом, основной контент в середине может растягиваться, чтобы заполнить доступную область.
Прокрутка просмотров
Все верхние, нижние и боковые поля должны быть определены в процентах, чтобы избежать обрезки и обеспечить пропорциональное масштабирование элементов.
Непрокручиваемые представления
Все поля должны быть определены в процентах, а вертикальные ограничения должны быть определены таким образом, чтобы основное содержимое в середине могло растянуться и заполнить доступную область.
Примеры
На следующих изображениях показаны примеры адаптивных и оптимизированных приложений.
Кнопки, прилегающие к краям
Список карт
Список переключателей и кнопок
Плитка с карточками изображений
Список карточек с изображениями
Плитка с графиком
