Ποια είναι η διαφορά μεταξύ επίπεδης σχεδίασης και σχεδίασης υλικού; Συμβουλές σχεδιασμού υλικού

Στο σημερινό μας άρθρο θα θίξουμε ένα θέμα που δεν έχει συζητηθεί ακόμη για τη Rusability. Για να είμαστε δίκαιοι, σημειώνουμε ότι στο RuNet ως τέτοιο, το ενδιαφέρον για αυτό το θέμα μόλις αρχίζει να κερδίζει δυναμική, παρά το γεγονός ότι η ίδια η ιδέα γεννήθηκε πέρυσι. Μιλάμε για μια συγκλονιστική και, όπως ορισμένοι πιστεύουν, επαναστατική σχεδιαστική κατεύθυνση, την οποία η Google ονόμασε υλικό design.

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

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

Η Google κυκλοφόρησε το Material Design στο ευρύ κοινό στις 25 Ιουνίου 2014, ως σχέδιο για το νέο λειτουργικό σύστημα Android, που αργότερα ονομάστηκε Lollipop. Η πλήρης χρήση του σχεδιασμού υλικού μπορεί να γίνει μόνο στο πλαίσιο της δημιουργίας εφαρμογών για Lollipop, αλλά ορισμένες εφαρμογές για Android 4 μπορούν επίσης να επανασχεδιαστούν στο στυλ υλικού, ωστόσο, με ορισμένους περιορισμούς. Ο κύριος και πιθανώς ο μόνος παράγοντας που περιορίζει σημαντικά την ελευθερία των προγραμματιστών εφαρμογών για το Lollipop είναι η κακή συμβατότητα της ιδέας σχεδιασμού υλικού με προηγούμενες εκδόσεις του Android και η ακόμη χαμηλή επικράτηση του Android 5.1 Lollipop. Σε κάθε περίπτωση, είναι θέμα χρόνου να εξαλειφθεί το τελευταίο ελάττωμα.

Android Γλειφιτζούρι

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

Βασικές διατριβές και βασικές αρχές Υλικού Σχεδιασμού

Ολόκληρη η φιλοσοφία του σχεδιασμού υλικού βασίζεται σε τέσσερις θεμελιώδεις και κατανοητές αρχές:

1. Επιφάνειες. Ενσωματωμένες με τη μορφή καρτών που δημιουργούνται από «ψηφιακό χαρτί», τέτοιες επιφάνειες υπόκεινται πλήρως στους νόμους του φυσικού κόσμου, έχουν απτική απόκριση και παρέχουν ισχυρή ανατροφοδότηση μαζί με υψηλή διαίσθηση.
2. Εκτύπωση τυπογραφίας. Αντί να εφεύρετε ξανά τον τροχό, γιατί να μην επωφεληθείτε από την εμπειρία του πάνω από έναν αιώνα στον τομέα της εκτύπωσης; Λαμβάνοντας υπόψη ότι η αρχική επιφάνεια αντιπροσωπεύεται πλέον από στρώματα εικονικού, πρακτικά απτού χαρτιού, είναι πολύ λογικό να εφαρμόζονται πληροφορίες σε αυτήν σύμφωνα με τα καλύτερα παραδείγματα προϊόντων εκτύπωσης. Για να το θέσω πιο υπερβολικά, η Google έχει προσαρμόσει τους κανόνες της «πραγματικής» τυπογραφίας για οθόνες κινητών συσκευών.
3. Κινουμένων σχεδίων. Τα κινούμενα σχέδια στο σχεδιασμό υλικού πρέπει να υπακούουν στους φυσικούς νόμους, και επομένως στις διαισθητικές προσδοκίες του χρήστη. Η σχέση των κινούμενων αντικειμένων, η επιρροή τους μεταξύ τους, ο τρόπος που εμφανίζονται και κινούνται - όλα αυτά πρέπει να είναι αληθινά, λογικά και προβλέψιμα.
4. Προσαρμοστικός σχεδιασμός. Η ίδια η κύρια πτυχή για την οποία μιλήσαμε στην αρχή του άρθρου. Ο αποκριτικός σχεδιασμός στοχεύει να ενοποιήσει την εμπειρία του χρήστη και να την κάνει συνεπή σε όλες τις πλατφόρμες.

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

