Farbsystem Designsystem

Verwenden Sie Farben, die eine klare Rolle spielen und in jeder Benutzeroberfläche ihre Bedeutung behalten.

8 Prüfpunkte · 2 Inhaltsgruppen

Inhalt der Checkliste

Prüffortschritt

Struktur und Bedeutung

Vergleichen Sie Informationen und Präsentation im Nutzungskontext.

Bestimmen Sie die Farbpalette der GrundierungLegen Sie gemeinsame Farbstufen mit verwalteten Namen und Werten fest.Komponenten sollten Farben entsprechend ihrer Funktion verwenden, anstatt direkt einen Farbton auszuwählen.Beispiel Die Variable „Fehlertext“ wird für Formularfehler und Warnungen zu fehlgeschlagenen Übermittlungen verwendet.Ordnen Sie Farbe der Rolle zuTrennen Sie Hintergrundfarbe, Text, Rahmen, Aktion und Antwort.Farbnamen nach Rollen helfen dabei, die Benutzeroberfläche an einer Stelle zu ändern. Lassen Sie nicht jedes Element seinen eigenen Grundton wählen.Es gibt genügend Farben für den StatusStandardmäßig prüfen, bewegen, klicken, fokussieren, ausgewählt und deaktiviert.Antwortfarbe vereinheitlichenBehalten Sie im gesamten Produkt die gleiche Bedeutung für Erfolge, Warnungen, Fehler und Informationen bei.Probieren Sie die gleiche Bedingung für jeden Hintergrund aus, der sowohl hell als auch dunkel verwendet wird. Fehlerfarben, die auf einem Hintergrund gut lesbar sind, können auf einem anderen Hintergrund möglicherweise nicht verwendet werden.

Interaktion und Benutzerfreundlichkeit

Probieren Sie den Vorgang aus, ändern Sie den Status und arbeiten Sie weiter.

Messen Sie die verwendeten FarbpaareKontrastieren Sie Text, Symbole und Steuerelemente mit dem tatsächlichen Hintergrund, nicht nur mit der Farbpalette.Erfassen Sie zulässige Text- und Hintergrundpaare, damit Entwickler nicht raten müssen, welche Farben zusammenpassen.Hell- und Dunkeltests unabhängig voneinanderDefinieren Sie individuelle Werte für jede Schnittstelle und überprüfen Sie alle Zustände.Testen Sie jedes Farbpaar, nachdem Sie die Haut gewechselt haben, anstatt nur von hell auf dunkel zu wechseln. Highlights und Grenzen brauchen ihre eigenen Rollen.Hält die Identifikation intakt und lesbarVerwenden Sie Markenfarben an geeigneten Stellen. Passen Sie den Farbton an, wenn der Kontrast nicht ausreicht.Wenn die identifizierende Farbe schwer zu lesen ist, halten Sie sie dekorativ und verwenden Sie eine ausreichend klare Farbe für aussagekräftigen Text oder Vorgänge.Lassen Sie nicht zu, dass die Farbe ihre Bedeutung allein trägtIntegrieren Sie Beschriftungen, Formen oder Symbole, wenn Sie Daten und Status unterscheiden müssen.

Der Fortschritt wird automatisch in diesem Browser gespeichert.

ANLEITUNG

So prüfen Sie

Bestimmen Sie die Farbpalette der Grundierung

Komponenten sollten Farben entsprechend ihrer Funktion verwenden, anstatt direkt einen Farbton auszuwählen.

BEISPIELE

Anwendungsbeispiele

Bestimmen Sie die Farbpalette der Grundierung

Die Variable „Fehlertext“ wird für Formularfehler und Warnungen zu fehlgeschlagenen Übermittlungen verwendet.

Farbsystem Designsystem

Struktur und Bedeutung

Interaktion und Benutzerfreundlichkeit

So prüfen Sie

Bestimmen Sie die Farbpalette der Grundierung

Anwendungsbeispiele

Bestimmen Sie die Farbpalette der Grundierung

Checkliste suchen

Keine Checklisten gefunden