Σχεδιασμός υλικού, UI Σύμφωνα με το Google

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

20 βασικές αρχές του υλικού σχεδιασμού

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

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

Τι είναι ο σχεδιασμός υλικού ?

Είναι αυτό που ?

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

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

• Το πλάτος
• Ταχύτητα
• Η σκιά

• Η τυπογραφία
• Σχάρες
• Χώρος
• Το χρώμα
• Η κλίμακα
• Απεικόνιση

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

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

Γιατί να επιλέξετε τον σχεδιασμό υλικού ?

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

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

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

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

Κατάλογος αρχών του σχεδιασμού υλικού

Αρχή 1: Εξοικειώστε τον εαυτό σας με βασικούς πόρους

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

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

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

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

Αρχή 2: Γνωρίστε ποιο “υλικό” είναι στο υλικό σχεδιασμό

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

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

Αρχή 3: Χρησιμοποιήστε σκιές για να ορίσετε οπτικές ιεραρχίες

Τα κύρια εργαλεία σχεδιασμού υλικών είναι:

• Ακρα
• Επιφάνειες
• Φωτισμός
• Ρεαλιστικές σκιές

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

Αρχή 4: Χρησιμοποιήστε φωτεινά χρώματα

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

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

Αρχή 5: Μην παραμελείτε το πρωτογενές χρώμα και το χρώμα προφοράς

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

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

• Τα γηπεδα
• Κουτιά
• Το φόντο
• Γραμματοσειρές, κλπ.

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

Αρχή 6: Κάντε καλή χρήση των λευκών χώρων

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

Μην διστάσετε να:

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

Αρχή 7: Ακολουθήστε τη νέα τάση των εικόνων από άκρη σε άκρη

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

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

Αρχή 8: Όλα πρέπει να είναι αντιδραστικά

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

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

Αρχή 9: Διαστάσεις

Στο διαδίκτυο ο άξονας z χρησιμοποιείται για υπέρθεση και όχι για την προοπτική. Από την άλλη πλευρά, ο 3D κόσμος βασίζεται στον άξονα y.

Το υλικό σχεδιασμού χρησιμοποιεί κυρίως 3D έτσι ώστε ο άξονας Υ. Απλά κοιτάξτε το σχεδιασμό της Google, για να παρατηρήσετε την ισομετρική προοπτική. Αυτός ο τρόπος σχεδιασμού εμπνέεται από τον πραγματικό κόσμο, εξ ου και το όνομα “υλικό”.

Αρχή 10: Θυμηθείτε, η επιτυχία είναι λεπτομερώς

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

Αρχή 11: Το κίνημα πρέπει να έχει νόημα

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

Στον σχεδιασμό υλικού, η κίνηση πρέπει να έχει αυτά τα 3 χαρακτηριστικά:

1. Να είστε ενημερωτικοί: πρέπει να είναι γνωστό στους χρήστες όπου και πότε ήταν διαθέσιμη η ενέργεια.
2. Βοηθήστε να συγκεντρωθούν και να καθοδηγήσουν τους χρήστες στα πιο σημαντικά μέρη της σελίδας.
3. Να είστε εκφραστικοί και να προσθέσετε μια μικρή προσωπικότητα και δυναμισμό στη διεπαφή.

Αρχή 12: Το κίνημα πρέπει να είναι αυθεντικό

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

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

Αρχή 13: Επιτάχυνση και επιβράδυνση των κινήσεων

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

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

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

Σε αυτή την περίπτωση, πρέπει να είστε στη σωστή μέση, εξασφαλίζοντας μια βέλτιστη διάρκεια και μια καλή αναγνωσιμότητα των κινούμενων εικόνων. Είναι απαραίτητο να δώσουμε στους χρήστες αρκετό χρόνο ώστε να μπορούν να παρατηρήσουν τις αλλαγές. Αλλά, μην τους κάνετε να περιμένουν. Η έρευνα αποδεικνύει ότι 200 ​​έως 500 ms είναι οι καλύτερες ταχύτητες κινούμενων εικόνων.

Αρχή 14: Επωφεληθείτε από τα animations εικονιδίων

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

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

Αρχή 15: Δημιουργία διαφορετικών χρονοδιαγραμμάτων για διαφορετικές κινήσεις

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

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

