Фрэнк Рауш написал о шаблонах навигации в iOS-приложениях.

— Чаще всего архитектура приложений — иерархическое дерево с несколькими уровнями вложенности;
— Навигация происходит по структуре дерева. Из списка пользователь переходит к новому списку или конечным экранам, а возвращается назад по кнопке «<»;
— Плоская структура: шаблон предназначен для навигации между ключевыми экранами с помощью нижней панели на телефоне и боковой на планшете;
— Ключевых экранов может быть не более 5, один из пунктов меню всегда выбран, панель доступна всегда, когда не перекрыта модальным окном;
— Пирамидальная структура: шаблон позволяет быстро перемещаться между элементами одного уровня иерархии (например, свайпами), не возвращаясь на родительский экран;
— Модальная навигация: высокоприоритетные окна (требуют принятия решения, диалоги), низкоприоритетные (не требуют принятия решения, подсказки, попапы, всплывающие меню);
— Немодальная навигация: уведомления, интерактивные элементы вроде индикатора настройки громкости;
— Внутренняя навигация: изменение состояния (пользователь остаётся на том же экране), пошаговая навигация (ряд экранов объединены в линейный флоу и размещены в модальном окне).

#mobile #navigation

Тесс Гэдд написала о сочетании предварительного просмотра и полного отображения.

— Превью (предварительный просмотр) — релевантные данные, позволяющие быстро составить общее представление и показывающие, что на них можно нажать для перехода к полному отображению (все данные);
— Варианты превью: карточки (включая вариант с одной карточкой в строке), список (может выглядеть как таблица), обрезка (заголовок и часть текста с кнопкой «Читать дальше»);
— Полное отображение: модальное окно (позволяет сохранить контекст), отдельная страница (больше места для информации, минимизирует отвлекающие факторы), боковая панель (может располагаться рядом с содержимым страницы и поверх него, удобно для работы с большим количеством данных), аккордеон (полное отображение появляется под элементом, на который нажал пользователь);
— Сочетание «карточка + отдельная страница» встречается чаще всего;
— «Карточка + модальное окно» подходит для развлекательных проектов, галерей, соцсетей;
— Сочетание «список + боковая панель + отдельная страница» реализовано в Notion. Можно открыть боковую панель и расширить её до всей страницы, чтобы список не отвлекал.

#navigation

Юрий Марьенко написал об основных типах навигации на сайтах.

— Статичное меню в начале страницы. Если на странице содержимого много, пригодится кнопка возврата наверх, чтобы удобно было возвращаться к меню;
— Фиксированное меню — всегда остаётся на виду при скроле страницы. С ним в любой момент можно перейти в другой раздел сайта, но оно может мешать изучать содержимое страницы;
— Сочетание большого статичного и небольшого фиксированного меню — фиксированный вариант отображается при скроле, не занимает много места по вертикали и даёт быстрый доступ к самым важным разделам;
— Бургерное меню (статичное или фиксированное) — по нажатию на иконку бургера отображает список разделов. Хорошо работает на мобильных сайтах за счёт компактности. Часто используется на популярных сайтах (с большими каталогами), так что паттерн должен быть хорошо знаком пользователям;
— Многоуровневое меню — отображает основные разделы (4–7 пунктов), по нажатию на которые можно увидеть подменю с большим количеством подразделов. Подходит компаниям с несколькими направлениями бизнеса, узкоспециализированным интернет-магазинам;
— Меню помогает посетителям быстро понять, о чём сайт.

#navigation #menu

Стас Мельников написал о некоторых паттернах, повышающих доступность сайтов.

— Автофокус — автоматическая фокусировка на первом поле, которое пользователь должен заполнить в форме;
— Если главная задача страницы — заполнение формы, автофокус помогает пользователям сразу ей заняться. Особенно полезно тем, кто использует только клавиатуру или скринридер. Не нужно проходить через шапку и навигацию страницы;
— Но важно учитывать контекст. Если незрячий пользователь перешёл к форме со стороннего ресурса, скорее всего, он захочет изучить, куда попал и прочитать хотя бы шапку;
— Skip link — ссылка «Перейти к основному содержимому» — самый первый элемент страницы, отображается тем, кто для перемещения по странице использует клавишу Tab или скринридер, позволяет пропустить шапку с навигацией и перейти к основному содержимому страницы;
— Кнопка «Наверх» — ссылка, которая приводит в меню, аналог клавиши PageUp. С её помощью удобно просматривать одну страницу за другой;
— Но важно, чтобы в коде она располагалась в конце блока с основным содержимым страницы.

