मोबाइल ऐप्स में स्वाइप — जेस्चर के प्रकार और कार्यान्वयन

मोबाइल इंटरफेस में स्वाइप क्या है

स्वाइप (swipe) एक जेस्चर है जिसमें उपयोगकर्ता एक निश्चित दिशा में स्क्रीन पर उंगली खिसकाता है, जिससे कोई क्रिया शुरू होती है। टैप (छोटा स्पर्श) के विपरीत, स्वाइप में पूरे जेस्चर के दौरान गति और स्क्रीन के साथ संपर्क शामिल होता है।

स्वाइप का इतिहास 2007 में पहले iPhone से शुरू हुआ — “slide to unlock” जेस्चर मोबाइल इंटरफेस की पहचान बन गया। आज, स्वाइप का उपयोग हजारों एप्लिकेशन में नेविगेशन, सामग्री प्रबंधन और सूचना संगठन के लिए किया जाता है।

UX Planet (2025) के अनुसार, जेस्चर नियंत्रण (स्वाइप सहित) वाले एप्लिकेशन 18% अधिक उपयोगकर्ता जुड़ाव दिखाते हैं। स्वाइप को बटन दबाने की तुलना में अधिक प्राकृतिक क्रिया माना जाता है, क्योंकि यह वस्तुओं की भौतिक गति की नकल करता है।

स्वाइप पहचान पैरामीटर

मुख्य पैरामीटर जो यह निर्धारित करते हैं कि कोई जेस्चर स्वाइप है या नहीं: न्यूनतम दूरी (आमतौर पर 30–50 पिक्सेल), सीधी रेखा से अधिकतम विचलन (15–20 डिग्री से अधिक नहीं) और अधिकतम संपर्क अवधि (500 मि.से. तक)। यदि उंगली स्क्रीन पर अधिक समय तक रहती है, तो जेस्चर को ड्रैग या लॉन्ग प्रेस के रूप में वर्गीकृत किया जाता है।

दिशा के अनुसार स्वाइप के प्रकार

गति की दिशा के अनुसार, स्वाइप चार मुख्य प्रकारों में विभाजित होते हैं: बाएँ, दाएँ, ऊपर और नीचे। प्रत्येक प्रकार का अपना उद्देश्य और उपयोग का संदर्भ होता है।

क्षैतिज स्वाइप (बाएँ/दाएँ) अक्सर व्यक्तिगत आइटम प्रबंधित करने के लिए उपयोग किए जाते हैं — हटाना, संग्रहित करना, पलटना। ऊर्ध्वाधर स्वाइप (ऊपर/नीचे) — स्क्रीन के बीच नेविगेट करने और सामग्री को रिफ्रेश करने के लिए। Material Design Guidelines (2024) के अनुसार, क्षैतिज स्वाइप दाएँ हाथ वालों के लिए अधिक सुविधाजनक है: दाएँ हाथ पर अंगूठे को बाएँ ले जाना अधिक प्राकृतिक है।

मल्टी-फिंगर स्वाइप

दो और तीन उंगलियों वाले स्वाइप उन्नत क्रियाओं के लिए उपयोग किए जाते हैं। दो उंगलियाँ — iPad पर डेस्कटॉप के बीच स्विच करना, पूर्ववत करना (तीन-उंगली स्वाइप)। तीन उंगलियाँ — कुछ उपकरणों पर स्क्रीनशॉट। हालांकि, मल्टी-फिंगर जेस्चर कम सहज होते हैं और उपयोगकर्ता प्रशिक्षण की आवश्यकता होती है।

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) के कॉन्फ़िगरेशन का समर्थन करता है। डिफ़ॉल्ट रूप से, एक उंगली और दाएँ दिशा की आवश्यकता होती है। अन्य दिशाओं को पहचानने के लिए, आपको स्पष्ट रूप से दिशा निर्दिष्ट करनी होगी: .left, .up, .down।

