Гайдлайн по iOS на русском. Часть 7 — Архитектура: Навигация
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.
Люди, как правило, не в курсе навигации приложения до тех пор пока она соответствует их ожиданиям. Твоя задача — реализовать навигацию таким образом, чтобы она поддерживала структуру и конечную цель приложения, не привлекая к себе внимания. Навигация должна быть естественной и знакомой, а также не должна доминировать над интерфейсом или отвлекать внимание от контента. В iOS есть три основных стиля навигации.
Иерархическая навигация
В ней делается упор на один выбор или действие на экране, пока пользователь не достигнет следующего места назначения. Чтобы перейти в другой пункт меню , пользователи должны повторно вернутся на предыдущие шаги или начать все сначала и сделать другой выбор, чтобы куда-то пойти по навигации. Приложения Настройки и Почта используют этот стиль навигации.
Плоская навигация
В данном случае ты просто перемещаешься между несколькими категориями контента. Приложения Музыка и App Store используют этот стиль навигации.
Навигация по контенту или по опыту
При таком стиле навигации пользователи свободно перемещаются по контенту, или сам контент определяет навигацию. Игры, книги и другие приложения, которые имеют эффект погружения, обычно используют этот стиль навигации.
Некоторые приложения объединяют несколько стилей навигации. Например, приложение, которое использует плоскую навигацию, может реализовать иерархическую навигацию в каждой категории. Теперь о рекомендациях.
Всегда показывай четкий путь в навигации. Люди всегда должны знать, где они находятся в твоем приложении и как добраться до следующего пункта меню. Независимо от стиля навигации важно, чтобы путь через весь контент был логичным, предсказуемым и легким для понимания. В общем, предоставь пользователям один вариант пути к каждому экрану. Если им нужно видеть экран в нескольких контекстах, рассмотри возможность использования листа действий (action sheet), предупреждения (alert), всплывающего окна (т.е. поповера) или модального окна.
Проектируй информационную структуру, которая позволит быстро и легко добраться до контента. Здесь нужно организовать свою информационную структуру таким образом, чтобы требовалось минимальное количество нажатий, пролистываний и экранов в целом.
Давай возможность использовать жесты, чтобы создать плавную навигацию. Тут надо обеспечить перемещение по интерфейсу с минимальным трением. Например, можно позволить людям проводить пальцем по краю экрана, чтобы вернуться к предыдущему экрану.
Используй стандартные навигационные компоненты. По возможности используй стандартные элементы управления навигацией, такие как Page controls (контроллер управления страницами), которые представляют собой серию горизонтальных точек, каждая из которых это отдельная часть контента, либо Tab bar (панели вкладок, располагается внизу экрана для быстрой навигации по разделам приложения), либо Segment controls (сегментированные элементы управления для создания категорий или простой фильтрации контента), можно использовать вид таблицы и коллекции. Пользователи уже знакомы с этими стандартными элементами управления и интуитивно знают, как работать с приложениями по умолчанию.
Используй Navigation bar или по-русски панель навигации для перемещения по иерархии данных. Заголовок панели навигации может отображать текущую позицию в иерархии, а кнопка «назад» позволяет легко вернуться к предыдущему шагу или экрану.
Используй Tab bar или по-русски панель вкладок для представления конкретных категорий контента или функциональности, которые связаны по какому-то признаку. Панель вкладок позволяет людям быстро и легко переключаться между категориями, независимо от текущего местоположения в иерархии экранов.
Используй контроллер управления страницами или по-английски Page Controls, если у тебя есть несколько страниц одного типа контента. Эти точки четко сообщают количество доступных страниц и какая из них активна в настоящее время. Приложение Погода использует этот элемент управления для отображения страниц с погодой в зависимости от местоположения.
