Σχεδιασμός ενός συστήματος πλοήγησης με βάση το Gesture σε εφαρμογές iOS

Με τη μείωση της εξάρτησης από ορατά κουμπιά και μενού, χειρονομίες δωρεάν οθόνη ακινήτων και να δημιουργήσει μια πιο εμβληματική εμπειρία χρήστη. UIKit της Apple παρέχει ένα ισχυρό σύνολο των αναγνωριστών χειρονομία, αλλά ο σχεδιασμός ενός αποτελεσματικού συστήματος πλοήγησης απαιτεί στοχαστικό σχεδιασμό, μια κατανόηση των κατευθυντήριων γραμμών για τις ανθρώπινες διεπαφές, και αυστηρές δοκιμές. Αυτό το άρθρο διερευνά πώς να δημιουργήσει ένα σύστημα πλοήγησης με χειρονομίες που είναι ανακαλύψιμο, ανταποκρίνεται, και προσβάσιμο.

Γιατί η Πλοήγηση Βασιζόμενη σε Ειδήσεις

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

Βασικές Gestures σε iOS Πλοήγηση

Οδηγίες για την Ανθρώπινη Διεπαφή της Apple (HIG) καθορίζουν τυποποιημένες χειρονομίες που οι χρήστες αναμένουν να εργάζονται με συνέπεια σε εφαρμογές.

Περιστροφή

Η κίνηση του swip είναι ίσως η πιο ευέλικτη για πλοήγηση. Η περιστροφή αριστερά ή δεξιά μπορεί να περάσει μεταξύ των προβολών (π.χ. σε μια συλλογή φωτογραφιών), να αποκαλύψει ένα μενού πλευρικής μπάρας (περιστροφή από την αριστερή άκρη σε πολλές εφαρμογές που βασίζονται στην πλοήγηση), ή να απορρίψει μια οθόνη (περιστροφή πίσω σε ένα UINavigationΕλεγκτής).

Πατήστε

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

Τσίμπημα

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

Μακροτάτων Τύπου

Ένα μακρύ πιεστήριο (ή το χέρι αγγίξτε σε προηγούμενες συσκευές) αποκαλύπτει τα συμφραζόμενα μενού, προεπισκοπήσεις, ή γρηγορότερες ενέργειες χωρίς να πλοηγηθεί μακριά. Για παράδειγμα, η μακρά συμπίεση μιας προεπισκόπησης μηνυμάτων μπορεί να εμφανίσει επιλογές απάντησης χωρίς να ανοίξει την πλήρη συζήτηση.

Στρίψιμο άκρου

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

Αρχές σχεδιασμού για τη ραδιοπλοήγηση με βάση τη ραδιοφωνία

Επιτυχής πλοήγηση χειρονομία δεν είναι μόνο για την προσάρτηση αναγνωριστών ⁇ απαιτεί μια ολιστική προσέγγιση σχεδιασμού.

Ανακαλύψεις

Οι χειρονομίες είναι αόρατες. Οι χρήστες πρέπει να διδαχθούν ή να τις κατανοήσουν διαισθητικά. Χρησιμοποιήστε οπτικές υποδείξεις (π.χ. ένα λεπτό βέλος, ένα δείκτη σύρσιμο, ή ένα επίθεμα φροντιστηρίου στην πρώτη εκτόξευση).

Συνέπεια

Ακολουθήστε τις συμβάσεις πλατφόρμας. Οι χρήστες αναμένουν ένα δεξί χτύπημα να σημαίνει “πίσω” σε μια στοίβα πλοήγησης. Αν χρησιμοποιείτε ένα δεξί χτύπημα για κάτι άλλο, να παρέχουν σαφές πλαίσιο.

Ανατροφοδότηση

