11 июня, 2017 
AdminGWP Aнaстaсия Xaритoнoвa, вeдущий UX/UI дизaйнeр Oпрятный Consulting LLC и мaгистр Гильдии вoльным стилeм рaзрaбoтчикoв, спeциaльнo для «Нeтoлoгии» aдaптирoвaть стaтью Зoлтaн кoллин в oб aльтeрнaтивныx бургeрнoму мeню-мoбильнaя сeть «» интeрфeйс.
Eсли вы рaбoтaeтe с цифрoвoй прoдукт, убeдитeсь, чтo прoчитaл ужe кучу стaтeй o тoм, кaк и пoчeму бургeрнoe мeню свoeй нeзaмeтнoсти и низкoй эффeктивнoстью врeдит пoльзoвaтeльскoму oпыту мoбильныx и десктопных сети «» интерфейс.
К счастью, все больше веб-сайтов и приложений предупреждение альтернативные, более эффективные варианты навигации. Понятно, что эффективность каждого варианта зависит от содержания и контекста.
Жизнеспособность и эффективность вариантов мобильной навигации в зависимости от содержания и контекста.
1. Вкладки
Если на сайте или в программе ограниченное количество разделов, пользователь должен быстро переключаться между ними, и лучшее решение здесь-это ярлык, например, Tab Бары Android и iOS.
Tab bar-Android
Tab bar iOS
Перевод является одним из самых простых моделей навигации, однако, следует помнить, основные принципы их применения:
- Показать не более, чем на 5 вкладок.
- Один перевод должен быть активным и будет визуально.
- Первая вкладка должна быть основной дисплей / главная страница, а порядок перевода должен соответствовать их смысловой иерархии и логично в соответствии с порядком, юзер флоу.
- Вкладки могут быть размещены как сверху, так и снизу экрана, например, tab бары и нижняя навигация для Android, tab бары iOS.
- Иконки без текста применяются только универсальных действий с помощью обычных рисунков, а также сети «» интерфейс, которым пользователи пользуются довольно часто. Например, при расчетах:
Примеры: Google + и Instagram
Иконка+текст, перевод Google Photos и просто иконки на вкладки в Instagram
2. Перевод с возможностью «»
В том случае, если основной секции более чем в пять, лучшее решение, чтобы показать четыре в итоге приводит перевод, а пятый вариант решения «» списком всех других отделов.
Принципы дизайна, как правило, в том, что для обычных вкладок.
Лист » может вести на страницу навигации, или работать в качестве выпадающего меню со ссылками на остальные разделы:
Конечно, можно спорить, что газета «и» не бургерного меню: еще скрыты, и название никак не соотносится с содержанием. Но если иерархия перевод на аукцион, правда, большинство пользователей, в любом случае, нужно искать один из четырех показанных поиск, поэтому опыт навигации, все же, будет лучше.
Например, Facebook
Заголовки, запросы в друзья, сообщения, уведомления и поиск всегда в виду, остальные функции доступны в кнопкой меню.
Комментарий переводчика: несмотря на принцип «пять перевод», Facebook использует шесть.
3. Передовые сворачивающееся меню
Наиболее расширенная версия перевод с возможностью » — меню, которое регулировать в широком экране, проявляя столько перевод, сколько позволяет экран, скрывает, остальное под кнопкой «:
Таким образом, чем ниже разрешение экрана, тем меньше перевод на дисплее, тем более перевод скрываются» Такая гибкость улучшает пользовательский опыт, в отличие от решения «фиксированного перевод+», особенно с экранов промежуточный размер.
Пример: BBC
Главное меню BBC регулировать размер экрана, чтобы отобразить максимальное вкладок.
4. Навигация с прокруткой
Если разделов больше, чем пять, их значение примерно то же самое, и, чтобы скрыть кто-то внизу нажмите на » неправильно, то можно разместить их пролистываемом горизонтальный список.
Минус такого решения по-прежнему ограниченное количество отображаемых вкладок. Но это приемлемо, если пользователи изучить содержание, например, каталог в интернет-магазине или категорий для новостей на портале.
Проектируя такой навигации, убедитесь, что оставили пользователю визуальные подсказки о наличии других элементов меню, доступной при горизонтальной прокрутке (например, угасание непрозрачность и/или удаление крайней видимые элементы).
Примеры: Medium и Google
Основные разделы меню Medium.com прокручиваются на небольших экранах
Категории на странице выдачи результатов поиска Google
5. Падение вниз меню
Не общепринятое, но интересное решение использовать раскрывающийся список, когда видимость и доступность других разделов не критичны:
Выпадающего меню выполняет две задачи: во-первых, служит под-странице, и, во-вторых, направленная вниз стрелка показывает, возможность быстро переключаться между аналогичных отделов с: Несмотря на то, что в этом случае скрытые разделы, как структура предполагает подобных подразделов, в основном это решение нужно использовать именно для этой цели.
Примеры: Barnes & Noble and Duolingo
Скачать страницу книги bn.com текущий статус и фильтры всегда в наличии выпадающего меню
Duolingo предлагает необычным образом быстро переключаться между языками
Иногда бургерное меню отличное решение
Так что главный недостаток бургерного меню в том, что трудно найти на экране, использовать его есть только в качестве альтернативы, другие способы навигации.
В том случае, когда есть вторичные разделы, бургерное меню, абсолютно правильное решение.
Если главный опционами доступной форме CTA-кнопки, то бургерное в отличное место для дополнительных вариантов.
Такое решение удобно, если основные операции легко доступны на одном экране. Отличный пример — приложение Uber:
Потому что главная задача этого экран быстро вызвать такси, дополнительные (например, история и настройки) достаточно установить бургерном меню.
Тот Же Google Translate:
Основные операции (переключатель языков ввода) занимают большую часть экрана, в то время как скрытые в большое место в разделах «Помощь» и «отзывы».
Заключение
Не существует единственного универсального решения для мобильной навигации.
Не существует единственного и универсального решения для мобильной навигации, все зависит от вашего продукта, пользователей и контекста использования. То, что хорошо работает для некоторых, для вас будет провал, и наоборот. Основой каждой хорошо продуманной навигации — информационная архитектура: четкая и простая структура, иерархия, заголовки, которые основаны на потребностях пользователей. Так что, почему бы не начать искать наиболее эффективные навигации вашего продукта прямо сейчас?
Мнение автора и редакции могут не совпадать. Хотите, чтобы написать колонку для «Нетологии»? Читайте наши условия публикации.
Опубликовано в рубрике