{"id":10776,"title":"\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443 \u0432 \u043e\u043a\u0435\u0430\u043d \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043b\u0430\u0441\u0442\u0438\u043a\u0430","url":"\/redirect?component=advertising&id=10776&url=https:\/\/vc.ru\/acer_russia\/347915-acer-vypustila-pervyy-noutbuk-iz-pererabotannogo-plastika&placeBit=1&hash=368c351f012741e124bb4bc6c0b9b05d5e0f9033fab83ea5e301424877f73936","isPaidAndBannersEnabled":false}
Дизайн
Friendly Design

Восемь навигационных меню в мобильных приложениях

Лаборатория Friendly Design делится переводом статьи на Medium.

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

Граммотно спроектированное меню не только создаёт визуально красивый интерфейс продукта, но и как правило улучшает юзабилити.

Какова функция навигационного меню?

Повысить качество содержания продукта, структуры и иерархии функций

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

Выделить основные функции

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

Упростить пользовательский опыт

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

Типы меню навигации

Tabber-классическое меню навигации

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

Преимущества: четкое понимание текущего местоположения и того, что примерно располагается в каждой из вкладок

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

Меню навигации из прямоугольной сетки

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

Преимущества: этот вид навигации прост и четкая навигация может помочь повысить эффективность.

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

Бургер-меню

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

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

Недостатки: если требуется часто переходить по разделам, то это может оказаться неудобным способом.

Навигация по рулю

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

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

Недостатки: те же, что и в бургер-навигации.

Классический дизайн меню навигации

Google Material Design использует «плавающую кнопку действия» для навигации. Которая дифференцируется через значок, плавающий над интерфейсом и имеет соответствующие динамические эффекты.

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

Tumblr оснащен яркими значками и соответствующими подписями. При прокрутке вниз, чтобы просмотреть содержимое, эти значки, естественно, исчезнут.

Конструкция Messenger строго следует за навигацией по разделам, некоторые метки закреплены сверху, а некоторые четко показывают основные функции внизу. Значки ясны и легки для понимания.

Резюме

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

0
14 комментариев
Популярные
По порядку
Написать комментарий...
Кирилл Казаков

Пожалуйста, укажите, что материал переведён, в самом начале статьи.

Ответить
5
Развернуть ветку
Юрий Другач

Почему так? На Хабре потому-что такие правила?

Ответить
1
Развернуть ветку
Кирилл Казаков

Нет. Об этом следует предупреждать сразу, чтобы не вводить читателей в заблуждение.

Ответить
3
Развернуть ветку
Юрий Другач

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

Ответить
1
Развернуть ветку
Кирилл Казаков

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

Ответить
0
Развернуть ветку
Дмитрий Реута

Бред несёте. Ваша аналогия некорректна от слова "совсем". Вам в начале, что сказали, что это "не перевод"? Прочитали? Было полезно? Выводы для себя сделали? Ссылку на источник указана была?

Если да, то в чём проблема? Или проблема в том, что вы свои ожидания от статьи строите на основании авторства, а не на основе самого контента?

Сейчас бы доёбываться по мелочам, впрочем я сделал то же самое. И как вам, норм?

Ответить
1
Развернуть ветку
Кирилл Казаков

Мне не хочется с вами спорить. Для меня это правило — обыкновенная порядочность, дело не в ожиданиях. Если автор статьи не вы — об этом нужно сказать сразу.

Ответить
1
Развернуть ветку
Дмитрий Реута

оки

Ответить
0
Развернуть ветку
George Weiller

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

Ответить
3
Развернуть ветку
Roman Volodko

Далеко не все варианты рассмотрели, а все ваши чуток устарели, однако)

Ответить
2
Развернуть ветку
Александр Рой

Вы приложения тоже делаете или только переводите?

Ответить
1
Развернуть ветку
Friendly Design

Делаем, пиши на shcherbina.art@gmail.com

Ответить
2
Развернуть ветку
Artem Latynof

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

Ответить
1
Развернуть ветку
Uwxan

Tabber?

Ответить
0
Развернуть ветку
Читать все 14 комментариев
Фундамент для создания дизайн-концепции интерфейса: большая идея, мудборд и референсы

Старший дизайнер red_mad_robot Мила Михайлова исследует роль визуальной концепции в проектировании цифровых продуктов и подробно показывает процесс — от глобальной идеи до конкретных примеров. В статье есть список ресурсов и инструментов, примеры, советы и рекомендации — применяйте их в работе, чтобы создать цепляющую дизайн-концепцию интерфейса.

Netflix спрогнозировал рост подписчиков в три раза меньше ожиданий аналитиков — акции компании упали на 20% Статьи редакции

Компания планирует добавить 2,5 млн новых пользователей, аналитики ожидали почти 7 млн.

«Инновации — это поле для сражений»

Как фуд-ритейл внедряет новые технологии.

Холодильник в аренду: эксперты о новой тенденции рынка бытовой техники

Среди российских потребителей набирает популярность аренда бытовой техники и гаджетов, отмечают эксперты онлайн-сервиса сравнения цен и товаров Price.ru. Аналитики пришли к такому выводу, проанализировав спрос на аренду техники и сравнив интернет-запросы пользователей за последнее полугодие относительно аналогичного периода 2020 года.

Продать бизнес и начать новый: чему учит опыт Георгия Левина по выходу из бизнеса

Решили поделиться с вами основными моментами из эфира основателя инвестиционной компании AltaIR Capital и венчурного клуба AltaClub Игоря Рябенького и Георгия Левина. Основатель двух успешных стартапов расскажет, какие ошибки на старте фаундеры могут избежать.

Георгий Левин, со-основатель и CEO компании Hints
«Холакратия, любимые мемчики и прозрачность»: программист о работе в Точке, моделинге и запуске треков на Spotify

Точка — это про людей. Про сотрудников, которые создают удобный банк для бизнеса. Мы запускаем серию интервью с нашей командой, чтобы рассказать, как у нас всё устроено.

Walmart незаметно готовится войти в метавселенную, вынашивая планы о собственной криптовалюте и коллекционных NFT

В СМИ появилась новость о том, что Walmart разрабатывает планы по входу в метавселенную. Планируется выпуск собственной криптовалюты и коллекционных NFT. С этой целью Walmart зарегистрировал несколько новых торговых марок.

Пять путешествий до Луны — столько километров ленты в TikTok могли просмотреть пользователи Yota за 2021 год
Как пандемия изменила рынок онлайн-страхования

Выяснили и рассказываем, как изменился онлайн-спрос на услуги страхования с начала пандемии.

Interactive Brokers объяснил комиссию в $150-1400: её платят клиенты, чья проверка стоит больше остатка на их счетах Статьи редакции

Брокер добавил комиссию за проведение проверки в начале 2022 года.

Сказ о том, как брокер Тиньков акции в счет налогов без согласия клиента продавал

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

null