Σχεδιασμός υλικού, UI Σύμφωνα με το Google !

Ο σχεδιασμός υλικού είναι μια οπτική και διαδραστική γλώσσα που δημιουργήθηκε από την Google. Αλλά είναι επίσης ένας οδηγός για το σχεδιασμό μιας γραφικής διεπαφής (σύστημα σχεδιασμού). Αυτός ο σχεδιασμός είναι “υλικό” επειδή είναι εμπνευσμένο από πραγματικά αντικείμενα, χαρτί και μελάνι Τι διαφέρει από το επίπεδο σχεδιασμό. Το Google χρησιμοποίησε τον σχεδιασμό υλικού για την ενοποίηση του γραφικού στυλ των εφαρμογών και των πλατφορμών της. Επομένως, η διεπαφή του έχει το πλεονέκτημα ότι είναι πολύ κατάλληλο για χρήση για οποιαδήποτε συσκευή και όλες τις αναλύσεις εμφάνισης. Είναι επίσης προσιτή. Ο σχεδιασμός του υλικού θα βελτιστοποιούσε το UX, προσφέροντας πόρους στους προγραμματιστές και τους σχεδιαστές διασύνδεσης. Όπως συμβαίνει με οποιοδήποτε γραφικό ρεύμα, έχει ερασιτέχνες και επικριτές του.

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

Τι είναι ο σχεδιασμός υλικού ?

Το όνομα “σχεδιασμός υλικού” αντιστοιχεί σε ένα σύνολο Κανόνες σχεδιασμού προτείνεται από το Google. Μερικές φορές μεταφράζεται από “σχεδιασμό υλικού” ή “σχεδιασμό συμφραζομένων”. Ήταν πρώτα απ ‘όλα ένα σχέδιο που προοριζόταν για εφαρμογές για κινητά (κινητά πρώτα). Στη συνέχεια έγινε μια από τις κύριες τάσεις στο σχεδιασμό διεπαφής. Η προσέγγιση της Google θυμάται το Επίπεδη σχεδίαση (ή επίπεδη σχεδίαση): μινιμαλισμός, γεωμετρικά σχήματα και πολύχρωμα, χωρίς περιττό (σε αντίθεση με το Skeuomorphism). Αλλά σε αυτή την περίπτωση, είναι ένα επίπεδο σχέδιο … με πάχος και ανακούφιση. Πράγματι, εδώ είναι τα κύρια χαρακτηριστικά:

• ΕΝΑ μεταφορική έννοια χαρτί και μελάνι από ψηφιακό εξοπλισμό.
• Τολμηρό σχέδιο και διάγραμμα.
• Η δημιουργία του κινήσεις Για να βελτιωθεί η προσφορά και το ux. Οι ενέργειες του χρήστη προκαλούν σημαντικές μικρο-αλληλεπιδράσεις.

Η βιβλιοθήκη πολυμερούς

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

Δείτε αυτή τη δήλωση με τη μορφή “Μανιφέστο”, που θα βρεθεί στην εισαγωγή του χώρου αναφοράς υλικού.IO:

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

WebDesign Σύμφωνα με το Google

Επομένως, ο σχεδιασμός υλικού είναι διαφορετικός από τον επίπεδη σχεδίαση. Είναι ένα νέο είδος σχεδιασμού ιστοσελίδων. Μπορούμε να πούμε ότι είναι Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές (Auto Adaptive) επικεντρωμένη στην εμπειρία του χρήστη. Ο στόχος είναι να πάρει ένα σχέδιο:

• Ενστικτώδης Για όλους τους χρήστες (συμπεριλαμβανομένων των μη έμπειρων)
• Κατάλληλο για όλες τις υποστηρίξεις (Υπολογιστής, tablet, smartphone κ.λπ.)
• Διαδραστικό Χάρη σε δυναμικά κινούμενα σχέδια.
• Ομοιογενής Μεταξύ όλων των διεπαφών

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

Επανασχεδιασμός της Google

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

Βλέποντας αυτό το βίντεο μας δίνει μια καλή ιδέα για τη σημασία της μεταφοράς ενός “όραση” για την ανάληψη αυτού του έργου: επανασχεδιασμός της Google.

Γιατί ο σχεδιασμός υλικού ?

