Как называется нижнее меню в приложении

Руководство администратора

Управление мобильным приложением осуществляется через специальные наборы элементов управления (контролов) на экране устройства. Элементы управления отображаются пользователю в пользовательском интерфейсе, а настраиваются в режиме администрирования «Первой Формы». Мобильное приложение 1F поддерживает следующие элементы управления:

• нижнее меню (меню вкладок) — набор кнопок внизу экрана, каждая кнопка соответствует вкладке (режиму просмотра). Максимально возможное количество вкладок — 6 штук. Нижнее меню присутствует на экране всегда. По умолчанию не содержит ни одной вкладки.

mob_icon_menu

• боковое (левое) меню — открывается нажатием на кнопку в верхнем левом углу экрана. Это иерархический список элементов, который формируется из двух частей: сверху главное меню , под ним меню Избранное . По умолчанию главное меню содержит пункт «Настройки».

• дашборд (рабочий стол) — набор плиток, доступен из бокового\нижнего меню в пунктах с названием «Главная». Рабочий стол может отображать разные данные — например, для широких плиток Категорий и Задач он может загружать сокращенные тексты задач.

mobile_interface_new

Схема мобильного интерфейса. Контейнеры.

Принципы настройки мобильного интерфейса

Для создания и настройки элементов мобильного интерфейса используются контейнеры, шаблоны и блоки.

Контейнер — это упорядоченный список элементов интерфейса. Каждый экран приложения состоит из контейнеров, одного или нескольких (за исключением ненастраиваемых экранов загрузки и авторизации). Система поддерживает 5 видов контейнеров: рабочий стол ( Dashboard ), нижнее меню ( TabBar ), главное меню ( MainMenu ), меню Избранное ( FavouritesMenu ).

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

Элементы контейнера называются блоками . Блок — это «атом», наименьшая единица мобильного интерфейса. Блок может быть кнопкой, плиткой рабочего стола, пунктом меню и другим базовым элементом, из которых состоит интерфейс экрана приложения. Действие, которое приложение будет осуществлять при взаимодействии с блоком, определяется типом блока и типом его данных. Блоки могут быть вложенными (включать в себя другие блоки) — это блоки-папки. Примеры блоков: кнопка вкладки «Главная» в нижнем меню, ДП в карточке задачи.

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

Все ID и названия контейнеров, шаблонов, полей и блоков являются регистрозависимыми: TabBar и tabBar — это разные ID.

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

Мобильный UX-дизайн: нижняя навигация

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

Почему нижняя навигация так важна?

Стивен Хубер в своем исследовании использования мобильных устройств обнаружил, что 49% пользователь пользуются одним пальцем, чтобы решить ту или иную задачу на своих телефонах. На рисунке ниже цвета обозначают, какие области может достать пользователь пальцем при взаимодействии с экраном. Зеленый цвет обозначает область, которую легко достать пальцем; желтая область уже требует некой растяжки; а красная вынуждает пользователя изменить положение устройства в руке. Область однопальцевого взаимодействия с экраном сматфона. Источник: uxmatters Важно размещать главные и наиболее часто используемые действия внизу экрана, потому что в этом случае до них легко достать одним пальцем.

Панель вкладок

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

3 критически важных момента для дизайна нижней навигации

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

1. Показывть только самые важные пункты

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

Избегайте прокручиваемого контента

Частично скрытая навигация — довольно очевидное решение для небольших экранов — не нужно беспокоиться насчет ограниченного пространства экрана, просто поместите свою навигацию в прокручиваемую вкладку. Но прокручиваемый контент — менее эффективен, так как нужно сначала проскроллить, чтобы хотя бы увидеть нужную опцию. “С глаз долой — из сердца вон” — проблема в приложении Rookie Cam под iOS.

2. Показывать текущее положение

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

Иконки

