So wählen Sie Farben aus und bestimmen Schattierungen für verschiedene Zustände: Bewegen, Aktiv, Drücken, Deaktivieren

Die Auswahl von Farben für die Benutzeroberfläche kann komplex sein, insbesondere wenn verschiedene Schaltflächenzustände, Schriftarten und andere Elemente der Benutzeroberfläche berücksichtigt werden. In diesem Artikel werde ich meine Methoden und Prinzipien vorstellen, die Ihnen bei der erfolgreichen Auswahl eines Farbschemas für Ihr Projekt helfen werden.

1. Definieren der Primärfarbe

Bei der Gestaltung einer Website ist es oft notwendig, ein Farbschema auszuwählen. Manchmal hat der Kunde bereits eine primäre Markenfarbe. In diesem Fall besteht Ihre Aufgabe darin, zusätzliche Farben und Farbtöne auszuwählen, die die Primärfarbe ergänzen. Neben der Hauptfarbe werden auf der Website weitere Farben für verschiedene Zwecke verwendet, beispielsweise zur Anzeige von Fehlerzuständen, Links, Illustrationen, Symbolen oder zur Verwendung in Grafiken und Dashboards.

2. Farbharmonie nutzen

Um sicherzustellen, dass die Farben gut harmonieren, ist es von Vorteil, verschiedene Farbharmonieschemata zu verwenden, z. B. monochromatisch, komplementär, dreieckig und andere. Sie können dabei helfen, eine harmonische Farbpalette zu schaffen, die die Primärfarbe des Projekts ergänzt. Wir leben derzeit in einer Welt, in der die Technologie rasant voranschreitet und es spezielle Dienste gibt, die ganz einfach ein Farbschema erstellen. Ich verwende zum Beispiel color.adobe.com.

So mache ich es:

eins. Wählen Sie aus der Dropdown-Liste das gewünschte Schema aus.

zwei. Geben Sie in das als Grundfarbe gekennzeichnete Feld den gewünschten Farbwert ein

drei. Bestimmen Sie, welche Farben meinen Bedürfnissen entsprechen.

vier. Übertragen Sie sie in meinen Arbeitsbereich, in meinem Fall mit Figma.

3. Auswahl der Töne

Als nächstes müssen wir die Farbtöne für jede der ausgewählten Farben bestimmen. Um Farbtöne für die gewählten Farben auszuwählen, können Sie spezielle Dienste nutzen, die Sie bei diesem Prozess unterstützen können. Es gibt zwei Möglichkeiten, Farbtöne für Ihre Farben zu bestimmen:

Die erste Methode beinhaltet eine komplexere Formel:

1. Wählen Sie die Farbe Ihrer Kopfzeile (nicht unbedingt Schwarz).
2. Wechseln Sie in den HLS-Modus.
3. Überspringen Sie die erste Zelle, verringern Sie den Wert um 2 für die zweite Zelle und erhöhen Sie ihn um 5 für die dritte Zelle.

Die zweite Methode ist die Nutzung des Dienstes (einfach und schnell)

farben.dopely.top

eins. Geben Sie den Wert der gewünschten Farbe ein.

zwei. Wählen Sie Farbtöne und die Anzahl der Schritte aus (ich habe 5 verwendet).

drei. Wählen Sie Farbtöne und die Anzahl der Schritte.

vier . Als Ergebnis habe ich für eine Farbe die folgende Tabelle erstellt

P = Primär,

P 60 = das ist unsere Grundfarbe,

von P 10 bis P 50 = das sind die hellen Töne, die wir in Tints gesammelt haben,

von P 60 bis P 100 = das sind die dunklen Farbtöne, die wir im Bedienfeld „Farbtöne“ gesammelt haben.

4. Überprüfen der Farbzugänglichkeit

