Мобильный UX-дизайн: нижняя навигация
Дизайнеры знают, что дизайн — это больше, чем просто приятный вид. Дизайн также отвечает за нахождение общего языка между пользователем и продуктом, будь то вебсайт или приложение. Это как разговор. Навигация — это разговор. Потому что неважно, насколько хорош ваш сайт или приложение, если пользователь не может в нем разобраться.
Почему нижняя навигация так важна?
Стивен Хубер в своем исследовании использования мобильных устройств обнаружил, что 49% пользователь пользуются одним пальцем, чтобы решить ту или иную задачу на своих телефонах. На рисунке ниже цвета обозначают, какие области может достать пользователь пальцем при взаимодействии с экраном. Зеленый цвет обозначает область, которую легко достать пальцем; желтая область уже требует некой растяжки; а красная вынуждает пользователя изменить положение устройства в руке. Область однопальцевого взаимодействия с экраном сматфона. Источник: uxmatters Важно размещать главные и наиболее часто используемые действия внизу экрана, потому что в этом случае до них легко достать одним пальцем.
Взгляд снизу. Олимпийский огонь. 18 октября 2013
Панель вкладок
Многие приложения следуют этому правилу и используют навигацию снизу (например, панель вкладок) для размещения самых важных опций приложения. Ключевой функционал в 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.
Выводы
- Видимой и хорошо структурированной (используйте от трех до пяти пунктов верхнего уровня и избегайте прокручиваемого контента в нижней навигации).
- Чистой (в элементы меню должно быть легко попасть пальцем).
- Простой (каждый пункт навигации должен вести прямо к своему назначению, а также нижняя навигция должна быть одинаковой по всему приложению).
Заключение
Помощь пользователям в навигации — высокий приоритет для любого приложения или сайта. Ее цель — создание системы взаимодействий, которая естественным образом сочетается с мышлением пользователя. Вы создаете дизайны для своих пользователей. Всегда думайте об их характере, о целях, ради которых они пользуются вашим продуктом, и используйте навигацию, чтобы помочь им достичь желаемого. Чем проще в использовании ваш продукт, тем более вероятно, что они будут им пользоваться.
Источник: ux.pub
Уведомления внизу экрана на Android. Откуда они берутся и что с ними делать
Ежедневно мы получаем десятки, если не сотни уведомлений от разных приложений. Они могут требовать реакции с нашей стороны, а могут не требовать, но так или иначе их можно назвать интерактивными. Узнать их очень просто. Помимо кликабельности, они отличаются тем, что появляются в шторке уведомлений.
Однако есть и такие уведомления, которые материализуются в самом низу экрана, не позволяют кликнуть на себя и даже не уточняют, какое приложение их отправило. Разбираемся, что это такое.
Уведомления на Android бывают двух типов: обычные и тост
Второй тип уведомлений, упомянутых мной в предыдущем абзаце, называется тост-уведомлениями. Несмотря на то что с английского слово toast переводится как поджаренный ломтик хлеба, на языке программистов этот термин обозначает маленькое информационное окно, присутствующее в некоторых видах программного обеспечения.
Что такое тост-уведомления
Это и есть тост-уведомление
Тост-уведомления – это системные уведомления, носящие исключительно информирующий характер и не требующие каких-либо действий от пользователя. Самый известный пример тост-уведомлений – это уведомление о получении прав разработчика. Как это сделать и, самое главное, зачем, мы рассказывали в отдельной статье – обязательно почитайте.
Поскольку тост-уведомления не позволяют кликнуть на них, зачастую пользователи, во-первых, не успевают прочесть их содержимое, а, во-вторых, не представляют, какое приложение их им направило. В результате получается полная неразбериха, что не очень удобно, учитывая, что зачастую информационная ценность тост-уведомлений оказывается довольно высокой.
Как добавить тост-уведомления в шторку
Впрочем, существует приложение, которое позволяет превратить тост-уведомления в обычные с характерными признаками: кликабельностью, упоминанием принадлежности и отображением в шторке уведомлений.
- Скачайте приложение Toast Sources из Google Play;
- Запустите его и откройте доступ к универсальным возможностям;
Чтобы всё заработало, нужно дать приложению разрешение на работу с универсальным доступом
- На главном экране включите параметры Service is enabled, Show as notifications и Display overlay;
- Откройте шторку уведомления, как только следующее тост-уведомление поступит, и узнайте подробности.
Тост-уведомления на Android
На Android нельзя возвращаться к чтению тост-уведомлений, но с помощью Toast Sources — можно
Несмотря на то что скорее всего вы будете нечасто обращаться к Toast Sources, рекомендую после настройки тут же спрятать его в папку с другими ненужными приложениями. Дело в том, что оно работает в пассивном режиме, автоматически выцепляя тост-уведомления из системы и интерпретируя их в обычные, которые затем размещаются в шторке уведомлений. Поэтому просто рассматривайте его как одну из системных утилит, не претендующих на регулярное взаимодействие.
Не знаю, как часто вы получаете тост-уведомления, однако я фактически начал получать их только после установки Toast Sources. Это выглядело странным, поэтому я прикинул мозгами и понял, что раньше я просто не замечал их, а теперь у меня банально нет шанса пропустить их. Во всяком случае, когда они стали появляться в шторке уведомлений, я начал осознавать, что тост-уведомления не просто существуют, но и зачастую несут в себе очень полезную информацию.
- Новичкам в Android
- Приложения для Андроид
Наши соцсети
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Лонгриды для вас
И пусть нам не всегда удается все сделать правильно, но мы стараемся. Я говорю о шагах, которые мы привыкли предпринимать, чтобы максимально продлить срок службы батареи смартфона. Мы пытаемся его правильно заряжать, почти безрезультатно отключать Bluetooth и Wi-Fi или даже отключать указание заряда в процентах.
Все это помогает лишь отчасти, ведь на самом деле есть много других вещей, которые заставляют нас подключаться к зарядке чаще, чем можно было бы. Но после прочтения этой статьи многое изменится. В первую очередь потому, что мы узнаем, какие приложения наиболее опасны в этом плане. Ведь они полностью истощают энергию не только при использовании.
Мы живем в эпоху, когда камера в смартфоне является важнейшим элементом, ведь фотографии — то, без чего невозможно представить нашу жизнь в принципе. Далеко не все телефоны делают хорошие фотографии, которые не стыдно запостить в социальные сети: то лишние объекты появляются, то цвета слишком мрачные да и вообще — нет ничего лучше черно-белых фотокарточек. Встроенный фоторедактор в смартфоне вряд ли справится с этими задачами, поэтому на помощь приходят сторонние приложения для редактирования фотографий. Выбрали для вас 5 самых лучших для Android-смартфонов и не только.
Разработчики смартфонов за последние годы добавили в свои устройства настолько много различных функций и датчиков, что пользователи элементарно не замечают их существования. Большей частью из них мы пользуемся ежедневно, а некоторыми, казалось бы, очень редко: вот, например, для чего нужен барометр в смартфоне — для чего он может пригодиться? Оказывается, датчик давления очень полезен, поэтому его берут на вооружение даже производители смарт-часов. Предлагаю разобраться, как он работает, в каких смартфонах есть и для чего нужен.
DrMeth 26.12.2020
Тяжело после айфона. Там все в одной непролазной куче, и иконки и уведомления. А как только появляется два места — всё, уже тяжело. Эх эпол, эпол, что же ты творишь с хомосапиенсами, эволюция вспять.
А по статье тост уведомления всегда были и есть, плохо когда выскакивают поверх клавиатуры.
Войдите, чтобы ответить
Ilapro53 26.12.2020
Как можно не замечать тосты? Это абсурд!
Войдите, чтобы ответить
Ilapro53 26.12.2020
И зачем тост уведомления в шторку помещать? Они нужны только для того чтобы донести информацию, полезную в данный момент. В шторке они будут только ненужным хламом
Войдите, чтобы ответить
- Вход
- на сайте Microsoft. На самом деле, это очень полезная функция!
Чтобы отключить слежку в Windows 10, нажмите по значку в панели задач. У вас откроется окно, нажмите в нём на вкладку Открыть параметры конфиденциальности сведений о расположении .
Далее, у вас откроется страница Местоположение . Здесь будет включен параметр Служба определения местоположения .
Нажмите по переключателю рядом с параметром, чтобы отключить слежение. После чего значок в панели задач исчезнет. Всё готово!
Обратите внимание! Чтобы полностью отключить слежение, чтобы приложения не могли включать его у вас, вверху страницы нажмите на кнопку Изменить . В открывшемся окне переведите переключатель в положение Отключить . Всё готово! Служба определения местоположения станет не активна. Приложения не смогут автоматически включать слежение, даже если оно отключено.
Как настроить слежение на Windows 10
Если у вас данный значок не отображается и вы не знаете где можно настроить определение местоположения, вам нужно открыть меню Пуск (внизу экрана слева). В открывшемся окне нажмите на вкладку или значок Параметры .
Далее, на странице Параметры Windows нажмите на вкладку Конфиденциальность .
Далее, в параметрах конфиденциальности, слева в боковой панели, перейдите на вкладку Местоположение . Здесь вы можете настроить слежение, включить или отключить.
Смотрите, здесь вы можете:
— Указать своё местоположение по умолчанию.
— Очистить журнал сведений о местоположении.
— Можно выбрать приложения, которым разрешено следить за вами.
Всё готово! Вот так просто и быстро вы можете отключить и настроить слежение на Windows 10.
Остались вопросы? Напиши комментарий! Удачи!
Источник: info-effect.ru
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) — дословный перевод: «потяни для обновления».
Draghttps://habr.com/ru/company/youla/blog/540768/» target=»_blank»]habr.com[/mask_link]