Руководство администратора
Управление мобильным приложением осуществляется через специальные наборы элементов управления (контролов) на экране устройства. Элементы управления отображаются пользователю в пользовательском интерфейсе, а настраиваются в режиме администрирования «Первой Формы». Мобильное приложение 1F поддерживает следующие элементы управления:
• нижнее меню (меню вкладок) — набор кнопок внизу экрана, каждая кнопка соответствует вкладке (режиму просмотра). Максимально возможное количество вкладок — 6 штук. Нижнее меню присутствует на экране всегда. По умолчанию не содержит ни одной вкладки.
• боковое (левое) меню — открывается нажатием на кнопку в верхнем левом углу экрана. Это иерархический список элементов, который формируется из двух частей: сверху главное меню , под ним меню Избранное . По умолчанию главное меню содержит пункт «Настройки».
• дашборд (рабочий стол) — набор плиток, доступен из бокового\нижнего меню в пунктах с названием «Главная». Рабочий стол может отображать разные данные — например, для широких плиток Категорий и Задач он может загружать сокращенные тексты задач.
Схема мобильного интерфейса. Контейнеры.
Принципы настройки мобильного интерфейса
Для создания и настройки элементов мобильного интерфейса используются контейнеры, шаблоны и блоки.
Контейнер — это упорядоченный список элементов интерфейса. Каждый экран приложения состоит из контейнеров, одного или нескольких (за исключением ненастраиваемых экранов загрузки и авторизации). Система поддерживает 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.
Выводы
- Видимой и хорошо структурированной (используйте от трех до пяти пунктов верхнего уровня и избегайте прокручиваемого контента в нижней навигации).
- Чистой (в элементы меню должно быть легко попасть пальцем).
- Простой (каждый пункт навигации должен вести прямо к своему назначению, а также нижняя навигция должна быть одинаковой по всему приложению).
Заключение
Помощь пользователям в навигации — высокий приоритет для любого приложения или сайта. Ее цель — создание системы взаимодействий, которая естественным образом сочетается с мышлением пользователя. Вы создаете дизайны для своих пользователей. Всегда думайте об их характере, о целях, ради которых они пользуются вашим продуктом, и используйте навигацию, чтобы помочь им достичь желаемого. Чем проще в использовании ваш продукт, тем более вероятно, что они будут им пользоваться.
Как называется нижняя панель
Полоса прокрутки — элемент (виджет) графического интерфейса пользователя, использующийся для отображения информации и элементов интерфейса, больших по размеру, чем используемый для их отображения контейнер (окно просмотра, область прокрутки).
Как называется нижняя панель приложения
TabBar — панель вкладок в нижней части экрана, позволяющая быстро переключаться между разделами приложения.
Как называются значки внизу экрана компьютера
Длинный ответ: официальное название штуковины снизу экрана — «панель задач» (taskbar). Она состоит из нескольких элементов — кнопка «Пуск», кнопки переключения между задачами, часы, и «область уведомлений» (taskbar notification area).
Как называется длинная полоса в нижней части рабочего стола
Это область, откуда запускаются приложения, где находятся окна документов, списки файлов (папок) и так далее. Длинная полоса в нижней части экрана называется панелью. На панели находятся кнопки запуска приложений и индикаторы состояния, например текущее время, свернутые запущенные приложения, и многое другое.
Как называется полоса на экране
Панель задач — один из основных элементов управления, обычно располагается в нижней части экрана. Панель задач представляет собой длинную горизонтальную полосу в нижней части экрана.
Что за полоска на экране
Белые полосы на экране — это признак попадания влаги и механических повреждений. Желтые, зеленые или синие полосы свидетельствуют о программных сбоях. Черные полосы могут быть результатом активности вирусов или неисправности контроллера. Красные полосы в основном свидетельствуют о заводском браке.
Как называется нижнее меню
Нижнее меню (меню вкладок) — набор кнопок внизу экрана, каждая кнопка соответствует вкладке (режиму просмотра). Максимально возможное количество вкладок — 6 штук. Нижнее меню присутствует на экране всегда. По умолчанию не содержит ни одной вкладки.
Что такое панель навигации
Панель навигации представляет собой элемент пользовательского интерфейса, с помощью которого можно обращаться как к унифицированным, так и к зависящим от продукта инструментам навигации.
Как показать нижнюю панель
Перемещение панели задач Windows или восстановление ее расположения по умолчанию:
- Щелкните в пустом месте на панели задач.
- Удерживая нажатой левую кнопку мыши, перетащите указатель в то место экрана, где необходимо расположить панель задач.
- После перемещения указателя в нужное место экрана отпустите кнопку мыши.
Как называются значки на экране
Значок, также иконка (от англ. icon) — элемент графического интерфейса, небольшая картинка, обозначающая приложение, файл, каталог, окно, компонент операционной системы, устройство и т. п.
Что на панели задач отображается
Основное назначение панели задач — отображение запущенных программ в виде кнопок и значков, а также быстрое переключение с одной на другую. Кроме того, с помощью панели задач можно запускать некоторые полезные программы. Панель задач содержит кнопку Пуск, кнопки со значками активных приложений и индикаторы.
Как называется процесс панели задач
Диспетчер задач Windows — Википедия
Как убрать полоску внизу экрана андроид
Заходим в общие Настройки системы и прокручиваем до пункта «Расширенные настройки». Заходим в него и ищем подпункт «Безграничный экран». Внутри данного раздела нас ждет, очевидно, глубокие настройки управления жестами. Также мы можем обнаружить интересную позицию под названием «Скрыть полноэкранный индикатор».
Как переместить полоску внизу экрана
Перемещение панели задач Windows или восстановление ее расположения по умолчанию:
- Щелкните в пустом месте на панели задач.
- Удерживая нажатой левую кнопку мыши, перетащите указатель в то место экрана, где необходимо расположить панель задач.
- После перемещения указателя в нужное место экрана отпустите кнопку мыши.
Как убрать полоску внизу экрана на компе
1. Щелкните правой кнопкой мыши панель задач и выберите Параметры панели задач в нижней части списка. 2. Включите Автоматически скрывать панель задач в режиме рабочего стола.
Как убрать шторку внизу экрана
Если она вам не нравится, вы можете отключить это полосу следующим образом:
- Настройки—>Расширенные настройки—>Безграничный экран
- Здесь нужно будет отключить пункт, который может называться по разному, в зависимости от версии прошивки. Например, «Hide full screen indicator» или «Отключить полноэкранный индикатор».
26.05.2023 Как называется нижняя панель
На экранах электронных устройств, таких как компьютеры, смартфоны и телевизоры, мы всегда можем увидеть различные элементы интерфейса, которые помогают нам быстро найти нужные функции и контент. Один из таких элементов — панель задач, которая располагается в нижней части экрана и содержит кнопку «Пуск», кнопки переключения между задачами, часы и область уведомлений.
Также на нижней части экрана мы можем увидеть полосу прокрутки, которая используется для отображения информации и элементов интерфейса, больших по размеру, чем доступный контейнер или окно просмотра. На этой полосе мы можем перемещаться вверх и вниз, чтобы посмотреть весь контент.
TabBar — это еще один элемент интерфейса, который располагается в нижней части экрана. Он представляет собой панель вкладок, которая позволяет быстро переключаться между разделами приложения. Это очень удобно, когда мы хотим быстро перейти к нужному разделу и не тратить время на поиск его в меню или других элементах интерфейса.
Еще один элемент интерфейса, располагающийся в нижней части экрана, — это нижнее меню или меню вкладок. Оно представляет собой набор кнопок, каждая из которых соответствует вкладке или режиму просмотра. Максимальное количество вкладок на нижнем меню — 6 штук, но оно всегда присутствует на экране и может содержать любое количество вкладок.
И, наконец, панель навигации — это элемент пользовательского интерфейса, который помогает нам перемещаться между разными разделами и функциями в приложении или на сайте. Это может быть как унифицированный набор инструментов навигации, так и индивидуальные элементы, зависящие от конкретного продукта или приложения.
Важно отметить, что на экране могут появляться различные полосы и линии, которые могут свидетельствовать о различных проблемах с устройством. Например, белые полосы могут быть признаком попадания влаги, а черные — результатом активности вирусов или неисправности контроллера. Поэтому, если вы заметили какие-либо изменения на экране, вам следует обратиться к специалистам, чтобы быстро решить проблему.
Мобильный UX: навигация внизу экрана
Каждый разработчик знает, что дизайн — это не только приятный внешний вид, но и то, как пользователи взаимодействуют с продуктом. Не важно, насколько хорош ваш сайт или приложение, если пользователи не могут в нем сориентироваться.
Почему навигация внизу экрана так важна?
40% пользователей производят большинство действий на смартфоне большим пальцем. Картинка ниже отражает удобство использования мобильного устройства одной рукой: зеленым цветом обозначена часть экрана, с которой легче всего взаимодействовать, желтым — та, к которой приходится тянуться, а красным — зона, до которой можно добраться, только если взять телефон по-другому.
Важно разместить навигацию верхнего уровня и наиболее часто используемые опции внизу экрана — в зоне, до которой легко дотянуться большим пальцем.
Многие приложения следуют этому правилу и используют навигацию внизу экрана (панель вкладок) для самых важных своих функций. На Facebook многие ключевые функции доступны в одно касание, и пользователь может легко и быстро переключаться между ними.
Навигация — это транспорт, доставляющий пользователей туда, куда они хотят попасть. Внизу экрана следует размещать ссылки на самые важные пункты назначения, к которым необходим прямой доступ из любой части приложения. Хорошая навигация внизу экрана подчиняется следующим трем правилам.
Читайте также: Правило большого пальца: проектирование дизайна для мобильных устройств
1. Показывайте только самые важные пункты
Используйте от трех до пяти главных пунктов назначения в навигации внизу страницы. Если их меньше трех, то, может быть, лучше использовать вкладки.
Постарайтесь не использовать больше пяти пунктов назначения в навигации внизу экрана, потому что в таком случае цели будут расположены слишком близко друг к другу. Когда ссылок на панели вкладок слишком много, людям физически сложно попасть по нужной. К тому же, каждая дополнительная ссылка усложняет ваше приложение.
Если навигация верхнего уровня в вашем приложении включает в себя больше пяти пунктов, предоставьте доступ к тем из них, что не попали в меню внизу экрана, в другом месте.
Избегайте скроллинга в меню
Скрытая навигация кажется очевидным решением для маленьких экранов: если вы упакуете меню во вкладку с прокруткой, вам не придется беспокоиться о маленькой площади экрана. Однако прокрутка менее эффективна: пользователю придется прокручивать список еще до того, как он вообще увидит нужный вариант.
2. Обозначайте текущее местонахождение
Отсутствие информации о текущем местоположении — это, пожалуй, самая распространенная ошибка, встречающаяся в меню приложений. «Где я?» — это один из фундаментальных вопросов, ответ на которые нужен пользователю, чтобы не заблудиться в вашем приложении.
Пользователю должно быть понятно, как попасть из точки А в точку Б, с первого взгляда и без дополнительных внешних подсказок. Используйте правильные визуальные сигналы (иконки, ярлыки и цвета), чтобы навигация не требовала пояснений.
Иконки
Если навигация внизу страницы представлена в форме иконок, то она должна использоваться для информации, которую можно донести с их помощью. Некоторые иконки хорошо знакомы пользователям: поиск, емейл, печать и прочие. К сожалению, универсальных иконок не так много, и разработчики приложений часто прячут функционал за малопонятными иконками.
Предыдущая версия приложения Bloom.fm для Android. Что значит круг? Пользователю сложно понять свое текущее местоположение.
Цвет
Не стоит использовать иконки разных цветов в навигации внизу экрана. Вместо этого задействуйте основной цвет приложения, чтобы показать пользователю, где он находится.
Слева: разноцветные иконки делают ваше приложение похожим на новогоднюю елку. Справа: используйте только один основной цвет.
Следуйте простому правилу: выделяйте иконку, соответствующую текущему местоположению пользователя, основным цветом своего приложения.
Навигация внизу страницы в приложении Twitter для iOS при просмотре сообщений.
Если нижняя панель навигации цветная, сделайте иконку, соответствующую местоположению пользователя, черной или белой.
Слева: избегайте сочетания цветных иконок с цветной панелью навигации. Справа: используйте черные или белые иконки.
Текстовые ярлыки
Текстовые ярлыки должны быть короткими и ясными пояснениями к иконкам навигации. Избегайте длинных текстовых ярлыков: они не должны укорачиваться, сворачиваться или сжиматься.
Элементы хорошего меню легко сканируются. Пользователю должно быть понятно, что именно происходит, когда он нажимает на тот или иной элемент.
Размер цели
Сделайте цели достаточно крупными, чтобы по ним было легко кликнуть. Чтобы вычислить оптимальные размеры той или иной навигационной кнопки, разделите ее ширину на количество действий или сделайте все кнопки навигации внизу экрана такими же крупными, как и главные кнопки действия.
Android рекомендует следующие размеры для кнопок навигации на мобильных:
Значки на иконках
Вы можете отображать значки на иконках навигации, сообщая, что в соответствующем разделе появилась новая информация.
Читайте также: Как протестировать юзабилити иконок на вашем ресурсе?
3. Сделайте навигацию самоочевидной
Хорошая навигация должна казаться невидимой рукой, которая ведет пользователя по его пути. В конце концов, любая замечательная функция бесполезна, если люди просто не могут ее найти.
Поведение
Каждая иконка навигации внизу экрана должна вести на конкретную страницу, а не открывать меню или диалоговые окна. Кликнув по иконке, пользователь должен сразу попадать в нужное ему место или переключать приложение в нужный режим.
Не размещайте в панели вкладок элементы управления для текущего экрана или режима приложения. Если такие элементы необходимы, поместите их на панель инструментов.
Постоянство
По возможности отображайте одни и те же вкладки в любой ориентации: дайте пользователям ощущение визуальной стабильности.
Не удаляйте вкладку, когда ее функция недоступна. Когда вкладки то исчезают, то появляются, UI вашего приложения становится нестабильным и непредсказуемым. Лучше всего оставить все вкладки, но объяснить, почему содержимое той или иной вкладки недоступно. Так, если у пользователя нет оффлайн-файлов, вкладка «Оффлайн» в приложении Dropbox отображает экран с пояснениями о том, что они из себя представляют и как ими обзавестись.
Спрятать панель вкладок
Если на экране появляется лента, панель вкладок можно свернуть, пока пользователь прокручивает ее вниз, и снова развернуть, когда он начнет крутить ее вверх, чтобы вернуться к началу.
Нижняя панель навигации появляется и исчезает динамически, в зависимости от скроллинга.
Визуальные эффекты
При переключении режимов приложения избегайте движения вбок. Переключение между активным и неактивным режимом должно сопровождаться анимацией постепенного затухания.
Читайте также: Навигация мобильных сайтов и приложений: базовые принципы юзабилити
Выводы
Навигация внизу страницы должна быть:
- Видимой и хорошо структурированной. Используйте от трех до пяти самых важных пунктов назначения и избегайте скроллинга в навигации.
- Ясной. Элементы панели должны быть удобными для сканирования и достаточно крупными, чтобы по ним было легко кликнуть.
- Простой. Каждая иконка должна вести к конкретной цели, и все элементы, в том числе навигация внизу страницы, должны быть постоянны во всех режимах и ориентациях.
Удобная и понятная навигация должна быть приоритетом для каждого разработчика приложений или сайтов. Ваша цель — создать систему взаимодействий, которая соответствует ментальным моделям пользователя.
Вы создаете сайт или приложение для пользователей. Всегда держите в голове образ пользователя, думайте о целях, которые он преследует, используя ваше приложение, и разрабатывайте навигацию, чтобы помочь ему достичь этих целей. Чем легче людям использовать ваш продукт, тем чаще они будут это делать.