Επιφάνειες, ιδιότητες και λειτουργίες τους

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

Σχεδιασμός Τομεακού Υλικού

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

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

Πώς να εμφανίσετε σκιές στο σχεδιασμό υλικού

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

Η επιφάνεια προτεραιότητας έρχεται στο προσκήνιο, ρίχνοντας μια σκιά στο κάτω «φύλλο»

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

Χαρακτηριστικά της τυπογραφίας στο Material Design

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

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

Γραμματοσειρές

Η τυπική γραμματοσειρά που χρησιμοποιείται στο Android για μεγάλο χρονικό διάστημα είναι το Roboto. Το νέο Lollipop OS και Material Design το χρησιμοποιούν επίσης ως κύρια γραμματοσειρά. Εκτός από το Roboto, οι εφαρμογές Android μπορούν επίσης να χρησιμοποιήσουν τη γραμματοσειρά Noto, που προορίζεται για εκείνες τις γλώσσες που δεν έχουν τις δικές τους εκδόσεις του Roboto. Παρά το γενικό στυλ των εφαρμογών Android και τις συστάσεις για γραμματοσειρές που δίνονται στην οδηγία, είναι αρκετά αποδεκτό σε ορισμένες περιπτώσεις να χρησιμοποιείτε τη δική σας ιδιόκτητη γραμματοσειρά αντί για το Roboto, σχεδιασμένη για να σχηματίζει κατάλληλες συσχετίσεις στον χρήστη.

ΓραμματοσειράΡομπότ

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

Τυπογραφία υψηλής αντίθεσης σε δράση

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

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

Δομή και διάταξη πεδίων στο σχεδιασμό υλικών

εικονίδια

Η εικονογραφία που χρησιμοποιείται στο σχεδιασμό υλικού είναι μια λογική εξέλιξη της ιδέας της μέγιστης απλοποίησης που μπορούσε να δει κανείς σε προηγούμενες εκδόσεις του Android. Η Google περιγράφει τα εικονίδια για το υλικό ως απλά, σαφή και φιλικά. Ταυτόχρονα, η ιδέα της υλικότητας μπορεί να επεκταθεί και στα εικονίδια - η ίδια η Google ενσωματώνει με συνέπεια την ιδέα του υλικού στα εικονίδια των προϊόντων της. Για παράδειγμα, το εικονίδιο Gmail ενός χάρτινου φακέλου προέρχεται από το πραγματικό του αντίστοιχο. Σε ένα περιβάλλον σχεδιασμού υλικού, μια απλοποιημένη εικόνα ενός φακέλου εμφανίζεται σχεδόν εξίσου πραγματική με ένα «πραγματικό» πρωτότυπο—το εικονίδιο εμφανίζει διακριτικές σκιές που αντιπροσωπεύουν τις καμπύλες και τη φυσική δομή ενός χαρτιού διπλωμένου σε σχήμα φακέλου.

Εικονικό πρωτότυπο χάρτινου φακέλου και τελειωμένου εικονιδίουGmail

Αξίζει να σημειωθεί ότι η υλική προσέγγιση για τη δημιουργία εικονιδίων επιτρέπεται μόνο για εκείνα τα εικονίδια που συμβολίζουν ένα συγκεκριμένο προϊόν, όπως το Gmail. Άλλα, εικονίδια συστήματος (ή εικονίδια διεπαφής χρήστη) που γεμίζουν εφαρμογές, είναι λιγότερο υλικής φύσης. Είναι πραγματικά μίνιμαλ, ομοιόμορφα και απλά. Λόγω της απλότητας και του συμβολισμού τους, είναι ευανάγνωστα ακόμα και όταν είναι πολύ μειωμένα. Αυτά τα εικονίδια κυριαρχούνται από γεωμετρικά σχήματα.

εικονίδιαAndroid Γλειφιτζούρι– θα μπορούσε να υπάρχει κάτι πιο μινιμαλιστικό και απλό;

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

Φιλοσοφία του χρώματος

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

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

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

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

Κατάσταση μπαρπαίρνει χρώμαδράση μπαρ, αλλά εξακολουθεί να ξεχωρίζει ως πιο πλούσια, πιο σκούρα απόχρωση

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

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

Κινουμένων σχεδίων