Так как в нижней навигации пункты представлены иконками, их нужно использовать для контента, который уместно представлять в виде иконок. Есть универсальные иконки, которые хорошо знакомы пользователям — они представляют такой функционал, как поиск, имейлы, печать и т.д. К сожалению, “универсальные” иконки довольно редки. И дизайнеры приложений часто прячут функционал за иконками, которые очень сложно разгадать. Предыдущая версия приложения Bloom.fm для Android. Очень сложно понять текущее местоположение пользователя.

Цвет

Избегайте использования разноцветных иконок и текстовых меток в нижней панели навигации. Вместо этого используйте главный цвет приложения, чтобы обозначить активный пункт. Слева: Иконки в разных цветах делают из вашего приложения новогоднюю елку. Справа: используйте вместо радуги только один цвет для выделения активного пункта. Следуйте простому правилу — оттеняйте текущее действие в нижней навигации (включая иконку и любой текст) главным цветом приложения. Нижнее меню в Twitter под iOS. Активен экран сообщений. Если вы используете цветные иконки и текст в нижней панели навигации, текущее местоположение обозначайте черным или белым цветом. Слева: Избегайте использования цветных иконок в паре с цветной нижней панелью навигации. Используйте белую или черную иконографию.

Текстовые метки

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

Размер области касания

Нужно, чтобы области касания можно было легко кликнуть. Чтобы вычислить ширину каждого пункта нижней навигации, разделите ширину экрана на количество пунктов. Как вариант, задайте всем пунктам панели навигации ширину самого главного пункта. По стандартам Android предлагаются следующие размеры для панели нижней навигации для мобильных устройств. Фиксированная панель нижней навигации на мобильном устройстве. Измеряется в независимых от плотности пикселях (dp).Источник: Material Design.

Бейджи на вкладке

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

3. Навигация должна быть очевидной

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

Поведение

Каждая иконка нижней панели навигации должна вести к целевому назначению, а не открывать меню или поп-апы. Касание иконки нижней навигации должно вести пользователя непосредственно на связанный с ней экран или обновлять текущий активный вид. Не используйте панель вкладок для предоставления действий над элементами текущего экрана или режима приложения. Если такие инструменты нужны, используйте панель инструментов. Панель инструментов для iOS.

Стремитесь к постоянству

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

Прячьте ее

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

Визуальные аспекты

Старайтесь не использовать боковых движений для перехода между видами. Переход меду активным и неактивным видом должен реализовываться с помощью анимации плавного затухания. Анимация плавного затухания. Источник: Material Design.

Выводы

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

По мере того, как наши телефоны становятся все больше, нам нужно отрегулировать создание и разработку мобильных веб-сайтов. Можем ли мы что-то позаимствовать из дизайна приложений и тапбаров? Можем ли мы исправить навигацию на мобильных версиях наших сайтов, чтобы снизить стоимость взаимодействия? Из этой статьи мы узнаем ответы на эти вопросы. Когда вы слышите словосочетание «мобильная навигация», что первым приходит на ум? Я бы подумал о выдвижном гамбургер-меню. Этот паттерн дизайна использовался с первых дней адаптивного дизайна, и, хотя с тех пор многое изменилось, он остался неизменным. Почему? Как мы начали использовать верхнюю панель навигации с гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы.

История верхней панели навигации и гамбургер-меню

Первые иконки гамбургер-меню начали появляться в 80-х годах. Они были разработаны Нормом Коксом для Xerox Star – первого в мире графического пользовательского интерфейса. Он также разработал иконку документа для того же интерфейса. Эту историю описал Geof Allday (который написал на email Норму). Вы можете прочитать их переписку, нажав здесь. Позже они появились в Windows 1 и DOS. Нынешняя мобильная навигация, как мы ее знаем, была популяризирована книгой Итана Маркотта «Отзывчивый веб-дизайн» еще в 2011 году. С тех пор верхняя панель навигации и гамбургер-меню стали отраслевым стандартом. https://vimeo.com/61556918

