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

Какво е свайп в мобилните интерфейси

Свайп (swipe) е жест, при който потребителят пръства с пръста си по екрана в определена посока, като започва действие. За разлика от докосването (кратко докосване), свайпът включва движение и контакт с екрана през цялото времетраене на жеста.

Историята на свайпа започна с първия iPhone през 2007 г. — жестът за отключване „slide to unlock” стана визитната карта на мобилните интерфейси. Днес свайпът се използва в хиляди приложения за навигация, управление на съдържание и организиране на информация.

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

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

Основните параметри, които определят дали даден жест е свайп: минимално разстояние (обикновено 30–50 пиксела), максимално отклонение от правата линия (не повече от 15–20 градуса) и максимална продължителност на контакта (до 500 ms). Ако пръстът застои по-дълго на екрана, жестът се класифицира като влачене (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("Пръствайте наляво")
    }
}

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

API на по-високо ниво — UICollectionViewLayout с поддръжка на swipe действия. От iOS 11 насам, таблиците и колекциите поддържат вградени swipe действия чрез 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("Пръствайте надясно")
                }
                return true
            }
        })
    }
}

Методът onFling в GestureDetector се извиква, когато потребителят бързо провлачва пръста си по екрана. Той получава начални и крайни координати (e1, e2) и скоростта на движение (velocityX, velocityY). За определяне на посоката се сравнява разликата на координатите по ос X или Y.

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

Свайп в уеб приложенията

В уеб разработката за обработка на свайповете се използват събитията на 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 ? "Пръствайте надясно" : "Пръствайте наляво");
    }
});

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

Според Can I Use (2026), Touch Events API се поддържа от 98% от браузърите. За сложни сценарии с жестове (многократни свайпове, разпознаване на посока) се препоръчва използването на библиотеката Hammer.js, която абстрахира нисконивовната обработка и предоставя ясен 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), сега се използва в милиони приложения. Реализиран в стандартните компоненти и на двете платформи.

• Обратна връзка — елементът трябва да се движи заедно с пръста, като показва резултата преди завършването на свайпа
• Конфликти на жестовете — избягвайте едновременната поддръжка на хоризонтален свайп и превъртане на един и същ елемент
• Откриваемост — първите свайп действия трябва да съм придружени с визуален подсказан
• Отмяна — потребителят трябва да има възможност да отмени свайпа, като върне пръста в началната позиция