The Suprematist Square Movement, Kazimir Malevich (1920) καιμε νοημα Κίνηση, Google Υλικό Σχέδιο (2014)

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

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

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

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

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

Οι κινούμενες επιφάνειες έχουν την ικανότητα να κινούνται φυσικά, παρέχοντας προβλέψιμη αντίσταση στην κίνηση

Μετακίνηση του στρώματος "ψηφιακό χαρτί" στη συλλογή

Δεύτερον, ο σχεδιασμός υλικού είναι πολύ αποτελεσματικός στην ένδειξη της εμφάνισης ή της αποχώρησης ενός νέου αντικειμένου από την οθόνη. Όπως ακριβώς και στον πραγματικό κόσμο, στο περιβάλλον του υλικού σχεδιασμού, τα αντικείμενα δεν φαίνονται από το πουθενά, ούτε πηγαίνουν στο πουθενά. Στο Lollipop OS, η εμφάνιση ενός νέου αντικειμένου στο προσκήνιο συνδέεται με περίεργες μεταμορφώσεις - το αντικείμενο, πράγματι, δεν εμφανίζεται ξαφνικά από το πουθενά, γλιστρά έξω, τεντώνοντας σταδιακά και παίρνοντας το σχήμα επιφάνειας. Σε αυτή την περίπτωση, δεν υπάρχει σεβασμός στις αναλογίες, γιατί μια αναλογική και συμμετρική αύξηση ή μείωση της επιφάνειας θα δώσει την εντύπωση ότι πλησιάζει ή απομακρύνεται, ενώ πρέπει να υποδείξουμε την εμφάνιση στην οθόνη ενός νέου κομματιού «ψηφιακού χαρτιού». , απομονωμένη και ανεξάρτητη.

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

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

Το εφέ μιας επιφάνειας απλώματος μπορεί να είναι πολύ κομψό και πολύχρωμο.

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

Παράδειγμα κίνησης βασικών εικονιδίων στοAndroid Γλειφιτζούρι

Πανταχού παρώνΚυματισμός-Αποτέλεσμα

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

Κυματισμός-το εφέ που εμφανίζεται όταν αγγίζετε γρήγορα την οθόνη με το δάχτυλό σας

Κυματισμός-εφέ που εμφανίζεται όταν προσπαθείτε να μετακινήσετε μια εικόνα μέσα στη συλλογή

Τεχνική πτυχή του animationυλικό σχέδιο ή φυσικό περίβλημα

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

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

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

Προσαρμοστικός σχεδιασμός

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

Η Google ήταν από τους πρώτους που συνειδητοποίησε την ανάγκη ενοποίησης και ανάπτυξης μιας ομοιόμορφης εμπειρίας χρήστη. Στην πράξη, αυτή η συνειδητοποίηση μετατράπηκε στο λεγόμενο Kennedy Project, όταν το 2011 η εταιρεία άρχισε να αναπτύσσει έναν ενιαίο τύπο διεπαφής για όλες τις εφαρμογές της. Η Google είχε επιτύχει καλά αποτελέσματα όσον αφορά την αισθητική και το UX, αλλά εξακολουθούσε να υπάρχει ένα πραγματικό χάσμα μεταξύ των εκδόσεων των προϊόντων της για επιτραπέζιους υπολογιστές και για κινητά gadget με Android. Στην πραγματικότητα, ο ίδιος ο σχεδιασμός υλικού είναι η επόμενη προσπάθεια μετά το έργο Kennedy για τη δημιουργία μιας πραγματικά ενοποιημένης διεπαφής.

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

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

Αρθρωτό πλέγμα και κατανεμημένα μπλοκ

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

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

Δεύτερον, η προσαρμογή της διεπαφής της εφαρμογής για διαφορετικές συσκευές σχετίζεται με τον όγκο των πληροφοριών που εμφανίζονται στην οθόνη. Προφανώς, όσο μικρότερη είναι η οθόνη, τόσο λιγότερο λεπτομερείς πληροφορίες μπορούμε να δείξουμε μέσα σε αυτήν. Σε αυτήν την περίπτωση, αναγκαζόμαστε να μεταφέρουμε μέρος του περιεχομένου σε ξεχωριστές οθόνες ή να το κρύψουμε πίσω από πρόσθετα στοιχεία - αυτή η πρακτική είναι ιδιαίτερα χαρακτηριστική για εφαρμογές προσαρμοσμένες για smartphone.

