Термин gesture — способ объединить движения пальцем по экрану для запуска какого-то действия; движение пальцем в таком случае используется вместо просто касания или клика. Полное касание (complete touch) или mouse — move-capturing функция — нужна для того, чтобы жесты регистрировались и были абсолютно правильными. Сегодня хорошая поддержка этой функции есть только в браузерах Safari и Android.
Если в твоем веб-приложении пользователю нужно использовать жесты, важно научить его правильным действиям — при помощи справки, анимированных примеров или какого-нибудь другого вида подсказок (рисунок 8.5).
Рис. 8.5. Google Fast Flip новый просмотрищик, использующий жесты на iPhone и Android устройств. Слева вы увидите предупреждающий диалог с инструкциями о том, как его использовать. Вы увидите инструкции только один раз.
Жест SwipeЖест swipe (также известен как flip) — технология для тач-браузеров, обычно используется для перемещения контента вперед-назад. Этот жест используется, например, во многих фото-галереях для смены выведенного на экран изображения и в презентациях для перелистывания слайдов. Суть жеста — простое движение пальцем по оси Х слева направо (горизонтальный swipe) или по оси Y сверху вниз (вертикальный swipe). swipe-жест поддерживается практически в каждом сенсорном устройстве, так как осуществляется одним пальцем.
Для перехвата swipe-действия нет специального стандартного события, поэтому будем эмулировать его, используя имеющиеся стандартные события
В устройствах Symbian 5-го поколения если вместо курсора использовать палец, то для событий mouse down, move и up получаются довольно странные результаты. Событие генерируется только один раз во время действия пальцем «перетащить» (drag), а событие вообще не срабатывает, если палец перемещен из точки начальных mouse-down координат. Поэтому, для обнаружения swipe в некоторых ситуациях нужны разные подходы.
Последовательность действий:
Последний пункт может быть заменен проверкой жеста на-лету внутри события onmousemove.
Если ты используешь в работе jQuery, можно для обнаружения горизонтального жеста swipe на устройствах iPhone использовать бесплатный плагин отсюда http://plugins.jquery.com/project/swipe .
При помощи следующего кода мы можем создать объектно-ориентированную библиотеку для обнаружения swipe (совместимо iPhone, Android и другими устройствами):
/** Creates a swipe gesture event handler */ function MobiSwipe(id) { // Constants this.HORIZONTAL = 1; this.VERTICAL = 2; this.AXIS_THRESHOLD = 30; // The user will not define a perfect line this.GESTURE_DELTA = 60; // The min delta in the axis to fire the gesture // Public members this.direction = this.HORIZONTAL; this.element = document.getElementById(id); this.onswiperight = null; this.onswipeleft = null; this.onswipeup = null; this.onswipedown = null; this.inGesture = false; // Private members this._originalX = 0 this._originalY = 0 var _this = this; // Makes the element clickable on iPhone this.element.onclick = function() {void(0)}; var mousedown = function(event) { // Finger press event.preventDefault(); _this.inGesture = true; _this._originalX = (event.touches) ? event.touches.pageX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // Only for iPhone if (event.touches && event.touches.length!=1) { _this.inGesture = false; // Cancel gesture on multiple touch } }; var mousemove = function(event) { // Finger moving event.preventDefault(); var delta = 0; // Get coordinates using iPhone or standard technique var currentX = (event.touches) ? event.touches.pageX: event.pageX; var currentY = (event.touches) ? event.touches.pageY: event.pageY; // Check if the user is still in line with the axis if (_this.inGesture) { if ((_this.direction==_this.HORIZONTAL)) { delta = Math.abs(currentY-_this._originalY); } else { delta = Math.abs(currentX-_this._originalX); } if (delta >_this.AXIS_THRESHOLD) { // Cancel the gesture, the user is moving in the other axis _this.inGesture = false; } } // Check if we can consider it a swipe if (_this.inGesture) { if (_this.direction==_this.HORIZONTAL) { delta = Math.abs(currentX-_this._originalX); if (currentX>_this._originalX) { direction = 0; } else { direction = 1; } } else { delta = Math.abs(currentY-_this._originalY); if (currentY>_this._originalY) { direction = 2; } else { direction = 3; } } if (delta >= _this.GESTURE_DELTA) { // Gesture detected! var handler = null; switch(direction) { case 0: handler = _this.onswiperight; break; case 1: handler = _this.onswipeleft; break; case 2: handler = _this.onswipedown; break; case 3: handler = _this.onswipeup; break; } if (handler!=null) { // Call to the callback with the optional delta handler(delta); } _this.inGesture = false; } } }; // iPhone and Android"s events this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function() { _this.inGesture = false; }, false); // We should also assign our mousedown and mousemove functions to // standard events on compatible devices }
Вот простой пример использования нашей бибилотеки swipe.js с с горизонтальным обнаружением swipe и другим с вертикальным обнаружением:
Swipe Gesture Detection window.onload = function() { var swipev = new MobiSwipe("vertical"); swipev.direction = swipev.VERTICAL; swipev.onswipedown = function() { alert("down"); }; swipev.onswipeup = function() { alert("up"); }; var swipeh = new MobiSwipe("horizontal"); swipeh.direction = swipeh.HORIZONTAL; swipeh.onswiperight = function() { alert("right"); }; swipeh.onswipeleft = function() { alert("left"); }; } Vertical Swipe Horizontal Swipe
Во многих сенсорных устройствах жест «перетащить» (drag) используется для прокрутки содержимого страницы и, при этом, не поддерживается функция preventDefault (о функции предотвращения поведения по умолчанию мы говорили чуть ранее в этой главе). Именно поэтому мы должны помимо жеста swipe рассмотреть и другие доступные способы навигации.
Жесты машстабирования и поворотаКогда iPhone только появился, самыми крутыми функциями в нем были именно жесты изменения масштаба и поворота. Используя жест pinching (сдвигая и раздвигая два пальца в щепотке) пользователь мог увеличить или уменьшить масштаб контента — это, как правило, изображение — на странице, а поворачивая два пальца по кругу изображение можно повернуть.
В устройствах, где нет поддержки мультитач функции изменения масштаба нужно реализовывать при помощи обычных плавающих кнопок и ползунков.
К счастью, начиная с iOS 2.0 эти жесты можно обнаружить не прибегая с низкоуровневой математике в тач-событиях. В таблице 8.35 перечислены три расширения WebKit, которые доступны в качестве событий. В браузере Android также добавлена поддержка этих событий.
Для масштабирования и поворота используются эти же события. Все три получают параметр GestureEvent. У этого параметра есть типичные для события свойства, а также дополнительные свойства scale и rotation.
Свойство scale определяет расстояние между двумя пальцами как множитель с плавающей точкой от начала дистанции, где было начало жеста. Если значение больше 1.0, значит это открытый pinch (увеличение), а если значение 1.0 — pinch закрытия (уменьшение).
rotation дает значение (в градусах) дельты (расстояния) вращения от начальной точки. Если пользователь вращает объект по часовой стрелке, то мы получаем положительное значение, а если против — то значение будет отрицательным.
Я знаю, что ты сейчас думаешь: «Вращение и изменение масштаба — это отлично, но какой нам от них толк, если мы работаем с HTML?». Здесь нам приходят на помощь CSS расширения для Safari на iOS (и в других браузеров с соответствующей поддержкой) с одним свойством и двумя функциями для управлением его значением: rotate и scale.
Функция rotate получает параметр в градусах и нам нужно определить deg unit после числа (например, rotate(90deg)). Узнать это мы можем из скрипта при помощи element.style.webkitTransform.
Давай рассмотри простой пример:
Gesture Management function gesture(event) { // We round values with two decimals event.target.innerHTML = "Rotation: " + Math.round(event.rotation*100)/100 + " Scale: " + Math.round(event.scale*100)/100; // We apply the transform functions to the element event.target.style.webkitTransform = "rotate(" + event.rotation%360 + "deg)" + " scale(" + event.scale + ")"; }
Как работает пример можешь увидеть на Рисунке 8-6. На совместимых устройствах ты можешь двумя пальцами поворачивать и масштабировать (вместе со всем содержимым). Только вот в чем проблема? Стиль преобразования всегда применяется к исходному элементу. Так, если мы применим к элементу масштаб 2.0, а потом еще раз увеличим на 0.5, то новое значение будет 0.5, а не 1.0, как можно было бы ожидать.
Рис. 8.6. Сочетая сенсорные события с CSS трансформациями, можно вращать и масштабировать элементы на своем сайте.
Для типичного zoom-rotate поведения мы должны заменить функцию на следующее:
var rotation = 0; var scale = 1; function gesture(event) { event.target.innerHTML = "Rotation: " + Math.round((event.rotation+rotation)*100)/100 + " Scale: " + Math.round((event.scale*scale)*100)/100; event.target.style.webkitTransform = "rotate(" + (event.rotation+rotation)%360 + "deg)" + " scale(" + event.scale*scale + ")"; } function gestureend(event) { rotation = event.rotation+rotation; scale = event.scale*scale; }
В данном справочнике собраны самые распространённые жесты, которые используются на мобильных устройствах.
ЖестыРуки являются прекрасным инструментом для коммуникаций с людьми и окружающей средой.
Руками мы можем создавать что-то прекрасное , проявлять свои эмоции (поднятый большой палец вверх), решать судьбы других людей (опущенный большой палец вниз, в Римской Империи) и даже посылать не симпатичных нам людей куда подальше (да, тот самый жест).
Некоторое время назад технологии позволили нам управлять информацией при помощи наших рук. И это совершенно новый опыт, и возможности, которые необходимо развивать.
Использование жестов для управления мобильными устройствами стало повсеместным. Мобильные устройства без сенсорных экранов уходят в прошлое. Теперь вся сила коммуникаций лишь в ваших двух руках .
Но, чтобы раскрыть максимально потенциал мобильных устройств с сенсорными экранами, мы должны изучить способ общения с этими устройствами. А он достаточно прост: жесты.
В этом справочнике мы рассмотрим все основные жесты, которые используются на мобильных устройствах: Tap (Тап), Swipe (Свайп), Long Press (Долгое нажатие), Long Press и Drag (Нажал и потянул), Pinch и Spread (Стягивание и растягивание), Double Tap (Двойное нажатие), Force Touch (Сильное нажатие).
Tap (Тап)Тап – это клик в мире мобильных устройств. Однократное непродолжительное нажатие на элемент. Позволяет взаимодействовать с любыми доступными обьектами на экране.
Это наиболее распространённый жест в мире мобильных устройств. Позволяет запускать приложения, открывать страницы, передвигаться внутри приложений и т.д.
Свайп – это второй по распространённости жест после тапа. Он знаком каждому, кто когда-либо заходил в интернет с мобильного устройства.
Его использование интуитивно и достаточно ограничено: свайп для того, чтобы прокрутить страницу вверх/вниз (скролл), или, чтобы перемещаться между экранами (главный экран на iOS, свайп влево / вправо позволяет перемещаться между страницами главного экрана).
Также свайп позволяет отображать и скрывать спрятанные панели (например, меню навигации), вызывать уведомления (свайп сверху вниз на iOS), вызывать панель управления (свайп сверху вниз на Android), перелистывать фотографии и производить множество других действий.
Свайп иногда используется в качестве защитного дизайна. Когда необходимо защитить пользователей от случайного нажатия. Например, для разблокировки в iOS необходимо сделать свайп.
Long Press (Долгое нажатие)Долгое нажатие является аналогом правого клика. На большинстве мобильных платформ долгое нажатие позволяет вызывать контекстные меню либо дополнительные действия связанные с нажимаемым обьектом.
На операционной системе Windows долгое нажатие работает точно так же, как правый клик – вызывает контекстное меню элемента.
Для пользователей Android, данный жест прекрасно знаком. Долго нажатие на любом элементе списка вызывает контекстное меню, которое позволяет проводить массовые манипуляции с элементами списка (удаление, перемещение).
На iOS долгое нажатие используется гораздо реже, чем на других операционных системах. Поэтому, если вы создаёте дизайн для iOS устройства, лучше избегать использования долгого нажатия. Потому как знают о задаче данного жеста только наиболее продвинутые пользователи.
Нажми и перетащи
Данный жест является анлогом функции drag and drop, которая знакома всем на стационарных компьютерах. Долгое нажатие на перемещаемом обьекте активирует возможность перемещать его путём перетаскивания.
Периодически встречается на всех платформах (например для смены расположения иконки на рабочем столе, смены порядка и расположения элементов и т.п.).
Pinch и Spread (Стягивание и растягивание)Данные жесты в основном используются для увеличения/уменьшения изображений, приближения/отдаления карт, увеличения/уменьшения веб страниц. Представляет из себя сьезжание и разьезжание двух пальцев на экране.
Данный жест позволяет сразу видеть результат взаимодействия с обьектом.
Также, в iOS данные жесты позволяют открывать/закрывать фотографии и выходить из альбома.
Двойное нажатиеДвойное нажатие позволяет увеличивать и уменьшать масштаб (точно также как pinch и spread). Некоторые приложения позволяют при помощи данного жеста проводить дополнительные манипуляции (выделение текста, сохранение записи в закладки).
Сильное нажатие
Данная технология используется в последних версиях продуктов компании Apple. Их экраны позволяют различать силу нажатия и, в зависимости от этого, предлагают различные варианты взаимодействия с обьектом.
Например, сильное нажатие позволяет предпросмотреть обьект, не открывая приложения, либо вызвать меню дополнительных действий.
Детально данная технология рассмотрена в .
Плюсы и минусы жестов
Жесты открывают колоссальные возможности для управления мобильными устройствами. Можно создать огромное количество различных вариаций, которые будут вызывать различные действия. Это позволяет избавиться от лишних кнопок в интерфейсе и добавить интерактивности.
Самым основным минусом жестов является их неинтуитивность . Вы можете рассчитывать, что люди знакомы с 7 перечисленными выше жестами, но они совершенно не знакомы с остальными жестами.
Если вы решаете добавить в своё приложение дополнительные жесты для управления, то пользователей придется учить использовать новый жест. Это потребует создания специального обучающего блока или же дополнительных подсказок.
Люди не любят учиться чему-то новому, особенно в приложениях. Много новой информации приводит к непониманию и отказу от приложения. Поэтому имеет смысл вводить жесты в интерфейс постепенно , по одному за раз.
Также, достаточно высок риск непонимания того, как работает ваше приложение, если вы скроете кнопки основных действий и замените их жестами.
Поэтому, если вы планируете дополнить приложение своими жестами, необходимо решить следующее:
- Насколько востребованы дополнительные жесты вашим пользователям
- Не конфликтуют ли они с жестами операционной системы
- Как вы будете обучать новым жестам пользователей
Любые замечания и предложения по поводу справочника можно писать в комментарии, мне на или в
Рассказывая о различных возможностях устройств на базе ОС Android, мы нередко употребляем такое необычное словечко как «свайп». Оказалось, что многие пользователи не знают его значения. Восполним этот пробел.
Слово свайп имеет сразу два значения. В первом случае свайп — это специальный жест, когда вы кладете палец на экран смартфона или планшета и ведете его в нужном направлении по экрану. Например, чтобы открыть шторку на смартфоне, нужно сделать свайп от верхней рамки устройства к нижней:
Важно при этом отметить, что слово «свайп» в данном смысле можно употреблять по отношению к любому девайсу, который поддерживает такие движения пальцем по экрану, а не только на ОС Android. Так, движения по экрану на устройствах Apple (iPhone, iPad) также именуются свайпом.
Второе значение — название клавиатуры Swype, которая позволяет вводить текст на экране смартфона или планшета, не отрывая пальца. Создателем клавиатуры Swype (от англ. swipe - проводить не отрывая, скользить и type - печатать текст) является Cliff Kushler.
В настоящее время в онлайн-магазинах приложений вы можете встретить множество приложений-клавиатур, которые поддерживают написание текста, не отрывая палец от экрана. Считается, что свайп-клавиатура позволяет набирать текст значительно быстрее, нежели стандартная клавиатура.
iPhone OS задумывалась в роли простой и очевидной альтернативы Windows Mobile для рядовых пользователей. Но потом превратилась в iOS, обросла полезными и нет функциями и стала сложной. Сегодня упрощаем.
1. Переместите события календаря длинным нажатием
Чтобы просто изменить время события в стандартном календаре iOS 10, зажмите его в меню просмотра дня или недели и перетяните в необходимое место. Это проще, чем заходить внутрь и изменять вручную.
2. Закройте изображение коротким свайпом сверху-вниз
Закрыть конкретное изображение и перейти к общему перечню альбома в стандартной галерее iOS 10 можно обычным свайпом сверху вниз. Этот же работает и в некоторых сторонних приложениях.
3. Верните нижнее меню Safari при пролистывании тапом
При пролистывании сайта верхняя панель стандартного браузера iOS 10 сжимается, а нижняя убирается, чтобы дать пользователю больше места для просмотра информации. Вторая панель восстанавливается одиночным тапом снизу.
4. Откройте недавно закрытые вкладки Safari одним тапом
Чтобы открыть недавно закрытые вкладки стандартного браузера платформы iOS 10, сделайте длинный тап на значок с изображением плюса в меню открытых вкладок. Это удобно, если закрыли конкретную случайно.
5. Откройте меню многозадачности жестом через 3D Touch
Меню многозначности iOS 10 откроете двойным нажатием на кнопку Home. Но удобнее сделать свайп с левого края экрана направо с усилием. Тогда раздел откроется с помощью технологии 3D Touch.
6. Переключитесь к предыдущему приложению iOS жестом
А чтобы вернуться к предыдущему открытому приложению, сделайте жест с усилием от левого края экрана к правому. Так вернетесь к программе, которой пользовались до. И это удобнее, чем через многозадачность.
7. Убирайте цифры калькулятора свайпами слева направо
В погоне за минимализмом дизайнеры iOS так и не добавили клавишу для отмены последнего введенного символа в стандартный калькулятор ОС. Но добьетесь этого свайпом слева направо по полю ввода.
8. Перейдите к началу или концу списка фотографий тапом
Чтобы перейти к началу списка фотографий в стандартной галерее, нажмите на статусную строку. В конец - на активную в данный момент иконку в нижней панели приложения. И это куда быстрее перелистывания туда-сюда.
9. Оцените приложения с уведомлениями в папке с 3D Touch
Если в папке есть два-три или больше приложений с уведомлениями, и на ней показывается значок с общим числом записей, можете просмотреть каждую отдельную сильным тапом на иконке каталога.
10. Отключите рекламу в игрушках без встроенных покупок
Если новая интересная бесплатная игра расстраивает навязчивой рекламой, которую предлагают отключить через встроенные покупки, выключите интернет или переведите телефон в авиарежим. И реклама пропадет.
Все перечисленные ниже функции протестированы на Android 9.0 Pie. В других версиях ОС или сторонних оболочках некоторые жесты могут работать иначе или не работать совсем.
1. Двойной свайп вниз от границы экрана - полное выдвижение панели настроекСтандартный свайп вниз от верхней границы экрана показывает только уведомления. Чтобы выдвинуть всю верхнюю панель и получить доступ к быстрым настройкам системы, нужно делать ещё один свайп. Но вы можете заменить эти два жеста одним - точно таким же, но выполненным двумя пальцами. Такой двойной свайп выдвигает панель целиком.
Если одна из программ начинает постоянно присылать уведомления, возникает острое желание уменьшить их количество или просто отключить. Для этого приходится открывать приложение и копаться в нём в поисках нужных настроек. Но можно просто нажать на уведомление и удерживать палец несколько секунд - появится кнопка для быстрого доступа к нужным настройкам.
Чтобы переключиться между вкладками Chrome, нужно сначала нажать на цифру с количеством вкладок, а затем выбрать нужную из них. Но есть альтернативный способ, с помощью которого удобно переходить на соседние вкладки. Достаточно делать свайпы вправо или влево, скользя пальцем по адресной строке.
Если устройство начинает тормозить, а перезагрузка не помогает, уместно протестировать его работу в безопасном режиме. В этом состоянии на аппарат не влияют сторонние программы, поэтому вызванные ими проблемы проще устранить. Чтобы перейти в безопасный режим, зажмите клавишу питания и удерживайте, пока на дисплее не появится кнопка «Отключить питание». Затем задержите касание на ней - через секунду увидите предложение перейти в безопасный режим.
Жесты в значительно упрощают использование смартфона. К примеру, вы можете быстро менять формат отображения снимков щипком, даже не заходя в дополнительное меню. Достаточно сводить и разводить два пальца поверх списка фотографий, и приложение будет переключать вид: обычный, по дням, по месяцам, по годам.
Кроме того, вы можете быстро выделить множество изображений. Для этого задержите касание на одном из нужных снимков и, не отрывая пальца от экрана, проведите им по остальным.
Масштабировать карту традиционным жестом - щипком - не очень-то удобно на ходу, когда вы держите смартфон одной рукой. Разработчики учли этот нюанс и добавили альтернативный способ. Чтобы изменить размер карты одним пальцем, быстро нажмите на неё дважды и, не отрывая пальца, проведите им вверх или вниз. Масштаб будет меняться.
Если захотите быстро рассмотреть мелкий фрагмент снимка или прочесть крохотный шрифт сайта, на котором стандартное масштабирование не работает, можете воспользоваться спрятанным жестом. Для этого надо нажать трижды на экран и, не поднимая пальца, поделать свайпы в разные стороны. Но способ сработает, если предварительно вы активируете опцию «Жесты для увеличения» в разделе «Специальные возможности» в настройках смартфона.
Когда в набранный текст закрадывается опечатка, приходится попадать пальцем в нужное место между мелких букв, чтобы её исправить. Это, мягко говоря, не очень просто. К счастью, вы можете управлять курсором гораздо более удобным способом. Просто скользите пальцем по пробелу, и курсор будет перемещаться вдоль текста.
Возможно, вы знаете другие не совсем очевидные жесты? Делитесь в комментариях!
Loading...