Επανασχεδιασμός της επιφάνειας εργασίας Chrome

Η τιμή ενός εικονοστοιχείου

Στις αρχές Σεπτεμβρίου 2016, ο νέος επανασχεδιασμός του Chrome Core UI, ή το αποκαλούμενο "Chrome MD" (για το σχεδιασμό του υλικού), κυκλοφόρησε στα Windows ως μέρος της 53ης ενημερωμένης έκδοσης. Είναι το τελευταίο βήμα της τριφασικής ανάπτυξης του νέου σχεδιασμού, το οποίο ξεκίνησε στις 51 με το Chrome OS και το Linux, ακολουθούμενο από macOS στα 52. Τα Windows είναι το αποκορύφωμα αυτής της διαδικασίας και ενώ το Chrome δεν τελειώνει ποτέ, αισθάνθηκα σαν την κατάλληλη στιγμή για να ρίξετε μια ματιά πίσω και να σκεφτείτε αυτή τη διαδικασία που χρειάστηκε σχεδόν 2 χρόνια, ελπίζουμε να σας προσφέρουμε κάποιες λεπτομέρειες και εμπειρίες που μπορεί να σας φανούν χρήσιμες.

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

Κάτι φόντο

Έχω ασχοληθεί με το Chrome και το Chrome OS για σχεδόν 5 χρόνια ως οπτικός σχεδιαστής. Παρόλο που χωρίζονταν ο χρόνος μου ανάμεσα στο πρόγραμμα περιήγησης και το λειτουργικό σύστημα, έκανα αργά τη μετάβαση σε ρόλο πλήρους απασχόλησης στο ChromeOS κατά το τελευταίο έτος.

Πίσω το 2012, Ένα από τα πρώτα μου μεγάλα έργα ως νέο μέλος της ομάδας Chrome ήταν να φτιάξω το πρόσφατα ανασχεδιασμένο UI του Chrome Core συμβατό με οθόνες υψηλής ανάλυσης όπως το πρώτο Macbook Pro Retina και το πρώτο Chromebook Pixel, έκδοση της οθόνης αμφιβληστροειδούς. Το Chromebook Pixel εγκαινιάστηκε για κυκλοφορία τον Φεβρουάριο του 2013, λίγο μετά το Macbook Pro.

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

Ο στόχος μας τότε ήταν όχι μόνο να ζωντανέψουμε το νέο σχέδιο για τις νέες αναλύσεις οθόνης και τις αναλογίες πυκνότητας (1x και 2x) αλλά και να επανεξετάσουμε και να διευκολύνουμε τον τρόπο με τον οποίο συνεργάζομαστε με την τεχνική, οργανώνοντας τη διαδικασία ροής εργασιών και τα αποθετήρια στοιχείων.

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

Μετά από λίγους μήνες εργασίας, μετά την κυκλοφορία του νέου σχεδίου για οθόνες κανονικής ανάλυσης, ο γυαλιστερός νέος υψηλής ευκρίνειας βγήκε. Αυτό έμοιαζε:

Επωφελήθηκα από την ευκαιρία να λάβω τον κατάλογο ολόκληρου του αποθετηρίου στοιχείων (~ 1200 bitmaps για επιφάνεια εργασίας) και να οργανωθώ για να μπορέσω να κινηθώ ταχύτερα στο μέλλον. Αυτό θα έρθει χρήσιμο για αυτά που έρχονται.

Αυτός ο σχεδιασμός επρόκειτο να παραμείνει λίγο πολύ στην ίδια κατάσταση για 4 χρόνια, μέχρι τον Απρίλιο του 2016, ημερομηνία κατασκευής υλικού Chrome για απελευθέρωση του Chrome OS.

Χρονισμός και προγραμματισμός

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

Την εποχή εκείνη (αρχές του 2013), το Chrome δεν είχε γίνει ακόμα το προεπιλεγμένο πρόγραμμα περιήγησης στο Android, δεν είχε έκδοση του tablet και μόλις κυκλοφόρησε στο iOS.

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

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

Είχα μια πολύ μεγάλη εμπειρία γι 'αυτό με το πρώτο pixel Chromebook, αλλά ένα άλλο πράγμα που προκάλεσε μεγάλο ενδιαφέρον μου εκείνη την εποχή ήταν τα Windows 8 και η πολύ ισχυρή δέσμευσή τους να προσφέρουν ένα πολύ ευγενικό UI σε έναν νέο, υβριδικό παράγοντα μορφής, με την επιφάνεια ως συσκευή ήρωας.

Το 1ο Chromebook Pixel (2013) με οθόνη αφής υψηλής ανάλυσηςΗ πρώτη επιφάνεια της Microsoft και η λειτουργία

Η δυαδικότητα του λειτουργικού συστήματος καθώς και η επιλογή να πάει για ένα πολύ επαφή UI τόσο για αφής όσο και για μη-επαφή με συσκευές με έκαναν να σκεφτόμαστε τον τόπο και την κατεύθυνση του Chrome UI σε αυτό το είδος περιβάλλοντος.

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