Στοιχεία

Πλωτό κουμπί σε κανονική ή μίνι έκδοση

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

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

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

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

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

Πλωτό κουμπί δράσηςV δράση

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

Θετικές και αρνητικές ενέργειεςεπιπλέων δράση κουμπί

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

App μπαρπου αντικατέστησεδράση μπαρ

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

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

Βασική έκδοση του ενημερωμένουδράση μπαρ, που περιέχει τα απαραίτητα στοιχεία για τον έλεγχο της εφαρμογής

Αποχρώσειςεφαρμογή μπαρ, προτείνεταιGoogle

Τρέχουσα κατάσταση με την ανάπτυξη εφαρμογών Android Lollipop και AppCompat v21

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

Ωστόσο, για εκείνους τους προγραμματιστές που θέλουν να διατηρήσουν τις εφαρμογές τους συμβατές με παλαιότερες εκδόσεις του Android, η Google προσφέρει ένα σύνολο εργαλείων που σας επιτρέπουν να χρησιμοποιείτε στοιχεία σχεδιασμού υλικού σε εφαρμογές για προκατόχους του Lollipop. Στο αντίστοιχο blog, οι προγραμματιστές καλούνται να εξοικειωθούν με τη βιβλιοθήκη AppCombat, η οποία μπορεί να χρησιμοποιηθεί για την εισαγωγή στοιχείων υλικού σε παλαιότερες εκδόσεις του Android.

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

Γραφικό στοιχείοεφαρμογή μπαρ

Μια κριτική ματιά στο υλικό σχεδιασμού

Παρά την προφανή καινοτομία και την επιτυχή εφαρμογή, ο σχεδιασμός υλικού (εάν είναι επιθυμητό) μπορεί να έχει κάποιες ελλείψεις. Αν και, όπως σε όλα αυτά τα θέματα, ο καθένας αποφασίζει μόνος του εάν τα σημεία που αναφέρονται είναι μειονεκτήματα. Αξίζει να σημειωθεί ότι αυτή τη στιγμή, οι υποστηρικτές της ιδέας του σχεδιασμού υλικού εξακολουθούν να αποτελούν την πλειοψηφία εκείνων που συνεχίζουν να συζητούν δυναμικά το τελευταίο πνευματικό τέκνο της Google. Ωστόσο, το πιο δύσπιστο κοινό έχει τα ακόλουθα παράπονα σχετικά με τη διεπαφή Lollipop.

Microsoft Διαμέρισμα Σχέδιοήταν πολύ πιο πρακτικό και επιτυχημένουλικό σχέδιο. Όπως έχουμε ήδη πει, ο σχεδιασμός υλικού δεν είναι τίποτα άλλο από μια επιτυχημένη συλλογή προσεγγίσεων και τεχνικών που έχουν ήδη αναπτυχθεί και χρησιμοποιηθεί από κάποιον άλλο στο παρελθόν. Μία από τις έννοιες που έχουν υιοθετηθεί από τους προγραμματιστές σχεδιασμού υλικού είναι η λεγόμενη «επίπεδη σχεδίαση» από τη Microsoft. Η ίδια η ιδέα της εγκατάλειψης των υπερβολών υπέρ ενός επίπεδου ψηφιακού χώρου εμφανίστηκε για πρώτη φορά στα προϊόντα της Microsoft. Η επίπεδη σχεδίαση αντιπροσώπευε μια πλήρη απόρριψη του σκεομορφισμού σε οποιαδήποτε από τις εκδηλώσεις του. Ο σχεδιασμός υλικού είναι μια πιο απαλή εκδοχή αυτής της ιδέας με προσομοίωση «ψηφιακού χαρτιού» και «ψηφιακής μελάνης». Ο σχεδιασμός υλικού ενσωματώνει ό,τι καλύτερο και των δύο κόσμων - επίπεδους και μινιμαλιστικούς χώρους από επίπεδο σχέδιο και έναν συγκεκριμένο κινούμενο όγκο από σκεομορφισμό.

Επίπεδη σχεδίαση της Microsoft

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