Ορατό στην έκδοση 5.0 του Android, ο σχεδιασμός υλικού παρουσιάστηκε για πρώτη φορά στις 25 Ιουνίου 2014 από τον Matias Dure, διευθυντή της εμπειρίας χρήστη Android στο Google. Ήταν ως μέρος της διάσκεψης Google I/O. Με αυτό το νέο χάρτη σχεδιασμού, η Google δημιούργησε το δικό της οπτική γλώσσα, αναγνωρίσιμο ανεξάρτητα από την υπηρεσία ή το προϊόν, από εφαρμογές κινητής τηλεφωνίας έως συνδεδεμένα αντικείμενα.

Ο Matias Duarte παρουσίασε τη μεταφορά για το χαρτί (Android / Material) το 2014 το 2014).

Παρακολουθήστε αυτό το βίντεο για να γιορτάσετε την πρώτη επέτειο αυτής της προσέγγισης σχεδιασμού. Ήταν ένα μετά την εκτόξευση, τον Μάιο του 2015. Ο Matias Dorry παίρνει μια αναδρομική ματιά σε αυτό το παρελθόν έτος και θα μπορούσε ήδη να εκτιμήσει με ποιους σχεδιαστές ενθουσιασμού, αλλά και προγραμματιστές, είχαν διαθέσει τις αρχές που παρουσιάστηκαν ένα χρόνο νωρίτερα.

Για ή κατά του σχεδιασμού υλικού ?

Αυτός ο σχεδιασμός σχεδιάστηκε επίσης Εμπλουτίστε την εμπειρία του χρήστη Και η αποτελεσματικότητα της διεπαφής (νέες γραμματοσειρές αναγνώσιμες σε πολλαπλές γλώσσες, καλύτερη προσφορά …) Ένα χρόνο αργότερα, η Google παρουσίασε, μεταξύ άλλων, το υλικό Design Lite Kit για έργα ιστού (κατεβάστε το κιτ εδώ).

Ο σχεδιασμός του υλικού έχει προκαλέσει διαφορετικές αντιδράσεις. Μερικοί ενέκριναν αυτή τη “βελτίωση” ενός επίπεδου σχεδίου που θεωρείται απλοϊκή και βαρετή. Πράγματι, είναι ένα “ρευστό” και κινούμενο σχέδιο. Στη σύνθεση, τις πύλες, τις αντιδράσεις και τη δυναμική, δομή της διεπαφής. Οι χώροι, η ευθυγράμμιση και τα χρώματα είναι απαραίτητα στη φάση σχεδιασμού. Όλα αυτά τα στοιχεία δίνουν προτεραιότητα στο περιεχόμενο και διευκολύνουν την πλοήγηση του χρήστη. Animations, με βάση τους νόμους της φυσικής, καθησυχάστε τον χρήστη ως προς το αποτέλεσμα των ενεργειών του.

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

Πως δουλεύει ? Εφαρμογή με Android

Πρέπει να έχουμε κατά νου ότι αυτά είναι “υλικά στοιχεία”. Έτσι, είναι αδύνατο να διασχίσετε ένα στοιχείο. Μόνο το στοιχείο που επηρεάζεται από το χρήστη θα αντιδράσει. Στο σχεδιασμό υλικού, τοΤο περιβάλλον είναι 3D. Κάθε αντικείμενο ή “υλικό”, έχει 3 συντεταγμένες: x, y, z. Ο άξονας z αφορά την ανύψωση του αντικειμένου. Μπορούμε να αποφασίσουμε για την ανύψωση του αντικειμένου, τις διαστάσεις του και τις κατεστραμμένες σκιές, αλλά το πάχος παραμένει αυτό ενός φύλλου χαρτιού. Το τελευταίο δεν μπορεί να λυγίσει. Από την άλλη πλευρά, κινείται σε όλους τους άξονες.