Μετά από λίγο καιρό, αποφασίσαμε να δημιουργήσουμε ό, τι θα γίνει ο πρόδρομος της σημερινής "Υβριδικής λειτουργίας": Προσοχή.

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

Αυτό επεκτάθηκε σε ορισμένα Chromebook και στα Windows 8.

Ήταν ένα ενδιαφέρον πείραμα και παρόλο που δεν κράτησε πολύ καιρό, η ακρίβεια της ακύρωσης των παραθύρων στα Windows και η επανεξέταση του Windows 8 σε αυτό που θα γινόταν Windows 10, ήταν αρκετό να προσφέρει μια ματιά σε αυτό που ήταν έρχονται στον ορίζοντα: ο εκδημοκρατισμός των "υβριδικών" ή "μετατρέψιμων" συσκευών και η αργή αλλά σταθερή θόλωση της γραμμής μεταξύ tablet και φορητών υπολογιστών.

Προσαρμογή σε μια επερχόμενη και αναπτυσσόμενη κατηγορία συσκευών: υβρίδια

Γρήγορα προς τα εμπρός μέχρι το τέλος του 2014. Πολλά πράγματα συνέβησαν στο τοπίο σχεδίασης του συστήματος, η Apple ανακοίνωσε την Yosemite, με το UI να κλείνει το χάσμα ανάμεσα στα macOS και iOS7 και ο Lollipop πρόκειται να κυκλοφορήσει χρησιμοποιώντας τη νέα γλώσσα Visual Visual Design του Google: Υλικό σχεδιασμού.

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

Τα Windows είχαν το "Modern UI", η Apple "iOS UI" και το Google "Σχεδιασμός Υλικού". Στο πλαίσιο αυτού του μεγάλου κύκλου ενημέρωσης, το Chrome έλαβε μια ανανέωση των ιδιοτήτων του για κινητά, iOS και Android.

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

Το νέο MD του Chrome στο tablet

Το μέλλον του Desktop UI αργότερα διαμορφώθηκε και διαμορφώθηκαν σαφέστερες απόψεις για το θέμα. Τα Windows και η Google από τη μία πλευρά προσπαθούν να καταλάβουν ένα σύστημα σχεδιασμού ικανό να διαχειρίζεται ταυτόχρονα όλα τα μεγέθη οθόνης και τη μορφή, την Apple από την άλλη με κατευθυντήριες κατευθύνσεις σχεδίασης που βασίζονται σε βάση πλατφόρμας και βάση μορφής (touch για iOS, macOS).

Είναι εκείνη τη στιγμή, σχεδόν δύο χρόνια από τώρα, η διαδικασία επανασχεδιασμού της επιφάνειας εργασίας του Chrome ξεκίνησε.

Ο τύπος διάταξης Hybrid

Ένα σταθερό και μη τετριμμένο πράγμα που έπρεπε να φροντίζω κατά τη διάρκεια των ετών που εργάζομαι στο Chrome και ότι οι περισσότεροι σχεδιαστές ασχολούνται με τη διαχείριση περιουσιακών στοιχείων. Υπάρχει ένας λόγος για τον οποίο ανέφερα προηγουμένως την οργάνωση των περιουσιακών στοιχείων ~ 1200 bitmaps στην επιφάνεια εργασίας. Πέρα από αυτό είναι απίστευτα διασκέδαση (/ s), είναι μια αναγκαιότητα όταν εργάζεστε σε όλη την πλατφόρμα.

Από την προοπτική του μηχανικού, το Chrome διανέμεται σε 4 πλαίσια / κώδικα: Απόψεις που μοιράζονται τα Windows, το Chrome OS και το Linux (πλαίσιο για την κατασκευή του UI), το Cocoa σε MacOS, το Java για Android και το Obj-C / Swift για iOS.

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

Για παράδειγμα, τα Windows, το Chrome OS και το Mac μοιράζονται πολλά κοινά γραφικά. Μπορεί να εφαρμοστούν διαφορετικά, αλλά οι εικόνες bitmap είναι οι ίδιες.

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

Chrome για Android και Chrome για iOS 9 (MD)Chrome tablet για Android (MD)Chrome για iPad (MD)

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

Πριν από τη μελέτη του υβριδικού, το τοπίο φαίνεται ως εξής:

Όπως μπορείτε να δείτε, υπάρχει ένα σύνολο 2 τύπων διάταξης: Αγγίξτε και μη αγγίξτε. Μεταξύ αυτών των δύο τύπων διάταξης είναι δύο πολλαπλασιαστές πυρήνα (1x και 2x) για ένα εκτεταμένο σύνολο 5 έως 6 πολλαπλασιαστή ανά πλατφόρμα:
- 100, 150, 200, 300, 400 για κινητά
- 100, 125, 150, 180, 200, 225 για επιφάνεια εργασίας (σε ακραίες περιπτώσεις στα Windows)

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