Αναποτελεσματική χρήση του χώρου της οθόνης, πολύς κενός χώρος.Η αφθονία του περιβόητου «αέρα» στο σχεδιασμό υλικών (όπως και στο σύγχρονο design γενικά) είναι το αντικείμενο της πιο έντονης συζήτησης μεταξύ σχεδιαστών, προγραμματιστών και απλών χρηστών. Το ζήτημα των κενών χώρων στις σύγχρονες διεπαφές είναι πράγματι αρκετά αμφιλεγόμενο, καθώς η στάση απέναντι στην ποσότητα του ελεύθερου χώρου στην οθόνη εξαρτάται, τελικά, από τις ατομικές προτιμήσεις. Πολλοί χρήστες θέλουν να βλέπουν όλες (ή τις περισσότερες) τις απαραίτητες πληροφορίες μπροστά τους, προσπαθώντας να μην καταφύγουν σε κύλιση και σελιδοποίηση. Τέτοιοι χρήστες είναι ειλικρινά ενοχλημένοι από τις μεγάλες εσοχές και τα κενά μεταξύ του περιεχομένου, καθώς και από την ανάγκη συνεχούς κύλισης. Το ομαδοποιημένο περιεχόμενο, που διανέμεται έξυπνα σε ολόκληρη την περιοχή της οθόνης, είναι η επιλογή τους.

Ένας άλλος τύπος χρήστη, αντίθετα, καλωσορίζει το αραιό περιεχόμενο, την παρουσία «αέρα» και τον καθαρό ελεύθερο χώρο. Δεν τους επιβαρύνει η ανάγκη να χρησιμοποιούν πιο συχνά την κύλιση και να ξεφυλλίζουν εικονικές σελίδες και θεωρούν την παρουσία μεγάλων εσοχών ως απαραίτητη προϋπόθεση για τη γρήγορη και εύκολη επιλογή του επιθυμητού στοιχείου από τη συνολική μάζα περιεχομένου. Επιπλέον, αυτοί οι χρήστες θεωρούν τον «αέρα» δικαιολογημένο και ευνοϊκό από αισθητικής άποψης.

Για παράδειγμα, ας συγκρίνουμε τη διεπαφή μενού Ρυθμίσεις για Android και iOS:

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

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

συμπέρασμα

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

Τι θα συμβεί αν η παιδική ηλικία ενός ατόμου περάσει ακούγοντας ταινίες όπου οι πιο έξυπνοι υπολογιστές σκοτώνουν αναπόφευκτα όλη την ανθρωπότητα, και όταν μεγαλώσει λίγο, αυτό το ίδιο άτομο διαβάζει για την NSA και άλλους κακούς που διαβάζουν τα SMS του όλο το εικοσιτετράωρο και τους στέλνουν στις ΗΠΑ; Θα είναι επιφυλακτικός με την Google.

Πριν από λίγο καιρό, η Good Corporation έδειξε στον κόσμο το όραμά της για τις διεπαφές χρήστη για το μέλλον. Το Material Design είναι μια ενοποιημένη ιδέα για την κατασκευή της λογικής λειτουργίας και εμφάνισης των υπηρεσιών και των εφαρμογών, ενοποιώντας όλα τα προϊόντα Google, ώστε να γίνουν όσο το δυνατόν πιο εύκολα και διαισθητικά για τους χρήστες.

Η ιδέα είναι τόσο μεγάλη που θα μεταμορφώσει όχι μόνο την εμφάνιση όλων των προϊόντων της Google. Με την έλευση του νέου concept, ο ρόλος της ίδιας της εταιρείας στη ζωή των ανθρώπων θα αλλάξει.

Τι θα γίνει η Google;

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

Όταν δημιουργείτε φυσικά πράγματα, αντλείτε από την ανθρώπινη εμπειρία χιλιάδων ετών. Αλλά ο σχεδιασμός λογισμικού είναι μόλις στα σπάργανα. Εξετάσαμε όλο το λογισμικό μας και αναρωτηθήκαμε, από τι αποτελείται; John Wiley, επικεφαλής σχεδίασης Αναζήτησης Google

Ποιες είναι οι υπηρεσίες Google για τους ανθρώπους τώρα; Είναι μια γραμμή αναζήτησης που βρίσκεται στο πρόγραμμα περιήγησης; Ή μήπως είναι η κινητή συσκευή σας Android;

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