За последние 10 лет размер экрана мобильного телефона увеличился вдвое

Со времен оригинального iPhone, мобильные продажи росли год от года. 2019 год – это первый год, когда рынок достиг точки насыщения, и продажи начали снижаться. Но это не значит, что люди не пользуются телефонами. По данным Quartz и Ciodive к 2020 году мы будем тратить 80% времени, проведенного в Интернете на мобильных телефонах. Сравните это с 2010 годом, когда только четверть интернет-пользователей пользовались телефоном. По мере роста продаж телефонов размеры их экранов также увеличились более, чем в два раза. Средний размер экрана смартфонов увеличился с 3,2 дюйма до 5,5 дюймов. В 2017 году производители устройств начали использовать более высокое соотношение сторон 18: 9 для 5,7-дюймовых и 6-дюймовых дисплеев. Теперь мы видим, что 6-дюймовые дисплеи с соотношением сторон 18: 9 становятся новым стандартом во флагманском и среднем ценовом сегментах, поскольку имеют большую площадь экрана, чем 5,5-дюймовые дисплеи с соотношением сторон 16: 9, сообщает XDA-Developers. Обзор того, как изменились размеры экрана мобильных телефонов (Источник изображения: Scientamobile) В основном, размер экрана мобильного телефона становится все больше и больше. Это хорошо, но как мы адаптируем наши паттерны дизайна, чтобы отразить эти изменения?

Дизайн, управляемый большим пальцем

Впервые я услышал термин «дизайн, управляемый большим пальцем» (thumb-driven design) от Виталия Фридмана. Он основан на исследованиях Стивена Хубера и Джоша Кларка о том, как люди держат свои устройства. Суть в том, что почти в каждом случае три основных хвата были наиболее распространенными. 49% пользователей держали свои телефоны одной рукой, 36% держали телефон одной рукой и тыкали указательным или большим пальцем другой руки, а оставшиеся 15% приняли молитвенную позу BlackBerry держа телефон двумя руками, и набирая текст большими пальцами, утверждает Джош Кларк. Стивен Хубер обнаружил, что 75% пользователей касаются экрана только одним большим пальцем. Отсюда и термин, «управляемый большим пальцем». Есть три основных способа, которыми мы держим наши телефоны В 2016 году Саманта Ингрэм написала статью под названием «Зона большого пальца: проектирование для мобильных пользователей», в которой подробно рассматриваются эти идеи. Она определила легкодоступные, труднодоступные и промежуточные зоны. Карта зоны большого пальца, объясненное Самантой Ингрэм Тем не менее, я бы сказал, что с увеличением размера телефона эта карта немного изменилась: Новая карта зоны большого пальца для дисплеев больших размеров Когда телефоны были маленькими, большинство областей экрана были легкодоступными. По мере того, как наши экраны становились больше, стало практически невозможно дотянуться до их верхней части без настройки телефона. Из приведенного выше примера видно, где находится самое дорогое полезное пространство на экране. Тем не менее, этим часто пренебрегают на веб-страницах. Как мы можем это исправить?

Паттерн нижней панели навигации

Время от времени в сети появляется концепт паттерна нижней панели навигации. Сама идея довольно проста: переместить панель навигации вниз экрана. Веб страница сайта Slack с картой зон большого пальца Расположение навигационной панели внизу облегчает пользователям нажатие на иконку меню, в то время как второстепенные элементы можно переместить вверх. По сути, вы просто меняете порядок. Мобильные приложения используют эту логику в тапбар паттерне. Сама по себе эта идея не нова, но она все же не так популярна в веб-дизайне, как в дизайне приложений. Это не надежное решение, поскольку оно поднимает несколько критических вопросов, но это достойная альтернатива существующим шаблонам навигации. Давайте рассмотрим ряд вопросов, которые могут возникнуть.

Первичные и вторичные элементы

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

