Android VS. iOS: Σύγκριση 20 συστατικών και μοτίβων UI (Μέρος 1)

20 διαφορές μεταξύ Android και iOS θα πρέπει να γνωρίζετε κατά το σχεδιασμό εφαρμογών μεταξύ των πλατφορμών

中文 版 Πρωτότυπη κινεζική έκδοση που δημοσιεύθηκε στις 10 Δεκεμβρίου 2016

Android VS. iOS: Σύγκριση 20 συστατικών και μοτίβων UI (Μέρος 2)

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

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

1. Συρτάρι περιήγησης, καρτέλες & πλοήγηση στο κάτω μέρος VS. Tab Bars

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

Το συρτάρι πλοήγησης ήταν το πιο αντιπροσωπευτικό του σχεδιασμού Android το 2013. Τα είδη κατηγορίας στο ανώτερο επίπεδο της δομής της πληροφορίας τοποθετούνται σε ένα συρτάρι που μπορεί να κρυφτεί για να κάνουν τους UIs να φαίνονται απλοί και καθαροί. Αλλά αργότερα, με πολλές έρευνες που αποκάλυψαν τα ζητήματα χρηστικότητας του συρταριού πλοήγησης εμφανίστηκε, η Google άρχισε να μετακινεί σημαντικά χαρακτηριστικά / στοιχεία κατηγορίας από τα συρτάρια πλοήγησης σε καρτέλες στις εφαρμογές τους. Το Youtube ήταν ένα παράδειγμα αυτού. Το 2016, η κατώτατη πλοήγηση εμφανίστηκε στις Οδηγίες Σχεδιασμού Υλικού και η οποία δείχνει ότι ορισμένα στοιχεία του UI στο Android προσεγγίζουν περισσότερο τα iOS.

Η εξέλιξη της δομής του Youtube: Τα σημαντικά χαρακτηριστικά, οι συνδρομές μου, το ιστορικό και η λίστα αναπαραγωγής τοποθετούνται σε ένα συρτάρι -> Η δομή της εφαρμογής αναδιοργανώνεται, το συρτάρι αφαιρείται και οι κύριες λειτουργίες μεταφέρονται σε καρτέλες -> Προστίθεται τάση στις καρτέλες.Η εξέλιξη της δομής του Google Photos: Οι βασικές λειτουργίες τοποθετούνται στο συρτάρι -> Οι κύριες λειτουργίες μετακινούνται στην πλοήγηση με κουμπιά -> Το κουμπί Αναζήτηση πλωτής ενέργειας, το οποίο μπορεί να διακόψει τις φωτογραφίες περιήγησης, μετατρέπεται σε γραμμή αναζήτησης.

Λάβετε υπόψη ότι εξακολουθούν να υπάρχουν κάποιες διαφορές μεταξύ των καρτελών Android και της κάτω πλοήγησης:

  1. Οι καρτέλες μπορούν να χρησιμοποιηθούν σε υψηλότερα ή χαμηλότερα επίπεδα στην ιεραρχία των πληροφοριών, αλλά η Bottom Navigation χρησιμοποιείται μόνο στο ανώτερο επίπεδο.
  2. Οι καρτέλες υποστηρίζουν όχι μόνο το χτύπημα, αλλά και τη χειρονομία για να αλλάξετε τις προβολές, αλλά η εφαρμογή Bottom Navigation υποστηρίζει μόνο την κλήση.
  3. Το ποσό του στοιχείου στις καρτέλες είναι ευέλικτο. Μπορείτε να βάλετε 2-5 στοιχεία σε σταθερές καρτέλες ή περισσότερα στοιχεία σε πτυσσόμενες καρτέλες. Αλλά μόνο 3-5 στοιχεία μπορούν να τοποθετηθούν στην κάτω πλοήγηση. 2 ή περισσότερα από 5 είδη απαγορεύονται.

