Όλα τα Thumbs, γιατί να προσεγγίσετε την πλοήγηση πρέπει να αντικαταστήσει το Navbar στο iOS Design

Το Navbar βγαίνει έξω

Το UINavigationBar, το navbar για σύντομο χρονικό διάστημα, ήταν γύρω από το αρχικό iPhone. Ιστορικά, τα navbars ήταν βολικά και καθαρά, εύκολα κατανοητά και εύκολα κατασκευασμένα.

Στη συνέχεια, τα τηλέφωνα μπαλώνονται, αρκετά ώστε το iPhone 7 Plus να αντικαταστήσει τις πωλήσεις του iPad mini. Τώρα, αν διαθέτετε ένα σύγχρονο iPhone, το navbars μπορεί να αισθάνεται δύσκαμπτο - κυριολεκτικά από την αφή.

Οι κατακόρυφες οθόνες σημαίνουν ότι η απόσταση μεταξύ του navbar και των αντίχειρων μας έχει αυξηθεί. Η οθόνη σε ένα 7 Plus είναι τόσο ψηλή που θα χρειαζόταν μια αύξηση μήκους με αντίχειρα 150 τοις εκατό για να φτάσει εκείνα τα ενοχλητικά κουμπιά με το ένα χέρι. Απλά ένας άλλος ή δύο. Τίποτα περίεργο.

Οι ζώνες αφής του Hurff απεικονίζουν την προσπελασιμότητα των δεξιών χεριών.

Καθώς οι συσκευές αλλάζουν, η οπτική γλώσσα αλλάζει μαζί τους. Ήρθε η ώρα να απομακρυνθούμε από το navbar υπέρ της πλοήγησης μέσα από την απόσταση. Για τους σκοπούς αυτού του άρθρου, θα ονομάσουμε το Reach Navigation.

Γιατί το Navbar είναι εκτός σύνδεσης

Το Navbar είναι ένα στήριγμα της εφαρμογής "πρότυπο συστήματος", που χρησιμοποιείται στο τηλέφωνο, μηνύματα, αλληλογραφία, ημερολόγιο, και αμέτρητες άλλες. Υπάρχουν πολλοί λόγοι για τους οποίους κέρδισε την εύνοια:

  • iOS Standard Η Apple δημιούργησε τη Navbar για να είναι προσαρμόσιμη, κλιμακωτή, προσβάσιμη και εύκολη στην υλοποίησή της. Επειδή πρόκειται για πρότυπο iOS, είναι αναγνωρίσιμο σε διάφορες εφαρμογές.
  • Πλοήγηση Η αριστερή και η δεξιά πλευρά της γραμμής πλοήγησης παρέχουν χώρο για κουμπιά. Η αριστερή περιοχή συχνά περιστρέφεται από τους χρήστες στην ιεραρχία και η δεξιά περιοχή είναι ψηλότερη. Το κουμπί "πίσω" ενημερώνει τους χρήστες ότι δεν βρίσκονται στη ριζική προβολή.
  • Τίτλος Παρέχει μια συνεπή τοποθεσία για κείμενο που καθορίζει τη λειτουργία της προβολής. Δεδομένου ότι το navbar παραμένει πάντοτε στην οθόνη, βοηθά στην περαιτέρω δημιουργία της ιεραρχίας των πληροφοριών.
  • Bar Companion to Tab Αν έχετε μια σειρά από εικονίδια με δυνατότητα τροφοδοσίας στο κάτω μέρος της οθόνης (συγκεκριμένα μια μπάρα Tab), η τοποθέτηση άλλων εικονιδίων στο πάνω μέρος της οθόνης βοηθά στη διαχωρισμό της σχέσης γονέα / παιδιού.
  • Λογότυπο Ο πελάτης σας μπορεί να βάλει ένα λογότυπο εδώ! Ιδιοφυία. Lol jk, βρίσκω αυτό το κολλώδες, αλλά εγώ απόσπαση.
Μερικά δείγματα navbars για την απόλαυσή σας.

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