Вайфрейм переосмысленных первичных и вторичных элементов навигации

Как это повлияет на скролл в больших меню?

Некоторые веб-сайты имеют обширные меню, подменю и все, что между ними. Естественно, будет задействована прокрутка. Как работает переключение первичных и вторичных элементов в этом сценарии?

Вайрфрейм переосмысленного большого меню

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

Где размещать логотип?

У вас могут возникнуть вопросы с размещением логотипа. Есть два способа сделать это:

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

Как видите, я использовал в вайфрфрейме метку меню. Кевин Робинсон обнаружил, что размещение метки рядом с иконкой увеличило вовлеченность на 75%:

Вайрфрейм логотипа расположен вверху, а меню – внизу

Как это работает с Handlebars?

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

iOS Handlebars и безопасные зоны

Если вы разместите логотип в центре, ссылка может конфликтовать с функциональностью handlebar. В этом случае поможет внутренний отступ.

Будут ли пользователи приспосабливаться к этому паттерну или посчитают его дезориентирующим?

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

В качестве контраргумента закону Якоба я бы хотел предложить Закон Фиттса. В нем утверждается, что время для достижения цели зависит от расстояния и размера цели. По сути, чем меньше и дальше цель, тем выше стоимость взаимодействия. У NN/g есть замечательное видео, объясняющее это более подробно:

«Иконка гамбургер-меню внизу будет иметь гораздо меньшую стоимость взаимодействия, чем иконка вверху, потому что она ближе. Размещая призыв к действию рядом с большим пальцем пользователя, мы позволяем ему быстрее достичь конечной цели. Будут ли пользователи находить эту функцию дезориентирующей, если она снижает стоимость их взаимодействия? Вероятно, нет»

Как это будет интегрироваться с паттерном тапбара?

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

Дизайон тапбара от Mengyuan Sun

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

Nielsen утверждает, что скрытая навигация (гамбургер-меню) значительно снижает удобство работы как для мобильных устройств, так и для декстопных. На мобильных устройствах люди использовали скрытую навигацию в 57% случаев, а комбинированную – в 86% случаев, то есть в 1,5 раза больше! Комбинированная навигация, на которую ссылается Nielsen, представляет собой шаблон панели вкладок в сочетании с гамбургер-меню – вот пример:

Пример приложения Samsung от Ризки Рахмат Ридха для Muzli

Может показаться, что тапбар – идеальное решение, но у него тоже есть свои проблемы. Фабиан Себастьян отметил, что это подходит только для представлений верхнего уровня. Это не работает с дополнительными элементами навигации. Чтобы решить эту проблему, появился гибрид гамбургер / тапбар. Если вы обратите внимание на приложение Samsung, то увидите, что последний пункт меню – это кнопка «More», которая вызывает гамбургер-меню.

По сути, паттерн нижний панели навигации довольно хорошо интегрируется в паттерн тапбара, если вы хотите объединить их оба. Вы можете найти много хороших примеров в мире мобильных приложений.

Переосмысление некоторых популярных сайтов

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

Давайте сначала посмотрим на Bloomberg:

Сайт Bloomberg с переосмысленной нижней навигацией

Далее, давайте посмотрим на Invision:

Сайт Invision с переосмысленной нижней навигацией

И последнее, но не менее важное: старый добрый Reddit:

Сайт Reddit с переосмысленной нижней навигацией

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

Это звучит замечательно, но как мне убедить своих клиентов?

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

Мобильные приложения уже много лет размещают важные пункты меню в нижней части экрана. Просто отправьте им эти две статьи для начинающих:
«Золотые правила дизайна нижней навигации» от NickBabich
«Базовые шаблоны для мобильной навигации: учебник для начинающих», от RalucaBudiu
Я заметил случаи, когда популярные мобильные приложения начали сдвигать важные элементы навигации вниз. Хорошим примером является Uber. В их приложении строка поиска является одним из самых важных элементов на экране. В старом дизайне она располагалась вверху. Теперь ее переместили вниз.

Старый и новый дизайн панели поиска Uber

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

Выводы

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

Понимаю, что все это не является надежным решением для всех случаев использования, но оно того стоит. Оно поможет немного улучшить опыт. Интересно узнать, что вы думаете по этому поводу!

Руководство администратора

mob_icon_menu

mobile_interface_new

Схема мобильного интерфейса. Контейнеры.

Принципы настройки мобильного интерфейса

Для создания и настройки элементов мобильного интерфейса используются контейнеры, шаблоны и блоки.

Все ID и названия контейнеров, шаблонов, полей и блоков являются регистрозависимыми: TabBar и tabBar — это разные ID.

Мобильный UX: навигация внизу экрана

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

Почему навигация внизу экрана так важна?

40% пользователей производят большинство действий на смартфоне большим пальцем. Картинка ниже отражает удобство использования мобильного устройства одной рукой: зеленым цветом обозначена часть экрана, с которой легче всего взаимодействовать, желтым — та, к которой приходится тянуться, а красным — зона, до которой можно добраться, только если взять телефон по-другому.

Почему навигация внизу экрана так важна?

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

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

Facebook

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

Читайте также: Правило большого пальца: проектирование дизайна для мобильных устройств

1. Показывайте только самые важные пункты

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

Показывайте только самые важные пункты

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

каждая дополнительная ссылка усложняет ваше приложение

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

Избегайте скроллинга в меню

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

2. Обозначайте текущее местонахождение

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

Пользователю должно быть понятно, как попасть из точки А в точку Б, с первого взгляда и без дополнительных внешних подсказок. Используйте правильные визуальные сигналы (иконки, ярлыки и цвета), чтобы навигация не требовала пояснений.

Иконки

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

Предыдущая версия приложения Bloom.fm для Android. Что значит круг? Пользователю сложно понять свое текущее местоположение.

Цвет

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

Слева: разноцветные иконки делают ваше приложение похожим на новогоднюю елку. Справа: используйте только один основной цвет.

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

Навигация внизу страницы в приложении Twitter для iOS при просмотре сообщений.

Если нижняя панель навигации цветная, сделайте иконку, соответствующую местоположению пользователя, черной или белой.

Слева: избегайте сочетания цветных иконок с цветной панелью навигации. Справа: используйте черные или белые иконки.

Текстовые ярлыки

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

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

Размер цели

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

Android рекомендует следующие размеры для кнопок навигации на мобильных:

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

Значки на иконках

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

Читайте также: Как протестировать юзабилити иконок на вашем ресурсе?

3. Сделайте навигацию самоочевидной

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

Поведение

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

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

Постоянство

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

Не удаляйте вкладку, когда ее функция недоступна. Когда вкладки то исчезают, то появляются, UI вашего приложения становится нестабильным и непредсказуемым. Лучше всего оставить все вкладки, но объяснить, почему содержимое той или иной вкладки недоступно. Так, если у пользователя нет оффлайн-файлов, вкладка «Оффлайн» в приложении Dropbox отображает экран с пояснениями о том, что они из себя представляют и как ими обзавестись.

Dropbox

Спрятать панель вкладок

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

Нижняя панель навигации появляется и исчезает динамически, в зависимости от скроллинга.

Визуальные эффекты

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

Читайте также: Навигация мобильных сайтов и приложений: базовые принципы юзабилити

Выводы

Навигация внизу страницы должна быть:

Видимой и хорошо структурированной. Используйте от трех до пяти самых важных пунктов назначения и избегайте скроллинга в навигации.
Ясной. Элементы панели должны быть удобными для сканирования и достаточно крупными, чтобы по ним было легко кликнуть.
Простой. Каждая иконка должна вести к конкретной цели, и все элементы, в том числе навигация внизу страницы, должны быть постоянны во всех режимах и ориентациях.

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

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