Σε ορισμένες εφαρμογές με βαθιές και περίπλοκες δομές πλοήγησης, μπορεί να βρούμε το συρτάρι πλοήγησης, την κάτω πλοήγηση και τις καρτέλες να εμφανίζονται ταυτόχρονα. Δεν συνιστώ ότι το συρτάρι πλοήγησης και η κάτω πλοήγηση χρησιμοποιούνται ταυτόχρονα σε εφαρμογές, επειδή είναι δύσκολο να πούμε τις ιεραρχικές δομές μεταξύ τους. Το επίπεδο συρταριού πλοήγησης είναι υψηλότερο ή χαμηλότερο από την κάτω πλοήγηση; Ή είναι στο παράλληλο επίπεδο; Οι διφορούμενες δομές θα προκαλούσαν σύγχυση στους χρήστες. Το Google Plus είναι ένα αρνητικό παράδειγμα για μένα. Πραγματικά αισθάνομαι σύγχυση μετά την ενημέρωση του Google Plus και στη συνέχεια να βλέπω το συρτάρι πλοήγησης και την κάτω πλοήγηση ταυτόχρονα στην αρχή.

Αν αναλύσουμε τις τρέχουσες εφαρμογές Google, μπορούμε να βρούμε το συρτάρι πλοήγησης και η πλοήγηση κάτω βρίσκονται στο παράλληλο επίπεδο. Χρησιμοποιήστε τα Google Photos και το Google Plus ως παραδείγματα, αφού αποκαλύψετε το συρτάρι πλοήγησης στην κύρια οθόνη, δεν υπάρχει καμία ένδειξη σε κανένα στοιχείο της κατηγορίας. Το Android φαίνεται να τοποθετεί σε συρτάρια κατηγορίες, όπως λογαριασμούς, ρυθμίσεις και άλλα δευτερεύοντα χαρακτηριστικά, και να εντοπίζει τα συχνά χρησιμοποιούμενα / κύρια χαρακτηριστικά στην κάτω πλοήγηση.

Google Plus

Το iOS χρησιμοποίησε τις κάτω "καρτέλες καρτελών" ως προεπιλεγμένη πλοήγηση για μεγάλο χρονικό διάστημα και δεν άλλαξε ποτέ. Οι καρτέλες Γραμματοσειρές, όπως και η κάτω πλοήγηση Android, έχουν 3 έως 5 είδη κατηγορίας και μπορείτε να αλλάξετε τις προβολές κατηγοριών πατώντας τα στοιχεία.

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

2. Γραμμές εφαρμογής (γραμμές δράσης) VS. Γραμμές πλοήγησης

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

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

Διάφορες κοινές ράβδοι εφαρμογών και μπαρ πλεύσης

3. Γραμμές εργαλείων

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

Παρόλο που οι κάτω γραμμές εργαλείων δεν αναφέρονται στις Οδηγίες Σχεδιασμού Υλικού (Μιλούν οι γραμμές εργαλείων μόνο ως γραμμές εφαρμογών), μπορούμε ακόμα να βρούμε τις κάτω γραμμές εργαλείων που χρησιμοποιούνται στο Google Keep και στο Google Photos.

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

4. Καρτέλες VS. Κατακερματισμένοι έλεγχοι

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

Τόσο οι καρτέλες Android όσο και τα στοιχεία κατακερματισμού iOS μπορούν να τοποθετηθούν στη θέση της γραμμής δράσης / της γραμμής πλοήγησης.

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

Όλα τα κείμενα με δυνατότητα αγγίξεως στο Android είναι UPPERCASE και επομένως το κείμενο στις καρτέλες είναι κεφαλαία. Οι iOS κατακερματισμένοι έλεγχοι χρησιμοποιούν την περίπτωση τίτλου.

Σχετικά με το ποσό των στοιχείων στις καρτέλες Android, θα είναι 2-5 σε μια σταθερή γραμμή καρτελών. Μια μετακινούμενη γραμμή καρτελών μπορεί να χρησιμοποιηθεί όταν υπάρχουν μεγάλες χορδές ή περισσότερα από 5 στοιχεία. Ένας τμηματοποιημένος έλεγχος θα πρέπει να έχει πέντε ή λιγότερα τμήματα στο iPhone για να εξασφαλίσει αρκετό χώρο για εύκολη πρόσβαση.

5. Κουμπιά