Σε αυτό το πλαίσιο και με την αναρρίχηση της ζήτησης για αφής και μετατρέψιμες συσκευές θα έπρεπε να βρούμε μια λύση για μετατρέψιμες συσκευές, εμπνευσμένες από την άποψη αφής που επρόκειτο να ονομάσουμε "Hybrid", προσθέτοντας μεγαλύτερη πολυπλοκότητα στην υπάρχουσα δομή μας:

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

Αυτό ήταν όταν έμπαινε η προγραμματική απόδοση.

Νέος τύπος διάταξης, νέα διαδικασία

Η "υβριδική λειτουργία" Chrome σχεδιάστηκε αρχικά για Chomebooks, εμπνευσμένη από την προηγούμενη προσπάθειά μας: "Προβολή με αφής". Αυτή τη φορά, χρειαζόμασταν να δημιουργήσουμε Hybrid ως μέρος της προσπάθειας επανασχεδιασμού και όχι ως προσθήκη σε ήδη υπάρχον UI.

Για να γίνει αυτό, χρειαζόμασταν δύο πράγματα:

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

Η λύση στο δεύτερο μας πρόβλημα προήλθε από την προσπάθεια του Peter Kasting, του Evan Stade και του Terry Anderson (Tech Lead για το έργο).
Αρχικά δεν είμαι πεπεισμένος ότι η απόδοση σχήματος (ειδικά χρωμίου καρτέλες) και εικόνων εξ ολοκλήρου προγραμματιστικά επρόκειτο να επιτύχει το επίπεδο λεπτομέρειας που θα μπορούσαμε να προσφέρουμε με .pngs. Εκανα λάθος.

Το Chrome χρησιμοποιεί τη βιβλιοθήκη γραφικών Skia. Μετά από λίγες προσπάθειες, ο Peter ήταν σε θέση να αποδίδει τέλεια τα βασικά στοιχεία του Chrome, όπως τις καρτέλες και το κύριο πλαίσιο, χωρίς να χρησιμοποιεί οποιονδήποτε τύπο bitmap. Από την πλευρά του, ο Evan δημιούργησε έναν μετατροπέα ικανό να μεταφράσει τον κώδικα .svg στον κώδικα Skia. .svg θα χρησιμεύσει ουσιαστικά ως σχέδιο, ένα σύνολο οδηγιών για την απόδοση κώδικα.

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

Οι σχεδιαστές θα δημιουργούσαν .svg σε οποιοδήποτε μέγεθος επιθυμούσαν να χρησιμεύσουν ως πρότυπο για την απόδοση του κώδικα Skia. Αυτό ισχύει τόσο για τα σχήματα όσο και για τα εικονίδια. Η μηχανική θα πάρει αυτό το πρότυπο και θα το εφαρμόσει στο Chrome, χρησιμοποιώντας τη Skia.

Εδώ είναι ένα σχηματικό των καρτελών:

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

Ακολουθεί μια προεπισκόπηση κώδικα με το παράδειγμα ενός εικονιδίου, χρησιμοποιώντας το εργαλείο αυτόματης μετατροπής που συνθέτει ο Evan:

Αυτή η τεχνική οδήγησε σε τεράστια μείωση του αριθμού των bitmaps που χρησιμοποιούν στο Chrome, από περίπου 1200 έως ... 0.

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

Το πλεονέκτημα και το τεράστιο πλεονέκτημα έναντι της χρήσης του .svg είναι ότι είμαστε σε θέση να ελέγξουμε την απόδοση κάθε στοιχείου σε βάση PPI. Αυτό σημαίνει ότι μπορούμε να δημιουργήσουμε ένα εικονίδιο ελαφρώς διαφορετικό από το 1x έως το 2x αν χρειαστεί. Πρόκειται για μια τεράστια υπόθεση, καθώς η επιφάνεια εργασίας εξακολουθεί να είναι κυρίως 1 φορά. Επιπλέον, θα μπορούσαμε επίσης να ελέγξουμε την απόδοση για δεκαδικούς πολλαπλασιαστές, όπως 1,5, 1,25, κτλ ... Κάνοντας το Chrome να φαίνεται τόσο καλό όσο μπορούμε να έχουμε σε όλες τις περίεργες διαμορφώσεις PPI.

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

Οπτική συνοχή και λεπτομέρειες σχεδίασης

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

Μια ερώτηση που νομίζω ότι έχει στο μυαλό όλων των Chrome visual designers σε ένα σημείο είναι: "Τι κάνει το Chrome, το Chrome;"

Υπάρχουν πολλά για το τι κάνει το Chrome αυτό που είναι, αλλά ταυτόχρονα, ο ρόλος μας είναι να εξαφανιστούμε υπέρ του περιεχομένου, με άλλα λόγια να είμαστε παρόντες αλλά όχι στο δρόμο.

