1. Einführung
Zuletzt aktualisiert:21.09.2021
Apps können eine Reihe von Farben aus Basisschemata, von Nutzern generierten dynamischen Farben oder Markenfarben annehmen.
Mit Material You wurden neue dynamische Farbfunktionen eingeführt. In diesem Lab erstellen Sie dynamische Farbpaletten, um zu erfahren, wie das Farbsystem funktioniert, welche Konzepte für die Erstellung barrierefreier Farbpaletten wichtig sind und wie Sie Ihre App mit dynamischen Farben mithilfe der neuesten Designtools visualisieren können.
Lerninhalte
- Neuerungen bei Material Design-Farben
- Von Nutzern generierte Farben in Ihre App einbinden
- Tools zur Unterstützung
Vorbereitung
In diesem Lab bauen wir auf einigen grundlegenden Designkonzepten auf.
- Kenntnisse der grundlegenden Designkonzepte: Farbpaletten
- Kenntnisse der aktuellen Android-Farbschemas und -Rollen
- Figma-Kenntnisse
Voraussetzungen
2. Jetzt starten
Einrichtung
Als Erstes müssen Sie auf die Designlab-Figma-Datei zugreifen. Alles, was Sie für das Lab benötigen, ist in der Figma-Datei enthalten. Sie können die Datei entweder herunterladen und importieren oder sie aus der Figma-Community duplizieren.
Melden Sie sich zuerst in Figma an oder erstellen Sie ein Konto.
Duplikat aus der Figma-Community
Rufen Sie die Datei Visualizing dynamic color in your app with Material Design auf oder suchen Sie in der Figma Community nach „Visualizing dynamic color in your app with Material Design“. Klicken Sie rechts oben auf Duplizieren, um die Datei in Ihre Dateien zu kopieren.
Dateilayout
Sehen Sie sich die Datei an. Die Datei ist in sich geschlossen und beginnt mit einer Einführung. Jeder Abschnitt ist in eine Reihe von miteinander verknüpften Artboards unterteilt. Auf einige grundlegende Konzepte für den Abschnitt folgen Übungen. Die Abschnitte und Übungen bauen aufeinander auf und sollten daher nacheinander absolviert werden.
In diesem Codelab werden diese Konzepte und Übungen genauer erläutert. Ich empfehle, das Codelab durchzulesen, um mehr über die neuen Material You-Funktionen zu erfahren.
Auf dem Artboard Intro befinden sich Schaltflächen, die die Artboards in der richtigen Reihenfolge miteinander verknüpfen. Klicken Sie auf die Schaltfläche, um auf den Link zuzugreifen.
Figma-Plug-in installieren
In diesem Codelab wird ein neues Figma-Plug-in verwendet, um dynamische Farbschemas und Tokens zu generieren. Installieren Sie das Figma-Plug-in direkt über die Figma-Community-Seite oder suchen Sie in der Figma-Community nach „Material Theme Builder“.
3. Farbkonzepte
Was ist die Funktion „Dynamische Farben“?
Mit Material You wird Farbe als etwas Individuelleres betrachtet. Durch die dynamische Farbauswahl wird das Spektrum der möglichen Farberlebnisse deutlich erweitert.
Dynamische Farben sind ein wichtiger Bestandteil von Material You. Dabei leitet ein Algorithmus benutzerdefinierte Farben aus dem Hintergrundbild eines Nutzers ab, die auf seine Apps und die System-UI angewendet werden.
Leuchtdichte
Die dynamische Farbe ist für unvorhersehbare Kontexte konzipiert. Um Kontrastverhältnisse in verschiedenen Betrachtungskontexten zu verwalten, sind Helligkeitsstufen das wichtigste Attribut, mit dem Farben erfolgreich kombiniert werden können, auch wenn das Produktteam nicht jede einzelne Farbkombination testet.
Elemente mit ähnlicher Luminanz haben keinen ausreichenden Kontrast für eine gute Lesbarkeit, während Elemente mit unterschiedlichen Luminanzwerten besser zu unterscheiden sind.
Tonale Paletten
Eine tonale Palette ist die Übersetzung eines Farbtons (einer dynamisch extrahierten Farbe) in ein Spektrum verwandter Töne. Die Übersetzung einer Farbe in dreizehn Töne ermöglicht es, eine Gruppe von Tonbereichen, die als Tonpalette bezeichnet wird, in verschiedenen Kontexten anzuwenden, von einzelnen Elementen innerhalb einer Komponente bis hin zu gesamten App-Designs.
Farbe, die in einen Tonbereich übersetzt wird.
4. Farben extrahieren
Seed to scheme
So funktioniert die dynamische Farbe mit dem Material Theme Builder.
- Öffnen Sie den Material Theme Builder. Wenn Dynamisch ausgewählt ist, können Sie ein Bild einfügen oder im Dateibrowser auswählen. Die Ausgangsfarbe wird entsprechend dem Bild aktualisiert.
- Farbwerte werden aus einem Hintergrundbild extrahiert und einem „Typ“ zugewiesen, der bestimmt, wie sich die Farbe auf andere Farben in einem Schema bezieht. Die „Schlüsselfarben“ (rechts) wurden aktualisiert, um diese Werte widerzuspiegeln.
- Sie werden dann in auf Luminanz basierende Tonpaletten übersetzt, wodurch fünf Farbbereiche mit Tönen von hell bis dunkel entstehen. Die tonalen Paletten sind in der Farbausgabe entsprechend gekennzeichnet.
- Aus den fünf Tonbereichen werden bestimmte Töne (basierend auf der Luminanz) in die vordefinierten Rollen eingeordnet, aus denen ein Schema besteht. Farben werden über Design-Tokens einem Schema zugeordnet.
Tertiäre Farbrollen, die aus einem tertiären Tonbereich erstellt und Komponenten zugeordnet werden.
5. Themen und Tokens
Design-Tokens ermöglichen Flexibilität und Konsistenz in einem Produkt, da Designer beispielsweise die Farbrolle eines Elements in einer Benutzeroberfläche anstelle eines festgelegten Werts zuweisen können. Tokens bilden eine Brücke zwischen der zugewiesenen Rolle eines Elements und dem ausgewählten Farbwert für eine Rolle. Mit der Einführung von dynamischen Farben ist es noch wichtiger, das Design an die Rolle einer Farbe anzupassen und nicht an die spezifische Farbe.
Designs enthalten Material Design-Tokens für Farbe und Typografie. So gibt es für Designs und Code eine einzige Quelle der Wahrheit, die die Baseline repräsentiert, zusammen mit nutzergenerierten Paletten und benutzerdefinierten Werten.
In Figma generiert das Plug-in diese Tokens als Stile. Wenn Sie die generierten Stile verwenden, verwenden Sie also die MD-Tokens.
Farben in einer tonalen Palette werden über Design-Tokens einem hellen oder dunklen Schema zugeordnet.
Das Zuordnungssystem weist jedem Element in einer Komponente einen Ton zu.
Einrichtungstokens
Damit wir dynamische Farben auf Ihre Designs anwenden können, müssen wir das Mockup auf die Tokens im vorhandenen Material-Design festlegen.
- Wir legen alle Tokens (Figma-Stile) im Layout rechts fest, um dieses Design zu verwenden. Dazu wählen wir den Frame des Layouts aus und klicken auf swap (tauschen). Das Stilpräfix wird in den Auswahlfarben aktualisiert.
Wenn Sie auf „Tauschen“ klicken, wird das im ausgewählten Design verwendete verbundene Design aktualisiert.
- Fügen Sie nun ein Bild ein oder wählen Sie eines aus dem Dateibrowser aus. Die Werte des Mockups werden an die dynamische Farbe angepasst, die aus dem Bild extrahiert wurde.
- Klicken Sie auf die Schaltfläche „Zufällige Farben“, um die Ausgangsfarbe zu randomisieren, aus der extrapoliert werden soll, anstatt sie aus dem Bild zu extrahieren. So können Sie schnell sehen, wie sich dynamische Farben auf Ihre Design-Mockups auswirken.
Klicken Sie auf die Schaltfläche „Zufällige Farbe“, um die Ausgangsfarbe zu randomisieren.
Wenn Sie das Plug-in ohne ein Theme öffnen, wird ein Einrichtungsbildschirm angezeigt, auf dem Sie mit der Einrichtung beginnen können. Mit „Get started“ (Loslegen) wird die Standard-Baseline „material-theme“ als Figma-Stilgruppe generiert, die Sie mit Ihren Mockups verbinden oder mit dem Material Design Kit verwenden können.
6. Auf die Arbeitslosengeld-Benutzeroberfläche zugreifen
Die bereitgestellten Layouts wurden mit dem Material Design Kit erstellt, das Material Design-Tokens verwendet. Es gibt jedoch einige benutzerdefinierte Elemente, die nicht zugeordnet sind.
- Wählen Sie die Artikelkarten aus. Legen Sie für die Füllung den Stil (Symbol mit vier Punkten) auf material-theme/surface fest. Sie können auch nach „Oberfläche“ suchen.
- Wählen Sie auf ähnliche Weise den Typ in den Karten aus und legen Sie ihn auf on-surface fest. Setzen Sie die Kästchen auf „primary“.
In den Karten des Designs verwendete Figma-Stile.
Als Nächstes erstellen wir zusätzliche Mockups, um die restlichen Schemas zu durchlaufen.
Themen erstellen und iterieren
Wir haben jetzt ein Mockup vollständig verbunden, um dynamische Farben zu visualisieren. Wir können aber auch mehrere Designs erstellen und diese auf separate Mockups übertragen, um eine Reihe dynamischer Farben gleichzeitig zu visualisieren.
- Klicken Sie im Plugin-Modal auf das Drop-down-Menü und wählen Sie Neues Thema hinzufügen aus.
- Geben Sie einen eindeutigen Namen für das Design ein und klicken Sie auf Design erstellen. Außerdem werden für jedes erstellte Thema neue Farbdiagramme generiert.
Ein neues Thema über das Drop-down-Menü hinzufügen
- Bild hinzufügen oder die Ausgangsfarbe ändern
- Wählen Sie im Plugin-Modal ein Mockup (App-UI-Komponente) aus und klicken Sie auf swap (tauschen). Dadurch werden die Stilwerte auf das aktuelle Design aktualisiert, das im Drop-down-Menü angezeigt wird.
- Duplizieren Sie das Modell (CMD + D).
Wenn Sie auf „Tauschen“ klicken, wird das im ausgewählten Design verwendete verbundene Design aktualisiert.
- Wiederholen Sie die Schritte 1 bis 5.
Sie haben jetzt mehrere Designs mit verschiedenen dynamischen Farbiterationen.
7. Glückwunsch
Gut gemacht! Sie haben dynamische Farben gelernt und angewendet. Der Material Theme Builder soll Ihnen die Verwendung von Farben in Material Design erleichtern. Er visualisiert dynamische Farben, erstellt benutzerdefinierte Designs und exportiert sie in Code.
Wenn Sie Fragen haben, können Sie uns jederzeit über @MaterialDesign auf Twitter kontaktieren.
Weitere Designinhalte und Tutorials findest du auf youtube.com/MaterialDesign.