Βασικά, η μόνη διαφορά μεταξύ των κουμπιών Android και iOS είναι η χρήση κεφαλαίων συμβολοσειρών και το στυλ εμφάνισης.

Τα κουμπιά Android έχουν κυρίως 2 στυλ, "επίπεδα" και "ανυψωμένα" κουμπιά, τα οποία χρησιμοποιούνται σε διαφορετικές περιπτώσεις. Για παράδειγμα, δεν είναι καλό να χρησιμοποιείτε κουμπιά που εμφανίζονται σε UI κάρτας σε στυλ κάρτας, επειδή τα ανυψωμένα κουμπιά εμφανίζονται πολύ εμφανώς στις κάρτες και οι περιττές σκιές καθιστούν επίσης τα UIs απλά και καθαρά. Τα επίπεδη κουμπιά συνιστώνται για χρήση όχι μόνο στις κάρτες, αλλά και στα παράθυρα διαλόγου και τα υποσέλιδα. Το Android έχει επίσης κουμπιά επιπλέουσας ενέργειας, τα οποία θα εισαχθούν στο επόμενο τμήμα.

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

Το κείμενο στα κουμπιά Android είναι UPPERCASE. Τα κουμπιά iOS χρησιμοποιούν κυρίως την περίπτωση τίτλου. Μερικές φορές τα κουμπιά φαντασμάτων χρησιμοποιούν το UPPERCASE, όπως το κουμπί OPEN και UPDATE στο App Store, αλλά κάποια στιγμή χρησιμοποιούν την υπόθεση τίτλου, όπως "Κράτηση πίνακα" και "Οδηγίες" στον Χάρτη iOS 10. Ο κανόνας κεφαλαιοποίησης στο iOS φαίνεται να είναι ασυνεπής.

6. Κουμπιά κυμαινόμενης δράσης VS. Κουμπιά κλήσης προς δράση

Κουμπιά επιπλεόντων ενεργειών, η FAB παρουσιάστηκε για πρώτη φορά με υλικό σχεδίασης στο Android 5.0. Οι μονάδες FAB, που βρίσκονται στην κάτω δεξιά γωνία των οθονών, χρησιμοποιούνται για να διορθώσουν το ζήτημα χρηστικότητας της λειτουργίας με ένα χέρι. Είναι δύσκολο να φτάσετε κουμπιά στις γραμμές δράσης ενώ χρησιμοποιείτε τηλέφωνα με ένα μόνο χέρι. Τα FAB μερικές φορές βρίσκονται επίσης στη διασταύρωση δύο περιοχών και αυτό καθιστά τα FABs πιο εντυπωσιακά.

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

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

7. Κάτω φύλλα VS. Δελτία ενεργειών και προβολές δραστηριότητας

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

Το κάτω φύλλο του Android έχει 2 φόρμες: τα κάτω φύλλα και τα επίμονα κάτω φύλλα.

Τα φύλλα για το κάτω μέρος της εφαρμογής Android έχουν δύο περιεχόμενα: 1) Λειτουργικά φύλλα κάτω με διαφορετικές ενέργειες και 2) Λίστα εφαρμογών που εμφανίζεται αφού οι χρήστες αγγίξουν το εικονίδιο "Κοινή χρήση". Ο πρώην είναι ακριβώς όπως το iOS Action Sheets. το τελευταίο είναι σαν τις προβολές της δραστηριότητας iOS, αφού πατήσατε το εικονίδιο "Ενέργειες". Η διαμόρφωση του περιεχομένου των φύλλων με βάση το Android μπορεί να είναι λίστα ή πλέγμα.

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

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

Πιστωτική εικόνα: Οδηγός σχεδίασης υλικών Google & Σχεδιασμός Facebook

8. Διάλογοι VS. Ειδοποιήσεις

Τα παράθυρα διαλόγου Android έχουν κατά κύριο λόγο 3 λειτουργίες: 1) Αλλάζουν: διακόπτουν όσα προσπαθούν να κάνουν οι χρήστες και ενημερώνουν τον χρήστη για μια κατάσταση. 2) Μενού: Παρέχετε στους χρήστες την επιλογή μιας επιλογής ή την αλλαγή απλών ρυθμίσεων. 3) Επιβεβαίωση: ως poka-joke, επιβεβαιώστε την επιλογή των χρηστών προτού δεσμευτεί να αποτρέψει από λάθη.

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

