Дизайн
Friendly Design
3143

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бургер-меню

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Friendly Design", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 14, "likes": 23, "favorites": 126, "is_advertisement": false, "subsite_label": "design", "id": 62549, "is_wide": false, "is_ugc": true, "date": "Tue, 26 Mar 2019 20:05:04 +0300", "is_special": false }
0
{ "id": 62549, "author_id": 185535, "diff_limit": 1000, "urls": {"diff":"\/comments\/62549\/get","add":"\/comments\/62549\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/62549"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
14 комментариев
Популярные
По порядку
Написать комментарий...
5

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

Ответить
1

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

Ответить
3

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

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

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

Ответить
1

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

Ответить
3

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

Ответить
2

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

Ответить
1

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

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }