Χρωματικά χαρακτηριστικά σε συστήματα σχεδίασης

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

Μέρος 1: Ορισμός χρωμάτων

Ποια χρώματα πρέπει να συμπεριλάβει

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

  1. Χρώματα UI - Τα χρώματα UI ισχύουν για τις βασικές πτυχές της διεπαφής σας: κουμπιά, κείμενο και εισροές. Θέλετε να βεβαιωθείτε ότι έχετε πρόσβαση στα κατάλληλα χρώματα δράσης, τα χρώματα του ποντικιού και τα άλλα χρώματα των διεπαφών που απαιτούνται για την κατασκευή των στοιχείων σας και την καθοδήγηση των χρηστών για τους στόχους των προϊόντων σας.
  2. Σημασιολογικά χρώματα - Μερικές φορές τα χρώματα πρέπει να σημαίνουν κάτι. Θα θελήσετε να βεβαιωθείτε ότι έχετε συμπεριλάβει χρώματα που μπορούν να χρησιμοποιηθούν για επιτυχία, προειδοποίηση, κίνδυνο και άλλες περιπτώσεις όπου η χρήση ενός συγκεκριμένου χρώματος έχει μεγαλύτερη σημασία από το να είναι μοναδικό ή επί της μάρκας.
  3. Χρώματα διάταξης - Αυτά είναι ο πυρήνας της παλέτας σας και χρησιμοποιούνται για τη διάταξη σελίδας: δοχεία, σύνορα, κάρτες, κανόνες, κεφαλίδες, υποσέλιδα και πλευρικές γραμμές. Για τα περισσότερα προϊόντα είναι μια πανέμορφη παλέτα με 37 αποχρώσεις του γκρι σχιστόλιθου.

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

Αυτές οι έννοιες χρώματος μπορούν όλες να αλληλεπικαλύπτονται στους τόνους (και εμείς θα προτείνουμε να κάνουν για να διατηρήσουν το σύστημα διαχειρίσιμο). Θα πρέπει να είστε σε θέση να αντιμετωπίσετε κάθε μία από αυτές τις πτυχές του προϊόντος σας κατά τρόπο ουσιαστικό με τα χρώματα που ορίζονται στο σύστημά σας. Στα συστήματα Scenery-produced, ορίζουμε τουλάχιστον 8-12 χρώματα πυρήνα για να κάνουμε καθένα από αυτές τις εργασίες καλά.

Μόλις μάθετε ποια χρώματα χρειάζεται το σύστημά σας, μπορείτε να προχωρήσετε σε ένα πολύ πιο αστείο θέμα: αποχρώσεις και αποχρώσεις - ταρακούτα.

Χρωματικές παραλλαγές

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

Απάντηση: τόσο λίγα όσο χρειάζεται.

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

Στο μεγαλύτερο έργο μας συστήματα εδώ στο σκηνικό ξεκινήσαμε speccing ένα σύνολο από 10 χρώματα διάταξης, συμπεριλαμβανομένων των λευκών. Σχεδόν δύο χρόνια αργότερα, πραγματοποιήσαμε έλεγχο χρώματος και μάθαμε κάτι ενδιαφέρον: δεν χρησιμοποιήσαμε ποτέ τέσσερις από τους τόνους. Είχαμε 5 σχεδιαστές χωριστά περιστρέφοντας τα εξαρτήματα για ένα επιχειρησιακό σύστημα που χρησιμοποιείται από πάνω από 3 δωδεκάδες εσωτερικούς και εξωτερικούς μηχανικούς επί σειρά ετών και δεν χρησιμοποιούσε ποτέ πάνω από το 33% των χρωματικών μας μεταβλητών. Αφήστε το να βυθιστεί.

Ο λόγος ήταν πραγματικά απλός όταν το σκεφτήκαμε για λίγο. Ήταν μόνο η αντίθεση.

Οι αχρησιμοποίητοι ήχοι σημειώνονται με τρομακτικό X.

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

Στο The Scenery, έχουμε εξευγενίσει τα περισσότερα από τα δικά μας συστήματα μέχρι ένα βασικό χρώμα, 3-4 ελαφρύτερες αποχρώσεις και 2 αποχρώσεις. Οι αποχρώσεις βοηθούν για πράγματα όπως οι αλληλεπιδράσεις και τα σύνορα του hover και οι αποχρώσεις είναι χρήσιμες ως χρώματα φόντου και αντίστροφα χρώματα.

Τώρα λοιπόν που γνωρίζουμε ποια χρώματα και πόσα χρειάζονται, πώς μπορούμε να τα συνδυάσουμε με τις πραγματικές τιμές hex;

Μέρος 2: Παραγωγή χρωμάτων

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

Δημιουργήθηκε Sass / CSS

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

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

Πλεονεκτήματα

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

Μειονεκτήματα

  • Έλλειψη Ελέγχου - Ο Κώδικας μπορεί να δημιουργήσει κάποια περίεργα χρώματα. Εάν έχετε δοκιμάσει ποτέ να φωτίσετε ορισμένες αποχρώσεις του πράσινου χρησιμοποιώντας το Sass, ξέρετε πολύ καλά για τι μιλάω. Μαζί με αυτό, ορισμένα χρώματα μπορούν να μετατοπίσουν τους τόνους δραματικά καθώς γίνονται ελαφρύτερα.
  • Χρωματική παραμόρφωση - Οι γεννήτριες χρωμάτων είναι πάντα προκατειλημμένες προς τους τόνους που έχουν κατασκευαστεί για να δουλέψουν. Ας υποθέσουμε ότι χτίζετε μια γεννήτρια που παίρνει χρώμα και δημιουργεί 5 αποχρώσεις φωτίζοντάς τα χρησιμοποιώντας το Sass. Εάν το χρώμα εισόδου είναι πιο σκούρο, θα μπορούσατε να καταλήξετε με 5 χρησιμοποιήσιμες χρωματικές αποχρώσεις με βάση το πρωτότυπο. Αν το χρώμα εισόδου αλλάξει σε ανοιχτό μωβ, θα μπορούσατε να καταλήξετε με μία μόνο χρησιμοποιήσιμη απόχρωση από το 5. Ή καθόλου.

