Σύστημα Σχεδίασης Sprint 2: Μια παλέτα χρωμάτων για να τις διαχειριστείτε όλα

Μια σύντομη εισαγωγή: Είμαι ο Marcin: πρώην διευθυντής της UX και πλέον συνιδρυτής και διευθύνων σύμβουλος της UXPin - της πλατφόρμας σχεδιασμού πλήρους στοίβας UX. Σε αυτή τη σειρά μηνυμάτων, αναφέρομαι στο ταξίδι της UXPin για τη δημιουργία του δικού μας συστήματος σχεδιασμού. Στην πρώτη θέση, συζήτησα τα βασικά στοιχεία των συστημάτων σχεδιασμού (γιατί; τι;). Η δεύτερη θέση επικεντρώθηκε στη δημιουργία του αποθέματος διεπαφών. Σήμερα, πρόκειται να συζητήσουμε την πρώτη πραγματική μάχη που έπρεπε να περάσει η νεοσύστατη ομάδα σχεδιαστικών λειτουργιών μας. Η μάχη ενός ενιαίου χρώματος μοτίβο.

Έτσι, εδώ είναι όλα τα βήματα που οδηγούν σε αυτό το σημείο:

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

Τώρα πρέπει να αντιμετωπίσουμε το πρόβλημα της παλέτας χρωμάτων μας.

Τα χρώματα έχουν σημασία

Γιατί;

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

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

Το αποτέλεσμα του προγράμματος sprint - λίστα των 116 μεταβλητών χρώματος

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

Η μελέτη "Ο αντίκτυπος του χρώματος στο μάρκετινγκ" (που αναφέρει ο Jonathan Z. White, "Σχεδιασμός σε χρώμα"), δείχνει ότι μέχρι το 90% των αποφάσεων άμεσης αγοράς βασίζονται αποκλειστικά στην αντίληψη των χρωμάτων. Ενώ οι αποφάσεις αγοράς δεν μπορούν να εξισωθούν με την εμπειρία του χρήστη, η μελέτη δείχνει τη σημασία του χρώματος για τη γενική μας γνώση. Επιπλέον, οι εσωτερικές σχέσεις μεταξύ των χρωμάτων μπορούν να κάνουν ή να σπάσουν την εμπειρία. Έτσι εάν δεν υπάρχει αρκετή αντίθεση μεταξύ του κειμένου και του φόντου, οι χρήστες θα έχουν έναν σκληρό χρόνο χρησιμοποιώντας ένα προϊόν. Τέλος, υπάρχει ένα πολιτιστικό νόημα που μπορεί να οδηγήσει σε απροσδόκητες συνέπειες (π.χ. το λευκό χρώμα σημαίνει καθαρότητα στις δυτικές χώρες, αλλά ο θάνατος και το πένθος στην Κίνα και την Ιαπωνία).

Δεν είναι όλα αυτά.

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

Μια παλέτα χρωμάτων πρέπει να είναι:

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

Φυσικά, δεν είδαμε τι έρχεται ...

Απρόβλεπτες προκλήσεις χρώματος

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

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

Και πρέπει να κάνουμε όλα αυτά χωρίς να σπάσουμε το UXPin interface. Ακούγεται εύκολο; Όχι πραγματικά.

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

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

UXPin σε λειτουργία φωτόςUXPin στη σκοτεινή λειτουργία

Για την επίλυση αυτού του ζητήματος, χρειαζόμασταν:

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

Αλλά πρώτα, έπρεπε να μάθουμε περισσότερα για το θηρίο που έχουμε να κάνουμε.

Έρευνα χρώματος

Το πρώτο μέρος της έρευνας ολοκληρώθηκε κατά τη διάρκεια της φάσης απογραφής διεπαφών.

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

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

Για να καταστήσει εύκολα τα αποτελέσματά του, απλά άφησε σχόλια στο αποθεματικό διεπαφής μας:

Στατιστικά στοιχεία χρήσης χρώματος σε UXPin UI

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

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

Πρωτογενή χρώματα

Οπλισμένοι με τα δεδομένα, εντοπίσαμε γρήγορα όλα τα κύρια χρώματα:

  • # 006CFF Μπλε (κύριο χρώμα της μάρκας)
  • # 666666 Γκρι
  • # FF003C Κόκκινο (χρώμα σφάλματος & κινδύνου)
  • # 63ad0e Πράσινο (χρώμα επιτυχίας)
  • # ffc000 Πορτοκαλί (προειδοποιητικό χρώμα)
  • # 7800ff Violet
  • # ff56b1 Ροζ
  • # 00ffde Νομισματοκοπείο

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

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

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

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

