Меню внизу экрана как называется
Мобильный 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.
Выводы
Нижняя навигация должна быть:
Заключение
Помощь пользователям в навигации – высокий приоритет для любого приложения или сайта. Ее цель – создание системы взаимодействий, которая естественным образом сочетается с мышлением пользователя.
Вы создаете дизайны для своих пользователей. Всегда думайте об их характере, о целях, ради которых они пользуются вашим продуктом, и используйте навигацию, чтобы помочь им достичь желаемого. Чем проще в использовании ваш продукт, тем более вероятно, что они будут им пользоваться.
Особенности настройки панель задач Windows 7–10
Панель задач (трей) — это элемент в виде полоски, на котором отображаются иконки приложений, панель быстрого запуска и меню «Пуск». По умолчанию в Windows он расположен внизу экрана, но при желании его можно прикрепить по бокам, сверху, спрятать либо же полностью заставить исчезнуть. Персонализация трея может быть весьма тонкой, поэтому для быстрой и успешной настройки необходимо знать, из чего он состоит.
Главные составляющие и инструменты
Панель задач состоит из многих компонентов, часть из которых включены изначально, а некоторые нужно активировать вручную. Основные составляющие:
На основной трей могут быть добавлены ещё одни панели, именуемые «Инструментами». Основные «инструменты» всегда включены, но по умолчанию их отображение выключено в Windows.
Скрытие и восстановление
Некоторые пользователи считают, что полоска внизу экрана мешает комфортной работе с системой, и задаются вопросом, как скрыть панель задач в Windows 7 и 10.
Существует только один официальный способ, как убрать панель задач внизу экрана. Для этого необходимо переместить указатель мышки на свободное место в трее, нажать правую кнопку мыши и выбрать пункт «Свойства». Во всплывшем окне свойств, на главной вкладке нужно поставить галочку возле пункта «Автоматически скрывать». Для сохранения изменений следует нажать на «Применить», а затем на «ОК». Нужно отметить, что панель задач будет появляться при наведении курсора мышки вниз экрана и скрываться при отдалении.
У скрытия панели задач есть небольшой недостаток для пользователей слабых компьютеров. При сильной загруженности системы после наведения курсора мыши на место снизу, почему-то могут наблюдаться тормоза системы.
Существует дополнительный способ заставить исчезнуть полоску внизу экрана. Понадобится программа под названием Hide Tray, заставляющая более надёжно скрывать трей. Для её работы нужно лишь настроить автозагрузку при запуске Windows, добавив туда программу. Чтобы вернуть трей, нужно нажать кнопку «Пуск». Он будет находиться на своём изначальном месте.
Если пропала строка внизу экрана, то для того чтобы её восстановить, нужно проделать обратную скрытию операцию. Необходимо зайти в меню «Свойства», в первой вкладке убрать галочку напротив пункта «Автоматически скрывать», нажать на «Применить» и в конце «ОК». Если трей продолжает пропадать, то стоит просканировать систему антивирусом, поскольку некоторые вирусы могут заставлять его исчезать.
Изменение расположения
Для более комфортной работы пользователей, существует несколько простых методов переместить трей.
Первый метод включает такие шаги:
Второй метод выглядит следующим образом:
Дополнительная панель
Можно сделать несколько дополнительных панелей одновременно. Для этого нужно:
Все ярлыки из папки теперь будут закреплены в полоске слева. Список ярлыков также можно закрепить справа, сверху и снизу. Настроить скрытие дополнительной панели задач возможно так же, как и основной — в меню «Свойства». Если список и ярлыки пропали, то, возможно, папка с ними была удалена.
Удаление Яндекс строки в Windows 10
После установки браузера от Яндекса в Windows 10, в трее может появиться яндекс строка. Некоторые пользователи могут думать над тем, как удалить яндекс строку из панели задач, ведь она не содержит исполнительных файлов. Решение проблемы проходит в несколько шагов:
Строка удалена. Теперь нужно лишь очистить оставшиеся от неё файлы и записи в реестре. Сделать это можно, например, с помощью бесплатной утилиты CCleaner.
Originally posted 2018-05-26 19:06:08.
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 — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?