Жесты в проектировании и дизайне

С распространением сенсорных дисплеев становится особенно актуальным вопрос комбинаций жестов в компьютерных технологиях. Мультитач позволяет пользователям с помощью простых движений пальцев легко перемещать виртуальные объекты на экране. Большинство ключевых действий на сенсорных устройствах тесно связаны с жестами, они лежат в основе взаимодействия с мобильными устройствами и планшетами. Жесты состоят из тактильной механики (то, что делают пальцы пользователя на его сенсорном экране) и последующей тактильной деятельности (результат тактильной механики).

6d242e33924746b588cf53ad5e6a78f0.png

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

Тактильная механика и тактильная деятельность


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

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

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

e2132b3cfa884e04a3172dd326a6f146.png
Скольжение также хорошо известно рядовому пользователю. Это действие осуществляется через прикосновение и проведение пальцем по поверхности экрана. Прекрасным примером служит блокировка телефона с помощью соединения пальцем определённых точек на экране для блокировки или разблокировки.

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

388b7db8aa3448d3af7aada942e56d53.pngСмахивание соединяет в себе скольжение и перетаскивание. В данном случае тактильная механика не имеет особых отличий от перетаскивания, кроме как в скорости. Смахивая, палец движется очень быстро, как будто нужно прокрутить экран, чтобы убрать изображение профиля/аватарки/приложения.

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

eb6f11e24f41448099a0c7b110274c8e.pngДлительное нажатие и перетаскивание предполагает нажатие с удержанием пальца на экране с последующим движением по его поверхности. Оно используется для изменения порядка расположения значков приложений и т. д.

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

210e16362c9b4a7b8095a92933841a51.pngСведение/Разведение включают одновременное нажатие двумя пальцами, расположенными вблизи или на некотором расстоянии друг от друга, с дальнейшим их разведением или сближением. Жест завершается поднятием пальцев над поверхностью экрана. Обычно, результатом такой механики становится уменьшение или увеличение масштаба изображения.

Одинарное касание двумя пальцами — нажатие, которое совершается двумя пальцами одновременно. Затем следует незамедлительное поднятие обоих пальцев. Жест обычно служит уменьшению масштаба изображения.

4ca4e0e444dc45e5ba3b2d072f6a6053.pngВедение, перетаскивание или смахивание двумя пальцами — эти жесты требуют использование двух пальцев, когда пользователь прикасается к экрану, «скользит» по нему и поднимает их над экраном. Жесты могут использоваться либо для выбора нескольких элементов, либо для наклона, либо для прокрутки.

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

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

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

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

Тактильная механика векторе


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

100+ Touch Gestures Icons

pixelbuddha.net/freebie/touch-gestures-icons

c64eab7e10d74fcb882761fc7e8e6a4d.png

Touch Gestures

dribbble.com/shots/1383148-Touch-Gestures-freebie

e53d7eb86c4540fc91b30bef8eb49c92.png

A Set of 5 Gestures

dribbble.com/shots/1031710-A-Set-of-5-Gestures-FREE

a1b45926cbc5419d9e6ee5cd9186ab58.png

Free Icons — Interaction gestures

dribbble.com/shots/2026081-Free-Icons-Interaction-gestures

10691454f81e4c13bfe06d7d607be808.png

Touch Gesture Icons .Sketch

www.sketchappsources.com/free-source/476-touch-gesture-icons.html

687670f7cabf49d29d29b612bbeca587.png

Github

github.com/mariuszostrowski/gesty

f9703a1e192d4b76b04bccfd1c958ed3.png

Oxygenna

www.oxygenna.com/news/free-set-of-material-design-hand-gestures

593e3a7e7e6d4372bf14eead9e6cc9a6.png

Freepik

www.freepik.com/free-photos-vectors/gesture

4bda34ae33fe44c2a3272ab3ba1aed3e.png

Flaticon

www.flaticon.com/categories/gestures

615cad041d2b4fb3ac382be5894f65fa.png

Free vector

all-free-download.com/free-vector/hand-gestures-vectors.html

e0c529eb6e564751b976c1bc86ace594.png

Vecteezy

www.vecteezy.com/free-vector/hand-gestures

04c30e9ba4ee43da82307134ca06f8ef.png

Mobiletuxedo

www.mobiletuxedo.com/touch-gesture-icons

42f3308a4f034b4fafa812e7b56df64f.png

Vector.me

vector.me/search/gesture

175092df1f1f44069aacb0c32111a25b.png

Freevector

www.freevector.com/vector/gesture

1d29dbfafdad4f91921b7ae36873ce5f.png

Pixabay

pixabay.com/ru/photos/gestures/? image_type=vector

e2d7a940f19d42dd92ccab989fec6a57.png

Iconstore

iconstore.co/icons/free-vector-gesture-icons

1cd194186c3640f39f8fef6555f254d9.png

Сlipart.me

ru.clipart.me/human-people/free-vector-hand-gesture-27064

b2503185d81e4990a602dc2befc7ca77.png

365psd

ru.365psd.com/vector/free-vector-hand-gesture-32051

266b1b67a3d14d5bb96a6ba297d228e9.png

© Habrahabr.ru