Η διεπαφή χρήστη Material Design της Google ανανεώνεται με νέα χρώματα, εικονογραφία και εστίαση στην αφή

Οι νέες δεσμεύσεις στο Chromium Gerrit φαίνεται να αναφέρονται στο "Material Design 2", το οποίο μπορεί να είναι μια νέα και βελτιωμένη έκδοση της γλώσσας Material Design της Google.

Το Material Design, η ενοποιημένη γλώσσα σχεδιασμού που κυκλοφόρησε μαζί με το Android Lollipop, διαθέτει επίπεδες, παστέλ χρωματικές παλέτες, βάθος, απαλό φωτισμό και ρεαλιστική φυσική. Σκοπός του είναι να μιμείται την αφή των αντικειμένων του πραγματικού κόσμου χωρίς να καταφεύγει σε σκευομορφισμό. Η Google το περιγράφει ως σύνθεση «κλασικών αρχών» με «[την] καινοτομία και δυνατότητα» της τεχνολογίας.

Από το ντεμπούτο του Material Design το 2014, έχει εξαπλωθεί στο οικοσύστημα του Android σαν πυρκαγιά — για να μην αναφέρουμε τις εφαρμογές της Google όπως το YouTube, το Chrome, το Gmail, το Hangouts και το Ημερολόγιο Google. Κυμαινόμενα κουμπιά δράσης, ευχάριστα χρώματα και τεχνικές ανύψωσης έχουν διατεθεί ως μέρος του Βιβλιοθήκη Στοιχείων Υλικού στο GitHub (η συνέχεια της Βιβλιοθήκης Υποστήριξης Σχεδίασης του Android και του Material Design Lite της Google που εστιάζεται στον ιστό), το οποίο φέρνει το Material's καλό στο Android με τη μορφή προσαρμοσμένων προβολών και στον ιστό με τη μορφή δεσμίδων που μπορούν να εισαχθούν και να χρησιμοποιηθούν όπως το τυπικό HTML ετικέτες.

Τώρα, την παραμονή της τέταρτης επετείου του Material Design, η Google φαίνεται να προετοιμάζει την επόμενη γενιά του εμπνευσμένο από χαρτί και μελάνι αισθητικός: Σχεδιασμός Υλικού 2. Πολύτιμες λίγες πληροφορίες είναι διαθέσιμες στο κοινό σχετικά με το Material Design 2, την ύπαρξη του οποίου αποκαλύψαμε αυτή την εβδομάδα σε νέες δεσμεύσεις στο Chromium Gerrit. Δεν ισχυριζόμαστε ότι είναι α κατάλληλος διάδοχος του νεότερου πλαισίου σχεδίασης υλικού, αλλά οι δεσμεύσεις δείχνουν αξιοσημείωτες, αν και λεπτές, αλλαγές στις χρωματικές παλέτες, στην εικονογραφία και στη συμπεριφορά της οθόνης αφής.


Το Material Design 2 εμφανίζεται στο Chromium Gerrit

Στις αρχές Φεβρουαρίου, νέες δεσμεύσεις για το Chromium Gerrit εφάρμοσαν τη διεπαφή χρήστη "Material Design 2" στο Chrome tabstrip—οι καρτέλες με δυνατότητα μεταφοράς που περιέχουν τίτλους ιστοσελίδων, favicons και το κουμπί "close tab" πάνω από το Chrome γραμμή διεύθυνσης.

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

Μια συλλογή από καρτέλες Chrome.

Αποκαλυπτικά, οι δεσμεύσεις κάνουν αναφορά σε ένα εικονίδιο κουμπιού κλεισίματος καρτέλας "Material Design 2" και "βασικές σταθερές χρώματος που απαιτούνται για το Google Material Design 2".

Η εμβάθυνση στον κώδικα δέσμευσης εμφανίζει νέες παλέτες χρωμάτων "Material Design 2" για γκρι, κόκκινο και κόκκινο-σκούρο θέματα Chromium και νέα χρώματα για την τυπική γραμμή εργαλείων του Chrome και τη γραμμή εργαλείων ανώνυμης περιήγησης. Χρησιμοποιήσαμε έναν δεκαεξαδικό πίνακα αναζήτησης για να δημιουργήσουμε τα δείγματα RGB:

Το κόκκινο του Material Design 2 είναι ελαφρώς πιο σκούρα από το τρέχον Material Design Κόκκινο 800 (#C62828) και Κόκκινο 600 (#E53935), ενώ οι νέες αποχρώσεις του γκρι (#3C4043, #5F6368, #BDC1C6, #F1F3F4) έχουν μια πιο ανοιχτή, μπλε απόχρωση. Ο σχεδιασμός του υλικού διαθέτει παραδοσιακά γκρι, όπου R=G=B, ενώ εδώ, B>G>R σε κάθε απόχρωση (αλλά μόνο κατά 1-4 από 255).

Οι εκδόσεις που είναι συμβατές με το Material Design 2 Το Chrome θα διαθέτει επίσης μια πολύ πιο φωτεινή γραμμή εργαλείων από τις τρέχουσες εκδόσεις—είναι σχεδόν λευκό σε σύγκριση με τον τρέχοντα γκριζωπό συνδυασμό χρωμάτων.

Ακολουθεί μια γρήγορη μακέτα του πώς θα φαίνεται η γραμμή εργαλείων με τα νέα χρώματα που εφαρμόζονται:

Τέλος, το commit προσθέτει ένα νέο IsTouchOptimizedMaterial() σημαία στο MaterialDesignController, το οποίο μπορεί να αναφέρεται σε στοιχεία σχεδίασης υλικού 2 βελτιστοποιημένης αφής. Γράψαμε στις αρχές Ιανουαρίου για την προσπάθεια της Google να βελτιώσει το Η υποστήριξη οθόνης αφής του προγράμματος περιήγησης ιστού Chrome σε συσκευές Chrome OS και φαίνεται να αποτελεί συνέχεια αυτής.

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


Η σημασία του χρώματος στο σχεδιασμό υλικών

Τι σημαίνουν λοιπόν τα νέα χρώματα στο ευρύτερο πλαίσιο του Material Design;

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

Η Google παρέχει δείγμα χρωματικές παλέτες έχει σχεδιαστεί για να "συνεργάζεται καλά" σε όλες τις πλατφόρμες και ενθαρρύνει τους προγραμματιστές που εκμεταλλεύονται την πηγή ένα κύριο χρώμα εφαρμογής -- αλλιώς γνωστό ως "κυρίαρχο" χρώμα -- από μια συλλογή 500 διαφορετικών δείγματα. (Σκεφτείτε "μπλε", "πράσινο" ή "μοβ" και άλλα βασικά χρώματα.) Εάν χρειάζεται, προέρχονται ένα δευτερεύον χρώμα από μια διευρυμένη συλλογή 700 χρωμάτων (συμπληρωματικά χρώματα για τα πιο σημαντικά στοιχεία διεπαφής χρήστη και ανάλογα για λιγότερο σημαντικά στοιχεία διεπαφής χρήστη και ένα τριτογενές χρώμα από ένα υποσύνολο 300).

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

Από ό, τι γνωρίζουμε για τη χρωματική παλέτα του Material Design 2, τουλάχιστον μερικά από τα δείγματα στο "κύριο 500" της Google, όπως το Red 600 και το 800, είναι πιο σκούρα από τους προκατόχους τους Material Design. Αλλά άλλοι, όπως το γκρι, λαμβάνουν την αντίθετη αντιμετώπιση -- τόσο τα γκρι όσο και τα λευκά δείγματα που εμφανίζονται στην καρτέλα του Chrome mockup έχουν πιο ψυχρή κλίμακα του γκρι και υψηλότερες τιμές μπλε.


Αυτή τη στιγμή, αυτό είναι το μόνο που γνωρίζουμε πραγματικά για το Material Design 2. Αλλά οι δεσμεύσεις μπορεί να είναι ένα σημάδι ότι κάτι συμβαίνει στα παρασκήνια, και αν αυτό είναι αλήθεια, μπορεί να μάθουμε περισσότερα νωρίτερα παρά αργότερα. Η Google αναμένεται να ολοκληρώσει το Android P, την επόμενη σημαντική έκδοση του Android, μόλις τον Μάρτιο, και το Google I/O 2018 θα ξεκινήσει στις 8 Μαΐου. Και οι δύο είναι κορυφαίες ευκαιρίες για να απογειωθείτε από το Material Design 2.

Ενημέρωση 4/2/2018: Λίγο μετά τη δημοσίευση αυτού του άρθρου, η δέσμευση έγινε ιδιωτική, πράγμα που ενδεχομένως σημαίνει ότι επρόκειτο να κρατηθεί μυστική. Θα συνεχίσουμε να ελέγχουμε το Chromium Gerrit για αλλαγές και θα ενημερώσουμε αυτό το άρθρο εάν βρούμε κάποιες.