Τα βασικά στοιχεία, όταν σκέφτεστε για τον κεντρικό περιβάλλον χρήστη, είναι οι καρτέλες και τα εικονίδια. Το Chrome mobile χρησιμοποιούσε ήδη τις νέες αιχμηρές άκρες των καρτελών σε tablet και χρησιμοποίησε επίσης το νέο σύστημα εικονιδίων που προέκυψε από τις οδηγίες σχεδιασμού υλικού. Σε αυτό το πλαίσιο, στόχος μας ήταν:

  • Φέρτε τα νέα σχήματα στη ζωή στην επιφάνεια εργασίας
  • Φέρτε ένα νέο σύνολο εικονιδίων, που προέρχονται από το MD χρησιμοποιώντας μεγέθη επιφάνειας εργασίας
  • Ευθυγραμμίστε και απλουστεύστε την παλέτα χρωμάτων και το σύστημα θεμάτων μας.
    Μπόνους: Φέρτε το νέο "σκούρο" ανώνυμο στην επιφάνεια εργασίας
  • Ξεκινήστε την ανανέωση των δευτερευόντων στοιχείων UI, όπως κουμπιά, γραμμές εργαλείων, φυσαλίδες κλπ ...
  • Δημιουργήστε μια πιο επαφή έκδοση του Chrome για μετατρέψιμες συσκευές
  • Έρχονται με ένα σύνολο κανόνων για τη συνέπεια των Τρίτων συμβαλλομένων
  • Εφαρμόστε την κίνηση MD όταν είναι δυνατόν

Γενική διάταξη και αποτύπωμα UI

Υπάρχει ένα βασικό πράγμα που πρέπει να θυμάστε κατά το σχεδιασμό της διάταξης Core του Chrome: Αποτύπωμα UI. Είναι η ακριβής ποσότητα pixel που χρησιμοποιούμε για να εμφανίσουμε το περιβάλλον χρήστη ή με άλλα λόγια το μέγεθος των pixel που αφαιρούμε από το περιεχόμενο.

Το ύψος του προ-MD σχεδιασμού όταν δεν εμφανίστηκε η γραμμή σελιδοδεικτών ήταν 73px σε Chrome OS και macOS (συμπεριλαμβανομένου του πλαισίου παραθύρου) και 78px στα Windows (συμπεριλαμβανομένου του πλαισίου).
Το εγγενές πλαίσιο στα παράθυρα είναι ψηλότερο από τα αντίστοιχα ChromeOS και macOS. Κάνει το πλαίσιο ευκολότερο να κάνει κλικ και να αρπάξει με το κόστος ενός μεγαλύτερου αποτυπώματος. Δείτε μια σύγκριση για το macOS με τα Windows παρακάτω, pre-MD:

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

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

Ο σχεδιασμός του υλικού χρησιμοποιεί ως βασική γραμμή το 8pt. Χρησιμοποιούμε μισό μικρό μέγεθος: 4pt.
Η τοποθέτηση ενός πλέγματος και των στοιχείων τοποθέτησης κατά βήματα των 4pt βοήθησε τρομερά να πάρει μια καλή ισορροπία και να διατηρήσει σταθερή τη διάταξη, την εικονογραφία και την τυπογραφία. Για να επιτευχθεί ισορροπία, χωρίζουμε το UI στο μισό: tabs + frame window / Toolbar.

Αυτό είναι αυτό που μοιάζει με το τακτικό UI:

Όπως μπορείτε να δείτε σε αυτήν την προεπισκόπηση 200% (ή @ 2x) του Chrome MD στο Chrome OS, η γραμμή εργαλείων χωρίζεται σε δύο μέρη 36pt έκαστο. Κάθε στοιχείο πυρήνα πέφτει στο πλέγμα 4pt.

Οι καρτέλες είναι 28pt, ίσες με το ύψος κύριου πλαισίου. Αφήνουμε μια κορυφαία επένδυση 8pt μεταξύ των καρτελών και της κορυφής του πλαισίου.

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

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

Μπορεί επίσης να έχετε παρατηρήσει ότι κάνουμε το εγκεφαλικό επεισόδιο με την προσθήκη 1pt στο κάτω μέρος της γραμμής εργαλείων αντί να το τοποθετήσουμε για λόγους ισορροπίας, προσθέτοντας αποτελεσματικά 1pt στο 36pt + 36pt συνολικό ύψος.

Αριστερά είναι το υβριδικό περιβάλλον χρήστη.

Για το Hybrid, διατηρούμε το pad padding (8pt) αυξάνοντας παράλληλα τις καρτέλες και το αποτύπωμα της γραμμής εργαλείων κατά 4pt. Το αποτέλεσμα είναι μια πιο διατεταγμένη διάταξη 40 + 40.

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

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

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

Ακολουθεί σύγκριση μεταξύ της προ-MD Chrome, της κανονικής διάταξης του Chrome MD, του υβριδικού και τελικά του Tablet, που όλα αποδίδονται στο 200% (xhdpi για Android).

Στην πραγματικότητα, το αποτύπωμα κανονικής διάταξης MD, συμπεριλαμβανομένου του πλαισίου παραθύρου, είναι 2px ψηλότερο από το αντίστοιχο προ-MD ChromeOS / macOS (71 έναντι 73). Ωστόσο, επειδή μετακινήσαμε το UI επάνω σε 3px στο πλαίσιο του παραθύρου του νέου UI, χωρίς να υπολογίζουμε το πλαίσιο του παραθύρου, έχουμε ένα UI αποτελεσματικά 5px ψηλότερο (60 έναντι 65).

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

