Гайдлайн по iOS на русском. Часть 6 — Архитектура: Модальность
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.
Модальность в рамках iOS дизайна это метод с помощью которого ты можешь представить контент в так сказать промежуточном виде, который отделен от предыдущего контекста пользователя и требует явного действия для выхода из этого состояния. Например такого как закрыть модальное окно или совершить какое-либо ключевое действие. С помощью модальности ты можешь:
- Помочь людям сфокусироваться на какой бы то ни было задаче или на каком-то списке вариантов, которые тесно связаны друг с другом
- Также ты можешь обратить внимание пользователя на критически важную информацию
В iOS есть различные стандартные компоненты для модальности: предупреждения (alerts), список или лист активности (с англ. Activity Sheet) (напр. Список поделиться) и список или лист действий (с англ. Action Sheet), которые ты можешь использовать в определенных ситуациях в приложении. Чтобы показать какой-либо модальный контент в приложениях поддерживаются следующие стили.
- Автоматический. Использует стиль по умолчанию, обычно в виде листа (sheet).
- Полноэкранный. Перекрывает предыдущее представление и требует кнопки для закрытия.
- Всплывающий (с англ. Popover). Представляет собой всплывающее окно с листом, когда мало места.
- Лист страницы и лист формы. Частично перекрывает предыдущее представление.
- Текущий контекст. Перекрывает часть предыдущего вью.
- Кастомный. Используется кастомная анимация для показа контента в кастомном контейнере.
Перейдем к рекомендациям.
Используй модальность только тогда, когда это имеет смысл. Используй модальность только тогда, когда критически важно сосредоточить внимание пользователя на выборе или выполнении задачи, которая отличается от текущей. Например создание письма и его удаление это разные задачи объективно. Учти, что модальные окна выводят людей из их текущего контекста и требуют действия, чтобы их закрыть, поэтому важно использовать его только тогда, когда он приносит явную пользу.
Используй предупреждения для важной информации или для срочных действий. Как правило, предупреждения (alerts) появляется, потому что что-то пошло не так. И поскольку такое оповещение прерывает процесс и требует действия, важно, чтобы люди чувствовали, что это требование оправдано иначе это раздражает.
Действия в модальных окнах должны быть простыми, короткими и узконаправленными. Избегай эффекта приложения в приложении. Если задача в модальном окне слишком сложная, люди могут потерять из виду контекст основного действия, которое они приостановили, когда вошли в модальный контекст. Будь особенно осторожен при создании модальных окон, включающих несколько экранов, потому что люди могут потеряться и забыть какие действия или шаги они сделали. Если модальное окно все же должно содержать несколько шагов или экранов, то покажи путь к завершению последовательности действий. Старайся не использовать кнопку «Готово» или “Завершить” (с англ. Done) для выполнения чего угодно, кроме завершения самой задачи.
Рассмотри возможность полноэкранного модального стиля для большего погружения в контент или сложную задачу. Полноэкранный режим работы сводит к минимуму отвлекающие факторы, поэтому он может хорошо работать для показа видео, фотографий или изображений с камеры, а также для выполнения многоэтапных задач, таких как оформление документа или редактирование фотографии.
Всегда показывай явно кнопку, которая закрывает модальное окно. Например, ты можешь использовать лейблы “Готово”, “Завершить” или “Отмена” для кнопок. Наличие такой кнопки гарантирует, что модальное окно обеспечивает альтернативу жестам закрытия, которые я ранее озвучил.
При необходимости помогай людям избежать потери данных, предоставив подтверждение перед закрытием модального окна. Независимо от того, используют ли люди жест для закрытия окна или кнопку, все равно, если действие может привести к потере данных пользователя, то покажи лист действий (action sheet), который объяснит что произойдет в этом случае и даст пользователю варианты.
Список действий не должен появляться поверх элемента поповера. Сам элемент поповер можно отобразить как некоторый список, но поверх поповера не должно появляться ничего (кроме, возможно, предупреждения). В редких случаях, когда вам нужно показать список после того, как люди предпримут какие-либо действия в поповере, закрой поповер, а потом уже показывай список действий.
Как правило следует показывать заголовок, который указывает на задачу модального окна. Когда люди открывают модальное окно, они покидают предыдущий контекст, поэтому было бы неплохо прояснить новый контекст заголовком. Ты также можешь предоставить текст и других частях модального окна, который более полно описывает задачу или даёт руководство к действию.
Проектируй консистентный внешний вид модального окна во всём приложении. Например, если модальное окно содержит панель навигации, оно должно иметь такой же внешний вид, что и панель навигации в вашем приложении.
Подбирай стиль перехода на модальное окно, который имеет смысл в приложении. Эффект перехода должен быть согласован во всем приложении, чтобы пользователя ничего не смущало, не удивляло и не пугало, поскольку в некоторых случая это может запутать и он может не понять то, что контекст изменился. По умолчанию модальное окно появляется снизу вверх и обратно, когда его закрывает пользователь. Всегда проверяй на консистентность переходы во всем приложении.