Χειρονομίες και UX σε συσκευές αφής

1) Γιατί χειρονομίες και πότε είναι κατάλληλες

• Προβλέψιμο (σύμφωνα με τις προσδοκίες της πλατφόρμας).
• Ανιχνεύσιμο (ο χρήστης εικάζει ότι η χειρονομία είναι διαθέσιμη).
• Υποστηριζόμενη από ανατροφοδότηση (οπτική/ακουστική/απτική).
• Αξιόπιστη με εσφαλμένες πινελιές και διαφορετικές αρπαγές συσκευών.

Αρχές: πρώτα σαφή στοιχεία UI → στη συνέχεια υπαινίσσονται χειρονομίες → στη συνέχεια προηγμένες κρυφές χειρονομίες. Κρίσιμες δράσεις - πάντα επαναλαμβάνονται με σαφή κουμπιά.

2) Ταξινόμηση χειρονομιών

Πατήστε/διπλή βρύση/μακρύ πιεστήριο - επιλογή/προσθήκη. μενού/προηγμένων δράσεων.
Swipe (mountain/vert) - πλοήγηση, διαγραφή/αρχειοθέτηση, γνωστοποίηση ενεργειών.
Drag-and-drop - διαλογή, μεταφορά, αλλαγή ιεραρχίας.
Pinch/Spread (ζουμ) - κλίμακα (γκαλερί, χάρτες, γραφήματα).
Περιστροφή - σπάνια, κατάλληλη για συντάκτες/απόψεις.
Pull-to-refresh/Release-to-action - επικαιροποίηση/δευτερεύουσα δράση.
Edge-swipe - πλοήγηση συστήματος (πίσω/μενού), προσεκτικά στο διαδίκτυο.
Multi-touch - 2-3 χειρονομίες δακτύλου για προηγμένα σενάρια.
Οι χειρονομίες του συστήματος - στιγμιότυπα οθόνης, PiP, σύστημα «Back» (Android) - λαμβάνουν υπόψη τις συγκρούσεις.

3) Εργονομία και περιοχές του αντίχειρα

Ζώνες αντίχειρα: ζώνη προσέγγισης - κάτω από το ήμισυ της οθόνης. Οι βασικές CTA, τα φίλτρα μικροκυκλωμάτων και οι καρτέλες βρίσκονται στο κάτω μέρος.
Στόχος hit: τουλάχιστον 44 × 44 pt/48 × 48 dp. Προσθήκη ενός hit-slop για μικρά αντικείμενα.
Περίπτωσεις άκρων: μείωση της λανθασμένης στεφάνης. κρίσιμες αλληλεπιδράσεις - όχι κοντά στην άκρη.
Προσανατολισμός: προσωπογραφία - εξ ορισμού· τοπίο - βελτιστοποίηση για δύο αντίχειρες (ειδικά σε παιχνίδια/βίντεο).

4) Ανιχνευσιμότητα και κατάρτιση

Προσιτή τιμή: υποδείξεις χειρονομίας (ημι-ορατό φύλλο στο πλάι, «στυλό» στο κάτω μέρος για φύλλο).
Μικροεπιβίβαση: εφάπαξ στοιχεία («Swipe to delection»), όχι παρεμβατικά, με το «Got it».
Δοκιμαστική χειρονομία: demo animation στην πρώτη εμφάνιση του μοτίβου.
Επαναληψιμότητα: Οι χειρονομίες πρέπει να λειτουργούν με τον ίδιο τρόπο σε όλα τα μέρη με παρόμοιο περιεχόμενο.

5) Ανατροφοδότηση: οπτική, απτική, ακουστική

Οπτική: σκιά, παράλλαξη, προσκόλληση σε οδηγούς, δείκτης προόδου κατά την έλξη προς ανανέωση.
Haptics: ελαφριά παρόρμηση όταν αρπάζει drag, πιο «βαριά» - όταν πέφτει/πετυχαίνει.
Ήχος (μέτρια): σύντομα κλικ/κλικ σε παιχνίδια ή απτά γεγονότα (νίκη/σφάλμα).
Η ακύρωση δηλώνει: οπτική «κόκκινη ζώνη» με καταστροφική σύσφιξη, υπόδειξη κραδασμών πριν την αφαίρεση.

6) Συγκρούσεις και προτεραιότητες χειρονομιών