Es ist wichtig sicherzustellen, dass die ausgewählten Farben für alle Benutzer zugänglich sind, auch für Benutzer mit eingeschränkten Fähigkeiten. Es gibt Richtlinien, wie zum Beispiel die Web Content Accessibility Guidelines ( WCAG ), die bei der Erstellung einer Schnittstelle befolgt werden können. Um die Zugänglichkeit Ihrer Farben zu überprüfen, können Sie spezielle Tools wie Plugins oder Webdienste verwenden, die den Kontrast und die Zugänglichkeit der ausgewählten Farben überprüfen.

Figma-Plugin – Kontrast

Webservice – Kühler

5. Definieren von Farben für verschiedene Schnittstellenzustände

In der letzten Phase des Entwurfs der Farbpalette für Ihr Webprojekt ist es notwendig, die Anzahl der Schritte zu bestimmen, die für bestimmte Elementzustände erforderlich sind. Typischerweise identifizieren wir vier Schlüsselzustände:

• Aktiviert (ruhiger und normaler Zustand des Elements)
• Hover (Mouseover)
• Aktiv (Klick auf eine Schaltfläche oder ein anderes Steuerelement)
• Deaktiviert (blockiertes Element)

Um die Anzahl der Schritte zu bestimmen, verwenden wir das Farbpanel, in dem wir unseren Hauptfarbwert (Primzahl) festlegen. Dann zählen wir die Anzahl der Schritte für den Schwebezustand und den aktiven Zustand. Anschließend testen wir verschiedene Zustände auf Barrierefreiheit, um sicherzustellen, dass unsere Schaltflächen und der darin enthaltene Text gut lesbar sind.

Beispielsweise beschreiben die IBM-Richtlinien den folgenden Ansatz: Der Hover-Zustand ist eineinhalb Schritte von der Anfangsfarbe entfernt, während der aktive Zustand zwei Schritte von der Hauptfarbe entfernt ist. Ebenso ist der ausgewählte Zustand einen Schritt weiter von der Hauptfarbe entfernt. Mit dieser Methode können wir die Farbpalette definieren und ihre Zugänglichkeit für ein breites Publikum, auch für Benutzer mit eingeschränkten Fähigkeiten, sicherstellen. Der gleiche Ansatz wird auf Texte angewendet, bei denen Schwebe- und Aktivzustände identifiziert werden.

Hover-Zustände

Wenn Ihre Hauptfarbe zwischen Schwarz und 70 liegt, sollten Sie einen halben Schritt zu helleren Farbtönen gehen.

Wenn Ihre Hauptfarbe zwischen 60 und Weiß liegt, sollten Sie einen halben Schritt nach unten zu dunkleren Tönen gehen.

Drücken Sie / Aktive Zustände

Bei Werten von 100 bis 70 wird der aktive Zustand um zwei Vollstufen heller

Bei Werten von 60 bis 10 wird der aktive Zustand um zwei Vollstufen dunkler

Ausgewählte Staaten

Bei Werten von 100 bis 70 wird der ausgewählte Zustand um eine Stufe heller

Bei Werten von 60 bis 10 wird der ausgewählte Zustand um eine Stufe dunkler

Es ist auch wichtig, Ihre Designs und Texte zu testen, um sicherzustellen, dass sie lesbar sind und korrekt angezeigt werden. Stellen Sie nach Abschluss der Arbeiten sicher, dass die verschiedenen Schnittstellenzustände und Texte ordnungsgemäß aussehen und funktionieren.

Die richtige Wahl eines Farbschemas spielt eine Schlüsselrolle bei der Gestaltung einer benutzerfreundlichen und ansprechenden Benutzeroberfläche. Wenn Sie diese einfachen Schritte befolgen und die verfügbaren Tools verwenden, können Sie Farben für Ihr Projekt auswählen und optimieren.

Ich hoffe, Ihnen hat mein Artikel gefallen. Wenn Sie Fragen haben oder weitere Informationen benötigen, können Sie gerne einen Kommentar hinterlassen.