Αυτή η λογική εφαρμόζεται και στα εικονίδια ...

Εικονογραφία

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

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

Ωστόσο, παρέμεινε ένα πρόβλημα: μέγεθος πλέγματος. Το πλέγμα 24x24pt δεν ταιριάζει πραγματικά με το μάλλον συμπυκνωμένο UI που σχεδιάσαμε να δημιουργήσουμε (ακόμα και με υβριδικό). Μετά από όλα, είχαν σχεδιαστεί για κινητά.

Χρειαζόμασταν να αντλήσουμε ένα πλέγμα που να ταιριάζει με το νέο μας κανονικό και υβριδικό περιβάλλον χρήστη.

Για να γίνει αυτό και για να ταιριάζει με το πλέγμα 4pt μας, χρησιμοποιήσαμε εικονίδια 16x16pt όπως περιγράφεται στην παρακάτω προεπισκόπηση.

Μειώσαμε το δοχείο από 24pt σε 16pt και προσθέσαμε κάποια ευελιξία γύρω από την αρχική εσωτερική επένδυση: 2pt αλλαγή σε 1pt σε 2pt ανάλογα με το εικονίδιο για το πλέγμα εικονιδίων του Chrome. Ο λόγος για αυτό το εύκαμπτο padding είναι ότι λαμβάνοντας υπόψη τη μεγάλη ποικιλία των εικονιδίων που επρόκειτο να χρησιμοποιήσουμε, κάποιοι μπορεί να χρειαστούν επιπλέον χώρο για να κάνουν τα μονοπάτια τους να λειτουργούν οπτικά σε μικρά μεγέθη.

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

Ενώ αυτό θα ήταν καλό σε δευτερεύοντα εικονίδια, όλες οι πιο σημαντικές εικόνες μας έπρεπε να καταστούν σωστά και ως pixel τέλεια όσο το δυνατόν. Για το σκοπό αυτό, θα τους δημιουργούσαμε για να αποφύγουμε οποιοδήποτε pixel off-grid, ειδικά στους χαμηλότερους PPI. Δείτε τα εικονίδια "πίσω" παρακάτω "

Όπως μπορείτε να δείτε, αφού έχουμε τον έλεγχο της απόδοσης σε οποιοδήποτε δεδομένο PP, αφαιρούμε τη θολότητα που προκαλείται από την κλίμακα της εικόνας.
Κάναμε επίσης το βάρος της γραμμής εικονιδίων ελαφρώς λεπτότερο (2px σε 100% και 3px ένα 200% από το αρχικό 2px σε 100% και 4px σε 200%) καθώς σκέφτηκα ότι το βάρος ήταν ελαφρώς πολύ υψηλό. Με αυτόν τον τρόπο, είναι πιο κομψή και ισορροπημένη μέσα στο UI μας.

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

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

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

Δείτε τη διαδικασία που περιγράφεται παρακάτω:

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

Τώρα που η διαδικασία δημιουργίας εικονιδίων είναι χαραγμένη. Ας δούμε πώς ταιριάζουν μέσα στο UI.

Αγγίξτε τους στόχους και τη διάταξη

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

Σε κανονική λειτουργία, πήγαμε για στόχους αφής 28x28pt, κρατώντας εικονίδια 16x16pt. Φυσικά τα παρακάτω διαστήματα είναι συνεπή σε όλες τις κανονικές διατάξεις του Chrome, ανεξάρτητα από την πλατφόρμα.

Παρακάτω είναι το Chrome στο ChromeOS:

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

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

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

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

Ενώ τα εικονίδια διατηρούσαν τους 28x28pt στόχους αφής, αυξήσαμε το περιθώριο γύρω τους στα 8pt, δίνοντας στο UI περισσότερο χώρο και μειώνοντας τα σφάλματα των επαφών του χρήστη. Η ίδια αρχή ισχύει για τα εικονίδια μέσα στο κύριο πλαίσιο (επεκτάσεις και άδειες) καθώς και τα εικονίδια επέκτασης.

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

Δείτε τι φαίνεται το παρακάτω ολοκληρωμένο Hybrid core UI.

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

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

Προηγούμενα εικονίδια που δεν είναι MD δημιουργήθηκαν σε μια περίοδο αρκετών ετών, γεγονός που καθιστούσε δύσκολο να διατηρηθεί ένα σταθερό σύνολο μεγέθους. Αυτή τη φορά, ενημερώσαμε ακόμη και τις απαιτήσεις εικονιδίου επέκτασης να είναι 16x16pt αντί για τις προηγούμενες 19x19pt. Επίσης, επαναπροσδιορίσαμε τον τρόπο με τον οποίο τα badging έργα, ακολουθώντας την ίδια τεχνική καλλιέργειας που χρησιμοποιήσαμε για την αποκλεισμένη άδεια.

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