Αλλά στο εγγύς μέλλον, η Google δεν θα θεωρείται πλέον μόνο ως Chrome ή Android.

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

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

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

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

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

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

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

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

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

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

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

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

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

Το Material Design δεν είναι απλώς μια προσπάθεια δημιουργίας πανομοιότυπων σχεδιασμένων υπηρεσιών για διαφορετικές συσκευές. Η Google δημιουργεί έναν παράλληλο κόσμο, κάθε σωματίδιο του οποίου είναι ένα κομμάτι από κάτι υλικό. Όταν λαμβάνετε ένα μήνυμα στο smartwatch σας από το smartphone σας, δεν βλέπετε απλώς ένα νεκρό κομμάτι κειμένου. Είναι ένα κομμάτι χαρτόνι με ένα μήνυμα πάνω του και αυτό το μήνυμα έρχεται από το smartphone στον καρπό σας.

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

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

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

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

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

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

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

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

Στόχοι Σχεδιασμού Υλικού

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

Αρχές σχεδιασμού υλικού:

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

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

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

Υλικό Σχεδιασμός Χρώμα και Τυπογραφία

Τα χρώματα στο σχεδιασμό υλικών έχουν πολλά κοινά με το . Οι παλέτες υλικών είναι αρκετά τολμηρές και φωτεινές. , όπως και στην επίπεδη σχεδίαση, απλό sans serif.

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

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

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

Πρότυπα, δομή και σχέδιο

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

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

Βασικά στοιχεία σχεδιασμού υλικού

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

• Κάτω οθόνη (κάτω στρώματα σχεδίασης)
• Κουμπιά
• Καρτέλλες
• Διαλόγους
• Διαχωριστές
• Πλέγματα
• Κονίστρα
• Μπάρες προόδου και δραστηριότητας
• Ρυθμιστικά
• Υπότιτλοι
• Διακόπτες
• Καρτέλες
• Πεδία κειμένου
• Αναδυόμενα παράθυρα

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

Ευκολία, προσβασιμότητα και εμπειρία χρήστη

«Ένα προϊόν είναι προσβάσιμο όταν όλοι οι άνθρωποι –ανεξαρτήτως ικανότητας– μπορούν να το χρησιμοποιήσουν για να πετύχουν τους στόχους τους. Ένα πραγματικά επιτυχημένο προϊόν είναι προσβάσιμο στο ευρύτερο δυνατό κοινό».

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

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

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

10 Πόροι Σχεδιασμού Υλικού

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

1. Σύνολο στοιχείων σε στυλ σχεδιασμού υλικού για smartphone και άλλες κινητές συσκευές (δείτε παρακάτω).

Μέρος 1: Συλλογή σχεδιασμού υλικού για ιστότοπους και εφαρμογές – Δωρεάν υλικά

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

Σχεδιασμός Υλικού από UXPin

Σχεδιασμός υλικού από την Creative Tim

Δωρεάν επιλογή υλικών από το Designtory

UIDE – δωρεάν σκίτσο από τον Mateusz Dembek

Πηγή σκίτσων σχεδίασης υλικού Google

L Bootstrap σχεδιασμός υλικού σε στυλ Android από τον Vitaly Chernega

Πηγή σκίτσου για σχεδιασμό υλικού από το Boilerplate

Material Design for EL Passion

Μπλοκ Froala σε στυλ υλικού

Δωρεάν προσγείωση 1.0 σε στυλ υλικού

Mobile Material Design

σχεδιασμός υλικού avsc

Σχεδιασμός υλικού διεπαφής χρήστη Jakub Kośla

Σχεδιασμός υλικού για Android από τον Ivan Bjelajac

Σχεδιασμός υλικού από την Ultralinx

Mobile Material Design από την Emma Drews

Δωρεάν επιλογή υλικού από τον Adrian Goia

Σχεδιασμός υλικού από UI8

Σχεδιασμός υλικού για Photoshop από την Psddd

Σχεδιασμός υλικού Android PSD από την Nine Hertz

Άλλες συλλογές σχεδιασμού υλικού που μπορεί να είναι χρήσιμες