Ιεραρχία αναγνώρισης: εσωτερικός πάπυρος> swipe card> system edge-back (στο διαδίκτυο - αντιστρόφως). Ρύθμιση χειρονομίας/προτεραιοτήτων.
Κατακόρυφος κύλινδρος έναντι οριζόντιου swipe: Κλειδώστε έναν άξονα μετά από κίνηση 10-15 px.
Προσθήκη εσωτερικής περίπτωσης ή χειρονομίας «στυλό» ώστε να μην αναχαιτίζεται το σύστημα.
Παγκόσμια οπίσθια χειρονομία (Android/iOS): μην σπάσετε την αναμενόμενη πλοήγηση - επαναλάβετε σημαντικές ενέργειες με το κουμπί «Back».

7) Σενάριο μοτίβα

7. 1 Κατάλογοι και κάρτες

Swipe-actions: σύντομη swipe - υπόδειξη ενεργειών (εικονίδια), μακρά - άμεση δράση.
Undo-paradigm: μετά την καταστροφική χειρονομία show snackbar «Cancel».
Σύρετε-αναδιάταξη: σύρετε στη «λαβή». Διορθώστε τον κατακόρυφο άξονα.

7. 2 Χάρτες, πινακοθήκες, γραφήματα

Pinch-zoom + διπλή βρύση για κλιμάκωση.
Αδράνεια & όρια: ελαστικά όρια, λεία αδράνεια.
Λαβή κλίσης για «μεγεθυντικό γυαλί «/λεπτομέρειες του σημείου στο γράφημα.

7. 3 Πλοήγηση και ασπίδες

Κάτω φύλλο: χειρονομία έλξης από λαβή, κατεστραμμένη/μερική/πλήρης κατάσταση. swipe-down για να κλείσει.
Πίνακες/τσιπ: οριζόντια σύσφιξη μεταξύ καρτέλων με δείκτη προόδου.

7. 4 Παιχνίδι και γρήγορα σενάρια

Μονόχειρας: Μεγάλες ζώνες στοιχημάτων/δράσης στο κάτω άκρο.
Διπλές χειρονομίες: διπλή βρύση ως «επαναλαμβανόμενο στοίχημα» (επιβεβαίωση απτική).
Όριο καταστροφής: «κλειδώστε» το δάχτυλό σας στα 300ms ή περάστε από την «κόκκινη ζώνη» για να εκτελέσετε.

8) Διαθεσιμότητα (A11y)

Όλες οι χειρονομίες αναπαράγονται με κουμπιά ή αντικείμενα μενού.
Voey Over/TalkBack: σωστές περιγραφές και σειρά εστίασης.
Μηχανοκίνητη προσβασιμότητα: εναλλακτικές λύσεις αντί της μακράς πίεσης (εικονίδιο «⋮»), αυξημένες ζώνες αφής.
Αντίθεση και κλίμακα: Οι χειρονομίες δεν πρέπει να είναι ο μόνος τρόπος για να φτάσεις στη δράση.

9) Επιδόσεις και αξιοπιστία

INP (Αλληλεπίδραση με Next Paint) ≤ 200ms για βασικές χειρονομίες.
Καθυστέρηση αφής: στόχος <50- 100ms πριν από την πρώτη απόκριση (οπτική σύλληψη/φωτισμός).
60 FPS: ομαλότητα για έλξη/κύλιση· απενεργοποιούν τις βαριές σκιές και θολώνουν όταν κινούνται.
Δοκιμή hit-test: αποφυγή αλληλεπικαλύψεων (δείκτης z/υπερχείλιση) - οι παγίδες είναι «μαλακές».
Δοκιμές πρόσφυσης: δεξιόχειρας/αριστερόχειρας, αντίχειρας/μικρού δακτύλου, όρθιος/κατά τη μεταφορά.

10) Web vs Native

Web/PWA: παθητικοί ακροατές ('παθητικοί: αληθινοί') για κύλιση, 'touch-action' για κλείδωμα αξόνων, αποφύγετε την υποκλοπή χειρονομιών συστήματος χωρίς λόγο.
iOS/Android εγγενείς: αναγνωριστικοί συστήματος χρήσης (UIGestureRecoviizer/Android GestureDetector), τυποποιημένοι απτικοί, προγνωστικοί «Back» (Android 14 +).
Webview: γέφυρες και ασφαλείς ζώνες, προγνωστικό κλείσιμο ασπίδων - μέσα στο διαδίκτυο, χωρίς να σπάσει το σύστημα «Back».

11) Πολλαπλές και προηγμένες χειρονομίες

Δύο δάχτυλα: το panning ενώ το ζουμ είναι κλειδωμένο. στα φύλλα - μια χειρονομία «δύο δακτύλων προς τα κάτω» για το στρώμα προσθήκης.
Τρία δάκτυλα: μόνο για τους χρήστες ισχύος· πάντα δίνουν μια εναλλακτική λύση.
Συνδυασμοί: long-press + drag για επιλογή εύρους/κίνηση ομάδας.