Δείτε το παράδειγμα παρακάτω με Mac για κανονική διάταξη, τα Windows και το Chrome OS για Hybrid.

Ο Mac προσθέτει 28pt στο κανονικό του αποτύπωμα, για να ταιριάζει με τα κουμπιά των κουμπιών 28x28pt κλικ κλικ.

Τα Windows και το Chrome OS σε κανονικό ή υβριδικό περιβάλλον λειτουργούν ελαφρώς διαφορετικά.

Εφαρμόσαμε μια γραμμή 24pt υψηλών σελιδοδεικτών για να εξισορροπήσουμε το επιπλέον ύψος του πλαισίου των Windows. Από τη στιγμή που το ChromeOS χρησιμοποιεί την ίδια εφαρμογή με τα Windows, κληρονομεί αυτή την ίδια μέτρηση.

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

Αν θέλετε να το δοκιμάσετε μόνοι σας, απλά πηγαίνετε στο τμήμα chrome flags (chrome: // flags) και ρυθμίστε το "UI Layout in the top chrome browser" στο "Touch".

Ολοκλήρωση κουμπιού, δείκτες εμφάνισης και δείκτες ασφαλείας

Υπάρχουν δύο ενοικιαστές στο γενικό πλαίσιο και στον σχεδιασμό διάταξης με αναπτυσσόμενη διάταξη:

  • Δώστε μεγάλη έμφαση στα κράτη ασφαλείας.
  • Γρήγορη πρόσβαση στις πληροφορίες ή τη διεύθυνση URL που πρέπει να μεταβείτε.

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

Για το σκοπό αυτό, ο Max Walker, ως συνεργάτης του Chrome UX, οδηγεί τον Alex Ainslie και την ασφάλεια του Chrome για να προσθέσει ένα νέο, αναβαθμισμένο σύστημα ένδειξης ασφαλείας στο πακέτο κύριων κουμπιών που ακολουθεί:

  • Αντικαταστήσαμε το προεπιλεγμένο εικονίδιο "σελίδας" με ένα κουμπί πληροφοριών, καλώντας τους χρήστες να κάνουν κλικ για να επεξεργαστούν την άδεια ιστότοπου και να κατανοήσουν την κατάσταση ασφαλείας του τομέα στον οποίο βρίσκονται. Μη κατηγοριοποιημένες σελίδες HTTP εμπίπτουν σε αυτήν την κατηγορία.
  • Η κατάσταση "Ασφαλής" ή "Πράσινη κλειδαριά" εφαρμόζεται τώρα μόνο σε ασφαλείς τοποθεσίες HTTPS. Αυτή η κίνηση ανταμείβει τον ασφαλισμένο τομέα που χρησιμοποιεί κρυπτογράφηση.
  • Ίσως να θυμάστε ότι το Chrome είχε μια κίτρινη κατάσταση ασφαλείας πριν από μερικά χρόνια. Αυτή τη φορά, όλοι οι ιστότοποι με σπασμένα https ή απειλή χαρακτηρίζονται ως κόκκινοι. Όταν η Google ξέρει ότι ο τομέας είναι ένας ιστότοπος ηλεκτρονικού "ψαρέματος", αποκλείουμε επίσης την πρόσβαση του.

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

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

Ενσωματωμένες απαντήσεις, που ονομάζονται επίσης "απαντήσεις που υποδεικνύονται" είναι ουσιαστικά το Google ή το Chrome που εμφανίζει τις πληροφορίες που ψάχνετε, πριν να πατήσετε πραγματικά "enter" για να επικυρώσετε το ερώτημα. Για παράδειγμα, όταν πληκτρολογείτε "weather in los ang" στο κύριο πλαίσιο, το Chrome σας πρότεινε τα εξής:

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

Αυτό το ερώτημα μοιάζει με την κανονική διάταξη:

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

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

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

Χρώματα και προσβασιμότητα

Πέρα από την πυκνότητα της διάταξης, ένα άλλο στοιχείο με μεγάλη επιρροή είναι το χρώμα.

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

Φυσικά η πιο σημαντική αλλαγή που παρατηρείτε όταν ανοίγετε το Chrome είναι η αλλαγή χρώματος του Core UI.

Η εξισορρόπηση του χρώματος του πυρήνα UI είναι μια εργασία που απαιτεί κάποια λεπτότητα, περισσότερο από ό, τι νόμιζα ότι θα έπρεπε πρώτα.

Το UI Core αποτελείται από τρία βασικά στοιχεία:

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

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

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

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

Εδώ είναι το Chrome τριών επιπέδων δομή και για τις δύο λειτουργίες:

Το σύστημα χρωμάτων μας Core UI έχει ως εξής:

Το Mac και το Chrome OS είναι αρκετά ευθεία, καθώς ελέγχουμε το χρώμα του πλαισίου του OS απευθείας, προσθέτοντας απλά τη θολότητα φόντου στο mac.

Τα Windows είναι λίγο πιο δύσκολα καθώς ο χρήστης ή το σύστημα μπορεί να θέσει σχεδόν οποιοδήποτε χρώμα ως χρώμα πλαισίου. Συνεπώς, συνεχίσαμε όσα κάναμε μέχρι τώρα, παίζοντας με αδιαφάνεια για να συνδυάσουμε το χρώμα μας με ό, τι δείχνει το σύστημα.
Δείτε την παρακάτω σύγκριση, ενώ οι μη ενεργές καρτέλες mac και Chrome OS χρησιμοποιούν ένα αδιαφανή χρωματισμό, μειώνουμε τη συμπλήρωση των ανενεργών καρτελών και του νέου κουμπιού στο 78% στα Windows.

Κανονικό χρωματισμό στον πυρήνα UI σε macOS, Windows και Chrome OS.

Για να εξισορροπήσουμε το νέο χρώμα, βασιζόμαστε σε μεγάλο βαθμό στη χρήση του εγκεφαλικού επεισοδίου. Δεδομένου ότι το εγκεφαλικό επεισόδιο έχει βάρος 1px ανεξάρτητα από το PPI, η αδιαφάνεια τους έχει τροποποιηθεί πολύ, έτσι ώστε να μην φαίνονται πολύ σκούρα σε 1x ή πολύ ελαφρύ σε 2x. Αυτό ισχύει για κανονική και ανώνυμη λειτουργία.

Chrome macOS σε 200% και 100%. Και τα δύο εγκεφαλικά επεισόδια έχουν βάρος 1px.

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

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

Βεβαιώσαμε ότι όλη η τυπογραφία καθώς και η εικονογραφία φτάνουν τουλάχιστον σε επίπεδο ΑΑ ή αναλογία αντίθεσης 4,5: 1:

Ένα εξαιρετικό εργαλείο προτείνω να δοκιμάσετε το λόγο αντίθεσης: http://leaverou.github.io/contrast-ratio/

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

Όπως μπορείτε να δείτε παρακάτω, η εγκατάσταση του θέματος "Dark theme V3" κάνει τα εικονίδια να μετατραπούν σε άσπρο και το αναπτυσσόμενο μενού να μεταβαίνει αυτόματα σε σκοτεινή λειτουργία.
Αυτό είναι ένα άμεσο όφελος που έχουμε από την προγραμματική rendering και την εφαρμογή του mode incognito.

Κίνηση

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

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

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

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

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

Λοιπόν, πώς παίρνετε κάποια "Υλικού σχεδιασμού απόλαυση" σε μια πλατφόρμα που φαίνεται τόσο εχθρική προς την κίνηση. Λοιπόν, προσπαθείτε να το προσθέσετε σε κομμάτια του UI που δεν θα επηρεαστούν από αυτό, γι 'αυτό παίξαμε με κυματισμό τα κουμπιά μας.

Υπάρχουν πολλά για μια ενέργεια κλικ στην επιφάνεια εργασίας και υπάρχουν ακόμη περισσότερα όταν συνδυάζετε αυτό με την ικανότητα αφής των υβριδικών συσκευών. Ορισμένα από τα κράτη δεν υπάρχουν καν στο κινητό. Πηγαίνουν ως εξής:

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

Βασίσαμε όλη μας την κίνηση στην έκρηξη κυματομορφής υλικού. Μια απλή έκρηξη χρώματος που εξελίσσεται από τη θέση κλικ ή βρύσης.

Δεδομένου ότι οι καταστάσεις αιώρησης δεν υπήρχαν στην προδιαγραφή MD, το πρώτο πράγμα που έπρεπε να κάνουμε ήταν να το συνδυάσουμε με την κυμάτωση. Κάνουμε το κύμα να ξεσπάσει από την τετραγωνική κατάσταση αιωρήματος, ωθώντας τα όριά του προς τα έξω. Στην περίπτωση ενός απλού hover + με ένα κλικ χωρίς ενεργό κατάσταση, φαίνεται σαν εξής:

Αυτό φαίνεται στη γραμμή εργαλείων μας:

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

Για να γίνει αυτό, συνεργαστήκαμε με την ομάδα σχεδιασμού υλικών για να διερευνήσουμε κάποια μορφολογική επίδραση στην κυματισμός. Αυτή είναι μια κινητή εξερεύνηση:

Εφαρμόζεται στην επιφάνεια εργασίας και για το μοναδικό κλικ σε ενεργό, διατηρούμε την εξάπλωση της εξάπλωσης, αλλά όταν η κυμάτωση φτάσει στο απόγειο της, μεταμορφώνουμε σε τετράγωνο αντί να την αφήσουμε να σκάσει. Μοιάζει με αυτό:

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

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

Γρήγορα, αποφασίσαμε να μην μεταφέρουμε το φαινόμενο κυματισμού στις macOS, καθώς αισθανόταν λίγο εκτός τόπου σε αυτήν την πλατφόρμα. Επιλέξαμε την συνέπεια του OS εδώ.

Από την πλευρά της μηχανικής, ο Ben Ruthig βρισκόταν πίσω από την ολοκλήρωση της ανακατασκευής του συστήματος κυματισμού από την αρχή στις πλατφόρμες επιφάνειας εργασίας μας.

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

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

Για αυτόν τον τύπο κίνησης, ο μηχανικός ήταν ο πραγματικός σχεδιαστής.

Τι έπεται

Μετά την ολοκλήρωση των προδιαγραφών και των mocks για το Core UI, έβαζα λίγο στο δευτερεύον ui του Chrome.

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

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

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

Η νέα σελίδα Η νέα

Καθώς η συμμετοχή μου στο πρόγραμμα περιήγησης Chrome τελειώνει με αυτό το έργο UI Core, είμαι ενθουσιασμένος που βλέπω τι έχει η ομάδα Chrome για το μέλλον του Chrome σε επιτραπέζιους υπολογιστές και κινητά.

Τα διδάγματα και τα σχόλια αρχικής αποδέσμευσης

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

1. Οι μηχανικοί είναι εξαιρετικοί σχεδιαστές

Μιλάμε πολύ στους σχεδιαστές κύκλους μας για το αν και γιατί ένας σχεδιαστής πρέπει να κωδικοποιήσει. Υπάρχουν πολλές αποκλίνουσες απόψεις σχετικά με το θέμα και προέρχεται από το γεγονός ότι δεν υπάρχει απλός ορισμός του ρόλου ενός σχεδιαστή.
Ωστόσο, μιλάμε λιγότερο για το αντίθετο: Πρέπει μηχανικός σχεδιασμός;

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

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

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

2. Συμμετοχή μηχανικών νωρίς

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

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

3. Να γνωρίζετε πότε πρέπει να είστε ακριβείς, να μάθετε πότε πρέπει να είστε χαλαροί

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

4. Προσοχή στη αποστροφή της αλλαγής

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

Μπορεί να είναι εξαιρετικά δύσκολο να λάβετε και εξαιρετικά δύσκολο να πολεμήσετε. Για αυτόν τον επανασχεδιασμό, προσθέτοντας μερικές pixel που προκάλεσαν μακρές συζητήσεις ή συζητήσεις.

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

  • Επικοινωνήστε με το ακροατήριό σας. Πάντα έχετε ένα κατάστρωμα έτοιμο να εξηγήσετε το όραμά σας σε ποιον μπορεί να θέλει να το ακούσει, ειδικά εάν είναι οι ενδιαφερόμενοι.
  • Μείνετε στην πορεία. Είναι πολύ ωφέλιμο να πιστεύετε ακράδαντα στις επιλογές που κάνατε. Μην πάρετε πεισματάρης, αλλά μείνετε σίγουροι.
  • Προετοιμάσου. Όταν κάποιος θέλει να συζητήσει κάποιες από τις αποφάσεις σχεδιασμού σας, να είστε προετοιμασμένοι να τις υποστηρίξετε με γεγονότα, μελέτες (όταν είναι δυνατόν) ή εμπειρίες του παρελθόντος. Αν βρεθείτε σε μια κατάσταση όπου δεν μπορείτε να απαντήσετε, ίσως διαπιστώσετε ότι το σχόλιό σας αξίζει να εξεταστεί.
  • Καταλάβετε κάποια πράγματα χρειάζονται χρόνο. Πιθανώς το πιο απογοητευτικό και αυτό που έχω τα περισσότερα προβλήματα που ασχολούνται με, μερικά πράγματα χρειάζονται μόνο χρόνο για να αλλάξουν. Όσο μεγαλύτερος είναι το προϊόν, τόσο περισσότερο μπορεί να χρειαστεί. Βρείτε την ευτυχία στις μικρές νίκες και καταλάβετε ότι το προϊόν σας δεν γίνεται ποτέ.

5. Διαχειριστείτε την προσδοκία σας

Όταν η ενημέρωση άρχισε να κυκλοφορεί, το πιο δύσκολο σχόλιο που έλαβα ήταν: "Αυτό είναι;". Είναι δίκαιο σχόλιο κατά τη γνώμη μου. Το έργο πήρε χρόνο και δεν είναι μια οπτική επανάσταση. Μου αρέσει να πιστεύω ότι αν κοιτάξετε τις λεπτομέρειες, ίσως αρχίσετε να βλέπετε πόση προσοχή και φροντίδα βάζουμε σε αυτό.
Οι μεγαλύτερες βελτιώσεις που επιφέρει αυτό το έργο επανασχεδιασμού βρίσκονται κάτω από την κουκούλα. Πρόκειται κυρίως για ένα τεχνικό επίτευγμα.

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

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

Σημειώσεις κλεισίματος

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

Αν θέλετε να συνδεθείτε με την ομάδα σχεδιασμού του Chrome, είναι cool people που ακολουθούν στο Twitter: Alex Ainslie, Chris Lee, Max Walker, Rachel Ilan Simpson, Peter Schaffner, Hannah Lee, Glen Murphy.

Η εκπληκτική ομάδα μηχανικών πίσω από αυτό το έργο:
Peter Kasting, Ben Ruthig, Evan Stade, Terry Anderson, Valery Arkhangorosky, Jayson Adams.