лонг тап что это

Краткий справочник жестов для Android – тап, свайп, long press и другие

Автор: Менеджер, отдела Продаж и продвижения

С вероятностью 100% можно утверждать, что все пользователи мобильного приложения системы «Флюгер-Продажи» имеют сенсорный экран. То есть действия и управление своим смартфоном или планшетом происходит жестами и касаниями экрана. В этой статье мы рассмотрим самые распространенные жесты для пользователей мобильных устройств на платформе Android.

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

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

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

Двойной нажатие (двойной тап) — в Android-устройствах двойной тап применяется для изменения масштаба и включения/отключения предусмотренных в программах функциональности. Например, чтобы увеличить масштаб страницы сайта при просмотре ее в браузере, дважды быстро тапните по экрану. Чтобы вернуть прежний масштаб нужно повторить двойной тап.

Pull To Refresh( потяни для обновления) – в мобильном приложении «Флюгер-Продажи» этот действие используется для обновления остатков товаров и оборудования. Зачем тратить драгоценное экранное пространство на кнопку, которая не так уж и часто используется, если можно воспользоваться приемом Pull To Refresh: находясь вверху списка, потяните список вниз, а затем отпустите, чтобы список обновился.

Обновление остатков в мобильно приложении «Флюгер-Продажи»

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

Мы предлагаем Вам лично оценить работу системы мобильной торговли «Флюгер-Продажи» в бесплатной, полнофункциональной демо-версии сроком до 90 дней. Свяжитесь с нами по телефону, почте или skype, либо оставьте заявку на нашей посадочной странице. Также подписывайтесь на наш телеграм канал.

Источник

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 — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.

Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?

Источник

Справочник жестов

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

Жесты

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

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

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

В этом справочнике мы рассмотрим все основные жесты, которые используются на мобильных устройствах: Tap (Тап), Swipe (Свайп), Long Press (Долгое нажатие), Long Press и Drag (Нажал и потянул), Pinch и Spread (Стягивание и растягивание), Double Tap (Двойное нажатие), Force Touch (Сильное нажатие).

Tap (Тап)

Тап – это клик в мире мобильных устройств. Однократное непродолжительное нажатие на элемент. Позволяет взаимодействовать с любыми доступными обьектами на экране.

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

Swipe (Свайп)

Свайп – это второй по распространённости жест после тапа. Он знаком каждому, кто когда-либо заходил в интернет с мобильного устройства.

Его использование интуитивно и достаточно ограничено: свайп для того, чтобы прокрутить страницу вверх/вниз (скролл), или, чтобы перемещаться между экранами (главный экран на iOS, свайп влево / вправо позволяет перемещаться между страницами главного экрана).

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

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

Long Press (Долгое нажатие)

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

На операционной системе Windows долгое нажатие работает точно так же, как правый клик – вызывает контекстное меню элемента.

Для пользователей Android, данный жест прекрасно знаком. Долго нажатие на любом элементе списка вызывает контекстное меню, которое позволяет проводить массовые манипуляции с элементами списка (удаление, перемещение).

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

На iOS есть аналог длинного нажатия – сильное нажатие (доступно начиная с iPhone 6S), которое позволяет вызывать дополнительные действия в зависимости от силы нажатия. Подробнее мы рассмотрим далее или же можно почитать в нашем обзоре 3D Touch.

Нажми и перетащи

Данный жест является анлогом функции drag and drop, которая знакома всем на стационарных компьютерах. Долгое нажатие на перемещаемом обьекте активирует возможность перемещать его путём перетаскивания.

Периодически встречается на всех платформах (например для смены расположения иконки на рабочем столе, смены порядка и расположения элементов и т.п.).

Pinch и Spread (Стягивание и растягивание)

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

Данный жест позволяет сразу видеть результат взаимодействия с обьектом.

Также, в iOS данные жесты позволяют открывать/закрывать фотографии и выходить из альбома.

Двойное нажатие

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

Сильное нажатие

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

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

Детально данная технология рассмотрена в статье о 3D Touch.

Плюсы и минусы жестов

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

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

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

Поэтому, если вы планируете дополнить приложение своими жестами, необходимо решить следующее:

Любые замечания и предложения по поводу справочника можно писать в комментарии, мне на email или в twitter.

Источник

Разрабатывая приложения для Android и iPhone с iPad (IOS) используя лишь веб-технологии, перед каждым девелопером встаёт рано или поздно вопрос реализации и использования в своей игре или приложении сложными мультитач действиями, такими как свайп, щепотка, а также обработки длительного тапа (длительное касание одним пальцем без движения) и drag’n’drop.

В этом материале мы рассмотрим способы осуществления обработки тач-событий разной сложности на Javascript Event’ах, без сторонних библиотек (jQuery min только прихватим).

Сразу оговорюсь, что использовать jQuery я буду только для того чтобы отключить дефолтное поведение браузера на событие. Мне не нравится эта библиотека, поэтому всё будет написано на Vanilla JS.

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