Διαδραστικό υλικό σταθμού από τον Nelson Sakwa

Widgets σε στυλ υλικού από τον Elad Izak

Υλικό σκίτσο από τον Benjamin Schmidt

Υλικό επιλογής χρώματος Color Picker

Ας το συνοψίσουμε

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

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

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

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

Πριν προχωρήσουμε στα παραδείγματα, ας καταλάβουμε μια απλή αλήθεια:

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

Η οδηγία Material Design, εκτός από την ίδια την Google, ισχύει και για προϊόντα συνεργαζόμενων εταιρειών, κυρίως εφαρμογές για την πλατφόρμα Android. Για όλους τους άλλους που δεν σχετίζονται με την Google και την πλατφόρμα Android, το ενδιαφέρον για το Material Design θα πρέπει να είναι καθαρά εκπαιδευτικό.

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

Το Material Design δεν έχει φτάσει ακόμη στο απόγειο της ανάπτυξής του και σήμερα δεν υπάρχουν πολλοί ιστότοποι που όχι μόνο έχουν κατασκευαστεί πλήρως σύμφωνα με τις απαιτήσεις του βιβλίου επωνυμίας της Google, αλλά είναι και αρμονικά ενσωματωμένοι στο δικό τους οπτικό branding. Ωστόσο, καταφέραμε να βρούμε αρκετά επιτυχημένα παραδείγματα ιστότοπων στο στυλ Υλικού Σχεδιασμού.

Παραδείγματα ιστοτόπων σε στυλ Υλικού Σχεδιασμού

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

Μια πολύ επιτυχημένη λύση που συνδυάζει αρμονικά λεπτομέρειες και σχέδια από την οδηγία Material Design (σκιές, κουμπιά, επίπεδη σχεδίαση, χρώματα και εφέ JS) και το εταιρικό στυλ του ομίλου διεθνών σχολών ISoE.

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

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

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

Εδώ βλέπουμε το βασικό στοιχείο του Material Design - κάρτες. Ο ιστότοπος είναι πολύ ελαφρύς και απλός: δεν υπάρχει ακαταστασία από περιττά στοιχεία και οι βασικές πληροφορίες εμφανίζονται σε ξεχωριστά μπλοκ.

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

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

Ο Αντιπρόεδρος Σχεδίασης της Google, Matias Duarte, μιλά για τις βασικές αρχές του νέου σχεδιασμού, που ονομάζεται Material, σε συνέντευξή του στο The Verge. Αυτή είναι μια εντελώς διαφορετική προσέγγιση, που παρέχει ένα ενοποιημένο σύνολο κανόνων, που κυμαίνονται από τον τύπο του λογισμικού έως τις λειτουργίες. Προς το παρόν, ο σχεδιασμός φαίνεται λίγο περίεργος και χρειάζεται λίγη εξοικείωση.

Η ομάδα σχεδιασμού της Google ένιωσε την ανάγκη να καταλήξει σε μια ενοποιημένη εμφάνιση και λειτουργικότητα του λογισμικού που θα μπορούσε να χρησιμοποιηθεί σε όλα τα προϊόντα: Android, Chrome OS, υπηρεσίες web. Αντί να ξεκινήσουν με την ανάπτυξη μιας χρωματικής παλέτας, ξεκίνησαν με την ερώτηση: "Τι είναι λογισμικό;"

Ύλη και μορφή

Η απάντηση ήρθε από το τμήμα σχεδιασμού, όταν ο Jon Wiley, επικεφαλής σχεδιαστής της μηχανής αναζήτησης της Google, και ο συνάδελφός του Nicholas Jitcoff εξέτασαν το σχέδιο του Google Now. Κοίταξαν τη διεπαφή της κάρτας και σκέφτηκαν: «Και αν μετακινήσετε την κάρτα, τι κρύβεται πίσω από αυτήν;»

