Design-Token Designsystem

Gemeinsame Werte benennen und verwalten.

7 Prüfpunkte · 3 Inhaltsgruppen

Inhalt der Checkliste

Prüffortschritt

Struktur und Bedeutung

Vergleichen Sie Informationen und Präsentation im Nutzungskontext.

Wert und Zweck trennenUnterscheiden Sie primitive Werte von rollenbasierten Variablen und komponentenspezifischen Variablen.Ändern Sie die helle Schnittstelle auf dunkel und überprüfen Sie dann die Komponentenzustände. Verwenden Sie Namen für Zwecke wie sekundären Text oder Rahmen. Vermeiden Sie, dass jeder Bildschirm eine ähnliche Farbe wählt.Beispiel Aktualisierungsdaten, Eingabefeldvorschläge und Kommentare verwenden alle das „Text-stummgeschaltet“-Token; Der Token-Austausch aktualisiert alle drei nach den gleichen Regeln.Die Benennung hat RegelnVerwenden Sie einen Namen, der seine Verwendung, seinen Status und seinen Umfang widerspiegelt, damit andere erraten können, wie er verwendet wird.Rollennamen wie Warnungshintergrundfarbe sind langlebiger als Wertnamen wie Gelb-200; Behalten Sie die gleiche Namensreihenfolge für das gesamte System bei.Notieren Sie, wie jede Variable verwendet wirdNennen Sie geeignete Beispiele und nennen Sie Fälle, in denen diese Variable nicht verwendet werden sollte.Für jede Variable ist ein Beispiel für die korrekte Verwendung und eine Warnung bei falscher Verwendung erforderlich. Geben Sie deutlich an, dass es sich bei den einzelnen Variablen der Zutat nicht um produktweite Auswahlen handelt.

Interaktion und Benutzerfreundlichkeit

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

Schauen Sie sich die Schnittstellen anVerwenden Sie beim Wechsel von Hell und Dunkel eine konsistente Rolle und überprüfen Sie den Kontrast jedes Zustands.Ein Rollenname sollte durch Hell/Dunkel seine Bedeutung behalten; erfordert nicht, dass die Komponente weiß, welcher Farbcode zu jeder Schnittstelle gehört.Halten Sie Design und Code synchronVergleichen Sie Namen und Werte zwischen Designdokumenten und verwendeten Komponenten.Wählen Sie eine primäre Datenquelle und prüfen Sie automatisch auf Verzerrungen. Gleicher Name, aber unterschiedlicher Wert ist immer noch ein Synchronisationsfehler.Gemeinsame ÄnderungsverfolgungNotieren Sie den Grund, den Einflussbereich und die Konvertierungsmethode, wenn Sie eine Variable ändern oder entfernen.Notieren Sie die Ersatzvariable und den Konvertierungsbereich, wenn Sie die alte Variable entfernen. Überprüfen Sie Abhängigkeiten, bevor Sie neue Werte freigeben.

Vervollständigen Sie das Erlebnis

Achten Sie auf Details, die bei der Verwendung des Designs leicht übersehen werden können.

Weisen Sie den Besitz und einen Prozess zum Hinzufügen von Token zuGeben Sie an, wer neue Token überprüft, wann vorhandene Token wiederverwendet werden sollten und wie überlappende Bedeutungen gelöst werden.Eine Anfrage zum Hinzufügen einer Variable sollte die Anwendungsfälle und Gründe für die Nichtverwendung einer vorhandenen Rolle enthalten; Vermeiden Sie es, dass jede Gruppe ihre eigene Farbpalette erstellt.

Der Fortschritt wird automatisch in diesem Browser gespeichert.

ANLEITUNG

So prüfen Sie

Überprüfen Sie, ob der Wert nach Rolle aufgerufen wird

Ändern Sie die helle Schnittstelle auf dunkel und überprüfen Sie dann die Komponentenzustände. Verwenden Sie Namen für Zwecke wie sekundären Text oder Rahmen. Vermeiden Sie, dass jeder Bildschirm eine ähnliche Farbe wählt.

BEISPIELE

Anwendungsbeispiele

Gemeinsame sekundäre Schriftfarbe

Aktualisierungsdaten, Eingabefeldvorschläge und Kommentare verwenden alle das „Text-stummgeschaltet“-Token; Der Token-Austausch aktualisiert alle drei nach den gleichen Regeln.