एक उच्च-स्तरीय API — UICollectionViewLayout स्वाइप एक्शन समर्थन के साथ। iOS 11 से, तालिकाएँ और संग्रह UISwipeActionsConfiguration के माध्यम से अंतर्निहित स्वाइप एक्शन का समर्थन करते हैं, जो मैन्युअल जेस्चर हैंडलिंग के बिना हटाने या संग्रहित करने के बटन जोड़ने की अनुमति देता है।

Android पर स्वाइप का कार्यान्वयन

Android पर, स्वाइप हैंडलिंग GestureDetector के माध्यम से बनाई जाती है — एक वर्ग जो MotionEvents का विश्लेषण करता है और संबंधित कॉलबैक विधियों को कॉल करता है।

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
            }
        })
    }
}

GestureDetector में onFling विधि तब कॉल की जाती है जब उपयोगकर्ता जल्दी से स्क्रीन पर उंगली खिसकाता है। यह प्रारंभिक और अंतिम निर्देशांक (e1, e2) और गति की गति (velocityX, velocityY) प्राप्त करता है। दिशा निर्धारित करने के लिए, X या Y अक्ष पर निर्देशांक अंतर की तुलना की जाती है।

AndroidX लाइब्रेरी एक अधिक सुविधाजनक API प्रदान करती है: पुल-टू-रिफ्रेश के लिए ViewCompat.setSwipeRefreshLayout, सूचियों में स्वाइप एक्शन के लिए 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 परिणाम निर्धारित करता है। थ्रेशोल्ड मान आकस्मिक स्पर्श को फ़िल्टर करता है।

Can I Use (2026) के अनुसार, Touch Events API 98% ब्राउज़रों द्वारा समर्थित है। जटिल जेस्चर परिदृश्यों (एकाधिक स्वाइप, दिशा पहचान) के लिए, Hammer.js लाइब्रेरी का उपयोग करने की अनुशंसा की जाती है, जो निम्न-स्तरीय हैंडलिंग को अमूर्त करती है और एक स्पष्ट API प्रदान करती है।

स्वाइप के साथ UX पैटर्न

स्वाइप के साथ सफल UX पैटर्न मोबाइल इंटरफेस के वर्षों के विकास में बने हैं। उनका उपयोग यह सुनिश्चित करता है कि उपयोगकर्ता बिना अतिरिक्त प्रशिक्षण के समझ जाए कि जेस्चर कैसे काम करता है।

“स्वाइप टू डिलीट” पैटर्न सबसे आम है। सूची आइटम पर बाएँ स्वाइप करने से डिलीट बटन दिखाई देता है। iOS (SwipeActionsConfiguration) और Android (ItemTouchHelper) पर मानकीकृत। उपयोगकर्ता उम्मीद करते हैं कि बाएँ स्वाइप करने से आइटम हट जाता है या संग्रहित हो जाता है।

“स्वाइप टू गो बैक” पैटर्न — पिछली स्क्रीन पर लौटने के लिए स्क्रीन के बाएँ किनारे से स्वाइप करना। iPhone X के बाद iOS में मानक बन गया। Android पर, समान नेविगेशन सिस्टम जेस्चर के माध्यम से काम करता है। अपने एप्लिकेशन में इस सिस्टम जेस्चर के साथ संघर्ष न करना महत्वपूर्ण है।

“पुल टू रिफ्रेश” पैटर्न — सामग्री को रिफ्रेश करने के लिए नीचे स्वाइप करना। Loren Brichter द्वारा Tweetie (2008) के लिए आविष्कार किया गया, अब लाखों एप्लिकेशन में उपयोग किया जाता है। दोनों प्लेटफ़ॉर्म के मानक घटकों में कार्यान्वित।

• प्रतिक्रिया — तत्व को उंगली के साथ चलना चाहिए, स्वाइप पूरा होने से पहले परिणाम दिखाते हुए
• जेस्चर संघर्ष — एक ही तत्व पर एक साथ क्षैतिज स्वाइप और स्क्रॉल का समर्थन करने से बचें
• खोज क्षमता — पहले स्वाइप क्रियाओं के साथ दृश्य संकेत होना चाहिए
• रद्द करना — उपयोगकर्ता उंगली को मूल स्थिति में वापस लाकर स्वाइप को रद्द करने में सक्षम होना चाहिए