Τα παράθυρα διαλόγου Android έχουν 3 φόρμες: 1) Απλά παράθυρα διαλόγου, όπως ένα μενού: Δεν υπάρχει κουμπί OK και Άκυρο στο παράθυρο διαλόγου. Μπορείτε να επιλέξετε μια επιλογή από το παράθυρο διαλόγου για να επιλέξετε και στη συνέχεια το παράθυρο διαλόγου να εξαφανιστεί. Μπορείτε να πατήσετε έξω από το παράθυρο διαλόγου ή το πλήκτρο Επιστροφή για να κλείσετε τα παράθυρα διαλόγου. 2) Διαλόγους επιβεβαίωσης, τα πιο συνηθισμένα: Υπάρχουν κουμπιά που οι χρήστες μπορούν να αγγίξουν για να επιβεβαιώσουν τη δράση τους. 3) Διαλόγια πλήρους οθόνης, που χρησιμοποιούνται μόνο σε τηλέφωνα: τα παράθυρα πλήρους οθόνης δεν είναι πλήρης οθόνη σε δισκία. Τα παράθυρα διαλογής πλήρους οθόνης Android είναι ακριβώς όπως η προβολή τρόπου λειτουργίας iOS, η οποία θα εισαχθεί αργότερα.

Κείμενα

Το κείμενο τίτλου και περιεχομένου στα παράθυρα διαλόγου Android ευθυγραμμίζεται προς τα αριστερά. Το κείμενο του τίτλου και της περιγραφής στο Κέντρο ευθυγράμμισης της ειδοποίησης iOS. Το Android χρησιμοποιεί "Case sentence" για τους τίτλους. Το iOS χρησιμοποιεί την "υπόθεση τίτλου". Τόσο το Android όσο και το iOS χρησιμοποιούν το "sentence sentence" για το κείμενο του περιεχομένου.

Ο τίτλος του διαλόγου Android και της ειδοποίησης iOS θα πρέπει να είναι σύντομος και σαφής. Αποφύγετε ερωτήσεις με κάποιες ενδείξεις, όπως "Είστε βέβαιοι ότι θέλετε να διαγράψετε το αρχείο;" Η πρόταση θα πρέπει να είναι απλή, ουδέτερη και άμεση, όπως "Διαγραφή του αρχείου;".

Κουμπιά

Σχετικά με τον αριθμό των κουμπιών, το Android και το iOS μπορούν να έχουν 1-2 κουμπιά. Οι οδηγίες iOS προτείνουν να αποφύγετε 3 ή περισσότερα κουμπιά εν γένει, επειδή περισσότερα κουμπιά δημιουργούν πολυπλοκότητα και μπορούν να απαιτήσουν κύλιση. Εάν χρειάζεστε περισσότερες από δύο επιλογές, εξετάστε το ενδεχόμενο να χρησιμοποιήσετε ένα φύλλο ενέργειας αντί. Όταν όμως το iOS ρωτά τους χρήστες εάν θέλουν να ενημερώσουν την έκδοση iOS, εμφανίζουν τρία κουμπιά, Εγκατάσταση τώρα, αργότερα και Λεπτομέρειες στην ειδοποίηση.

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

Το αντίγραφο στα κουμπιά πρέπει να αποφεύγει τη χρήση των Ναι και Όχι, η εγγραφή των ενεργειών στα κουμπιά θα είναι πιο ξεκάθαρη και άμεση, όπως Ακύρωση και Αποθήκευση, Ακύρωση και Κατάργηση.

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

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

9. Διάλογος πλήρους οθόνης VS. Modal Views & Popovers

Τα παράθυρα διαλογής πλήρους οθόνης Android, μπορούν να βρεθούν μόνο σε μικρές κινητές συσκευές όπως τα έξυπνα τηλέφωνα, τα οποία μπορούν να συγκριθούν με τις τροποποιήσεις της iOS. Οι τρόποι προβολής του iOS έχουν 4 στυλ, πλήρη οθόνη, φύλλο σελίδας, φύλλο φόρμας και άλλα, όπως split view και popover. Σχετικά με τη μετάβαση των τρόπων προβολής τρόπων στα τηλέφωνα, μια προβολή στυλ θα μετατοπιστεί όταν εισέλθετε και θα γλιστρήσει κάτω όταν φεύγετε.