Κάθε χειρονομία πρέπει να παρέχει άμεση, σαφή ανατροφοδότηση. Οπτική ανατροφοδότηση (που ζωντανεύει μια θέα δίπλα στη χειρονομία), απτική ανατροφοδότηση (που χρησιμοποιεί UIImpactFeedbackGenerator ή UINotificationFeedbackGenerator), και ηχητικά σήματα (όταν είναι απαραίτητο) επιβεβαιώνουν ότι η χειρονομία αναγνωρίζεται. Χωρίς σχόλια, οι χρήστες μπορεί να σαρώσουν επανειλημμένα, δημιουργώντας μια απογοητευτική εμπειρία.

Προσβασιμότητα

Δεν μπορούν όλοι οι χρήστες να εκτελέσουν χειρονομίες με ακρίβεια. Παρέχετε εναλλακτικές μεθόδους πλοήγησης: κουμπιά, συντομεύσεις πληκτρολογίου (στο iPad με πληκτρολόγιο), VoiceOver προσαρμοσμένες ενέργειες και υποστήριξη ελέγχου διακόπτη.

Αποφύγετε τις Συγκρούσεις

Όταν οι πολλαπλοί αναγνωριστές χειρονομίας είναι συνδεδεμένοι με την ίδια άποψη (ή μια μητρική άποψη), μπορεί να προκύψουν συγκρούσεις. Για παράδειγμα, ένα χτύπημα για να απορρίψετε μια κάρτα μπορεί να συγκρουστεί με ένα κύλιση στο εσωτερικό της κάρτας. Προτεραιότητα χειρονομίες προσεκτικά χρησιμοποιώντας μεθόδους ανάθεσης όπως [[LFT:0]] ή να ρυθμίσετε χειρονομίες εξαρτήσεις αναγνώρισης.

Επιδόσεις

Ο χειρισμός της χειρονομίας πρέπει να είναι ρευστός. Βαριές κινήσεις ή σύγχρονοι υπολογισμοί μπορούν να προκαλέσουν την καθυστέρηση ή τραύλιση της χειρονομίας. Χρησιμοποιήστε [[LFT:1] και τους ενσωματωμένους αναγνωριστές χειρονομιών για την τυπική λειτουργία.Για τις προσαρμοσμένες χειρονομίες, κρατήστε τις μεθόδους χειριστή ελαφρές και σκεφτείτε να χρησιμοποιήσετε [[LFT:2] για ομαλές κινήσεις.

Αναγνωριστές Εκτελεστικών Gesture σε iOS

Το iOS παρέχει ένα σύνολο αναγνωριστών χειρονομιών [[LFT:3]]. Εδώ είναι πώς να εφαρμόσει τα κοινά πρότυπα πλοήγησης.

Βασική ρύθμιση

Στιγμιάστε έναν αναγνωριστικό χειρονομίας, ρυθμίστε το στόχο και την ενέργειά του, ρυθμίστε τις ιδιότητες (κατεύθυνση, αριθμός βρύσεων, κλπ.), και συνδέστε το σε μια προβολή. Παράδειγμα για μια πλοήγηση swip:

let swipeBack = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeBack))
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

Προχωρημένη ρύθμιση

Για παράδειγμα, για να επιτρέψετε μια χειρονομία swip μόνο όταν το δάχτυλο του χρήστη ξεκινά κοντά στην αριστερή άκρη (άκρη swip για πίσω):

func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
 guard let swipe = gestureRecognizer as? UISwipeGestureRecognizer else { return false }
 let location = swipe.location(in: view)
 return location.x < 30
}

Ταυτόχρονη Χειρισμός Χειρονομιών

Όταν εμπλέκονται απόψεις κύλισης ή απόψεις συλλογής, μπορεί να χρειαστεί να επιτρέψετε χειρονομίες να συνεργαστούν. Χρησιμοποιήστε [[LFT:6]] για να επιστρέψετε [[LFT:7]] για συμβατές χειρονομίες και [[LFT:8]] για να ορίσετε προτεραιότητες.

