Die grundlegende Farbtheorie sagt uns, dass eine Farbpalette aus Grün, Gelb und Rot lächerlich hässlich ist, es sind Farben, die aufeinander treffen. Wenn wir Grün als herausragende Farbe nehmen, sind die dazugehörigen analogen Farben Rot und Blau - in einem solchen Farbschema ist kein Platz für Gelb.
Gibt es also eine Möglichkeit, Grün, Gelb und Rot in einem Farbschema zu kombinieren, ohne die Benutzer zu blenden?
Als Beispiel habe ich eine Seite auf einer Website, auf der diese Farben verwendet werden, um das erforderliche Niveau einer Fertigkeit für ein Projekt anhand des tatsächlichen Niveaus dieser Fertigkeit eines bestimmten Benutzers zu messen. Grün erfüllt oder übertrifft dieses Niveau, Gelb zeigt einen leichten Mangel an Erwartungen an und Rot bedeutet, dass sie entweder nicht gut genug sind oder eine bestimmte Fähigkeit überhaupt nicht haben.
Hier ist mein Beispiel (ignorieren Sie die orangefarbenen und grauen Felder um den Schriftzug, sie haben nichts miteinander zu tun).
Wir können uns alle sicher einig sein, dass dies ziemlich schrecklich aussieht, aber es ist dieses Format, an das ich mich halten muss, das ganze Grün-Rot-Gelb-Ding. : /
Als Programmierer im Gegensatz zu einem Grafik- / Webdesigner ist mein Verständnis von Farbtheorie und Benutzererfahrung begrenzt.
Um es auf den Punkt zu bringen, meine Frage ist: Wie kann man ein traditionell kollidierendes Farbschema erstellen, ohne die Benutzererfahrung zu beeinträchtigen?
(Wenn meine Frage ungeeignet ist, werde ich sie entfernen. Ich war mir nicht sicher, wo ich sie stellen sollte. Sie schien am besten geeignet zu sein.)
quelle
Antworten:
Grün, Gelb und Rot können nicht zusammenpassen? Die Äthiopier müssen schrecklich beleidigt werden. Google für grüne, gelbe und rote Bilder, und ich denke, Sie finden mehrere attraktive Beispiele (zusammen mit hässlichen).
Wie gut ein Satz von Farben zusammenpasst, hängt von den genauen Farbkoordinaten und den relativen Positionen, Formen, Größen der farbigen Objekte und dem gewünschten Effekt ab (z. B. Beruhigen versus Aufregend, Spaß versus Ernst, Fett versus Subtil) ). Ich habe keine festen Regeln für Sie, aber hier sind einige Dinge, mit denen Sie experimentieren können.
Kompromiss zwischen Größensättigung
Um einen Störeffekt zu vermeiden (vorausgesetzt, Sie möchten das nicht), sollte die Größe des farbigen Objekts umgekehrt proportional zu seiner Farbsättigung sein. Ihr Beispiel hatte ziemlich hohe Sättigungen. Versuchen Sie also entweder niedrigere Farbsättigungen (z. B. Pastellfarben) oder färben Sie etwas anderes als den Hintergrund. Sie können beispielsweise den Text einfärben und den Hintergrund neutral lassen oder eine kleine Form oder ein kleines Symbol neben dem Text einfärben. Letzteres bietet die Möglichkeit, mithilfe der Form die Fähigkeitsübereinstimmung für Zugänglichkeits- und Schwarzweißdruckzwecke redundant zu codieren (grünes Häkchen für Erfüllt, gelbes Ausrufezeichen für Fehlbetrag und rotes Symbol „Nicht eingeben“ für Nicht gut genug). .
Abstand
Wie Farben aussehen, hängt von ihrer Nähe zueinander ab. Farben als Kollisionen, wenn benachbarte Farben mit einem kleinen Abstand in Ordnung aussehen. Versuchen Sie, eine neutrale Umrandung um jede Zelle zu setzen, um die Farben stärker zu trennen (wie in Ihren Überschriften), es sei denn, gleichfarbige Zellen, die zusammengefügt werden, haben eine Bedeutung, um als einzelnes Objekt wahrgenommen zu werden. Probieren Sie verschiedene Stärken aus. Versuchen Sie, jede Zelle durch weiße Ränder zu trennen , um einen gekachelten Look zu erzielen.
Muster
Wie gut Farben zusammenpassen, hängt auch vom Muster der Farben ab. Stellen Sie daher sicher, dass Sie Modelle mit typischen Proportionen und Positionen der Farben bewerten. Wenn zum Beispiel die meiste Zeit alles grün ist und es für Benutzer am wichtigsten ist, sich um „Glanzlichter“ von Gelb und Rot zu kümmern, wählen Sie ein Grün mit einem guten Hintergrund (z. B. niedrige Sättigung, Licht) sowie Gelb und Rot scheint „oben“ zu sitzen (z. B. höhere Sättigung, dunkel). Bedenken Sie, dass die Ästhetik des Musters auch den Benutzer kommunizieren und motivieren kann. Wenn der Benutzer über besonders ungeeignete oder unausgewogene Fähigkeiten verfügt, möchten Sie möglicherweise ein hässliches Muster. Das attraktivste Muster sollte dem Zustand entsprechen, der für den Benutzer am vorteilhaftesten ist.
Benutzerfreundlichkeit
Ihre Frage betrifft die Ästhetik, aber die Wahl der Farbcodierung hat auch erhebliche Auswirkungen auf die Benutzerfreundlichkeit. Ihre Farbauswahl sollte sein:
Optisch voneinander verschieden, insbesondere wenn es unter verschlechterten visuellen Bedingungen verwendet wird (z. B. auf einem Mobiltelefon im Sonnenlicht).
Sorgen Sie für einen guten Kontrast zum Hintergrund (im Vordergrund) oder zum Vordergrund (im Hintergrund). Zum Beispiel ist schwarzer Text auf Rot nicht so gut. Im Allgemeinen benötigen Vordergrund und Hintergrund unterschiedliche Helligkeitsstufen.
Stellen Sie sicher, dass die Farben mit dem Code übereinstimmen. Zum Beispiel sollten Dinge, auf die der Benutzer achten sollte, mehr Kontrast zum Hintergrund und anderen Farben bieten.
Bieten Sie Zugänglichkeit und Bedruckbarkeit, wobei jede Farbe auch einen anderen Dunkelheitsgrad aufweist, wobei die Dunkelheit auf die Ränge skaliert wird (Rot mehr als Gelb mehr als Grün). Machen Sie Ihr Grün etwas bläulich und / oder Ihr Rot etwas orange, damit rot-grüne farbenblinde Benutzer (die häufigste Art der Farbenblindheit) immer noch Farbunterschiede erkennen können.
Verwenden Sie die Farbcodierung nur für eine Variable. Ich weiß nicht, wofür Sie Grau und Orange verwenden, aber es kann zu Verwirrung führen und es den Benutzern erschweren, die Farben Rot, Grün und Gelb zu verwenden. Immer wenn Sie mehr als drei Farben haben, ist es schwierig, die Dinge nutzbar zu halten. Suchen Sie nach einer anderen Möglichkeit, um den grauen und orangefarbenen Code zu codieren (z. B. Schriftgröße oder -gewicht oder gestrichelte Linien für die Zellränder; siehe Einfügen des G in die GUI ).
In einem Projekt, an dem ich gearbeitet habe, waren die Farben # E00000, # FF8400 und # C0FFE0 (kein sehr gelbes Gelb, aber es hat immer noch funktioniert).
Ich habe mehr über die Auswahl von Farbcodes zu erfahren, einschließlich der Berechnung des Farb- und Helligkeitskontrasts unter Brechen des Farbcodes .
quelle
#C0FFEEfür den Hex-Code haben können. :)Versuchen Sie, Pastellfarben anstelle der tatsächlichen RGY-Farben zu verwenden. Mit der reduzierten Sättigung sollte es einfacher sein, die Informationen zu betrachten.
Pastellrot Hex: # F7977A RGB: 246-150-121
Pastellgrünes Hex: # 82CA9D RGB: 130-202-156
Pastellgelbes Hex: # FFF79A RGB: 255-247-153
quelle
Ich sehe drei Hauptherausforderungen bei diesen drei Farben.
Ich kann mir nur ein paar Optionen vorstellen, vorausgesetzt, Sie mögen den Pop-Art-Effekt großer Bereiche mit gesättigten Farben nicht. Beide minimieren den Einfluss der Sättigung, indem die Farben ausgeblendet werden.
Hier gibt es noch eine weitere Herausforderung, die nichts mit Ästhetik zu tun hat. Rot wird die beiden anderen Farben überwältigen und die Aufmerksamkeit auf die negativen Markierungen auf der Seite lenken. Wenn das dein Ziel ist, bist du gut. Wenn Sie möchten, dass Ihr Diagramm positiver Natur ist, haben Sie Probleme.
quelle
"Rot", "Gelb", "Grün" lassen viel Raum für Interpretationen, sodass Sie eine gute Chance haben, eine Kombination zu finden, die gut funktioniert.
Für Ihr ästhetisches Problem habe ich Ihre "rote" und "grüne" Farbe genommen und in den Farbmixer gegeben . Dann habe ich pHSL als Farbmodell für das Mischen gewählt. Dies hat den Farbsatz bereits verbessert.
Als nächstes habe ich verschiedene "Rot" und "Grün" ausprobiert, um den Eindruck weiter zu verbessern. Etwas dunkler, gesättigter / kräftiger rot. Ein Grün mit etwas mehr Gelb und höherer Sättigung.
OK, nicht schlecht, aber auch noch nicht fertig.
Beachten Sie bei Ihrem Usability-Problem, dass die Hierarchie von (relativer) Luminanz, Farbton und Sättigung unsere Aufmerksamkeit lenkt. Da Gelb natürlich den höchsten Luminanzwert hat, würden diese Felder unsere Aufmerksamkeit am meisten auf sich ziehen. So importierte ich die Farben in den Farbkonverter für jede Farbe einzeln zwicken. In meinem Beispiel habe ich "gelb" und "grün" gleiche Luminanzwerte angegeben. Eine niedrigere Leuchtdichte für Gelb oder eine höhere Leuchtdichte für Grün schien ästhetisch problematisch.
Ich habe meine Kombination in Photoshop ausprobiert und festgestellt, dass weiße (Abstands-) Ränder einen guten Eindruck hinterlassen. Daher würde ich einen weißen Abstand für die Zellen und höchstens eine dünne schwarze Linie zum Teilen jeder Eintragszeile empfehlen.
Mit den oben genannten Werkzeugen finden Sie möglicherweise eine Farbkombination, die Ihrem persönlichen Geschmack oder Ihren Anforderungen noch besser entspricht (z. B. höhere Sättigung für Grün) ...
quelle
Sie müssen vorsichtig sein, wenn Sie Farben als Hintergrund verwenden, da dies die Lesbarkeit beeinträchtigen und den Benutzer von der Nachricht ablenken kann. dh roter Hintergrund und schwarze Schrift.
Das Konvertieren einer Farbe in Graustufen hilft normalerweise zu verstehen, welche Farben am besten kontrastieren. Wenn Sie also die Rottöne in Graustufen umwandeln, ist die Farbe dunkelgrau. Daher ist eine schlechte Farbe als Hintergrund zu verwenden, wenn Ihre Schrift schwarz ist. Sie müssen eine Farbe auswählen, die Ihnen einen guten Kontrast bietet.
Wenn Sie dem Benutzer jedoch schnell ein Verständnis dafür vermitteln möchten, was Sie tun möchten, empfehle ich, die Zellen leer zu lassen (helle Farbe) und einfach ein kleines Symbol hinzuzufügen, das den Status anzeigt (Quadrat oder 5% oder die mit dem gefüllte Zelle) Farbe)
Auf diese Weise kann der Benutzer den Text ziemlich schnell lesen und die Kategorie sehen, zu der er gehört.
Wenn Sie jedoch Farben kombinieren möchten, empfehle ich Ihnen, das Buch "Farbindex" zu kaufen. Dort finden Sie Tausende von Kombinationen, die gut zusammenpassen, und Sie sparen sich Zeit.
quelle
Wenn Sie die richtigen Farbtöne finden, können Sie Rot, Gelb und Grün zusammen verwenden.
Ich empfehle, einige dieser Websites zu besuchen, auf denen Sie einige gute Kombinationen finden können:
http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search
Oder versuchen Sie, einige davon selbst zu erstellen:
http://colorschemedesigner.com/
Was ich wirklich empfehle, ist nach der Auswahl Ihrer Farbkombination eine andere Person zu fragen, was sie davon hält. Manchmal haben wir nicht genug vom äußeren Aussehen und wir mögen die Farben einfach zusammen, auch wenn sie überhaupt nicht gut sind.
Vergessen Sie nicht, bei der Auswahl der richtigen Farbtöne über Kontrast und Sichtbarkeit von Text nachzudenken.
Ich würde empfehlen, helleres Gelb zu verwenden, da Sie es als ziemlich neutrale Farbe verwenden.
quelle
Hier sind drei Schemata, hoffe es gefällt euch.
quelle