#accessibility #navigation

Саадия Минхас написала о нижней панели вкладок (tab bar).

— До неё легко дотянуться большим пальцем;
— На десктопе используется редко — на больших экранах её сложнее заметить;
— Включает 3−5 пунктов, ведущих на разделы верхнего уровня. Если разделов больше 5, можно добавить пункт More;
— Если используете нестандартные иконки, каждый пункт лучше сопроводить подписью;
— Если решили раскрасить иконки, не используйте слишком много цветов;
— Подписи: располагаются под иконками, короткие, без переноса на вторую строку, обрезания многоточием, уменьшения кегля, чтобы уместить текст;
— В альбомной ориентации телефона подписи можно разместить справа от иконок, чтобы заполнить пространство и освободить место для контента;
— Кроме цвета активный пункт можно выделить подложкой, точкой или полоской, заливкой контурной иконки;
— У пункта может быть индикатор, который показывает состояние контента в разделе, например, что там есть что-то новое. Счётчик показывает количество таких элементов в разделе;
— Не стоит делать неактивными или скрывать пункты, если внутри нет контента (вроде пустой корзины).

In English. #navigation

Ксения Толокнова написала о навигации в мобильных приложениях.

— Ограничения таббара: все сценарии приложения приходится раскладывать в 3–5 условных папок; бывает непросто придумать короткие и понятные названия разделов;
— Эффект размытия сложно реализовать в Андроиде, поэтому таббар в одном и том же приложении на разных платформах может отличаться. Пример — Revolut;
— Где отображается: 1) только на основных экранах, 2) на основных и внутренних экранах, 3) на внутренних экранах при прокрутке вверх;
— Первый вариант выбирают, например, мессенджеры, чтобы не отвлекать пользователя от открытого чата;
— Во втором случае таббар не отображается только тогда, когда что-то открыто поверх: полноэкранные модальные окна (например, просмотр видео), шторки, экранные клавиатуры;
— Такая навигация запоминает положение пользователя в разделе. Если из выбранной в разделе Fitness+ тренировки перейти в Summary, нажатие на Fitness+ вернёт к тренировке. Повторное нажатие на Fitness+ откроет главный экран раздела;
— Применяется реже и для приложений со сложной структурой разделов;
— Третий тип больше подходит для контентных лент и статей. Фейсбук вообще комбинирует варианты 2 и 3;
— Интересные решения, которые легко реализовать: градиентный фон с прозрачностью, если есть только тёмная тема (Spotify), выделение центральной иконки, по нажатию на которую поднимается шторка с основными действиями в приложении (Binance);
— Sidebar для навигации рекомендуют использовать в мобильных приложениях с 5 и более разделами или с 2 и более уровнями иерархии в навигации. Но в iOS это будет кастомная разработка;
— В приложениях с большой базой информации часто используют навигацию через поиск. Этот вид навигации редко является единственным, но часто бывает ключевым;
— Top bar (Top app bar в Андроиде) важен для навигации, так как позволяет разместить кнопку для возвращения назад или открытия сайдбара и иконки дополнительных действий (в гайдлайнах Material Design рекомендуют до 3);
— В Андроиде заголовок текущего экрана располагают близко к кнопке «Назад». Люди, которые раньше использовали iOS, могут думать, что это название предыдущего экрана.

#navigation #tab_bar

Нижняя панель мобильной навигации.

• Простой дизайн
• Анимация полностью создана в Figma
• Тёмная и светлая темы
• Более 20 меню

#navigation #navbar #menu

Открыть в Figma

👨 Дизайн-телега

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

⚡ Смотреть сайт


#navigation

💣 PSD