«Αυτή η αθώα ερώτηση άναψε μια δυνατή σπίθα!» - είπε ο Ντουάρτε. Ολόκληρη η ομάδα άρχισε να σκέφτεται έναν νέο τρόπο αλληλεπίδρασης με στοιχεία λογισμικού. Αντί να χρησιμοποιεί απλώς pixel στην οθόνη και αφηρημένα επίπεδα, η ομάδα άρχισε να σκέφτεται το σχέδιο ως ένα πραγματικό, απτό αντικείμενο. Επομένως, οι κάρτες πρέπει να έχουν φυσικές ιδιότητες. Ήρθε η ώρα να βρούμε κανόνες που θα καθορίζουν πώς πρέπει να λειτουργούν και να κινούνται όλα στην οθόνη. Η ομάδα ανάπτυξης ήθελε να επιτύχει το αποτέλεσμα ότι ο χρήστης αλληλεπιδρά με φυσικά αντικείμενα.

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

Οι Wiley και Zhitkoff λένε ότι είναι μια αισθητική εξέλιξη ολόκληρης της σχεδιαστικής φιλοσοφίας της Google. Το 2012 και το 2013, μέσα στα τείχη των κεντρικών γραφείων του γίγαντα του Διαδικτύου, ξεκίνησαν οι εργασίες για το Project Kennedy, το οποίο θα ενοποιούσε τον σχεδιασμό των πάντων.

Δημιουργικότητα και περιορισμοί

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

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

Δεν βιαζόμαστε στον χώρο και τον χρόνο με υπερηχητικές ταχύτητες. Σχέδιο - είναι μια αναζήτηση λύσης εντός αυστηρών περιορισμών. Το design είναι τέχνη.

Οι σχεδιαστές της Google αρνούνται πεισματικά να κατονομάσουν το εικονικό υλικό που χρησιμοποιείται. Μια λύση που τόσο τους δίνει μεγαλύτερη ευελιξία όσο και προσθέτει ένα στρώμα μεταφυσικού μυστικισμού στην ουσία. Κβαντικό χαρτί - αυτό ειπώθηκε σε ορισμένες διαρροές πριν από το Google I/O. Αυτό είναι σημαντικό γιατί το υλικό υπακούει στη φυσική και δεν θα πέσει στην παγίδα του σκευομορφισμού. Δεν είναι απομίμηση φυσικών αντικειμένων ακριβώς, όπως το λέει ο Duarte, είναι κάτι «μαγικό».

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

Πραγματοποιώ

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

Αυτός είναι ο λόγος που το Android Wear δεν παρέχει στους χρήστες τίποτα άλλο εκτός από την αλληλεπίδραση με ειδοποιήσεις. Ο Alex Faaborg, σχεδιαστής πλατφόρμας, λέει:

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

Η Google ζητά πάρα πολλά εύσημα για τον εαυτό της και το «μαγικό» χάρτινο υλικό της, αλλά ο Duarte πιστεύει ότι υπάρχουν καλοί λόγοι για αυτό.

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

Parc 3.0

Υπάρχουν πολλά περισσότερα στο Material Design εκτός από τη σχεδίαση του Android L, του Android Wear και οτιδήποτε άλλο με το οποίο εμπλέκεται η Google. Μιλάμε για αισθήσεις στη σχέση ανθρώπου και τεχνολογίας.

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

Τώρα η Google πιστεύει ότι κατάφερε να κάνει το ίδιο. Ο Wiley λέει ότι οι άνθρωποι σήμερα έχουν πολλή τεχνολογία: οθόνες αφής, χειρονομίες, φωνητικές εντολές, έξυπνους αλγόριθμους. Το Material Design συνδυάζει όλη αυτή την ποικιλομορφία σε ένα διαισθητικό πράγμα. Αυτό θα σας βοηθήσει να χρησιμοποιήσετε εύκολα το ίδιο σε Chrome OS, Android ή στον ιστό.

9 αρχές

1. Το υλικό είναι μεταφορά

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

2. Οι επιφάνειες είναι διαισθητικές

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

3. Η διάσταση δημιουργεί αλληλεπίδραση

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

4. Ενιαίος σχεδιασμός που ανταποκρίνεται

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

5. Γραμματοσειρές, γραφικά, χρώματα

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

6. Πρωτογενείς δράσεις

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

7. Οι χρήστες ξεκινούν αλλαγές

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

8. Χορογραφία κινουμένων σχεδίων

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

9. Η κίνηση δίνει νόημα

Η κίνηση έχει νόημα και είναι απαραίτητη για να τραβήξει την προσοχή. Οι μεταβάσεις είναι αποτελεσματικές.

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

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