Ανάπτυξη για Android και iOS: Μοτίβα πλοήγησης

Στο άρθρο της περασμένης εβδομάδας, ξεκινήσαμε με μια προσέγγιση υψηλού επιπέδου όπου περιγράψαμε τις διαφορές μεταξύ των Σχεδιαστικών Γλωσσών του iOS και του Android: Flat Design και Σχεδιασμός Υλικών, αντίστοιχα.

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

Τις επόμενες εβδομάδες θα ξεπεράσουμε την εξέλιξη του Native vs. Hybrid και άλλες διαφορές μεταξύ των πλατφορμών Android vs. iOS.

Αυτή την εβδομάδα, ας μιλήσουμε για μοτίβα σχεδίασης πλοήγησης.

Όταν σκεφτόμαστε πώς οι χρήστες σας θα πλοηγηθούν στην εφαρμογή σας για κινητά, θα πρέπει να αναρωτηθείτε τον εξής τύπο ερωτήσεων:

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

Θα απαντήσουμε σε αυτές τις ερωτήσεις τόσο για την πλατφόρμα iOS όσο και για το Android (με μελέτες περιπτώσεων από μερικές πολύ δημοφιλείς εφαρμογές). Αν δεν το έχετε ήδη κάνει και θα ήθελα να λαμβάνετε μια ενημέρωση όταν αυτά τα επόμενα άρθρα δημοσιεύονται, παρακαλώ εγγραφείτε στη λίστα αλληλογραφίας μας (δεν υπάρχει spam, υπόσχομαι). Εάν είστε επιχειρηματίας / προγραμματιστής στον κινητό χώρο και προγραμματίζετε να απελευθερώσετε την εφαρμογή για κινητά σας τόσο στο iOS όσο και στο Android, είναι απαραίτητο να κατανοήσετε τις ιδιαιτερότητες κάθε οικοσυστήματος και βάσης χρηστών για την αποστολή καλύτερου λογισμικού.

Γιατί να ασχοληθείτε με τη μελέτη της πλοήγησης;

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

Καρτέλες

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

iOS

Στο iOS, οι καρτέλες βρίσκονται στο κάτω μέρος της οθόνης. Είναι μια πολύ γνωστή και γνωστή προσέγγιση σχεδιασμού πλοήγησης που χρησιμοποιείται από πολλά επιτυχημένα προϊόντα όπως το Facebook, το Twitter και το Instagram. Οι καρτέλες iOS διαθέτουν συνήθως ένα εικονίδιο και ένα κείμενο.

Καρτέλες στην εφαρμογή iOS του TwitterΗ γραμμή καρτελών στην εφαρμογή iOS του Trello

Μια τυπική χρήση των καρτελών περιλαμβάνει το καθένα ένα τμήμα της αίτησής σας:

  • Αρχική σελίδα (κύριο περιεχόμενο) Καρτέλα
  • Αναζήτηση (αν υπάρχει περιεχόμενο προς αναζήτηση) Καρτέλα
  • Σύνθεση / Δημιουργία καρτέλας
  • Καρτέλα ειδοποιήσεων
  • Καρτέλα προφίλ
Επιπλέον, οι καρτέλες περιέχουν συχνά εικονίδια ή αριθμούς που υποδεικνύουν ότι υπάρχει διαθέσιμο νέο περιεχόμενο για το χρήστη

Υπάρχει μια σύμβαση και ένας περιορισμός για να έχετε έως και 5 καρτέλες. Συμβατικά δεν πρέπει να υπάρχουν περισσότερα από 5 "μεγάλα" πράγματα που κάνει η αίτησή σας (αυτή είναι μια καλή εμπειρία UX γενικά).

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

Ένα παράδειγμα της καρτέλας

Android

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

Καρτέλες στην εφαρμογή Android του Twitter

Οι καρτέλες Android συνήθως επικεντρώνονται περισσότερο σε συγκεκριμένες ενότητες από το iOS και λιγότερο στις δευτερεύουσες ενότητες όπως Αναζήτηση, Δημιουργία / Σύνθεση και Προφίλ καθώς το Android διαθέτει άλλα στοιχεία πλοήγησης για την εκπλήρωση αυτών των ρόλων.

Διεισδύοντας

Οι εφαρμογές Android (όπως τα Backdrops) συνήθως επιτρέπουν στους χρήστες να ολισθήσουν οριζόντια στην οθόνη για να περιηγηθείτε ανάμεσα στις καρτέλες.

Κάτω γραμμή πλοήγησης