Προσαρμοσμένες μεταβάσεις

Για μια πλήρως χειρονομημένη πλοήγηση, οι αναγνωριστές χειρονομιών ζευγαριού με προσαρμοσμένες μεταβάσεις ελεγκτή προβολής. Για παράδειγμα, υλοποιήστε μια διαδραστική μετάβαση ποπ που ακολουθεί το δάχτυλο του χρήστη, παρόμοια με την προκαθορισμένη κίνηση πίσω iOS. Αυτό περιλαμβάνει τη χρήση και τη σύνδεση με ένα τηγάνι ή τη χειρονομία swip στον εκπρόσωπο του ελεγκτή πλοήγησης.

Σχεδιασμός μιας πλοήγησης μενού με χειρονομίες (Παράδειγμα)

Πολλές σύγχρονες εφαρμογές iOS χρησιμοποιούν ένα μενού χάμπουργκερ που γλιστράει από τα αριστερά. Μια εναλλακτική λύση βασισμένη σε χειρονομίες θα μπορούσε να είναι ένα swip-από-εκτίδα για να αποκαλύψει ένα πλαϊνό πάνελ (όπως η διαιρεμένη προβολή του iPad). Για να χτίσετε αυτό:

  1. Προσαρτήστε έναν αναγνωριστικό χειρονομίας edge pan στην κύρια προβολή περιεχομένου (με άκρες: .left).
  2. Με κίνηση που ξεκίνησε, προσθέστε μια προβολή μενού εκτός οθόνης στα αριστερά? σε αλλαγή, ενημέρωση της θέσης x αναλογικά? στο τέλος, να κινήσετε πλήρως ανοιχτό ή κλειστό με βάση την ταχύτητα / θέση.
  3. Δώστε ένα κουμπί για τους χρήστες που δεν μπορούν να το κλέψουν.
  4. Χρήση για διαδραστικές κινούμενες εικόνες για να επιτραπεί η αντιστροφή της μέσης διάστασης.

Αυτό το μοτίβο μπορεί να επεκταθεί και σε κάτω φύλλα, δεξιά πλευρά πάνελ, ή swipable καρτέλες.

Δοκιμή και Διύλιση Πλοήγησης με Γήρανση

Οι αναγνωριστές Gesture μπορούν να συμπεριφέρονται απροσδόκητα σε διαφορετικές συσκευές, με split οθόνη, ή όταν εμπλέκονται χειρονομίες συστήματος (π.χ., δείκτης σπίτι, app switcher).

Εργαλεία και μέθοδοι

  • Χωδικός Αποσφαλματωτής: Οραματιστείτε τις καταστάσεις αναγνώρισης χειρονομιών (πιθανών, ξεκινημένων, αλλασσόμενων, περασμένων, ακυρωμένων, αποτυχημένων) χρησιμοποιώντας το παράθυρο αποσφαλμάτωσης προβολής.
  • Επιθεωρητής Προσβασιμότητας: Επιβεβαιώστε ότι η VoiceOver χρήστες μπορούν να έχουν πρόσβαση σε κάθε δράση.
  • Δοκιμές χρήστη: Παρατηρήστε πραγματικούς χρήστες που εκτελούν χειρονομίες· σημειώστε δισταγμό, τυχαία ενεργοποιήσεις, ή επανειλημμένες προσπάθειες.
  • Παρακολούθηση επιδόσεων: Ελέγξτε τις τιμές καρέ κατά τη διάρκεια της εκτέλεσης χειρονομίας χρησιμοποιώντας όργανα Core Animation.