Διάλεκτος

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

Πλεονεκτήματα

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

Μειονεκτήματα

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

Ενώ αρπάζετε τις εκατοντάδες τιμές σε χρωματικούς τόνους με το χέρι, μπορεί να είναι πολύτιμο να έχετε κατά νου δύο κόλπα:

  1. Βεβαιωθείτε ότι χρησιμοποιείτε μια καμπύλη διαδρομή μέσα από τονικό εύρος. Μια ευθεία γραμμή σπάνια διατηρεί έναν ποιοτικό κορεσμό χρωμάτων σε όλες τις παραλλαγές του χρώματος.
  2. Παρακολουθήστε και διορθώστε τις χρωματικές μετατοπίσεις καθώς οι ήχοι γίνονται πιο ανοιχτοί Πολλά φαινομενικά ουδέτερα γκρι μπορούν να αλλάξουν σε άλλα χρώματα (μωβ, καθένας;) όταν γίνονται ελαφρύτερα.
Η μετακίνηση των τόνων σε μια καμπύλη μπορεί να διατηρήσει τον κορεσμό άθικτο και να εξαλείψει τους λασπώδεις τόνους.Οι σημερινές αποτυχίες χρώματος δείχνουν αποχρώσεις, αποχρώσεις και τιμές hex.

Hybrid-Τι κάνουμε τώρα

Και οι δύο αυτές μέθοδοι έχουν τα πλεονεκτήματα και τα μειονεκτήματά τους όταν χρησιμοποιούνται ως μοναδικό μέσο παραγωγής χρωμάτων. Μπορείτε να πάρετε περισσότερη έκρηξη για το buck σας όταν τα χρησιμοποιείτε ταυτόχρονα για να δημιουργήσετε προσαρμοσμένες παλέτες με βάση τις παραγόμενες τιμές. Πως? Θα σας πω!

  1. Επιλέξτε χρώματα συστήματος πυρήνα.
  2. Καθορίστε τις στάσεις που είναι απαραίτητες για τις τονοειδείς παραλλαγές (τόσο μικρότερο είναι το καλύτερο).
  3. Δημιουργήστε χρώματα χρησιμοποιώντας ένα εργαλείο για να διατηρήσετε τη συνέπεια και να δοκιμάσετε την προσβασιμότητα κατά μήκος του δρόμου.
  4. Επεξεργαστείτε χρώματα όπως είναι απαραίτητο για να αντισταθμίσετε τις μετατοπίσεις και να διατηρήσετε τον τόνο και τον κορεσμό σε ένα φάσμα χρωμάτων.

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

Μέρος 3: Ονομασία χρωμάτων

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

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

  1. Είναι κατανοητό από τους προγραμματιστές και τους σχεδιαστές. Στα πρώτα συστήματα προσπαθήσαμε να ονομάσουμε χρώματα που έκαναν πάρα πολλά πράγματα όπως το $ primary και το $ δευτεροβάθμιο αλλά γρήγορα συνειδητοποίησα ότι αυτά τα ονόματα δεν σήμαιναν τίποτα. Δεν θα μπορούσαν να βοηθήσουν τους σχεδιαστές να τους εφαρμόσουν αποτελεσματικά. "Είναι αυτό το κουμπί πρωταρχικό ή έμφαση ή σημασιολογία;" Αυτοί οι τύποι ονομάτων συγχέουν επίσης τους προγραμματιστές που προσπαθούν να βρουν το σωστό χρώμα για να χαρτογραφηθούν στα διαμερίσματα σχεδιασμού που έλαβαν.
  2. Δημιουργεί ένα απλό και επαναχρησιμοποιήσιμο πνευματικό μοντέλο για την αλλαγή των στάσεων. Αυτό είναι όπου πιο εδραιωμένα συστήματα χρωμάτων με μεταβλητά ονόματα που βασίζονται σε ελαφρότητα παραπαίουν. Ο καλύτερος τρόπος για να δοκιμάσετε αυτό είναι να θέσετε την ερώτηση "Τι μεταβλητές έρχονται πριν και μετά από αυτό;" Αν έχετε σταματήσει με ονόματα όπως $ χρώμα - 10, $ χρώμα - 20 τότε το μοντέλο σας έχει νόημα, αλλά πρέπει να έχετε τεράστιο ποσό στάσεων για τη διατήρηση του μοντέλου. Επίσης, εάν ρίχνετε μισοτονικούς τόνους, όπως το Color Design του $ - 05, δημιουργείτε απομακρυσμένα μοτίβα που οι άνθρωποι που χρησιμοποιούν το σύστημά σας πρέπει να μάθουν και να προβλέψουν.

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

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

Πόροι

  • Palx από τον Brent Jackson
  • Έγχρωμο Εργαλείο από την Google
  • Βοηθός κλίμακας Chroma.js
  • HexNaw από το τοπίο
  • Για περισσότερες πληροφορίες, ανατρέξτε στην ενότητα Παλέτες χρωμάτων και χρωμάτων του designresources.party της Jessica Paoli

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

- Είμαστε το τοπίο