Swipe σε εφαρμογές κινητού — τύποι χειρονομιών και υλοποίηση

Τι είναι το swipe σε κινητές διεπαφές

Swipe είναι μια χειρονομία όπου ο χρήστης σύρνει το δάχτυλό του στην οθόνη σε μια συγκεκριμένη κατεύθυνση, εναρχήζοντας μια ενέργεια. Σε αντίθεση με το πάτημα (σύντομη αφή), το swipe περιλαμβάνει κίνηση και επαφή με την οθόνη κατά τη διάρκεια όλης της χειρονομίας.

Η ιστορία του swipe ξεκίνησε με το πρώτο iPhone το 2007 — η χειρονομία ξεκλειδώματος „slide to unlock” έγινε το σήμα κατατεθότητας των κινητών διεπαφών. Σήμερα το swipe χρησιμοποιείται σε χιλιάδες εφαρμογές για πλοήγηση, διαχείριση περιεχομένου και οργάνωση πληροφοριών.

Σύμφωνα με το UX Planet (2025), οι εφαρμογές με έλεγχο χειρονομιών (συμπεριλαμβανομένου του swipe) εμφανίζουν 18% υψηλότερη δεσμεύσεις χρηστών. Το swipe γίνεται αντιληπτό ως πιο φυσική ενέργεια σε σύγκριση με το πάτημα κουμπιού, καθώς μιμείται τη φυσική μετακίνηση αντικειμένων.

Παράμετροι αναγνώρισης swipe

Οι βασικές παράμετροι που καθορίζουν εάν μια χειρονομία είναι swipe: ελάχιστη απόσταση (συνήθως 30–50 pixel), μέγιστη απόκλιση από την ευθεία γραμμή (όχι περισσότερο από 15–20 μοίρες) και μέγιστη διάρκεια επαφής (έως 500 ms). Εάν το δάχτυλο παραμείνει περισσότερο στην οθόνη, η χειρονομία ταξινομείται ως σύρσιμο (drag) ή μακρό πάτημα (long press).

Τύποι swipe ανά κατεύθυνση

Ανά κατεύθυνση κίνησης τα swipe χωρίζονται σε τέσσερις βασικούς τύπους: αριστερά, δεξιά, πάνω και κάτω. Κάθε τύπος έχει το δικό του σκοπό και περιεχόμενο χρήσης.

Οριζόντια swipe (αριστερά/δεξιά) χρησιμοποιούνται πιο συχνά για διαχείριση μεμονωμένων στοιχείων — διαγραφή, αρχείο, κύλιση. Κάθετα swipe (πάνω/κάτω) — για πλοήγηση μεταξύ οθονών και ενημέρωση περιεχομένου. Σύμφωνα με το Material Design Guidelines (2024), το οριζόντιο swipe είναι πιο άνετο για δεξιόχειρους: η κίνηση προς τα αριστερά με τον αντίχειρα είναι πιο φυσική στο δεξί χέρι.

Swipe πολλών δαχτύλων

Swipe με δύο και τρία δάχτυλα χρησιμοποιούνται για προηγμένες ενέργειες. Με δύο δάχτυλα — εναλλαγή μεταξύ επιφάνειας εργασίας σε iPad, αναίρεση ενέργειας (three-finger swipe). Με τρία δάχτυλα — σκρηνστότυπο σε ορισμένες συσκευές. Ωστόσο, οι χειρονομίες πολλών δαχτύλων είναι λιγότερο διαισθητικές και απαιτούν μάθηση από τον χρήστη.

Υλοποίηση 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 με υποστήριξη swipe ενεργειών. Από το iOS 11, οι πίνακες και οι συλλογές υποστηρίζουν ενσωματωμένες swipe ενέργειες μέσω UISwipeActionsConfiguration, επιτρέποντας την προσθήκη κουμπιών διαγραφής ή αρχείου χωρίς μεμονωμένη επεξεργασία χειρονομιών.

Υλοποίηση swipe σε Android

Σε Android η επεξεργασία swipe γίνεται μέσω 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 με οπτική ανατροφοδότηση — εικονίδιο, χρώμα φόντου και κινησία.

Swipe σε εφαρμογές web

Στην ανάπτυξη web για την επεξεργασία 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% των προγραμμάτων πλοήγησης. Για σύνθετα σενάρια χειρονομιών (πολλαπλά swipe, αναγνώριση κατεύθυνσης) συνιστάται η χρήση της βιβλιοθήκης Hammer.js, η οποία αφαιρεί την επεξεργασία χαμηλού επιπέδου και παρέχει μια σαφή API.

UX μοτίβα με swipe

Επιτυχημένα UX μοτίβα με swipe έχουν διαμορφωθεί εδράνα χρόνια εξέλιξης των κινητών διεπαφών. Η χρήση τους εγγυάται ότι ο χρήστης θα καταλάβει πώς λειτουργεί η χειρονομία χωρίς επιπλέον μάθηση.

Το μοτίβο „Swipe to Delete” — το πιο διαδεδομένο. Το swipe προς τα αριστερά σε ένα στοιχείο λίστας ανοίγει το κουμπί διαγραφής. Τοποθετημένο σε iOS (SwipeActionsConfiguration) και Android (ItemTouchHelper). Οι χρήστες αναμένουν ότι το swipe προς τα αριστερά διαγράφει ή αρχειοθετεί το στοιχείο.

Το μοτίβο „Swipe to Go Back” — swipe από το αριστερό άκρο της οθόνης για επιστροφή στην προηγούμενη οθόνη. Έγινε πρότυπο σε iOS μετά το iPhone X. Σε Android, παρόμοια πλοήγηση λειτουργεί μέσω ενός συστημικού χειρονομίας. Είναι σημαντικό να μην υπάρχει σύγκρουση με αυτήν τη συστημική χειρονομία στις εφαρμογές σας.

Το μοτίβο „Pull to Refresh” — swipe προς τα κάτω για ενημέρωση περιεχομένου. Επινοήθηκε από τον Loren Brichter για το Tweetie (2008), τώρα χρησιμοποιείται σε εκατομμύρια εφαρμογές. Υλοποιείται σε τα τυπικά δεδομένα και της δύο πλατφορμών.

• Ανατροφοδότηση — το στοιχείο πρέπει να κινείται μαζί με το δάχτυλο, δείχνοντας το αποτέλεσμα πριν από την ολοκλήρωση του swipe
• Συγκρούσεις χειρονομιών — αποφύγετε την ταυτόχρονη υποστήριξη οριζόντιου swipe και κύλισης σε ένα στοιχείο
• Ανιχνευσιμότητα — οι πρώτες swipe ενέργειες πρέπει να συνοδεύονται με οπτική ύπειξη
• Ακύρωση — ο χρήστης πρέπει να έχει τη δυνατότητα να ακυρώσει το swipe, επιστρέφοντας το δάχτυλο στην αρχική θέση