Τούτο συμβαίνει, ας μιλήσουμε μερικά Navbar μειονεκτήματα:

  • Είναι πιο δύσκολο να γυρίσεις πίσω. Μπορείτε να περάσετε από την άκρη, όσο η θέα που βλέπετε δεν έχει οτιδήποτε μετατοπίζεται οριζοντίως, αλλά αν το κάνει τότε βρίσκεστε στην πόλη.
  • Το να ονομάζεις όλες τις απόψεις είναι ένας πόνος. Δεν χρειάζονται όλες οι οθόνες ένας επίμονος τίτλος και ορισμένοι απαιτούν ετικέτες πολύ καιρό για να χωρέσουν. Αφήνοντας μια κενή περιοχή πλοήγησης απορρίπτεται ο χώρος της οθόνης και φαίνεται άγονος.
  • Η πλοήγηση απαιτεί δύο χέρια. Εάν μπορείτε να κρατήσετε μια συσκευή στο ένα χέρι, θα πρέπει να μπορείτε να χειρίζεστε τη συσκευή με το ένα χέρι. Αισθάνεται καλύτερα, και είναι πιο βολικό σε έναν κόσμο γεμάτο από καροτσάκια για να ωθήσει, και τα μωρά για να φέρει.
  • Οι απλές εφαρμογές γίνονται πιο περίπλοκες από ό, τι είναι απαραίτητο. Τα Navbars τείνουν να οδηγούν σε αρχιτεκτονική πληροφοριών που τρέχει βαθιά. Είναι εύκολο να αναπτυχθεί για οριζόντια προοδευτική αποκάλυψη, πράγμα που σημαίνει ότι μπορεί να είναι μια μάχη για να επεκταθεί εν σειρά ή να χρησιμοποιήσει ένα φύλλο.

Εντάξει. Τώρα ξέρουμε πώς τα navbars μπορεί να είναι χάλια. Τι κάνουμε λοιπόν;

Προσέγγιση πλοήγησης και Apple

Ως σχεδιαστής iOS, αυτό είναι το μέρος στο οποίο υποστηρίζω τη διατριβή μου επισημαίνοντας πως η Apple ενσωματώνει ήδη το Reach Navigation. Ετοιμος? Θα ξεκινήσουμε με δύο από τους προφανείς τρόπους με τους οποίους η Apple φιλοξενεί μεγαλύτερες οθόνες κινητής τηλεφωνίας.

Αντί ενός κουμπιού πίσω, πλοηγηθείτε πίσω πατώντας από την αριστερή άκρη.

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

Με ελαφρά διπλό πάτημα του κουμπιού

Δεύτερον, το iOS περιλαμβάνει ένα χαρακτηριστικό που ονομάζεται Reachability, όπου τα περιεχόμενα της οθόνης σας μετακινούνται προς τα κάτω για να σας βοηθήσουν να φτάσετε σε κουμπιά κοντά στην κορυφή όταν αγγίζετε ελαφρώς το κουμπί home. Δυνατό για τώρα, αλλά αισθάνεται σαν μια λύση Bandaid.

Τώρα, εδώ γίνεται πιο εμφανής η στροφή προς το Reach Nav. Η Apple έχει ήδη ξεκινήσει τον απογαλακτισμό των εφαρμογών της από το navbar. Οι Χάρτες και η Μουσική είχαν διαρθρωτικούς επανασχεδιασμούς για το iOS 10 που μείωσαν ή αφαιρέθηκαν την ανάγκη για navbars.

Η Apple Music αλλάζει από iOS 9 (αριστερά) σε iOS 10 (δεξιά). Η κατάργηση της γραμμής πλοήγησης επέτρεψε την αύξηση της αρχικής ετικέτας προβολής. Αρκετά.

Τώρα, και οι δύο εφαρμογές χρησιμοποιούν ένα φύλλο που μπορείτε να περάσετε κάτω για να το απορρίψετε.

Οι χάρτες της Apple αλλάζουν από iOS 9 (αριστερά) σε iOS 10 (δεξιά). Το περιβάλλον χρήστη είναι σχεδόν εξ ολοκλήρου ανεστραμμένο. Οι Ρυθμίσεις χάρτη και Κλείδωμα στην τρέχουσα θέση είναι πιο δύσκολο να επιτευχθούν, ενώ η προτεραιότητα αναζήτησης και αποτελεσμάτων έχει προτεραιότητα.