12) Επικύρωση, τηλεμετρία, μετρήσεις

: 'χειρονομία _ star События,' χειρονομία _ commit ',' χειρονομία _ ακύρωση ',' καθυστέρηση _ m ложный, 'απόσταση _ px', 'overcrol жест,' misfire '(' undo _ used '.
KPI: Ποσοστό επιτυχίας, ποσοστό κακής φωτιάς, Undo Rate, INP, Time-to-Action, Drop-off για σύγκρουση χειρονομιών.

13) Εντοπισμός και πολιτισμικές διαφορές

Γλώσσες RTL: οριζόντιες χειρονομίες και εικονίδια καθρέφτη.
Συμβολισμός: «swipe left = αφαίρεση» δεν είναι καθολική - επιβεβαίωση κατά την επιβίβαση.
Απτικά μοτίβα: χρησιμοποιήστε προφίλ συστήματος, είναι ήδη γνωστά στο χρήστη.

14) Ασφάλεια και σφάλματα

Καταστροφικές χειρονομίες - μόνο με αναίρεση/επιβεβαίωση.
Οι ακμές δεν πρέπει κατά λάθος να κλείνουν κρίσιμες διαδικασίες (πληρωμή/CCM).
Προστασία από ρίγη: κατώφλι κίνησης (5-10 px) πριν από την έναρξη της χειρονομίας.
Απενεργοποίηση χειρονομιών σε καταστάσεις εμπλοκής (φορτωτής πληρωμών, τρόπος επιβεβαίωσης).

15) Πίνακας αφής/μοτίβα δισκίων

Σενάρια με δύο χέρια: διαχωρισμός των ζωνών ελέγχου.
Λειτουργία πολλαπλών χρηστών: οι χειρονομίες δεν συγκρούονται, προτεραιότητα χρόνου αφής.
Μεγάλοι στόχοι επιτυχίας: 56-64 dp. οπτικούς οδηγούς για λειτουργίες οπισθέλκουσας.

16) Αντιπατερίδια

Κρυφές κρίσιμες ενέργειες μόνο με χειρονομία (χωρίς κουμπί).
Χειρονομίες που συγκρούονται με το σύστημα (πίσω άκρο, σκιά ειδοποίησης).
Μακρύ πιεστήριο χωρίς οπτικό «scramble» και ήχο/vibe.
Οριζόντια κύλιση στο εσωτερικό κατακόρυφης κύλισης χωρίς αξονική κλειδαριά.
«Βαρύ» σκιές/θολό όταν σύρετε → lag και FPS πτώση.
Ασυνεπείς χειρονομίες σε διάφορα μέρη της εφαρμογής.

17) Κατάλογος ελέγχου εφαρμογής (βήμα προς βήμα)

1. Χάρτης χειρονομιών: πού και τι - με εναλλακτικές λύσεις για A11y.
2. Προτεραιότητες αναγνώρισης: αξονική κλειδαριά, ζώνες ασφαλείας άκρων, χειρονομία.
3. Ανατροφοδότηση: οπτική παγίδα, προφίλ απτικής, κινούμενα σχέδια ≤ 200 ms.
4. Επιδόσεις: INP/60 FPS, drag/scroll profiling.
5. Επιβίβαση: κινήσεις και δοκιμαστικές χειρονομίες με δυνατότητα απενεργοποίησης.
6. Τηλεμετρία: επιτυχία/αστοχία/αναίρεση, πινελιές θερμικού χάρτη.
7. Πίνακας δοκιμής: διατάξεις, πυκνότητες, περιπτώσεις πλημμελούς δικτύου με αριστερό/δεξί χέρι.
8. Τεκμηρίωση: οδηγός χειρονομίας στο σύστημα σχεδιασμού, παραδείγματα και αντι-περιπτώσεις.

18) Η τελική γραμμή

Μια ικανή χειρονομία είναι γρήγορη, κατανοητή και αξιόπιστη. Μειώνει την πορεία προς τον στόχο χωρίς να εξαλείφει τις προσδοκίες του συστήματος και να διασφαλίζει την προσβασιμότητα για όλους. Χειρονομίες σχεδιασμού ως μέρος του συστήματος σχεδιασμού: ομοιόμορφα σχέδια, σαφείς προτεραιότητες, πλούσια ανατροφοδότηση και αυστηρός έλεγχος απόδοσης - τότε το UX θα είναι εξίσου ευχάριστο σε κάθε συσκευή και σε κάθε σενάριο.