Το Android παρέχει τρία θέματα (θέμα σκοτεινού ή ελαφρού υλικού, θέμα ελαφρού υλικού με σκοτεινή γραμμή δράσης) που θα εφαρμοστεί απευθείας στην εφαρμογή μεταβάλλοντας, αν θέλετε, μερικά από τα χαρακτηριστικά. Ο ψυχαγωγία Εφαρμόστε σε αντικείμενα/στοιχεία της διεπαφής είναι δύο: το animation tween (για μεταβάσεις, για παράδειγμα περιστρέφοντας την εικόνα) και το animation πλαισίου (εμφάνιση αρκετών εικόνων). Το LoadAnimation σάς επιτρέπει να τα φορτώσετε και την εκκίνηση της ενεργοποίησης/εκκίνησης τους.

Παραδείγματα διεπαφών σχεδιασμού υλικού

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

Δείτε τις πηγές στα Uplabs (ιστορίες.ορεκτικά.com)

Μια άλλη πηγή, πλούσια σε παραδείγματα: το blog σχεδιασμού υλικού

Εικονίδια σχεδιασμού υλικού

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

Ξαναδιαβάσετε τα άρθρα μας σε αυτό το θέμα:

Δείτε τον οδηγό GitHub για τη χρήση αυτών των εικονιδίων σε διαφορετικά περιβάλλοντα.

Άλλα εικονίδια υλικών (για λήψη εδώ)

Μπορείτε να κατεβάσετε εδώ πολλά εικονίδια σχεδιασμού υλικού

Μια άλλη πηγή εικονιδίων σχεδιασμού υλικού για λήψη εδώ

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

Μερικές πηγές και εμπνεύσεις

• Η αναφορά στο σχέδιο υλικού: υλικό.IO
  • Κίνηση
  • Στυλ
  • Διάταξη
  • Συστατικό
  • Μοτίβα
  • Ανάπτυξη και επικοινωνίες
  • Χρηστά
  • Πλατφόρμες
  • Στον ιστότοπο Design Google, θα βρείτε μελέτες περιπτώσεων και πρακτικούς οδηγούς (πολλοί πόροι και δυνατότητα εγγραφής σε ένα πολύ πλούσιο ενημερωτικό δελτίο)

  συμπέρασμα

  Ο σχεδιασμός υλικού Google επωφελείται από το Απλότητα επίπεδου σχεδιασμού. Η διεπαφή είναι εξευγενισμένη και ισορροπημένη οπτικά. Όπως το Flat Design, πληροί τις απαιτήσεις του Ανταποκρίσιμος σχεδιασμός. Αλλά όπου ο επίπεδης σχεδίασης επικρίνεται συχνά για αυτό Έλλειψη προσφοράς, Ειλικρινής Google Ένα μέρος του σκηνοομορφισμού Σε υψηλό επίπεδο αφαίρεσης. Έτσι, η έξυπνη χρήση των κινούμενων εικόνων, οι τυπογραφικές επιλογές και η μεταφορά του χαρτιού βελτιώνουν την εμπειρία του χρήστη. Η έκταση των γραφικών στοιχείων που προσφέρονται στους προγραμματιστές καθιστά επίσης δυνατή την κατανόηση του τρόπου με τον οποίο ο σχεδιασμός υλικού Android έχει κατακτήσει τον ιστό … με κίνδυνο να είναι διεισδυτικός. Φυσικά, όπως συμβαίνει με κάθε τάση σχεδιασμού, η επιλογή για χρήση αυτού του τύπου σχεδιασμού εξαρτάται από τους στοχευμένους χρήστες και τους επιχειρηματικούς στόχους/μάρκα. Στον σχεδιαστή/σχεδιαστή για να αποφασίσει αν πρέπει να ακολουθήσει πλήρως το Χάρτης σχεδιασμού υλικού, Να εμπνευστεί από αυτό ή να απομακρυνθεί.

  • Google Material Design, μια τυποποίηση σχεδιασμού
  • Τι είναι ο σχεδιασμός των υπηρεσιών ?
  • Τι σκέφτεται ο σχεδιασμός ?
  • Ποια είναι η προσφορά ?
  • Τι είναι το επίπεδη σχεδίαση ?
  • Τι είναι το Skeuomorphism ?
  • Ορισμός του συναισθηματικού σχεδιασμού, ο τόπος των συναισθημάτων στο σχεδιασμό

  Δείτε τις υπηρεσίες μας:

  • Η εκπαίδευσή μας για το σχεδιασμό ενός σχεδίου συστήματος
  • Η 2η ημέρα σκέψης μας στο σχεδιασμό.