Гайдлайн по iOS на русском. Часть 61 — Вьюшки: Всплывающее окно

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.

Всплывающее окно — это временное вью, которое появляется над другим контентом на экране при нажатии на какой-то контрол/элемент или на какую-то область. Как правило, всплывающее окно отображается со стрелкой, которая указывает на то место, из которого оно появилось. Всплывающие окна могут быть немодальными или модальными. Немодальное всплывающее окно закрывается тапом в любой другой части экрана или тапом на кнопку в всплывающем окне. Модальное всплывающее окно закрывается тапом на кнопку “Отмена” или на другую кнопку в всплывающем окне.

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

Избегайте отображения всплывающих окон на iPhone. Как правило, для всплывающих окн следует зарезервировать место для использования в приложениях iPad. В приложениях для iPhone используйте все доступное пространство на экране, представляя информацию в полноэкранном режиме, а не в всплывающем окне. Используйте принцип модальности.

Используйте кнопку “Закрыть” только для подтверждения и указаний. Кнопку закрытия, такую как “Отмена” или “Готово”, стоит отображать, если она дает ясность, например, выход с сохранением изменений или без них. Как правило, всплывающее окно должно автоматически закрываться, когда в его присутствии больше нет необходимости. В большинстве случаев всплывающее окно должно закрываться, когда кто-то нажимает за его пределы или выбирает элемент во всплывающем окне (то есть юзер заканчивает работать с ним). Если можно сделать несколько вариантов выбора, всплывающее окно должно оставаться открытым до тех пор, пока юзер явно не закроет его или не тапнет за его пределы.

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

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

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

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

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

Избегайте слишком большого всплывающего окна. Всплывающее окно не должно занимать весь экран. Сделайте его достаточно большим, чтобы отобразить его содержимое и показать откуда оно появилось (из какого элемемента). Имейте в виду, что система сама может подстроить размер всплывающего окна, чтобы оно хорошо вписывалось в экран.

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

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