Συχνές Παγίδες

  • Αλληλιστικά τριγιέρ: Ένα χτύπημα για να πάει πίσω μπορεί να παρερμηνευθεί όταν ο χρήστης προσπαθεί να επιλέξει μια σειρά. Mitigate απαιτώντας ελάχιστη απόσταση σύρσεως ή μια συγκεκριμένη αφετηρία.
  • Σύστημα Gesture Conflicts: Σε iPhones με Face ID, το home indicator swip μπορεί να συγκρουστεί με χειρονομίες κάτω άκρου. Χρησιμοποιήστε την ιδιότητα για να επιτρέψετε τη χειρονομία σας πρώτα, αλλά πάντα να παρέχουν μια fallback.
  • Καημένη Ανακάλυψη: Αν οι χρήστες δεν γνωρίζουν μια χειρονομία υπάρχει, θα κολλήσουν. Χρησιμοποιήστε onboarding, επίμονες υποδείξεις, ή προσαρμοστικό UI που αποκαλύπτει κουμπιά μετά από ένα timeout.

Προσβασιμότητα και Περιεκτικός Σχεδιασμός

Η πλοήγηση με βάση τη μεγέθυνση δεν πρέπει να αποκλείει τους χρήστες με κινητικές βλάβες. Ακολουθήστε τις παρακάτω πρακτικές:

  • Εναλλακτικά Έλεγχοι: Κάθε ενέργεια που ενεργοποιείται με χειρονομίες θα πρέπει να είναι διαθέσιμη μέσω ενός κουμπιού ή μιας συντόμευσης πληκτρολογίου. Για παράδειγμα, ένα swip-to-delete μπορεί επίσης να είναι ένα πάτημα μακράς διάρκειας που εμφανίζει ένα κουμπί Διαγραφή.
  • VoiceOver: Χρησιμοποιήστε για να εκθέσετε τις ενέργειες χειρονομίας ως ονομαστικές ενέργειες. Για παράδειγμα, το “Swipe back” μπορεί να γίνει μια προσαρμοσμένη ενέργεια στον στροφέα.
  • Μειώστε την κίνηση: Σεβασμός της ρύθμισης · αντικατάσταση της παράλλαξης ή των μενού slide-in με απλές μεταβάσεις ξεθωριάσει όταν ζητηθεί.
  • Αγγίζει Διαμονή: Να είστε προσεκτικοί με τα ΥποστηρικτικάΔιαμονησίες και τα Υποδομές που τροποποιούν τη συμπεριφορά χειρονομίας ⁇ ποτέ μην υποθέτετε ότι ένα σημείο αφής είναι ακριβές.

Συμπέρασμα

Ο σχεδιασμός ενός συστήματος πλοήγησης βασισμένου σε χειρονομίες σε εφαρμογές iOS είναι ένας ισχυρός τρόπος για να δημιουργήσετε μια συναρπαστική, σύγχρονη διεπαφή χρήστη. Κατανοώντας τα βασικά στοιχεία των αναγνωριστών χειρονομιών, προσκολλώντας στις αρχές σχεδιασμού της Apple, και δίνοντας προτεραιότητα στην προσβασιμότητα, μπορείτε να οικοδομήσετε πλοήγηση που αισθάνεται φυσική και αβίαστη. Ξεκινήστε με τις τυποποιημένες χειρονομίες συστήματος, προσθέστε προσαρμοσμένες μόνο όταν βελτιώνουν πραγματικά την εμπειρία, και πάντα δοκιμάζουν με μια διαφορετική βάση χρηστών. Όταν γίνει σωστά, η πλοήγηση χειρονομιών εξαφανίζεται στο φόντο, αφήνοντας τους χρήστες να επικεντρωθούν στο περιεχόμενο και τις εργασίες.

Για περαιτέρω ανάγνωση, συμβουλευτείτε τις κατευθυντήριες γραμμές για την ανθρώπινη διεπαφή για τις Gestures, την UIKit Gesture Rescitor documentation] και το εξαιρετικό άρθρο «Designing Fluid Interactions[» από το WWDC 2018. Για βέλτιστες πρακτικές προσβασιμότητας, δείτε την Προσβασιμότητα HIG].