Πώς οι σχεδιαστές της Google προσαρμόζουν το υλικό

Το Material Design παρέχει ένα σύνολο εργαλείων και οδηγιών που σας βοηθούν να λαμβάνετε τεκμηριωμένες αποφάσεις σχετικά με τις διαφορετικές οδηγίες σχεδιασμού του UX που θα μπορούσατε να κάνετε κατά τη δημιουργία μιας εφαρμογής. Αλλά τι συμβαίνει όταν οι οδηγίες δεν ταιριάζουν με τις ανάγκες του προϊόντος σας; Και τι συμβαίνει στο Google όταν ένας σχεδιαστής εργάζεται σε ένα προϊόν που δεν ταιριάζει αρκετά με τις οδηγίες;

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

Εισερχόμενα: Εξερεύνηση του τυπογραφικού πλέγματος

Ο σχεδιασμός μιας νέας εφαρμογής ηλεκτρονικού ταχυδρομείου μέσω ηλεκτρονικού ταχυδρομείου είναι μια εξαιρετικά φιλόδοξη επιχείρηση στην Google, ειδικά όταν εμφανίζεται παράλληλα με ένα καθιερωμένο προϊόν όπως το Gmail. Η ομάδα Inbox θέλησε να δημιουργήσει ένα πυκνότερο UI, καθώς και μια μοναδική εμπειρία χρήστη και ταυτότητα μάρκας ενώ παίζει με τους νέους κανόνες σχεδίασης υλικών. Ενώ η ομάδα σχεδιασμού Inbox έβαζε μαζί τα αρχικά σχέδια τους, το υλικό σχεδίαζε ακόμα. Αυτό παρουσίασε την ομάδα με μια μεγάλη ευκαιρία: Η δυνατότητα να καθοριστεί ποια θα είναι τα πρότυπα web design του υλικού, ενώ θα λύθηκε το πρόβλημα του σχεδιασμού για πυκνούς UIs.

Σχεδιάζοντας πυκνούς UIs

Ο αρχικός σχεδιασμός για τα Inbox δεν ήταν αρκετά ευέλικτος, καθώς το δίκτυο είχε μόνο χώρο για επτά μηνύματα σε μια οθόνη 13 ιντσών. Αυτό ήταν πολύ μικρό σε σύγκριση με το Gmail, το οποίο θα μπορούσε να δείξει 16-20 μηνύματα ηλεκτρονικού ταχυδρομείου. Ο Tim Smith, Οπτικό σχεδιαστικό μόλυβδο για τα εισερχόμενα εξηγεί:

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

Με την πραγματοποίηση προσαρμογών στο πλέγμα, τα ύψη σειρών και τον τρόπο εμφάνισης του τύπου, τα Inbox κατάφεραν να ορίσουν ένα πρότυπο σχεδίασης για τους πυκνούς διαδικτυακούς χρήστες και να εμφανίζουν 12-17 μηνύματα ηλεκτρονικού ταχυδρομείου, το καθένα μέσα σε μια κάρτα υλικού σχεδιασμού. Το μέγεθος και η διασύνδεση της γραμματοσειράς σχεδιάστηκαν επίσης για να αλλάξουν και να προσαρμοστούν στη συσκευή ενός ατόμου. Για παράδειγμα, η γραμμή θέματος σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου θα αυξηθεί σε μέγεθος γραμματοσειράς ανάλογα με την αύξηση του μεγέθους της οθόνης.

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

Χρήση χρωμάτων, εικόνων και εικονιδίων για να δώσετε το περιεχόμενο στο χρήστη

Η οπτική διάκριση του Inbox από το Gmail αντιμετωπίστηκε με τη χρήση εικόνων κεφαλίδας που αφορούν το περιεχόμενο των ομαδοποιημένων μηνυμάτων ηλεκτρονικού ταχυδρομείου. Αν κάποιος που χρησιμοποιεί το Inbox σχεδιάζει ένα ταξίδι στη Νέα Υόρκη, για παράδειγμα, θα εμφανιστεί μια εικόνα του ορίζοντα του Μανχάταν. Τα Inbox χρησιμοποιούν επίσης μια μεγάλη ποικιλία εικονιδίων σε ένα αριστερό συρτάρι πλοήγησης που είναι χρωματισμένα σύμφωνα με τη λειτουργία τους στην εφαρμογή. Για παράδειγμα, όταν ένας χρήστης κάνει κλικ ή πατήσει το πράσινο κουμπί "Έγινε", το χρώμα φόντου της γραμμής κεφαλίδας αλλάζει επίσης στο πράσινο, κρατώντας τον χρήστη ενήμερο για την αλλαγή και το περιβάλλον.

