Material Design на русском. Часть 11 — О навигации в Material

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

Навигация позволяет пользователям перемещаться по приложению.

Виды навигации

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

По направлению

Основываясь на информационной архитектуре твоего приложения, пользователь может перемещаться в одном из трех навигационных направлений:

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

Боковая навигация позволяет перемещаться между экранами верхнего уровня данной информационной архитектуры этого музыкального приложения.

Пользователи этого муз. приложения могут использовать навигацию типа “прямой переход” для доступа к конкретному экрану (к песне в данном случае) двумя способами: 1 — по иерархии к конкретному экрану. 2 — Через поиск и прямой переход к песне, минуя все экраны приложения.

С экрана же песни пользователи могут перемещаться в обратном направлении 2мя способами: 1 — вверх по иерархии можно. 2 —или хронологически от песни, к которой перешли из поиска на экран с результатами поиска, но только если такая хронология имела место быть.

Боковая навигация

Боковая навигация нужна для перемещения между экранами на одном и том же уровне в иерархии. Такая навигация обеспечивает доступ к различным экранам приложения или функциям.

Направление и иерархия

Основная навигация приложения должна обеспечивать доступ ко всем пунктам меню на верхнем уровне иерархии. Приложения с двумя или более уровнями могут иметь боковую навигацию, нижнюю навигационную панель или вкладки.

Сайдбар или боковая панель навигации подходят для навигации, у которой от 5 и более пунктов меню. Отличный вариант когда много пунктов меню и для консистентной навигации на большом разнообразии устройств на Android.

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

Вкладки (tabs или табы) можно использовать на любом уровне, чтобы показать 2 и более схожих набора данных.

Вкладки (2) могут совмещаться дополнительно с боковой навигацией, где боковая панель будет навигацией первого уровня (основной), а вкладки дополнительной.

Навигация типа «Прямой переход»

Методы прямой навигации

Прямая навигация относится к одному из трех типов перемещения между экранами для решения задач:

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

Про реализацию прямой навигации

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

Прямая навигация может быть реализована с помощью:

• Контейнеры, такие как карточки, элементы списка или списки, элементы которых представленны в виде изображений
• Кнопки, которые переводят пользователя на другой экран
• Поиск в приложении по одному или нескольким экранам
• Ссылки в контенте

Карточки на главном экране (Родительском) предоставляют из себя предварительный просмотр контента каждой заметки и могут быть использованы для перехода к развернутой заметке (дочернему экрану).

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

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

Обратная навигация

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

Обратная навигация (по хронологии)

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

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

Кнопка “Назад” позволяет пользователям перемещаться между 2 просмотренными экранами или приложениями в обратном порядке.
1 — Пример кнопки “Назад” (а) в панели навигации Андроид.
2 — Пример кнопки Назад (B) в веб-браузере.

Восходящая навигация (не знаю как перевести нормально)

Восходящая навигация позволяет пользователям перемещаться на один уровень вверх по иерархии внутри одного приложения, пока не будет достигнут домашний или самый верхний экран в приложении. Например, стрелка «Назад» в верхней панели приложения — это восходящая навигации.

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

1 — Пример восходящей навигации на Android и в веб-приложениях (а)
2 — Пример восходящей навигации через кнопку “Назад” (Б) в навигации для iOS

Учитывай следующие моменты

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

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

Если сильно упрощать, то предположим есть 3 экрана: A, B и C. И ты переходишь с экрана A на экран C любым способом (через поиск, напрямую или по иерархии переходя последовательно от А к B и C). Так вот при обратной хронологической навигации, если нажать «Назад» ты с C экрана попадешь на A. При восходящей обратной навигации ты попадешь с C на B и в финале на A экран.

Как следить за обновлениями гайдлайна и переводом?

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new