Рекомендации по адаптивному дизайну

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

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

Адаптация к размерам экрана

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

Использование контейнеров с автоматической компоновкой

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

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

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

Используйте адаптивные макеты

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

Использование формул для динамического макета

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

План для различных устройств

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

Практическая реализация

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

Ресурсы

Следующий шаг

Читабельность кода

  • Last updated on