Τα popovers χρησιμοποιούνται μόνο για δισκία

10. Snackbars & toasts VS. Ειδοποιήσεις

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

Οι Snackbars μπορούν να έχουν ένα κουμπί δράσης που επιτρέπει στο χρήστη να επαναλάβει ή να κάνει άλλες ενέργειες. Τα τοστ χρησιμοποιούνται κυρίως για την εμφάνιση μηνυμάτων συστήματος. Δεν μπορείτε να βάλετε εικονίδια σε snackbars ή toasts.

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

Ορισμένες εφαρμογές ενδέχεται να προσαρμόσουν τις ειδοποιήσεις τους ώστε να εμφανίζονται για δευτερόλεπτα, όπως το toast Android.

11. Λίστες VS. Πίνακες

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

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

Οι πίνακες iOS είναι παρόμοιοι με τους καταλόγους Android, αλλά εξακολουθούν να υπάρχουν ορισμένα σημεία που πρέπει να προσέξετε:

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

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

3) Οι πίνακες iOS έχουν 2 μορφές: Απλή και ομαδοποιημένη. Ένα απλό τραπέζι έχει μια ολόκληρη λευκή οθόνη με διαχωριστικά. Παρόλο που μόνο λίγα κελιά έχουν περιεχόμενο, η υπόλοιπη περιοχή εξακολουθεί να έχει διαιρέτες. Οι ομαδοποιημένοι πίνακες έχουν γκρίζο φόντο. Ο πρώτος ομαδοποιημένος πίνακας έχει κάποιο χώρο με μια γραμμή πλοήγησης και ο δεύτερος ομαδοποιημένος πίνακας παρακάτω. Το Android έχει ένα μόνο στυλ και χρησιμοποιεί μόνο διαιρέτη για να διαχωρίσει δύο διαφορετικές λίστες.

12. Υπότιτλοι VS. Ομαδοποιημένες κεφαλίδες πινάκων & κεφαλίδες ενότητας

Οι υπότιτλοι Android και οι κεφαλίδες iOS χρησιμοποιούνται για τον διαχωρισμό και ομαδοποίηση λιστών ή λιστών πλέγματος με διαφορετικά περιεχόμενα. Το iOS έχει 2 διαφορετικά στυλ για ξεχωριστές λίστες: 1) Ομαδοποιημένοι πίνακες, που χρησιμοποιούνται για την ομαδοποίηση εντελώς διαφορετικών πληροφοριών. 2) Κεφαλίδες ενότητας, που εμφανίζονται σε απλούς πίνακες, που χρησιμοποιούνται για την ταξινόμηση της μορφής παρόμοιων δεδομένων, όπως φωτογραφίες με διαφορετικές ημερομηνίες λήψης ή επαφές με διαφορετικά ονόματα.

Οι υπότιτλοι Android χρησιμοποιούν την πρόταση. Οι κεφαλίδες των ομαδοποιημένων πινάκων iOS χρησιμοποιούν το "UPPERCASE" και οι απλές κεφαλίδες στο τραπέζι χρησιμοποιούν "Case Title".

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

13. Λίστα ελέγχου

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

13-1. Πολλαπλή επιλογή: Κουτιά ελέγχου VS. Έλεγχος με τον Κύκλο

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

Τα κουτιά ελέγχου Android μπορούν να τοποθετηθούν στην αριστερή ή τη δεξιά πλευρά, αλλά το iOS συνήθως τοποθετεί πολλαπλά χειριστήρια επιλογής στη δεξιά πλευρά.

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

13-2 Επιλογή γλώσσας: Κουμπιά / Έντυπα ελέγχου VS. Σημεία ελέγχου

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

Το iOS δεν διαθέτει κουμπιά επιλογής, αλλά έχει checkmarks αντί για επιλογέα επιλογής επιλογής.

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

