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

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



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

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


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


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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

    100+ Touch Gestures Icons

    pixelbuddha.net/freebie/touch-gestures-icons



    Touch Gestures

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



    A Set of 5 Gestures

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



    Free Icons — Interaction gestures

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



    Touch Gesture Icons .Sketch

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



    Github

    github.com/mariuszostrowski/gesty



    Oxygenna

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



    Freepik

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



    Flaticon

    www.flaticon.com/categories/gestures



    Free vector

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



    Vecteezy

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



    Mobiletuxedo

    www.mobiletuxedo.com/touch-gesture-icons



    Vector.me

    vector.me/search/gesture



    Freevector

    www.freevector.com/vector/gesture



    Pixabay

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



    Iconstore

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



    Сlipart.me

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



    365psd

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

    ua-hosting.company

    557,00

    Хостинг-провайдер: серверы в NL / US до 100 Гбит/с

    Поделиться публикацией

    Похожие публикации

    Комментарии 8
      0
      Мне кажется в картинках к этой теме проиллюстрирована большая беда мобильных разработчиков, они считают, что используется указательный палец, хотя по факту для смартфонов используется большой (мало кто держит смартфон в одной руке и тычет в него другой). Из-за этого далеко не все жесты легко (или вообще возможно) использовать одной рукой (к примеру масштабирование или повороты), а элементы управления зачастую размещены в труднодоступных (верхнем левом углу) местах.

        0
        Как по мне, эта проблема должна решаться уровнем ниже — в самой мобильной ОС.
        Например, в Windows 10 Mobile на экране больше 5" можно «подтянуть» весь интерфейс вниз, чтобы нажать тот злосчастный «гамбургер» в левом верхнем углу, а также уменьшить и расположить клавиатуру ближе к правой/левой руке.
          0
          Кажется в iPhone-ах еще раньше был
            +1
            Айфонов больше 5" до 6 плюс версии не было вообще ;)
            Да и странно говорить, что эппл что-то инновационное делал в своих изделиях.
            0
            Да в общем-то я про жесты, про элементы управления к слову было.
            0
            Вот интересно, а версию для левшей тоже надо делать? :) Ну т.е. зеркалировать весь интерфейс для левши.
              +1
              Левши привыкли страдать и приноровились к правосторонним интерфейсам.
                0
                Ну многие левши привыкли к обычным интерфейсам (многие мои знакомые левши даже не знали про функцию "для левши" в настройках мыши).
                А вообще зеркалирование не является чем-то сложным и такая галочка в настройках будет кому-то приятна.

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое