Модальные окна — стандартный элемент интерфейса.
Они располагаются поверх главного окна и блокируют работу пользователя с приложением, пока он не выполнит то или иное действие.
Но если на больших экранах такое решение довольно эффективно, на мобильных устройствах использование модальных окон ограничено. В статье вы найдете один из вариантов реализации подобных элементов. Дайте шанс этому подходу, когда будете проектировать свое следующее приложение!
Как вы разрабатываете модальные окна для мобильных устройств? Эффективен ли ваш подход? Главный принцип: модальные окна на экране компьютера не должны выглядеть так же, как на мобильных устройствах.
Первые открываются в центре экрана с прозрачным фоном. Пользователи могут видеть сквозь фон родительский экран, так как окно накладывается поверх него. В окне достаточно места для отображения контента, а кнопки легко нажимать.
Такое расположение отлично подходит для большого экрана, но на мобильных устройствах вызывает определенные проблемы: речь идет о расстоянии между элементами и размещении контента. Кроме того, усложняется взаимодействие с кнопками.
Отступы слева и справа сокращают доступное пространство. В результате модальное окно получается слишком компактным, что ограничивает возможности отображения контента. Чем более плотно он расположен, тем сложнее его сканировать.
Поскольку окно зафиксировано в центре экрана, пользователю трудно дотянуться до кнопок большим пальцем, когда он держит телефон одной рукой. Возможно, ему придется использовать обе руки или переместить пальцы повыше, чтобы нажать на нужную кнопку.
Всплывающие модальные окна
Вместо стандартных модальных окон на мобильных устройствах следует использовать всплывающие модальные окна. Они выезжают снизу и занимают всю ширину экрана. В результате остается максимум свободного пространства для размещения контента.
Прозрачный фон теперь расположен сверху. Всплывающие модальные окна могут иметь любую высоту, главное — чтобы фон оставался видимым, хотя бы частично. Если в окне необходимо отобразить большой объем информации, спроектируйте контентную область с возможностью прокрутки. Однако обязательно зафиксируйте хедер, чтобы пользователи могли покинуть окно в любой момент.
Хедер — это верхняя часть всплывающего модального окна. Он включает заголовок, кнопку “Закрыть” и специальный ползунок. Последний расположен по центру сверху — пользователи могут потянуть за него, чтобы смахнуть окно с экрана, вместо того, чтобы нажимать на крестик. Такое взаимодействие предоставляет им больше возможностей для перемещения между экранами.
Обязательно используйте линии, чтобы отделить хедер от остального контента. Кроме того, убедитесь, что оставили достаточно большие отступы между контентом и границами модального окна.
Если в вашем мобильном приложении есть модальные окна, важно сделать их максимально удобными и простыми. Откажитесь от стандартных модальных окон в пользу всплывающих, чтобы пользователи могли взаимодействовать с интерфейсом быстрее и без лишних усилий.
.webp)