Παρόλο που οι Οδηγίες σχεδίασης υλικού δεν εισάγουν σημάδια ελέγχου, τα οποία εμφανίζονται σταδιακά από το 2016, αλλά μπορείτε να βρείτε το παράδειγμα στο μενού του Ημερολογίου Google.

Απλή επιλογή Android: κουμπιά ραδιοφώνου & μάρκες ελέγχου. Αλλά το αριστερό είναι ένα κακό παράδειγμα ως απλό διάλογο, δεν θα έπρεπε να έχει ένα κουμπί CENCEL σύμφωνα με τις Οδηγίες της Google. Ή θα μπορούσε να είναι ένα παράθυρο επιβεβαίωσης προσθέτοντας ένα κουμπί OK, αλλά θα οδηγήσει σε περισσότερα βήματα.

13-3. Διακόπτες

Ένας διακόπτης είναι μια εναλλαγή ανάμεσα σε δύο αμοιβαία αποκλειστική κατάσταση, on και off. Στο παρελθόν, το Android δεν είχε διακόπτες και χρησιμοποίησε κουτάκια για την ενεργοποίηση / απενεργοποίηση ορισμένων λειτουργιών, αλλά τώρα η χρήση Android αλλάζει όλο και περισσότερο. Το iOS χρησιμοποιεί πάντα διακόπτες για ενεργοποίηση / απενεργοποίηση λειτουργιών. Διακόπτες τοποθετούνται στη δεξιά πλευρά των λιστών τόσο στο Android όσο και στο iOS.

Ενεργοποίηση και απενεργοποίηση των ρυθμίσεων Android: Το Gmail χρησιμοποιεί πλαίσια ελέγχου, αλλά οι φωτογραφίες χρησιμοποιούν κουμπιά διακόπτη

13-4. Αναδιάταξη / Κοπή

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

iOS gripper εικονίδιο εμφανίστηκε νωρίτερα από το Android. Μπορείτε επίσης να το δείτε στη λειτουργία επεξεργασίας. Ωστόσο, το iOS gripper αποτελείται από 3 γραμμές μόνο επειδή το iOS δεν χρησιμοποιεί συρτάρι ως προεπιλεγμένη πλοήγηση όπως το Android.

13-5. Αφήστε πίσω (Ενέργειες πατημένο)

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

Μετά το Android 5.0, οι οδηγίες στίγματος εμφανίζονται με τις κινήσεις του δακτύλου, οι αποκαλούμενες Leave-Behinds. Αξίζει να σημειωθεί ότι το Leave-Behinds δεν πρέπει να χρησιμοποιείται σε μια οθόνη έχει καρτέλες λόγω διένεξης χειρονομίας και γι 'αυτό το Android δεν είχε αυτό το στοιχείο πριν.

Αφού σύρετε μια λίστα για μια απόσταση και στη συνέχεια σταματήσετε, μπορείτε να δείτε 1-3 πράξεις πίσω και στη συνέχεια να πατήσετε ένα από αυτά για να αναλάβετε δράση. Ωστόσο, εάν μετακινείτε το δάχτυλό σας για μεγαλύτερη απόσταση, θα πραγματοποιηθεί προεπιλεγμένη ενέργεια. Το Android έχει μια ενέργεια πίσω και μόνο και να αναλάβει δράση πατώντας ευθεία.

Πηγή εικόνας: Οδηγός Σχεδιασμού Υλικού Google & Σχεδιασμός Facebook

13-6. Ανάπτυξη / Σύμπτυξη

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

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

Πηγή εικόνας: Οδηγός σχεδιασμού υλικού Google

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

iOS 8 App Store
Παρακαλώ δώστε 10 clapsif έχετε διαβάσει αυτό το άρθρο.
Παρακαλώ δώστε 20 clapsif νομίζετε ότι είναι χρήσιμο.
Παρακαλώ δώστε 50 clapsif νομίζετε ότι είναι εκπληκτικό!
Σας ευχαριστώ :)

Συνεχίστε στο Android VS. iOS: Σύγκριση 20 συστατικών και μοτίβων UI (Μέρος 2)

Αναφορά