Η κάτω γραμμή πλοήγησης είναι ένα σχετικά νέο σχέδιο σχεδίασης Android το οποίο προσπαθεί να μιμηθεί τον τρόπο με τον οποίο οι καρτέλες χρησιμοποιούνται στο iOS. Ενώ προσωπικά υποστηρίζω ότι μια κάτω καρτέλα είναι ανόητη στο Android (δεδομένου ότι είναι πολύ κοντά στην εικονική γραμμή πλοήγησης Android), η Google αναφέρει τα παρακάτω στην καρτέλα Καρτέλες προς τα κάτω:

Οι καρτέλες διευκολύνουν την εξερεύνηση και την εναλλαγή μεταξύ διαφορετικών προβολών και

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

Πλευρικό συρτάρι περιήγησης

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

iOS

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

Δεδομένου ότι η Apple δεν παρέχει ένα API για την εφαρμογή Drawers πλοήγησης, οι προγραμματιστές συνήθως χρησιμοποιούν βιβλιοθήκες τρίτων (εδώ είναι μια μερική λίστα).

Android

Στο Android, τα Συρτάρια πλοήγησης είναι ένα μοτίβο φυσικού σχεδιασμού, οπότε η Google σας παρέχει τα API που χρειάζεστε για να δημιουργήσετε ένα συρτάρι πλοήγησης, χωρίς να χρειάζεται να κάνετε αναζήτηση για API τρίτου μέρους.

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

Κορυφαίες μπάρες

iOS

Στο iOS η κορυφαία γραμμή ονομάζεται γραμμή πλοήγησης. Οι γραμμές πλοήγησης περιλαμβάνουν συνήθως:

  • Ο τίτλος της ενότητας που βρίσκεται ο χρήστης επί του παρόντος
  • Ενα πίσω κουμπί στα αριστερά αν υπάρχει μια οθόνη για την πλοήγηση πίσω στο
  • Ένα στοιχείο ελέγχου περιεχομένου στα δεξιά, αν υπάρχει (όπως Αναζήτηση)
Η γραμμή πλοήγησης της εφαρμογής εφαρμογών iOS του TwitterΗ γραμμή πλοήγησης της εφαρμογής iOS του Twitter με κουμπί πίσω

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

Android

Στο Android η κορυφαία γραμμή ονομάζεται Γραμμή εργαλείων. Το Toolbar του Android είναι πιο τυποποιημένο από το iOS και συνήθως περιλαμβάνει:

  • Ο τίτλος της ενότητας που βρίσκεται ο χρήστης επί του παρόντος
  • Ένα κουμπί επάνω στα αριστερά αν υπάρχει μια οθόνη για την επιστροφή στην
  • Ένα κουμπί περιήγησης πλοήγησης αν δεν υπάρχει κουμπί επάνω
  • Κουμπιά μενού και μενού υπερχείλισης με περισσότερες επιλογές
Λάβετε υπόψη ότι στις εφαρμογές Android με Γραμμή Εργαλείων και Καρτέλες, τα δύο συγχωνεύονται σε ένα μόνο στοιχείο.Το μενού υπερχείλισης στην εφαρμογή Android του Youtube

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

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

Πίσω κουμπιά (και γραμμή πλοήγησης Android)

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

iOS

Στο iOS, ο μόνος τρόπος για τον χρήστη να περιηγηθεί πίσω είναι μέσω ενός κουμπιού πίσω / κλεισίματος στην αριστερή πλευρά της Γραμμής πλοήγησης.

Android

Δεδομένου ότι το Android διαθέτει μια γραμμή πλοήγησης στην οθόνη, η τεκμηρίωση σχεδιάζει να διακρίνει μεταξύ του κουμπιού The Up και του κουμπιού Back.

Το επάνω κουμπί

Το κουμπί

Η μπάρα πλοήγησης Android και το κουμπί Επιστροφή

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

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

Ακόμα κι αν είναι ένα σχέδιο σχεδίασης "συστήματος" και όχι ένα "app", η πλοήγηση του Android μπορεί να κρυφτεί και οι εμβληματικές εφαρμογές πολυμέσων (όπως το Youtube, το Google Photos, το Netflix κ.α.) θα κρύψουν τη γραμμή πλοήγησης το περιεχόμενο που παρουσιάζει η εφαρμογή.

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

συμπέρασμα

Αυτό είναι για το άρθρο αυτής της εβδομάδας σχετικά με τα μοτίβα πλοήγησης σε iOS και Android.

Στο επόμενο άρθρο, θα προχωρήσουμε στην έκδοση Native vs. Hybrid για κινητές εφαρμογές.

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

Αυτό το άρθρο συνυπογράφτηκε από:

Jordan Rejaud, Σύμβουλος Μηχανικών Λογισμικού που βοηθάει τους πελάτες στον κινητό χώρο σχεδιάζοντας και γράφοντας το λογισμικό που χρειάζονται.

και

Ο Alex Bush, ένας μηχανικός λογισμικού στο SmartCloud. Blogs σχετικά με τα προηγμένα θέματα iOS και Ruby on Rails.