Всего используются 3 ключевых события:

Если чтобы получить элемент на который заехала мышь или съехала, было достаточно вызвать event.target, то с touch-событиями не так всё просто.

Каждое касание должно идентифицироваться. И для этого используются списки:

Чтобы было проще понять вот ситуация:

Я ставлю один палец на экран и все 3 списка имеют один элемент.

Я ставлю второй палец и теперь touches имеет 2 элемента, targetTouches будет иметь 2 элемента если второй палец я поставлю на тот же HTML элемент что и первый, а changedTouches в свою очередь будет иметь только второй палец, так как именно он вызвал событие.

Если я поставлю на экран сразу 2 пальца одновременно, тогда changedTouches будет иметь 2 элемента (по каждому на палец).

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

Если я уберу палец, то списки touches, targetTouches опустеют на один элемент, а changedTouches будет содердать палец, так как он вызвал событие (touchend)

Когда я уберу последний палец, списки touches, targetTouches не будут содержать ничего, а changedTouches будет иметь информацию о этом самом пальце.

Теперь самое время узнать какую именно информацию мы можем получить о пальце:

Посмотреть уникальный ID единственного касания можно вызвав event.touches[0].identifier, а на IOS, если я не ошибаюсь надо делать так event.originalEvent.touches[0].identifier.

Что ж, кой чему я вас уже научил, а теперь самое время перейти к практике.

Перед тем как мы приступим вам следует усвоить кое-что. В каждой игре, приложении которое вы будете делать на Android и IOS вы должны отключить стандартную реакцию компонента WebView на события. Для этого мы и подключали jQuery (Я не смог сделать на Pure JS то что делают функции event.preventDefault() и event.stopPropagation()).

Итак вам нужно поместить в ваш JS код следующее:

document.addEventListener(‘touchstart’, function(event) <
event.preventDefault();
event.stopPropagation();
/* Здесь ваш код обработки события*/
>, false);

document.addEventListener(‘touchmove’, function(event) <
event.preventDefault();
event.stopPropagation();
/* Здесь ваш код обработки события*/
>, false);

document.addEventListener(‘touchend’, function(event) <
event.preventDefault();
event.stopPropagation();
/* Здесь ваш код обработки события*/
>, false);

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

Давайте имея полученные знания опишем все основные touch взаимодействия с экраном и элементами.

Tap (Косание)

Это событие выполняется просто когда мы косаемся пальцем экрана и убираем его.

obj.addEventListener(‘touchstart’, function(event) <
if (event.targetTouches.length == 1) <
var myclick=event.targetTouches[0]; /*Ваш код*/
>
>, false);

На примере в переменной myclick будет содержаться ваше касание.

Long tap (Длительное косание)

Хоть и нечасто, однако встречаются ситуации когда в мобильном приложении или игре нужно поймать действие длительного касания на объекте. Давайте рассмотрим как сделать длительное касание на Javascript для сенсорных экранов мобильных смартфонов ну иконечно же планшетов.

var ldelay;
var betw=<>;
document.addEventListener(‘touchstart’, function(event) <
event.preventDefault();
event.stopPropagation();
ldelay=new Date();
betw.x=event.changedTouches[0].pageX;
betw.y=event.changedTouches[0].pageY;
>, false);
/*Ловим отпускание пальца*/
document.addEventListener(‘touchend’, function(event) <
var pdelay=new Date();
if(event.changedTouches[0].pageX==betw.x &&
event.changedTouches[0].pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800)<
/*Здесь ваш код*/
>
>, false);

Это первая реализация Long Tap на яваскрипте. Логика такая: ловим касание, замеряем время этого события, ловим отпускание, замеряем время отпускания, вычитаем первое время из второго и проверяем не изменилось ли положения пальца на экране. Если палец на том же месте и времени прошло более 800 миллисекунд, мы выполняем действия Long Tap.

Теперь давайте разберём вторую реализацию с немного другой логикой:

var lttimer;
document.addEventListener(‘touchstart’, function(event) <
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
>, false);
document.addEventListener(‘touchmove’, function(event) <
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
>, false);
document.addEventListener(‘touchend’, function(event) <
clearTimeout(lttimer);
>, false);
function longTouch()

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

Swipe (Листание)

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

В примере мы используем для теста объект с id dro, вы можете использовать свой объект, прописав его переменной objzoom. В переменных вы можете поменять данные, например максимальный зум или минимальный.

Слайдинг изображений и HTML

Мы уже выше описали ка сделать swipe на основе которого можно сделать слайдинг изображений или своих данных в HTML коде. Однако некоторых может не устроить такое и если вы в числе тех кто хочет проще и быстрее получить результат не вдаваясь в подробности, для вас этот подраздел.

Не забывайте что вешать обработчики на HTML-объекты стоит тогда когда они уже известны, т.е. в событии window.onload или DOMContentLoaded.

Источник