Ακεραιότητες που έχουν δημιουργηθεί με λειτουργίες

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

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

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

Έτσι, πήραμε αντ 'αυτού την υπολογισμένη διαδρομή.

Ευτυχώς, οι προεπεξεργαστές CSS έχουν έναν πολύ εύκολο τρόπο τροποποίησης των χρωμάτων. Οι λειτουργίες του Less Sass μπορούν να δημιουργήσουν διαφορετικό χρώμα (με δεδομένο ποσοστό) βάσει του παρεχόμενου χρώματος. Για παράδειγμα, εάν θέλετε να κάνετε το μπλε χρώμα, ας πούμε το # 006CFF, 10% πιο σκούρο, μπορείτε απλά να χρησιμοποιήσετε τη λειτουργία Λιγότερο σκοτεινή (ή παρόμοια λειτουργία Sass σκούρο), όπως παρακάτω:

σκούρο (# 006CFF, 10%) // Επιστρέφει # 0056cc

Αυτή η λειτουργία επιστρέφει μια ελαφρώς πιο σκούρα απόχρωση του μπλε (# 0056cc).

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

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

  • Sass και λιγότερο χρησιμοποιούν τη μορφή χρώματος HSL για να χειριστούν, για παράδειγμα, τη φωτεινότητα, των χρωμάτων
  • Το σκίτσο και το PS βασίζονται σε μορφή HSB

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

Το σύστημα σχεδιασμού μας θα ξεπεράσει αυτήν την πρόκληση καθορίζοντας την παλέτα χρωμάτων και αποθηκεύοντάς την σε χρωματικά δείγματα στο Sketch, Photoshop και UXPin. Αλλά πριν φτάσουμε εκεί, χρειαζόμασταν μια απλή αριθμομηχανή για τους σχεδιαστές να δουλεύουν δυναμικά με τις λειτουργίες Sass και Less.

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

Η εσωτερική έγχρωμη αριθμομηχανή μας - Ηλεκτρονική εφαρμογή που προσομοιώνει τις λειτουργίες Sass και Less

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

Ένα εξαιρετικά απλό εργαλείο που αποδείχθηκε απαραίτητο για τη διαδικασία.

Ορίζοντας τόνους χωρίς να σπάσει τα πράγματα

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

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

Ένα υπολογιστικό φύλλο που περιλαμβάνει όλες τις νέες και παλιές μεταβλητές χρώματος

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

Συμβάσεις ονοματολογίας

Ήμασταν πλησιέστερα στο να έχουμε μια ολόκληρη παλέτα ορισμένη και έτοιμη για εφαρμογή. Χρειαζόμασταν μόνο μια σύμβαση ονομασίας.

Οι τρέχουσες μεταβλητές χρώματος ήταν ένοχες για όλες τις αμαρτίες μεταβλητής ονομασίας:

  • Μη αναγνώσιμη καμήλα
  • Μπερδεμένη διαβάθμιση των επίθετων (lightGray, mediumGray, darkGray, darkerGray)
  • Ασαφή λειτουργικά ονόματα (π.χ. @colorGraySeparatorBorder).

Δημοφιλείς λύσεις που δεν λειτουργούσαν

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

1. Φυσικά ονόματα χρωμάτων ή αφηρημένα ονόματα χρωμάτων

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

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

2. Λειτουργικά ονόματα

Φυσικά, άλλοι προσπαθούσαν καθαρά λειτουργικά ονόματα που περιγράφουν το χρώμα από τη θέση στο UI.

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

Χρειαζόμασταν μια πιο καθολική σύμβαση ονομασίας.

Πλαίσιο ονοματοδοσίας χρωμάτων φωτισμού Salesforce

3. Ονόματα βάσει αριθμών

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

Χαρακτηριστικό ονομασίας χρωμάτων IBM Carbon

Η προσαρμοσμένη λύση που λειτούργησε

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

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

Τα πρωταρχικά μας χρώματα έγιναν:

  • @ base-blue: # 006CFF
  • @ base-gray: # 666666
  • @ base-red: # FF003C
  • @ base-green: # 63ad0e
  • @ βάση-πορτοκαλί: # ffc000
  • @ βασικό-ιώδες: # 7800ff
  • @ βασική-ροζ: # ff56b1
  • @ μέντα βάσης: # 00ffde

Για τους τόνους, αποφασίσαμε να χρησιμοποιήσουμε τα ονόματα των κύριων χρωμάτων, τα ονόματα των λειτουργιών που παράγουν το χρώμα και ένα διάστημα αλλαγής. Για παράδειγμα: ένα χρώμα 25% ελαφρύτερο από το βασικό μας γκρι, έγινε @ γκρι-ανοιχτό-25. Ένα χρώμα 15% πιο σκούρο από το μπλε της βάσης μας έγινε @ blue-dark-15.

Επειδή η σύμβαση ονομασίας λειτούργησε καλά, την επισημοποιήσαμε με ένα διάγραμμα:

Διάγραμμα παλέτας χρωμάτων UXPin

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

Δεν θα μπορούσαμε να είναι πιο λάθος.

Η επική μάχη των αποχρώσεων του γκρι

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

Η παλέτα μας καταστράφηκε ολοσχερώς.

Ο λόγος ήταν πολύ απλός - διαφώνησαν με το κυρίως χρώμα μας (# 666666). Θεώρησαν ότι ήταν πολύ ελαφρύ, παρόλο που χρησιμοποιείται συχνά στο UI.

Σχεδίαζαν να εξαλείψουν αυτή τη σκιά του γκρίζου. Αντ 'αυτού, θα αντλούσαν το γκρι είτε από # 444444 είτε # f3f3f3 (αν και και οι δύο δεν χρησιμοποιήθηκαν καθόλου σε οποιαδήποτε τρέχουσα εργασία).

Ήμασταν απογοητευμένοι, αλλά είναι όλοι μέρος της διαδικασίας.

Αφού προσπαθήσαμε και αποτύχαμε με άλλα δύο χρώματα, καταλήξαμε να ορίζουμε δύο αποχρώσεις του γκρίζου στα πρωταρχικά μας χρώματα - σκούρα - # 444444 (στην παλέτα μας που ονομάζεται @ base-gray) και το φως - # f3f3f3 (που ονομάζεται @ base-silver). Η ομάδα του γραφικού σχεδιασμού το αγάπησε.

Για να επικυρώσουμε την απόφαση, δείξαμε την παλέτα στους σχεδιαστές έξω από την εταιρεία μας. Η Jina Bolton (jina anne) από την Salesforce επεσήμανε μια ασυνέπεια στην ονομασία μεταξύ των βασικών χρωμάτων και των τόνων (ευχαριστώ Jina!) Και πρότεινε να χρησιμοποιήσετε επίθημα αντί για προθέματα για τα ονόματα των βασικών χρωμάτων. Ήταν μια καθαρή αποκάλυψη. Αλλάξαμε βάση μπλε, σε μπλε-βάση και τελικά άρχισε να ταιριάζει καλά με τα ονόματα των χρωμάτων μας, π.χ. μπλε-φωτίζουν-15.

Εδώ είναι το τελικό αποτέλεσμα:

Η τελική έκδοση της UXPin Palette

Δοκιμάζοντας την παλέτα μας

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

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

Προσιτότητα

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

Για να διευκολύνω τη διάδοση αυτής της γνώσης, δημιούργησα «ζεύγη αντίθεσης», τα οποία δείχνουν σαφώς ποια ζεύγη περάσουν τις δοκιμές WCAG:

Η δημιουργία τέτοιου είδους τεκμηρίωσης είναι καθαρή χειρωνακτική εργασία (χρησιμοποίησα https://heiswayi.nrird.com/color-contrast-checker/#fg=FFF5F3,bg=BB0B2E) και παίρνει πολύ χρόνο.

Ακόμα αξίζει τον κόπο, δεδομένου ότι η προσβασιμότητα είναι μια απαίτηση.

Τελικό Λόγο

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

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

Ψάχνετε για όλα τα άρθρα αυτής της σειράς; Εδώ είναι:

  • Συστήματα Σχεδίασης Sprint 0: Το Silver Bullet της Ανάπτυξης Προϊόντων.
  • Συστήματα Σχεδίασης Sprint 1: Το Αποθέμα Διεπαφής
  • Σύστημα Σχεδίασης Sprint 2: Μια παλέτα χρωμάτων για να τις διαχειριστείτε όλα
  • Σύστημα Σχεδίασης Sprint 3: Διαχείριση των Βασικών
  • Σύστημα Σχεδίασης Sprint 4: Αρχές σχεδιασμού
  • Σύστημα Σχεδίασης Sprint 5: Διαχείριση Τυπογραφίας
  • Σύστημα Σχεδίασης Sprint 6: Τα γρηγορότερα εικονίδια στη Γη

Και βρίσκεστε σε πιο εμπεριστατωμένες σκέψεις στο Design Systems:

  • Το σύστημα ελάχιστου βιώσιμου σχεδιασμού
  • Τα συστήματα σχεδιασμού είναι μια γλώσσα. Και αυτό αλλάζει συνεχώς την ανάπτυξη λογισμικού
Εγγραφείτε τώρα: https://www.uxpin.com/design-systems-early-access