5 Τεχνικές για τον καλύτερο συντονισμό UX με χρώμα
Το χρώμα είναι ένα από τα βασικά στοιχεία σε οποιοδήποτε σύστημα σχεδιασμού. Σε ιστοσελίδες ή σε εφαρμογές, το χρώμα μπορεί να χρησιμοποιηθεί με διάφορους τρόπους: μερικές φορές το χρώμα μπορεί να χρησιμοποιηθεί για να δημιουργηθεί ένα εστιακό σημείο μέσω της αντίθεσης ή μέσω του περιορισμού του χρώματος σε ένα επιλεγμένο σημείο. Το χρώμα μπορεί επίσης να συμβάλει στη δημιουργία ιεραρχίας και επομένως να επηρεάσει την εμφάνιση ενός χρήστη.
Σε αυτό το άρθρο, θα μιλήσουμε για το πώς να χρησιμοποιήσετε το χρώμα στρατηγικά.
1. Δημιουργία σημείου εστίασης μέσω αναλογιών
Ένα καλό παράδειγμα των αναλογιών χρώματος είναι η σχεδίαση του Viporte . Καθώς κάνετε κύλιση προς τα κάτω στην αρχική τους σελίδα, κάθε τμήμα είναι διακοσμημένο με ένα μεγάλο γράμμα στο κέντρο. Η επιστολή είναι γεμάτη με ένα όμορφο χρώμα πριν από την κίνηση των κινούμενων σχεδίων των τμημάτων. Το χρώμα των διαφορετικών εικόνων που ζωντανεύουν σχετίζονται με το χρώμα των γραμμάτων. Το επίκεντρο είναι σίγουρα στο κέντρο των τμημάτων χάρη εν μέρει στην επικεντρωμένη χρήση του χρώματος. Τα ποσοστά ποικίλλουν - μερικές φορές υπάρχει ένα μικρό χρώμα και μερικές φορές υπάρχουν πολλά. Είτε έτσι είτε αλλιώς, οι αναλογίες χρησιμοποιούνται για να προσελκύσουν την προσοχή σε ένα εστιακό σημείο. Αν το χρώμα ήταν πιο εμφανές σε όλη την έκταση κάθε τμήματος, το εστιακό σημείο δεν θα ήταν τόσο σαφές.
2. Προσεγγίζοντας την αντίθεση
Ένα άλλο πράγμα που μπορεί να χειριστεί το χρώμα είναι η αντίθεση. Όταν τα χρώματα του συνολικού σχεδιασμού είναι ήρεμα ή μαλακά, η προσθήκη ενός αντίθεση χρώματος θα τραβήξει πολύ προσοχή στις εικόνες.
Αυτό ακριβώς συμβαίνει στο σχεδιασμό του Thinx . Στην αρχική σελίδα, η συνολική χρωματική δομή της διεπαφής είναι στην πραγματικότητα ασπρόμαυρη. Ωστόσο, το σχέδιο βασίζεται σε πολλές φωτογραφίες. Ειδικά στην κορυφή της αρχικής σελίδας, οι φωτογραφίες των εσώρουχων χαρακτηρίζονται από σκούρο κόκκινο φόντο. Σε σύγκριση με οτιδήποτε άλλο στη σελίδα, αυτό είναι αρκετά τολμηρό. Χωρίς αμφιβολία, το πράγμα που ξεχωρίζει εδώ είναι το σκούρο κόκκινο. Το κόκκινο έχει μια πολύ μεγαλύτερη αντίθεση κατά το ασπρόμαυρο σχέδιο χρωμάτων. Μου αρέσει να χρησιμοποιώ το Thinx ως παράδειγμα, διότι δείχνει ότι τα φωτεινά και νέον χρώματα δεν είναι τα μόνα που είναι κατάλληλα για να τραβήξουν την προσοχή κάποιου από την αντίθεση. Είναι πραγματικά μια πράξη εξισορρόπησης δύο χρωμάτων που θα αφήσει ένα από αυτά να ξεχωρίσει πραγματικά.
3. Χρήση χρώματος για τη δημιουργία μοτίβων UX
Ο καλύτερος τρόπος για να δημιουργήσετε οπτικά μοτίβα είναι μέσω της συνέπειας. Τα μοτίβα, με τη σειρά τους, δημιουργούν σχέσεις που ένας χρήστης μπορεί να συνηθίσει να έχει. Είναι ο ίδιος τρόπος με τον οποίο οι χρήστες χρησιμοποιούνται για την απεικόνιση εικονιδίων που σχετίζονται με συγκεκριμένες ενέργειες, δηλαδή για κάδο απορριμμάτων. Τα χρώματα είναι πολύ πιο υποκειμενικά, επειδή κάθε ιστοσελίδα ή εφαρμογή μπορεί να κάνει το δικό της νόημα για τα χρώματα.
Ας πάρουμε τη σχέση με το μπλε χρώμα Ιστοσελίδα του χαρτοφυλακίου Underbelly . Είναι ένα απλό παράδειγμα και είναι τέλειο για να το κάνω. Οτιδήποτε είναι clickable στην ιστοσελίδα του Underbelly είναι μπλε. Αφού χρησιμοποιήσετε τον ιστότοπο για λίγα δευτερόλεπτα, γίνεται γρήγορα σαφές ότι οι σύνδεσμοι είναι μπλε. Και έτσι δημιουργείτε μοτίβα μέσω του χρώματος. Τα μοτίβα είναι καλά επειδή επιτρέπουν στους χρήστες και τους επισκέπτες να αναγνωρίζουν εύκολα κάτι. Η ευκολότερη αναγνώριση γίνεται, τόσο λιγότεροι σκέφτονται και μέχρι τώρα όλοι γνωρίζουμε πόσο ευτυχισμένη γίνεται Ο Steve Krug .
4. Δημιουργία ιεραρχίας μέσω του χρώματος
Ένα άλλο πράγμα το χρώμα μπορεί να είναι καλό για τη δημιουργία μιας ιεραρχίας. Επί Η σελίδα του προϊόντος της Skore , σχεδόν κάθε τμήμα έχει πράσινα στοιχεία σε αυτό. Δεν είναι μόνο το πράσινο επαναλαμβανόμενο - που δημιουργεί ένα αναγνωρίσιμο μοτίβο - βοηθά επίσης να διακρίνει τα σημαντικά μέρη του κάθε τμήματος. Συχνά φορές είναι εύκολο να εξηγήσετε την ιεραρχία μέσω του μεγέθους αυτού του μεγέθους γραμματοσειράς. Αλλά η ένταση ενός χρώματος, καθώς και η τοποθέτηση ενός χρώματος σε χρήση μπορεί να είναι μεγάλη για τον καθορισμό μιας ιεραρχίας επίσης.
Στο παράδειγμα του Skore, το πράσινο έχει καλή αντίθεση με το γκρι κείμενο και το λευκό φόντο. Ξεχωρίζει. Επιπλέον, το σχήμα χρωμάτων τους δεν βασίζεται σε άλλα χρώματα τόνου που κάνουν το πράσινο πρωτεύον. Όλα αυτά συμβάλλουν στην εμφάνιση της ιεραρχίας σε κάθε τμήμα. Ως εκ τούτου, το πράσινο χρώμα βοηθά τα μάτια του χρήστη προς τα σημαντικά στοιχεία που παρέχουν μια ωραία ιεραρχία σε κάθε τμήμα. Τα πράσινα στοιχεία λένε στον χρήστη πού να κοιτάξει πρώτα.
5. Αξιοποιώντας τις ομοιότητες του χρώματος
Από όλα τα διαφορετικά πράγματα που κάνουμε με το χρώμα ως σχεδιαστές, το χρησιμοποιούμε ως επί το πλείστον και το ξαναχρησιμοποιούμε για να διατηρήσουμε τη συνεκτικότητα στη θέση του στο σχεδιασμό. Ας ρίξουμε μια ματιά Το τέλος της χρονιάς της InVision σελίδα προορισμού. Στο πάνω μέρος της σελίδας υπάρχει μια ροζ και μωβ κλίση που χρησιμοποιείται ως εικόνα φόντου. Πιο κάτω στη σελίδα, το ροζ και το μωβ χρησιμοποιούνται για τα χρώματα των κουμπιών. Επιπλέον, η σελίδα προορισμού επαναχρησιμοποιείται με λευκά χρώματα πάνω από τα ροζ και μοβ χρώματα. Χρησιμοποιεί επίσης το μαύρο και γκρι χρώμα του κειμένου πάνω από το λευκό φόντο. Εάν τα χρώματα ήταν διαφορετικά κάθε φορά, δεν θα φαινόταν τόσο μεγάλη.
Ας ρίξουμε μια ματιά σε ένα άλλο παράδειγμα, συγκεκριμένα Συνεργασία . Στην αρχική σελίδα τους, το δημιουργικό στούντιο χρησιμοποιεί μερικά διαφορετικά χρώματα. Αλλά είναι όλοι παρόμοιες με τον τόνο τους για να δώσουν μια συνεκτική ροή. Σε αυτό το παράδειγμα, δεν υπάρχει τίποτα που ξεχωρίζει συγκεκριμένα, το οποίο μπορεί επίσης να είναι ένας καλός στόχος. Σε αυτή την περίπτωση, η έμφαση στο χρώμα γίνεται σε μια καλή και συνεκτική ροή της σελίδας, όπου προσπαθείτε να κρατήσετε τον χρήστη εμπλεκόμενο και κύλιση.
συμπέρασμα
Το χρώμα μπορεί να είναι ένα εξαιρετικό εργαλείο που βοηθά στην επίτευξη διαφόρων σχεδιαστικών στόχων. Το χρώμα μπορεί να σας βοηθήσει να ορίσετε και να δημιουργήσετε μια ιεραρχία και να δώσετε ένα σημείο εστίασης. Η έγχρωμη έμφαση έρχεται σε διάφορες μορφές. Είτε έτσι είτε αλλιώς, η εργασία με το χρώμα μπορεί να είναι μια πολύ διασκεδαστική. Ο επηρεασμός του πού πηγαίνουν τα μάτια ενός επισκέπτη ή ενός χρήστη μπορεί να γίνει ευκολότερα με τη βοήθεια ενός στρατηγικού συνδυασμού χρωμάτων.