Μερικά κουμπιά πίσω στην Apple Music επέζησαν από το μπλοκ κοπής για iOS 10, αλλά εμφανίζονται επισημασμένα για απομάκρυνση σε ένα μελλοντικό λειτουργικό σύστημα. Είναι ανόητο να διαθέσουμε τόσο μεγάλο οριζόντιο χώρο για ένα κουμπί που καταλαμβάνει μόνο το 20 τοις εκατό του ακινήτου. Η Apple Music έχει επίσης επανέλθει σε μια απλή ετικέτα Back αντί να περιγράψει τον προορισμό επιστροφής, έναν ακρογωνιαίο λίθο της λειτουργικότητας του κουμπιού back μέσω της έκδοσης του iOS 7.

Το κουμπί Επιστροφή στο iOS 10 αναλαμβάνει πολλά ακίνητα εδώ. Φαίνεται προσωρινό, όχι; Ναί.

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

Ενσωμάτωση της πλοήγησης Reach

Ακολουθούν ορισμένες λεπτομέρειες σχετικά με τον τρόπο ενσωμάτωσης του Reach Nav στις εφαρμογές σας. Εάν εργάζεστε σε:

Μια νέα εφαρμογή που χρησιμοποιεί μια γραμμή καρτέλας:

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

Μια νέα εφαρμογή χωρίς γραμμή καρτελών:

  • Δοκιμάστε ένα εκτεθειμένο συρτάρι όπως οι Χάρτες ή φύλλα όπως το Mail.
  • Χρειάζεται να το πω αυτό; Προτεραιότητα στοποθέτηση κουμπιών στο κάτω μέρος της οθόνης.

Μια ανανέωση ενός σχεδίου παλαιού τύπου:

  • Μετακινήστε τα πιο χρησιμοποιούμενα στοιχεία στο κάτω μέρος.
  • Βεβαιωθείτε ότι έχετε περάσει από την άκρη της οθόνης για να επιστρέψετε σε όλες τις προβολές.
  • Δείτε τι μπορείτε να φωλιέστε για να ελευθερώσετε χώρο στις πιο χρησιμοποιήσιμες περιοχές οθόνης.
  • Καταργήστε τις σημαντικές ενέργειες από το επάνω δεξί σημείο του Navbar και τις τοποθετήστε οπουδήποτε αλλού.
Μια γρήγορη παράδοση για το πώς το Safari θα μπορούσε να μετακινήσει τη γραμμή διευθύνσεων στο κάτω μέρος, να αφαιρέσει τη γραμμή εργαλείων και να διατηρήσει ακόμα τη λειτουργικότητα.

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

Παραδείγματα Reach Nav στο άγριο

Οι νέες εφαρμογές της Apple δεν είναι τα μόνα προϊόντα που αρχίζουν να σέβονται το Reach Nav. Το Lyft και το Pokémon Go βάζουν τα πάντα μέσα σε ένα χέρι.

Τα Pokémon Go και Lyft απασχολούν την πλοήγηση Reach.

Ορισμένες άλλες εφαρμογές, όπως η νεφοκάλυψη, έχουν αρχίσει να χρησιμοποιούν φύλλα που σας επιτρέπουν να μετακινηθείτε προς τα κάτω.

Η συννεφιά χρησιμοποιεί φύλλα που επιτρέπουν στους χρήστες να πατήσουν προς τα κάτω.

Η εφαρμογή Twitter του iOS καταργεί την ανάγκη να μετακινηθείτε από την άκρη της οθόνης για να επιστρέψετε, τώρα μπορείτε να περάσετε από οπουδήποτε.

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

Να κρατήσουμε επαφή

Το navbar αποτελεί ουσιαστικό μέρος του iOS από τότε που η Apple κυκλοφόρησε το πρώτο κιτ ανάπτυξης, και μας έχει εξυπηρετήσει καλά. Αλλά ήρθε η ώρα να το αφήσουμε να φύγει.

Ας συμφωνήσουμε να σταματήσετε να κολλάτε σημαντικά κουμπιά στο πάνω μέρος της οθόνης. Καλύτερη πλοήγηση είναι εφικτή.

Ο Brad Ellis είναι ο ιδρυτής του Tall West, ενός γραφείου σχεδιασμού του οποίου οι πελάτες περιλαμβάνουν Airbnb και Target. Είναι νικητής της Apple Design Award και έχει λάβει δύο Webbys για σχεδιασμό εφαρμογών. Εάν θέλετε να συνεργαστείτε, ρίξτε μια γραμμή στο Brad στο Tallwest.com.

Συντελεστές: Ronan Rooney και Maggie Mason