Свайп в мобильных приложениях — типы жестов и реализация

Что такое свайп в мобильных интерфейсах

Свайп (swipe) — это жест, при котором пользователь проводит пальцем по экрану в определённом направлении, инициируя действие. В отличие от тапа (короткое касание), свайп подразумевает движение и контакт с экраном на протяжении всего жеста.

История свайпа началась с первого iPhone в 2007 году — жест разблокировки «slide to unlock» стал визитной карточкой мобильных интерфейсов. Сегодня свайп используется в тысячах приложений для навигации, управления контентом и организации информации.

По данным UX Planet (2025), приложения с жестовым управлением (включая свайп) показывают на 18% более высокую вовлечённость пользователей. Свайп воспринимается как более естественное действие по сравнению с нажатием кнопки, поскольку имитирует физическое перемещение объектов.

Параметры распознавания свайпа

Основные параметры, которые определяют, является ли жест свайпом: минимальное расстояние (обычно 30–50 пикселей), максимальное отклонение от прямой линии (не более 15–20 градусов) и максимальная длительность контакта (до 500 мс). Если палец задерживается на экране дольше, жест классифицируется как перетаскивание (drag) или длительное нажатие (long press).

Типы свайпов по направлению

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

Горизонтальные свайпы (влево/вправо) чаще всего используются для управления отдельными элементами — удалением, архивированием, перелистыванием. Вертикальные свайпы (вверх/вниз) — для навигации между экранами и обновления контента. По данным Material Design Guidelines (2024), горизонтальный свайп удобнее для правшей: движение влево большим пальцем естественнее на правой руке.

Мультипальцевые свайпы

Свайпы двумя и тремя пальцами используются для продвинутых действий. Двумя пальцами — переключение между рабочими столами на iPad, отмена действия (three-finger swipe). Тремя пальцами — скриншот на некоторых устройствах. Однако мультипальцевые жесты менее интуитивны и требуют обучения пользователя.

Реализация свайпа на iOS

На iOS обработка жестов строится на базе UIGestureRecognizer — абстрактного класса, который анализирует последовательность touch-событий и определяет, соответствует ли она определённому жесту.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipe)
        )
        swipeLeft.direction = .left
        view.addGestureRecognizer(swipeLeft)
    }

    @objc func handleSwipe(sender: UISwipeGestureRecognizer) {
        print("Swipe left")
    }
}

UISwipeGestureRecognizer поддерживает настройку направления (direction) и количества пальцев (numberOfTouchesRequired). По умолчанию требуется один палец и направление вправо. Для определения других направлений нужно явно указать direction: .left, .up, .down.

API более нового уровня — UICollectionViewLayout с поддержкой swipe actions. Начиная с iOS 11, таблицы и коллекции поддерживают встроенные свайп-действия через UISwipeActionsConfiguration, что позволяет добавить кнопки удаления или архивации без ручной обработки жестов.

Реализация свайпа на Android

На Android обработка свайпов строится через GestureDetector — класс, который анализирует MotionEvents и вызывает соответствующие callback-методы.

class SwipeActivity : AppCompatActivity() {
    private val swipeThreshold = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                val dx = e2.x - e1.x
                if (dx > swipeThreshold) {
                    println("Swipe right")
                }
                return true
            }
        })
    }
}

Метод onFling в GestureDetector вызывается, когда пользователь быстро проводит пальцем по экрану. Он получает начальные и конечные координаты (e1, e2) и скорость движения (velocityX, velocityY). Для определения направления сравнивается разница координат по оси X или Y.

AndroidX библиотека предоставляет более удобный API: ViewCompat.setSwipeRefreshLayout для pull-to-refresh, RecyclerView с ItemTouchHelper для свайп-действий в списках. ItemTouchHelper позволяет добавлять свайп-функциональность с визуальной обратной связью — иконкой, цветом фона и анимацией.

Свайп в веб-приложениях

В веб-разработке для обработки свайпов используются события Touch Events API (touchstart, touchmove, touchend) и библиотеки-обёртки, такие как Hammer.js или Swiper.js.

let startX = 0;
let startY = 0;
const threshold = 50;

element.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if (Math.abs(dx) > threshold) {
        console.log(dx > 0 ? "Swipe right" : "Swipe left");
    }
});

Touch Events API — нативный способ обработки жестов в браузере. Событие touchstart фиксирует начальные координаты, touchmove отслеживает движение, touchend определяет результат. Пороговое значение (threshold) отсеивает случайные касания.

По данным Can I Use (2026), Touch Events API поддерживается 98% браузеров. Для сложных жестовых сценариев (множественные свайпы, распознавание направления) рекомендуется использовать библиотеку Hammer.js, которая абстрагирует low-level обработку и предоставляет понятный API.

UX-паттерны со свайпом

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

Паттерн «Swipe to Delete» — самый распространённый. Свайп влево по элементу списка открывает кнопку удаления. Стандартизирован на iOS (SwipeActionsConfiguration) и Android (ItemTouchHelper). Пользователи ожидают, что свайп влево удаляет или архивирует элемент.

Паттерн «Swipe to Go Back» — свайп от левого края экрана для возврата на предыдущий экран. Стал стандартом в iOS после iPhone X. На Android аналогичная навигация работает через системный жест. Важно не конфликтовать с этим системным жестом в своих приложениях.

Паттерн «Pull to Refresh» — свайп вниз для обновления контента. Изобретён Loren Brichter для Tweetie (2008), сейчас используется в миллионах приложений. Реализован в стандартных компонентах обеих платформ.

• Обратная связь — элемент должен двигаться вместе с пальцем, показывая результат до завершения свайпа
• Конфликты жестов — избегайте одновременной поддержки горизонтального свайпа и скролла на одном элементе
• Обнаруживаемость — первые свайп-действия должны сопровождаться визуальной подсказкой
• Отмена — пользователь должен иметь возможность отменить свайп, вернув палец в исходную позицию