Στο τελευταίο γεγονός I / O του 2014, η Google επέστρεψε με τις νέες εκπλήξεις της. Εκτός από την επίσημη κυκλοφορία της νέας ενημερωμένης έκδοσης Android με την κωδική ονομασία Lollipop, η Google εισήγαγε επίσης τη φρέσκια νέα γλώσσα σχεδιασμού της, το σχεδιασμό υλικού . Πρόκειται για ένα σύστημα σχεδιασμού που δεν προορίζεται μόνο για τις νέες βελτιώσεις διεπαφής χρήστη του Lollipop, αλλά και για διάφορες συσκευές και περιβάλλοντα.
Το Material Design έχει μερικά σημαντικά χαρακτηριστικά που το διαφοροποιούν μεταξύ άλλων σχεδιαστικών τάσεων με τους δικούς του μοναδικούς τρόπους. Όπως και το όνομά της, εμπνεύστηκε από πραγματικά υλικά και τα συνδυάζει σε ένα σύστημα σχεδιασμού για να δημιουργήσει μια κομψή, διαισθητική, όμορφη και πιο διαδραστική εμπειρία χρήστη. Σε αυτήν την ανάρτηση, θα εξετάσουμε το περιεχόμενο του Σχεδιασμού Υλικού και θα σας δώσουμε έναν γρήγορο οδηγό για τον τρόπο εφαρμογής του. Αναφερόμενος στο blog της Google, θα πω "Αυτό είναι υλικό σχεδιασμό".
Μια εισαγωγή
Το υλικό σχεδιασμό είναι ένα ενιαίο σύστημα σχεδιασμού, σημαίνει ότι έγινε για να λειτουργήσει με όλες τις διαθέσιμες σήμερα συσκευές και πλατφόρμες. Από tablet, smartphone σε επιφάνεια εργασίας και από Android, iOs, Windows σε πλατφόρμες Web. Όλος ο σχεδιασμός φαίνεται και αισθάνεται ότι πρέπει να είναι ο ίδιος όπου και αν είναι.
Βασικές Αρχές
Υπάρχουν τρεις βασικές αρχές που κατασκευάζουν το σχεδιασμό υλικών. Αυτά είναι το πιο θεμελιώδες μέρος του υλικού που προσφέρει γενικά.
- Το υλικό είναι η μεταφορά . Η ανάπτυξη του υλικού εμπνεύστηκε από τη μελέτη των αφαιρετικών στοιχείων που χρησιμοποιούμε καθημερινά, του χαρτιού και του μελανιού . Κάνει το αντικείμενο φως, επιφάνεια και κινήσεις είναι καλύτερο όταν αλληλεπιδρούν μεταξύ τους.
- Έντονη, γραφική και σκόπιμη . Η τυπογραφία, τα πλέγματα, ο χώρος, η κλίμακα, το χρώμα και η χρήση εικόνων που χρησιμοποιούνται στη βασική σχεδίαση με βάση την εκτύπωση καθιστούν το περιεχόμενο του υλικού καλύτερο.
- Η κίνηση παρέχει νόημα . Αυτό είναι ένα από τα πιο γνωστά πράγματα. Στο υλικό, θα πρέπει να έχετε ουσιαστική και κατάλληλη κίνηση, λεπτές και ξεκάθαρες ανατροφοδοτήσεις και αποτελεσματική και συνεπή μετάβαση.
Τα στοιχεία
Το Material Design δίνει προσοχή σε κάθε λεπτομέρεια των εξαρτημάτων του, ώστε να μπορεί να χρησιμοποιηθεί παγκοσμίως. Αυτά τα στοιχεία θα σας βοηθήσουν να φτιάξετε καταπληκτική εφαρμογή και τοποθεσία. Υπάρχουν πολλά στοιχεία που παρέχονται από το υλικό όπως κουμπιά, διακόπτης, κάρτα, εισαγωγή κειμένου, fab (κουμπί επιπλέουσας ενέργειας), διάλογος, τοστ, υπομενού, καρτέλα και πολλά άλλα. Κάθε ένας από αυτούς έχει τον δικό του κανόνα και οδηγό για τον τρόπο κατασκευής τους, έτσι ώστε να μην έχετε οποιαδήποτε ασήμαντα στοιχεία.
Σχέδια Thing
Εκτός από τα εξαρτήματα, το Υλικό σας παρέχει επίσης μερικά βασικά μοτίβα για επιπλέον UI. Αυτά τα μοτίβα θα βελτιώσουν το περιβάλλον εργασίας χρήστη που δημιουργήσατε με τα στοιχεία του υλικού. Τα πρότυπα περιλαμβάνουν τη μορφή δεδομένων, συρτάρι πλοήγησης, σφάλματα, χειρονομίες, τεχνική κύλισης, αναζήτηση, ρυθμίσεις, φόρτωση εικόνων, ταλάντωση για ανανέωση και πολλά άλλα.
Χρώματα σχεδιασμού υλικών
Τα χρώματα στο Υλικό ήταν σχεδιασμένα κατά τέτοιο τρόπο ώστε να μην σας κάνουν να αισθάνεστε άβολα, παράξενα και επίπεδα. Λαμβάνοντας έμπνευση από τα καθημερινά μας περιβάλλοντα όπως τα οδικά σήματα, η σύγχρονη αρχιτεκτονική, η ταινία σήμανσης πεζοδρομίων και τα αθλητικά γήπεδα, το υλικό σχεδίασης σας φέρνει απρόσμενα και έντονα χρώματα. Υπάρχουν τόσες πολλές παλέτες χρωμάτων για να επιλέξετε μεγαλύτερη ευκολία κατά την ανάπτυξη εφαρμογών ή ιστότοπων. Μπορείτε επίσης να κάνετε λήψη των δειγμάτων χρωμάτων για τοπική χρήση όπως για τη συλλογή Photoshop.
Εικονίδιο υλικού
Εάν είστε προγραμματιστής Android, τότε πρέπει να είστε εξοικειωμένοι με ορισμένα δωρεάν πακέτα εικονιδίων που παρέχονται από την Google. Χρησιμοποιούνται συνήθως μόνο για κύριο στοιχείο και γραμμή δράσης. Ενώ για άλλους πόρους, πρέπει να αναζητήσουμε άλλα εικονίδια, όπως για φακέλους, αρχεία, αντιγραφή και επικόλληση, κτλ. Χειροκίνητα. Στο Σχεδιασμό Υλικών Η Google έχει διορθώσει το πρόβλημα με τους τόνους πακέτων εικονιδίων που μπορείτε να χρησιμοποιήσετε.
Κάθε ένα από τα εικονίδια έχει περάσει από κάποια σχεδιαστική προσέγγιση που χρησιμοποιεί επίσης τη μελέτη των απτικών υλικών. Διατηρούν επίσης την αρχή του υλικού, που είναι συνεπής. Μπορείτε να κατεβάσετε αυτά τα εικονίδια στο GitHub, έρχονται με κάποια επιλογή για διαφορετική χρήση όπως για iOs, web, Android ή svg. Εάν θέλετε μια ευρύτερη επιλογή για εύκολη προσαρμογή, ίσως θέλετε να δείτε πακέτα εικονιδίων σχεδίασης υλικών στο FlatIcon. Μέσα στο πακέτο, θα έχετε την έκδοση εικονιδίων (SVG & EPS), PSD και PNG.
Υλικό του υλικού
Αυτά είναι τα χαρακτηριστικά του Υλικού που μου αρέσουν περισσότερο. Τα κινούμενα σχέδια στο υλικό είναι τόσο αληθινά και διαισθητικά. Κάθε κινούμενη εικόνα έχει σημαντικές, σταθερές και σωστές μεταβάσεις χρονισμού. Το demo gif που παρουσιάστηκε παρακάτω είναι μόνο ένα από τα όμορφα animation υλικό. Για να παρέχει μια συναρπαστική αλληλεπίδραση, η ομάδα της Google δημιουργεί κινούμενα σχέδια με υφέσεις νερού για το αποτέλεσμα εισόδου των χρηστών. Χρησιμοποιείται κυρίως σε κουμπιά και κάρτες.
Αυτά τα χαρακτηριστικά που εξήγησα είναι απλά ένα μικρό κομμάτι από αυτό που προσφέρει το υλικό σχεδιασμού. Για να μάθετε περισσότερα σχετικά με τον υλικό κόσμο, απλά κατευθυνθείτε προς τη σελίδα τεκμηρίωσης.
Εκτέλεση
Από προεπιλογή, το Material Design προσφέρεται ως νέα ενημερωμένη έκδοση UI για το Android Lollipop. Όλες οι κατευθυντήριες γραμμές που εφαρμόστηκαν στο εσωτερικό του υλικού. Δεδομένου ότι το υλικό απευθύνεται σε όλα τα περιβάλλοντα, η εφαρμογή του σε άλλο σύστημα δεν θα είναι δύσκολο. Και χάρη στις κοινότητες, είναι ακόμη πιο εύκολο με κάποια εργαλεία που δημιούργησαν.
Αυτοί είναι διάφοροι τρόποι που μπορείτε να επιτύχετε για να πάρετε υλικό σχεδιασμό έξω από το Android, ιστού για παράδειγμα.
Χρησιμοποιώντας πλαίσια CSS
Αυτός είναι ο ευκολότερος τρόπος για να υλοποιήσετε την Σχεδίαση Υλικών στην πλατφόρμα web. Με τα πλαίσια, το μόνο που χρειάζεται να κάνετε είναι να προετοιμάσετε το κείμενο και στη συνέχεια να γράψετε τα στοιχεία που χρειάζεστε. Υπάρχουν πολλά πλαίσια που μπορείτε να χρησιμοποιήσετε, όπως υλικά, υλικά UI ή πολυμερή για να αναφέρετε μερικά. Η προσωπική μου επιλογή πέφτει στη Materialalize. Είναι πιο εύκολο στη χρήση και κατανόηση και έχει μεγάλη τεκμηρίωση με ωραίο demo.
Ακολουθεί τις κατευθυντήριες γραμμές
Εάν θέλετε να υλοποιήσετε το υλικό χωρίς τη βοήθεια του πλαισίου και προτιμάτε να χάσετε με τους περισσότερους κωδικούς, τότε πρέπει να ακολουθήσετε τις οδηγίες υλικού. Εκεί, θα βρείτε όλα τα πράγματα και τα πράγματα που πρέπει να προσέξετε για να επιτύχετε τις αρχές του υλικού. Θα δείτε τον βασικό οδηγό για τη δημιουργία στοιχείων, τη διάταξη, την κινούμενη εικόνα, το χρώμα, τα μοτίβα και πολλά άλλα. Μπορεί να θέλετε να δείτε κάποια λίστα ελέγχου υλικού για ευκολότερη ανάπτυξη.
συμπέρασμα
Το υλικό σχεδιασμού είναι ένα εξαιρετικό σύστημα σχεδιασμού και έχει γίνει μία από τις πιο αναμενόμενες τάσεις του έτους. Τους επόμενους δύο μήνες, μπορούμε να το δούμε παντού. Περισσότερες εφαρμογές και ιστότοποι θα γυαλιστούν με αυτή τη νέα ενημερωμένη έκδοση σχεδίου της Google.
Και με το υλικό σχεδιασμού, η Google έχει αποδείξει την υπεροχή της ως μία από τις μεγαλύτερες εταιρείες τεχνολογίας. Κάνει το Google όχι μόνο να οδηγήσει στη μηχανή αναζήτησης και την περιοχή του κινητού λειτουργικού συστήματος, αλλά και στον τομέα του σχεδιασμού. Μέχρι τώρα, δεν υπάρχουν άλλες εταιρείες που αναπτύσσουν αυτό το μεγάλο πράγμα όπως το Google. Αλλά η εμπειρία λέει, δεν θα διαρκέσει πολύ. Ας περιμένουμε μόνο άλλες εταιρείες να ανταποκριθούν στο υλικό σχεδιασμού της Google.
