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:    Wählen Sie aus der Dropdown-Liste das gewünschte Schema aus.  eins.    Geben Sie in das als Grundfarbe gekennzeichnete Feld den gewünschten Farbwert ein  zwei.    Bestimmen Sie, welche Farben meinen Bedürfnissen entsprechen. drei.    Übertragen Sie sie in meinen Arbeitsbereich, in meinem Fall mit Figma. vier.  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:  Wählen Sie die Farbe Ihrer Kopfzeile (nicht unbedingt Schwarz).  Wechseln Sie in den HLS-Modus.  Ü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    Geben Sie den Wert der gewünschten Farbe ein.  eins.    Wählen Sie Farbtöne und die Anzahl der Schritte aus (ich habe 5 verwendet).  zwei.    Wählen Sie Farbtöne und die Anzahl der Schritte.  drei.    . Als Ergebnis habe ich für eine Farbe die folgende Tabelle erstellt vier    = Primär, P    = das ist unsere Grundfarbe, P 60    = das sind die hellen Töne, die wir in Tints gesammelt haben, von P 10 bis P 50    = das sind die dunklen Farbtöne, die wir im Bedienfeld „Farbtöne“ gesammelt haben.  von P 60 bis P 100  Wiederholen Sie den gleichen Vorgang für andere Farben, Texte und Fehlerzustände!  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 (   ), 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. WCAG  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   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. IBM-Richtlinien   Hover-Zustände  Wenn Ihre Hauptfarbe   liegt, sollten Sie einen halben Schritt zu helleren Farbtönen gehen.  zwischen Schwarz und 70  Wenn Ihre Hauptfarbe   und Weiß liegt, sollten Sie einen halben Schritt nach unten zu dunkleren Tönen gehen.  zwischen 60   Drücken Sie / Aktive Zustände  Bei Werten von   wird der aktive Zustand um zwei Vollstufen heller 100 bis 70  Bei Werten von   wird der aktive Zustand um zwei Vollstufen dunkler  60 bis 10   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.  Denken Sie daran, dass dies Tipps sind, die auf meiner Erfahrung basieren. Sie können Ihre eigenen Schritte hinzufügen und die Reihenfolge ändern. Vergessen Sie jedoch nicht, Barrierefreiheitstests durchzuführen, damit der Kontrast Ihres Textes und die verschiedenen Schnittstellenzustände für jeden Benutzer gut lesbar sind.  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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps