А как называется нижняя часть экрана телефона? Там, где меню, назад, закладки?
Когда мы обсуждаем устройства с сенсорным экраном, мы часто задаемся вопросом о терминологии, связанной с различными частями экрана. Одной из таких частей является нижняя часть экрана, где располагаются различные элементы управления, такие как меню, кнопка "назад" и закладки.
Терминология, используемая для обозначения этой нижней части экрана, может различаться в зависимости от операционной системы и типа устройства. Давайте рассмотрим некоторые из наиболее распространенных терминов:
Панель навигации: Этот термин часто используется в операционной системе Android и относится к нижней части экрана, где расположены кнопки "назад", "домой" и "вперед" (в режиме просмотра веб-страниц или при использовании приложений с поддержкой навигации). Иногда панель навигации также включает кнопку "много задач" для быстрого переключения между запущенными приложениями.
Док-станция: Этот термин широко используется в операционной системе iOS и относится к нижней части экрана, где располагается полоса с иконками приложений и инструментами. В док-станции можно размещать приложения и функции, которые пользователь использует наиболее часто, для быстрого доступа.
Нижнее меню: Во многих приложениях для мобильных устройств можно найти нижнее меню, где расположены различные функции или разделы приложения. Нижнее меню обычно содержит значки или текстовые ссылки для быстрого перехода к нужному экрану или действию. Например, в мессенджерах такое нижнее меню может содержать кнопку "чаты", "контакты" и "вызовы".
Хотя эти термины используются в разных операционных системах, их применимость и понимание могут меняться в зависимости от разрабатываемого приложения или интерфейса пользователя. Для максимальной ясности рекомендуется обращаться к документации или руководству пользователя, предоставленным разработчиками операционной системы или приложения.
Так что, в зависимости от вашего устройства и операционной системы, вы можете назвать нижнюю часть экрана телефона панелью навигации, док-станцией или нижним меню. Важно помнить, что называйте эту часть экрана так, как это принято в вашей среде общения, чтобы избежать путаницы и недоразумений.
Восемь навигационных меню в мобильных приложениях
Лаборатория Friendly Design делится переводом статьи на Medium.
Дизайн меню навигации является важным мостом для взаимодействия между пользователем и девайсом. Очень важно, чтобы пользователь переходил по разделам на интуитивном уровне, иначе приложение будет неудобным и он в нём потеряется, что приведёт удалению. В настоящее время существуют различные виды меню, но какой лучше выбрать?
Граммотно спроектированное меню не только создаёт визуально красивый интерфейс продукта, но и как правило улучшает юзабилити.
Повысить качество содержания продукта, структуры и иерархии функций
Навигация — это скелет приложения, поддерживающий общий контент и информацию, чтобы контент в соответствии с информационной архитектурой органично сочетался, визуально и четко отображался у пользователей, чтобы фрагментированный контент становился полным и упорядоченным. Между тем, структурированное расположение в то же время также усиливает чувство экосистемы приложения.
Выделить основные функции
Основные функции — это то, что выделяет продукт на рынке. Поэтому, главную функцию приложения необходимо расположить так, где пользователи смогут достичь ее легко. Второстепенные функции не должны отвлекать от главного пути использования приложения. Благодаря навигации, может быть хороший акцент на главной функции и соответствующим образом скрывать второстепенные функции.
Упростить пользовательский опыт
Продуманная навигация и последовательный путь к задаче позволяют пользователям быстро достичь своих целей и сформировать позитивный пользовательский опыт. Сокращение пути переходов пользователя имеет прямое влияние на его удовлетворение, что в свою очередь повлияет на повышение конверсии. Таким образом, высокая эффективность навигации должна направлять пользователей просто и непосредственно к функциям приложения.
UI-элементы и жесты в мобильных приложениях
Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.
А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.
Заглушка — название говорит само за себя: это элемент, сигнализирующий о какой-то проблеме(отсутствует интернет-соединение, сервер временно недоступен, ведутся технические работы, по вашему запросу ничего не найдено и т.п.). Обычно заглушка отображается там, где должен быть контент, но по каким-то причинам он не был получен.
Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:
Popup — всплывающее окно, которое появляется внезапно, без запроса пользователя, и отображается поверх экрана, на котором находился пользователь. Не стоит путать с диалоговым окном, которое появляется при совершении пользователем какого-либо действия.
Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.
Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.
Toast — всплывающее уведомление, не блокирующее работоспособность приложения и плавно исчезающее спустя несколько секунд. Может сообщать о какой-то ошибке, о совершении какого-то действия (например, публикация каких-то изменений). Обычно тоаст содержит текстовую информацию, но может содержать и картинку.
Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).
TabBar — панель вкладок в нижней части экрана, позволяющая быстро переключаться между разделами приложения.
AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.
Alert — оповещение, которое передает важную информацию, связанную с состоянием приложения или устройства, и часто запрашивает обратную связь. Алерт состоит из заголовка, необязательного сообщения, одной или нескольких кнопок.
Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.
Bottomsheet — информационная панель, появляющаяся снизу экрана поверх текущего состояния при совершении какого-нибудь действия. Может содержать информацию, а также какие-либо действия.
Bubble — овальный элемент выбора какого-либо параметра, чаще всего используется в фильтрах.
Строка поиска — поле ввода для поискового запроса.
Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).
Page Controls — элемент управления, который отображает текущее положение экрана в плоском списке страниц (на скринах — точки над кнопкой, отображающие текущее положение через изменение цвета).
Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).
/>
Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.
Tooltip — всплывающее сообщение, которое завязано на элемент и обучает использованию той или иной части приложения.
Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.
Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.
Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).
Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.
Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):
Жесты
Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.
Double tap — два коротких касания, двойной тап.
Мультитап — три и более тапов подряд по одному элементу.
Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.
Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.
Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.
Pull to refresh (p2r) — дословный перевод: «потяни для обновления».
Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!
Pinch — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?
Мобильный 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.
Выводы
Нижняя навигация должна быть:
- Видимой и хорошо структурированной (используйте от трех до пяти пунктов верхнего уровня и избегайте прокручиваемого контента в нижней навигации).
- Чистой (в элементы меню должно быть легко попасть пальцем).
- Простой (каждый пункт навигации должен вести прямо к своему назначению, а также нижняя навигция должна быть одинаковой по всему приложению).
Заключение
Помощь пользователям в навигации — высокий приоритет для любого приложения или сайта. Ее цель — создание системы взаимодействий, которая естественным образом сочетается с мышлением пользователя. Вы создаете дизайны для своих пользователей. Всегда думайте об их характере, о целях, ради которых они пользуются вашим продуктом, и используйте навигацию, чтобы помочь им достичь желаемого. Чем проще в использовании ваш продукт, тем более вероятно, что они будут им пользоваться.