Αυτή η χρήση των εικόνων με βάση τα συμφραζόμενα είναι ένα άλλο καθοριστικό χαρακτηριστικό της ξεχωριστής εμπειρίας μάρκας του Inbox.

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

Σχεδιάζοντας μια γραμμή κεφαλίδας για τον ιστό

Μια άλλη πρόκληση για την ομάδα ήταν ο σχεδιασμός του bar app. Η αρχική πρόταση ήταν μια μεταβλητή κεφαλίδα που δεν τεντώθηκε για να γεμίσει το πλήρες παράθυρο του προγράμματος περιήγησης, αλλά αντιστάθμισε το πλάτος του περιεχομένου.

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

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

Κρατήστε: Προσαρμογή μοτίβων πλοήγησης

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

Ενθάρρυνση ενεργειών με κενές καταστάσεις και κίνηση

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

Χρησιμοποιήστε τις κενές καταστάσεις για να ενθαρρύνετε τους ανθρώπους να δημιουργούν νέες σημειώσεις
"Η κίνηση είναι κάτι που έχουμε καταβάλει μεγάλη προσπάθεια - από τον τρόπο με τον οποίο οι σημειώσεις ζωντανεύουν στην προβολή ροής, στον τρόπο με τον οποίο μεταβαίνουν όταν τους ανοίγετε και κλείνετε".
Genevieve Cuevas, μηχανικός λογισμικού, Google Keep

Χρησιμοποιώντας τα σωστά μοτίβα υλικού για την εφαρμογή σας: πλοήγηση κάτω από FAB

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

Κατά τη διάρκεια της διαδικασίας επανασχεδιασμού, η ομάδα Keep είχε πειραματιστεί με κάποια βασική πλοήγηση του υλικού, δοκιμάζοντας μια επεκτάσιμη FAB αντί της υπάρχουσας πλοήγησης κάτω. Για το περιβάλλον, η πλοήγηση στο κάτω μέρος προσφέρει μια απλή κλήση μιας δράσης για να δημιουργήσετε νέες σημειώσεις. Το νέο FAB απαιτεί δύο βρύσες: το ένα για να επεκτείνει τις επιλογές και ένα δεύτερο για να δημιουργήσετε σημειώσεις.

"Όταν ξεκινήσαμε το FAB, μερικοί από τους χρήστες μας διαμαρτυρήθηκαν για να χάσουν τη συνήθεια μιας σημείωσης δημιουργίας σημειώσεων".
Genevieve Cuevas, μηχανικός λογισμικού, Google Keep

Αυτή η αλλαγή φαινόταν regressive για τους ανθρώπους που χρησιμοποίησαν προηγουμένως την εφαρμογή και ήταν εξοικειωμένοι με την πλοήγηση με ένα πάτημα. Το ταξίδι του Keep, η δοκιμή και τελικά η εγκατάλειψη των βασικών εξαρτημάτων του υλικού όπως το FAB, αποτελεί ένα εξαιρετικό παράδειγμα επιλογής της καθοδήγησης υλικού που λειτουργεί καλύτερα σε αντίθεση με τη συμπεριφορά του shoehorning που δεν ταιριάζει στο προϊόν.

Οι οδηγοί δεν είναι κανόνες

Και οι ομάδες Inbox και Keep χρησιμοποίησαν τις οδηγίες σχεδίασης υλικού, χρησιμοποιώντας τις για να βοηθήσουν στο σχεδιασμό και την ανάπτυξη των εφαρμογών τους. Όταν συναντήθηκαν μια περίπτωση χρήσης που δεν δούλευε για το προϊόν τους, προσαρμόστηκαν ανάλογα τα σχέδιά τους. Το Material Design προσφέρει πολλή καθοδήγηση, χτισμένο σε χρόνια εμπειρίας UX σε όλη την Google, αλλά δεν μπορεί να καλύψει τα πάντα. Ας ελπίσουμε ότι αυτά τα παραδείγματα παραπάνω δείχνουν ότι μπορείτε να τα προσαρμόσετε για να ικανοποιήσετε τις ανάγκες σας, ενώ εξακολουθείτε να συμμορφώνεστε με το γενικό πνεύμα των οδηγιών.