سوایپ در اپلیکیشن‌های موبایل — انواع ژست‌ها و پیاده‌سازی

سوایپ در رابط‌های موبایل چیست

سوایپ (swipe) ژستی است که کاربر انگشت خود را روی صفحه در جهتی مشخص می‌کشد و عملی را آغاز می‌کند. بر خلاف ضربه زدن (لمس کوتاه)، سوایپ شامل حرکت و تماس با صفحه در طول ژست است.

تاریخچه سوایپ با اولین iPhone در سال ۲۰۰۷ آغاز شد — ژست باز کردن قفل «slide to unlock» به نشانه رابط‌های موبایل تبدیل شد. امروزه سوایپ در هزاران اپلیکیشن برای ناوبری، مدیریت محتوا و سازماندهی اطلاعات استفاده می‌شود.

به گزارش UX Planet (2025)، اپلیکیشن‌های دارای کنترل ژستی (از جمله سوایپ) ۱۸٪ تعامل کاربر بیشتری نشان می‌دهند. سوایپ در مقایسه با فشار دادن دکمه به عنوان عملی طبیعی‌تر درک می‌شود، زیرا حرکت فیزیکی اشیاء را شبیه‌سازی می‌کند.

پارامترهای تشخیص سوایپ

پارامترهای اصلی که مشخص می‌کنند آیا ژست سوایپ است: حداقل فاصله (معمولاً ۳۰–۵۰ پیکسل)، حداکثر انحراف از خط مستقیم (بیش از ۱۵–۲۰ درجه نباشد) و حداکثر مدت تماس (تا ۵۰۰ میلی‌ثانیه). اگر انگشت بیشتر روی صفحه بماند، ژست به عنوان کشیدن (drag) یا فشار طولانی (long press) طبقه‌بندی می‌شود.

انواع سوایپ بر اساس جهت

بر اساس جهت حرکت سوایپ‌ها به چهار نوع اصلی تقسیم می‌شوند: چپ، راست، بالا و پایین. هر نوع کاربرد و زمینه استفاده خاص خود را دارد.

سوایپ‌های افقی (چپ/راست) بیشتر برای مدیریت عناصر مجزا استفاده می‌شوند — حذف، بایگانی، ورق زدن. سوایپ‌های عمودی (بالا/پایین) — برای ناوبری بین صفحات و به‌روزرسانی محتوا. به گزارش Material Design Guidelines (2024)، سوایپ افقی برای راست‌دستان راحت‌تر است: حرکت به چپ با شست در دست راست طبیعی‌تر است.

سوایپ‌های چند انگشتی

سوایپ‌های دو و سه انگشتی برای عملیات پیشرفته استفاده می‌شوند. دو انگشت — جابجایی بین دسکتاپ‌ها در iPad، لغو عمل (three-finger swipe). سه انگشت — اسکرین‌شات در برخی دستگاه‌ها. با این حال، ژست‌های چند انگشتی کمتر بصری هستند و نیاز به آموزش کاربر دارند.

پیاده‌سازی سوایپ در iOS

در iOS مدیریت ژست‌ها بر پایه UIGestureRecognizer است — کلاسی انتزاعی که دنباله رویدادهای لمسی را تحلیل می‌کند و تعیین می‌کند آیا با ژست خاصی مطابقت دارد یا خیر.

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 با پشتیبانی از اکشن‌های سوایپ. از 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("کشیدن به راست")
                }
                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 ? "کشیدن به راست" : "کشیدن به چپ");
    }
});

Touch Events API — روش بومی مدیریت ژست‌ها در مرورگر. رویداد touchstart مختصات اولیه را ثبت می‌کند، touchmove حرکت را ردیابی می‌کند، touchend نتیجه را تعیین می‌کند. مقدار آستانه (threshold) لمس‌های تصادفی را فیلتر می‌کند.

به گزارش Can I Use (2026)، Touch Events API توسط ۹۸٪ مرورگرها پشتیبانی می‌شود. برای سناریوهای پیچیده ژستی (سوایپ‌های متعدد، تشخیص جهت) توصیه می‌شود از کتابخانه Hammer.js استفاده کنید که پردازش سطح پایین را انتزاعی کرده و API قابل فهمی ارائه می‌دهد.

الگوهای UX با سوایپ

الگوهای موفق UX با سوایپ در طول سال‌ها تکامل رابط‌های موبایل شکل گرفته‌اند. استفاده از آنها تضمین می‌کند که کاربر بدون آموزش اضافی نحوه کار ژست را درک می‌کند.

الگوی «Swipe to Delete» — رایج‌ترین است. سوایپ به چپ روی یک آیتم لیست دکمه حذف را باز می‌کند. در iOS (SwipeActionsConfiguration) و Android (ItemTouchHelper) استاندارد شده است. کاربران انتظار دارند سوایپ به چپ آیتم را حذف یا بایگانی کند.

الگوی «Swipe to Go Back» — سوایپ از لبه چپ صفحه برای بازگشت به صفحه قبلی. بعد از iPhone X در iOS به استاندارد تبدیل شد. در Android ناوبری مشابه از طریق ژست سیستمی کار می‌کند. مهم است که با این ژست سیستمی در اپلیکیشن‌های خود تداخل ایجاد نکنید.

الگوی «Pull to Refresh» — سوایپ به پایین برای به‌روزرسانی محتوا. توسط Loren Brichter برای Tweetie (2008) اختراع شد، اکنون در میلیون‌ها اپلیکیشن استفاده می‌شود. در کامپوننت‌های استاندارد هر دو پلتفرم پیاده‌سازی شده است.

• بازخورد — عنصر باید همراه با انگشت حرکت کند و نتیجه را قبل از تکمیل سوایپ نشان دهد
• تداخل ژست‌ها — از پشتیبانی همزمان سوایپ افقی و اسکرول روی یک عنصر خودداری کنید
• قابلیت کشف — اولین اکشن‌های سوایپ باید با راهنمای بصری همراه باشند
• لغو — کاربر باید بتواند با بازگرداندن انگشت به موقعیت اولیه، سوایپ را لغو کند