Χρώμα στο web design: πώς να προκαλέσει το επιθυμητό χρήστη συγκίνηση
Συμβουλές / / December 19, 2019
Σε όλη την ανθρώπινη ιστορία, τα master-καλλιτέχνες λάβει παγκόσμια αναγνώριση, λόγω της ικανότητας στην εργασία με το χρώμα. Στο σημερινό κόσμο δεν λαμβάνουν λιγότερο ειδικοί αναγνώρισης, που είναι σε θέση να συνδυάσει τα χρώματα στους εμπορικούς και επαγγελματικούς σκοπούς - στη διαφήμιση και web design.
Η ικανότητα να χρησιμοποιήστε τα χρώματα μπορεί να αντληθεί μέχρι το άπειρο. Είναι ένα πραγματικό βάθος των ευκαιριών για την έκθεση του ανθρώπου.
Θα σας πω για τα βασικά της θεωρίας χρωμάτων και χρωμάτων, και τότε μιλάμε για τη συναισθηματική επίδραση ορισμένων χρώματα.
θεωρία του χρώματος
χρώμα θέμα, μπορείτε να αφιερώσει ένα ολόκληρο βιβλίο, γι 'αυτό δεν θα το πάρει εξ ολοκλήρου, και περιοριστούμε σε χρήσιμες πληροφορίες, οι οποίες μπορούν να χρησιμοποιηθούν για την ανάπτυξη του σχεδιασμού διεπαφής.
Μπορεί να χωριστεί σε θεωρία χρώματος σε τρία μέρη:
Αντίθετα
Κάθε σκιά είναι το αντίθετο, να το πω έτσι, της «ορκισμένος εχθρός», η οποία είναι η μεγαλύτερη αντίθεση με αυτό το χρώμα. Για να βρείτε ένα χρώμα, μπορείτε να χρησιμοποιήσετε τον τροχό χρωμάτων. Απλά επιλέξτε το χρώμα στην αντίθετη πλευρά του κύκλου.
πρόσθεση
Αυτά τα χρώματα δεν είναι πάντα σε σύγκρουση μεταξύ τους. Συμπληρωματικά χρώματα τονίζουν ο ένας τον άλλο, σε αντίθεση με την αντίθεση. Στον τροχό χρωμάτων, όπως τα χρώματα είναι το ένα στο άλλο, όπως συμπληρωματικά χρώματα του μοβ - μπλε και ροζ.
απήχηση
Κάθε χρώμα είναι μια συγκεκριμένη διάθεση. χρώματα φωτεινά ζεστά (κόκκινο, πορτοκαλί, κίτρινο) γεμάτο με ανθρώπινη ενέργεια, να ξυπνήσει, ψυχρά χρώματα σκούρο (πράσινο, μπλε, μοβ), αντίθετα, να χαλαρώσετε και να απαλύνει.
Για παράδειγμα, BBC News Χρησιμοποιήστε την κόκκινη γραμμή πλοήγησης, για να αφυπνίσει τον αναγνώστη, να ενισχυθεί η διεγερμένη κατάσταση του. Λόγω της ιδιαιτερότητας του χώρου - μια συγκλονιστική είδηση - κόκκινο είναι μια λογική λύση.
θεωρία των χρωμάτων στο web design - είναι κάτι περισσότερο από τη διακόσμηση. Το χρώμα μπορεί να αλλάξει την αντίληψη του site σας, και να παίξει καθοριστικό ρόλο στην επιχείρησή σας.
Συναισθηματική αντίληψη των χρωμάτων
Κανείς δεν θα αρνηθεί τη στενή αλληλεπίδραση των χρωμάτων και συναισθημάτων. Και, φυσικά, κάθε web designer, θέλει να χρησιμοποιήσει αυτό το αποτέλεσμα για να δημιουργήσει μια ορισμένη ατμόσφαιρα για κάθε χώρο.
Με βάση διάφορες μελέτες - ανάλυση, που δημοσιεύθηκε στην ιστοσελίδα του Vandelay ΣχεδιασμόςΚαι μετά για τα χρώματα στο Smash Magazine - να εξηγήσουμε πώς τα χρώματα επηρεάζουν τα συναισθήματα και βοηθούν να δημιουργήσετε UX-σχεδιασμού.
Είναι σημαντικό να θυμόμαστε ότι διαφορετικούς πολιτισμούς σε όλο τον κόσμο έχουν διαφορετικές αντιλήψεις του χρώματος. Θα περιγράψει τις συναισθηματικές ενώσεις που είναι μοναδικές για το δυτικό πολιτισμό.
κόκκινος
Συναισθήματα και τις ενώσεις: η δύναμη, η σημασία, της νεολαίας.
Η πιο χρώμα τόνωση, έτσι ενεργειακά φορτισμένα, μπορεί ακόμη και να αυξήσει την πίεση του αίματος. Το κόκκινο αντιπροσωπεύει το πάθος και τη δύναμη, περισσότερο από ό, τι άλλα χρώματα προσελκύουν την προσοχή, χρησιμοποιείται τόσο συχνά για σημαντικές προειδοποιήσεις και ανακοινώσεις.
Για παράδειγμα, το κόκκινο είναι πολύ κατάλληλη θέση No Way NSAΣκοπός του οποίου - για να αποτρέψει τις υποτιθέμενες απειλές.
Χρησιμοποιήστε μια πολύ κόκκινο στο πάνω μέρος της σελίδας - αυτό είναι μια πολύ καλή λύση, διότι εφιστά την προσοχή σε σημαντικές πληροφορίες στο μήνυμα. Την ίδια στιγμή, οι άνθρωποι τείνουν να εγκαταλείψουν γρήγορα το «επικίνδυνη ζώνη» κόκκινο χρώμα και μετακινηθείτε προς τα κάτω. Αυτό, με τη σειρά του, επιτρέπει στο χρήστη να δείξει περισσότερο περιεχόμενο.
Αλλά αυτό το χρώμα μπορεί να λειτουργήσει εναντίον σας, γιατί μπορεί να προκαλέσει επιθετικότητα ή υπερδιέγερση. Αν θέλετε να δημιουργήσετε μια πιο χαλαρή ατμόσφαιρα, προσπαθήστε να χρησιμοποιήσετε κόκκινο μέτρια και επιλέξτε πιο ανοιχτές αποχρώσεις του κόκκινου.
πορτοκάλι
Συναισθήματα και τις ενώσεις: φιλικότητα, την ενέργεια και τη μοναδικότητα.
Ως το πιο ήσυχο από ζεστά χρώματα, πορτοκαλί μπορεί να προκαλέσει όλο το φάσμα των διαφορετικών συναισθημάτων. Καθώς το βασικό χρώμα, μπορεί να είναι του ενδιαφέροντος και του αγκίστρου, και ως δευτερεύουσες - διατήρηση αυτών των ιδιοτήτων, αλλά σε μια μη παρεμβατικό τρόπο.
Επιπλέον, η Orange βοηθά να δημιουργήσετε μια αίσθηση της κίνησης και της ενέργειας. Για παράδειγμα, φαίνεται μεγάλη στην ιστοσελίδα κινουμένων σχεδίων FantaΠοια είναι ενδεικτικό της νεολαίας και της κίνησης. Χρώμα συνδέεται με τη δημιουργικότητα, διατηρώντας παράλληλα την αίσθηση του οικείου εμπορικού σήματος.
κίτρινος
Συναισθήματα και τις ενώσεις: την ευτυχία, ενθουσιασμός, αρχαϊσμού (χρώματα πιο σκούρα).
Αυτό είναι ένα από τα πιο ευπροσάρμοστο χρώματα και τα συναισθήματα που προκαλεί, εξαρτώνται από τη σκιά σε μεγαλύτερο βαθμό.
Λαμπερό κίτρινο χρώμα προσθέτει ενέργεια, αλλά χωρίς τη σοβαρότητα και τριγμών, η οποία είναι παρούσα στο κόκκινο. Medium αποχρώσεις του κίτρινου χρώματα προκαλούν την αίσθηση της άνεσης, αν και ακόμη έντονη. Σκούρες αποχρώσεις (συμπεριλαμβανομένου του χρυσού) παρέχουν μια αίσθηση της αρχαιότητας, συμπληρώστε το χώρο διαχρονικότητα, τη σοφία και την περιέργεια.
Για παράδειγμα, στην κεντρική σελίδα του οργανισμού σχεδιασμού ιστοσελίδων Flash Media πιο σκούρα κίτρινο τόνο ενέργειας αποπνέουν, την περιέργεια και την εξουσία. Αυτό το χρώμα είναι ιδανικό για εταιρείες που κερδίζουν τις διαβουλεύσεις τους και θέλουν να τονίσω τον επαγγελματισμό τους.
πράσινος
Συναισθήματα και τις ενώσεις: την ανάπτυξη, τη σταθερότητα, τη χρηματοδότηση θέματα γύρω από το θέμα του περιβάλλοντος.
Πράσινο - μια γέφυρα ανάμεσα στο ζεστό και δροσερό αποχρώσεις, αλλά τείνει περισσότερο στο κρύο. Αυτό σημαίνει ότι το πράσινο έχει μια χαλαρωτική επίδραση μπλε χρώμα, αλλά έχει επίσης ένα κομμάτι του σφρίγος από κίτρινο.
Ως αποτέλεσμα, δημιουργεί μια πολύ ισορροπημένη και σταθερή ατμόσφαιρα. Πιο σκούρες αποχρώσεις του πράσινου δημιουργούν την εντύπωση του πλούτου και της αφθονίας, τόσο online Ameritrade.
μπλε
Συναισθήματα και ενώσεις: την ειρήνη του μυαλού, την ασφάλεια, τη διαφάνεια (ανοιχτές αποχρώσεις), αξιοπιστία (αποχρώσεις πιο σκούρο).
Όπως και στην περίπτωση του κίτρινου χρώματος, το αποτέλεσμα εξαρτάται από την μπλε απόχρωση πολύ. Όλες οι αποχρώσεις του μπλε είναι ευέλικτο όσον αφορά την χαλάρωση και την ασφάλεια, αλλά και τα χρώματα φωτεινά συνδέονται με τη φιλικότητα και σκοτεινό - με θλίψη.
Τα κοινωνικά δίκτυα όπως το Twitter και το Facebook χρησιμοποιείται περισσότερο φως και μεσαίου αποχρώσεις του μπλε και εταιρικά sites προτιμάτε πιο σκούρες αποχρώσεις του τη δύναμη και την αξιοπιστία.
Ένα μεγάλο παράδειγμα - το γραφείο σχεδιασμού εκδήλωση Van Vliet & Trap. Χρησιμοποιώντας το μπλε χρώμα με το φόντο, είναι οπτικά υπαινιχθεί τις γνώσεις και τις δεξιότητές τους σε floral σχέδιο, αλλά και δημιούργησε μια αίσθηση αξιοπιστίας και εμπιστοσύνης.
Αυτό έχει μεγάλη σημασία, καθώς εργάζονται με τα γεγονότα, το οποίο είναι σημαντικό για την οπτική τμήμα, για παράδειγμα με γάμους.
μωβ
Συναισθήματα και τις ενώσεις: πολυτέλεια, ρομαντισμό (ανοιχτόχρωμες αποχρώσεις), το μυστικισμό και μυστήριο (χρώματα σκούρο).
Μοβ χρώμα έχει ιστορικά συνδεθεί με την βασιλική μεγαλοπρέπεια, συμβουλές σε πολυτέλεια. Μοβ αποχρώσεις αντανακλούν τη γενναιοδωρία και τον πλούτο ως σύνολο, που τους καθιστά μια εξαιρετική επιλογή για τη μόδα και την πολυτέλεια προϊόντα (ακόμα και τη σοκολάτα, για παράδειγμα, CadburyΠοιος επέλεξε το χρώμα του εμπορικό σήμα).
Αναπτήρας αποχρώσεις, όπως η λεβάντα (μοβ ροζ με την προσθήκη) προκαλούν σκέψεις για ρομαντική σχέση, ενώ οι αποχρώσεις σκούρο εμφανίζονται πιο κομψή και μυστηριώδης.
μαύρος
Συναισθήματα και τις ενώσεις: δύναμη, την εκλέπτυνση, νευρικότητα.
Το πιο ισχυρό από τα ουδέτερα χρώματα - μαύρο - εμφανίζεται σχεδόν σε οποιαδήποτε ιστοσελίδα. Αυτό μπορεί να προκαλέσει διάφορες ενώσεις, ανάλογα με το συνοδευτικό χρώμα ή κυριαρχούν αυτά, αν χρησιμοποιηθεί υπερβολικά.
Η δύναμη και η ουδετερότητα του μαύρου είναι μια εξαιρετική επιλογή για μεγάλα τμήματα του κειμένου κάνει, αλλά το κύριο χρώμα μπορεί να δημιουργήσει ένα αίσθημα νευρικότητας ή ακόμη και να συνδέεται με το κακό.
Για τις περισσότερες περιοχές, μαύρο χρησιμοποιείται για να δημιουργήσει μια αίσθηση κομψότητας. Ο συνδυασμός του μαύρου και του λευκού μινιμαλιστική σχεδίαση δίνει την εντύπωση της κομψότητας και του στυλ, τόσο στο χώρο του ξενοδοχείου Όνειρο και Reach Εταιρεία BOSE.
λευκό
Τα συναισθήματα και οι ενώσεις: καθαρότητα, απλότητα, καλοσύνη.
Στη Δυτική κουλτούρα, λευκό σχετίζεται με την καθαρότητα, την καλοσύνη και την αθωότητα. Αυτό το χρώμα χρησιμοποιείται συχνά για το φόντο της μινιμαλιστική και απλό sites.
Επιπλέον, κανένα από τα χρώματα δεν θα επιτρέψει να επιστήσει την τόση προσοχή στα άλλα χρώματα όπως το λευκό. Για παράδειγμα, στην δικτυακός τόπος Awwwards Kloina νικητής Toshev όλα τα έργα του που ορίζονται σε λευκό φόντο, το οποίο διαθέτει μόνο εικόνες, και δημιουργεί την εντύπωση ενός κομψού γκαλερί.
γκρί
Συναισθήματα και τις ενώσεις: ουδετερότητα, διατύπωση, μελαγχολία.
Παρά το γεγονός ότι σε ορισμένες περιπτώσεις το γκρι μπορεί να δημιουργήσει μια ζοφερή και μελαγχολική ατμόσφαιρα, που εξακολουθεί να χρησιμοποιείται συχνά από επαγγελματίες σχεδιαστές.
Το πράγμα σε αποχρώσεις: εναλλασσόμενο τους, μπορείτε να πάρετε όλα τα συναισθήματα που προκαλούνται από δύο σε μαύρο και άσπρο. Σε γενικές γραμμές, το γκρι - είναι ένα ισχυρό εργαλείο στα σωστά χέρια.
Αλλά σε συνδυασμό με πιο ζωντανά χρώματα σε γκρι φόντο το σχεδιασμό φαίνεται μοντέρνο, αλλά όχι ζοφερό, όπως Awwwards.
μπεζ
Συναισθήματα και τις ενώσεις: να μεταφέρει τον χαρακτήρα των άλλων χρωμάτων.
Από μόνη της, μπεζ μάλλον βαρετή και ανέκφραστα, αλλά έχει μια αξιοσημείωτη ιδιότητα: μπεζ παίρνει το χαρακτήρα των χρωμάτων που το περιβάλλουν. Ως εκ τούτου, εάν υπάρχει η πρόθεση να μην εκφράσει μπεζ συγκράτησης χρησιμεύει ως φόντο ή το δεύτερο χρώμα.
Πιο σκούρες αποχρώσεις του μπεζ δημιουργούν μια αίσθηση παράδοσης και εγκόσμια, δίνουν την αίσθηση της υφής του χαρτιού και πιο ανοιχτές αποχρώσεις φαίνεται πιο φρέσκο και πιο μοντέρνο.
Για παράδειγμα, στο εστιατόριο του ξενοδοχείου Dishoom ανοιχτό μπεζ χρώμα γύρω από τα ονόματα και τις πιο σκούρες άκρες δίνουν την εντύπωση ότι αυτό το εστιατόριο - μια νέα προοπτική για την παραδοσιακή κουζίνα.
ελεφαντόδοντο
Συναισθήματα και τις ενώσεις: την άνεση, την κομψότητα, την απλότητα.
Ελεφαντοστού και κρέμα παράγουν σχεδόν τα ίδια συναισθήματα όπως το λευκό. Ωστόσο, ελεφαντόδοντο θερμότερο (ή λιγότερο αποστειρωμένο) από το λευκό, το οποίο δημιουργεί μια μεγαλύτερη αίσθηση της άνεσης, διατηρώντας παράλληλα μινιμαλισμό.
Μπορείτε να χρησιμοποιήσετε το ελεφαντόδοντο αντί του λευκού για να μαλακώσει την αντίθεση μεταξύ αυτού και τα χρώματα πιο σκούρα. Για παράδειγμα, η περιοχή Τέχνη στο My Coffee Τα στοιχεία καφέ-πορτοκαλί τοποθετούνται σε φόντο ιβουάρ (η οποία φαίνεται γκριζωπό) που διατηρεί μια αίσθηση ζεστασιάς.
χρωματικό φάσμα
Κάθε περιοχή έχει μια ποικιλία χρωμάτων, στην οποία τα βασικά χρώματα που χρησιμοποιούνται για να καλύψει ένα μεγαλύτερο χώρο. Όπως είπαμε και πριν, η χρήση αυτών των χρωμάτων επηρεάζει το μυαλό και τη διάθεση κυρίως υποσυνείδητα. Έτσι, να επιλέξουν προσεκτικά.
Παρά το γεγονός ότι υπάρχουν πολλοί τρόποι για να συνδυάσει τα χρώματα, θα επικεντρωθούμε στις τρεις πιο επιτυχημένες και συχνά χρησιμοποιούνται.
Τριάδα (τριπλό αρμονία τρίγωνο)
Τριάδα - το κύριο και πιο ισορροπημένο σύστημα των τριών χρωμάτων. Χρησιμοποιεί συντονισμό και την προσθήκη των χρωμάτων, αλλά υπάρχει μια σύνθετη Αντίθετα, λόγω του τι είναι η τριάδα είναι η πιο αξιόπιστη σειρά.
Σε μια ρόδα χρώματος των 12 χρωμάτων, επιλέξτε οποιαδήποτε τρεις, που βρίσκεται σε 120 μοίρες μεταξύ τους: ένα χρώμα για το κύριο υπόβαθρο και δύο για το περιεχόμενο και την μπάρα πλοήγησης.
Διπλό συμπληρωματικό σύστημα
Αυτή η περιοχή είναι πιο δύσκολο να εφαρμοστεί, αλλά μπορεί να είναι οικονομικά αποδοτική λύση. Θα χρησιμοποιηθεί για τέσσερα χρώματα: δύο αντιθέσεις και δύο επιπλέον.
Δείτε πώς η σελίδα μοιάζει εντυπωσιακά Φλόριντα άνθηση, με βάση ένα τέτοιο σύστημα. Κόκκινο και πράσινο χρώμα αντίθεση με τα φυτά και τα τμήματα του κειμένου, και μπλε φόντο και πορτοκαλί έρημο ολοκληρώσει αποτελεσματικά την εικόνα.
Τα ανάλογα (διαδοχική σύστημα)
Gamma παρόμοια χρώματα χρησιμοποιεί κυρίως συμπληρωματικά χρώματα. Αυτό επιτρέπει πιο ξεκάθαρα τονίζουν κάποιες ιδιότητες και να προκαλέσει ορισμένα συναισθήματα.
Για παράδειγμα, ένας συνδυασμός του κόκκινου, πορτοκαλί και κίτρινο ανταύγειες το σφρίγος και ζωτικότητα. Η χρήση αυτής της κλίμακας είναι πολύ απλή, αλλά είναι δύσκολο να επιλέξουν ποιο χρώμα θα συμπεριληφθούν στο συνδυασμό. Η επίδρασή τους θα είναι υπερβολικές, γι 'αυτό δεν μπορεί να είναι λάθος.
Για παράδειγμα, η χρήση του μπλε, τιρκουάζ και πράσινο χρώμα στο σχεδιασμό του χώρου Blinksale Δημιούργησε μια ατμόσφαιρα γαλήνης και ηρεμίας. Παρατηρήστε πως το κίτρινο χρώμα που χρησιμοποιείται για να τονίσει σημαντικά σημεία.
Αυτό είναι μόνο τα βασικά της θεωρίας χρώματος, το οποίο μπορεί να σας βοηθήσει να δημιουργήσετε ένα εντυπωσιακό έθιμο σχεδιασμό, και δεν υπάρχει όριο στο πόσο μακριά μπορείτε να πάτε σε σχέση με τα χρώματα στο χώρο σας.
Εργαλεία βοηθητικά για να επιλέξετε ένα χρώμα
Ευτυχώς, υπάρχουν πολλά εργαλεία που βοηθούν να φέρει θεωρία χρώματος στην πράξη. Δοκιμάστε αυτές τις παλέτες δεν πρέπει να ξεκινήσει από το μηδέν στη δημιουργία του:
- Adobe Color CC, Παλαιότερα γνωστή ως το Adobe Kuler. Αυτό είναι ένα από τα πιο αξιόπιστα εργαλεία στην επιλογή των χρωμάτων.
- Paletton. Αν χρειάζεστε ένα εργαλείο απλά για γρήγορη επιλογή χρώματος, Paletton είναι τέλεια.
- Επίπεδη UI επιλογέα χρωμάτων. Το τέλειο εργαλείο για να επιλέξετε τα χρώματα διεπαφή χρήστη.
Και αν τα μέσα αυτά δεν σας ταιριάζει, εδώ είναι ένα άλλο 28 sites με παλέτες και διάφορα εργαλεία για την επιλογή των χρωμάτων.
Μια άμεση σχέση μεταξύ των χρωμάτων και των συναισθημάτων
Θυμηθείτε, οι χρήστες σπάνια ειδοποίηση και να εκτιμήσουν το χρώμα του φόντου, μπάρα πλοήγησης, επιμέρους τμήματα, αλλά αυτό δεν σημαίνει ότι το χρώμα δεν επηρεάζεται από αυτές. Ακριβώς αυτό συμβαίνει υποσυνείδητα.
Ο χρήστης αντιμετωπίσετε οποιοδήποτε συναίσθημα, είναι η σχέση με την ιστοσελίδα ή το εμπορικό σήμα, καθιστά ορισμένες ενέργειες: μετακινηθείτε προς τα κάτω για να κάνετε κλικ στα κουμπιά που προτροπή για δράση, ή, αντίθετα, δεν παρατηρήσετε τους. Και το χρώμα παίζει σε όλο αυτό το τεράστιο ρόλο.
Αν έχετε τη συμβουλή σας σχετικά με τη χρήση των χρωμάτων στο web design, παρακαλώ μερίδιο στα σχόλια.