1. Einführung
Zuletzt aktualisiert: 21.09.2021
Apps können eine Reihe von Farben annehmen, die auf Basisschemata, von Nutzern erstellten dynamischen Farben oder Markenfarben basieren.
Mach dich bereit für die neuen Funktionen für dynamische Farben, die mit Material You eingeführt wurden. In diesem Lab erstellen Sie dynamische Farbvorlagen, um zu erfahren, wie das Farbsystem funktioniert, welche Konzepte zum Erstellen barrierefreier Farbvorlagen verwendet werden und wie Sie Ihre App mithilfe der neuesten Designtools mit dynamischen Farben visualisieren können.
Lerninhalte
- Neu in Material Design-Farben
- So wenden Sie von Nutzern erstellte Farben auf Ihre App an
- Hilfreiche Tools
Vorbereitung
In diesem Lab bauen wir auf einigen grundlegenden Designkonzepten auf.
- Kenntnisse grundlegender Designkonzepte: Farbvorlagen
- Kenntnisse über die aktuellen Farbschemata und Rollen von Android
- Kenntnisse in Figma
Voraussetzungen
2. Erste Schritte
Einrichtung
Zuerst müssen Sie auf die Designlab-Datei in Figma zugreifen. Alles, was Sie für das Lab benötigen, befindet sich in der Figma-Datei. Sie können die Datei entweder herunterladen und importieren oder aus der Figma-Community duplizieren.
Melden Sie sich in Figma an oder erstellen Sie ein Konto.
Duplikat aus der Figma-Community
Gehen Sie zur Datei Visualizing dynamic color in your app with Material Design (Dynamische Farben in Ihrer App mit Material Design visualisieren) 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 in der Datei um. Sie werden feststellen, dass die Datei in sich geschlossen ist, beginnend mit einer Einführung. Jeder Abschnitt ist in eine Reihe von Zeichenflächen unterteilt, die miteinander verknüpft sind, mit einigen Kernkonzepten für den Abschnitt, gefolgt von Übungen. Die Abschnitte und Übungen bauen aufeinander auf und sollten daher der Reihe nach durchgearbeitet werden.
In diesem Codelab erfahren Sie mehr über diese Konzepte und Übungen. Ich schlage vor, dass Sie sich das Codelab durchlesen, um mehr über die neuen „Material You“-Funktionen zu erfahren.
Beginnend mit der Zeichenfläche Intro gibt es Schaltflächen, die die Zeichenflächen der Reihe nach miteinander verknüpfen. Klicken Sie auf die Schaltfläche, um auf den Link zuzugreifen.
Figma-Plug-in installieren
Dieses Codelab basiert stark auf einem neuen Figma-Plug-in, um dynamische Farbschemas und Tokens zu generieren. Installieren Sie das Figma-Plug-in direkt von der Figma-Community-Seite oder suchen Sie nach „Material Theme Builder“. in der Figma-Community.
3. Farbkonzepte
Was sind dynamische Farben?
Material You verwandelt Farben in ganz neue und individuellere Erlebnisse. Durch die dynamische Farbextraktion ist die Bandbreite der möglichen Farberfahrungen erheblich größer.
Dynamische Farben sind ein wichtiger Bestandteil von „Material You“. Ein Algorithmus leitet benutzerdefinierte Farben vom Hintergrund eines Nutzers ab, die dann auf seine Apps und die System-UI angewendet werden.
Leuchtdichte
Dynamische Farben funktionieren auch in unvorhersehbaren Kontexten. Um die Kontrastverhältnisse in verschiedenen Betrachtungskontexten zu verwalten, sind Leuchtdichtestufen das Schlüsselattribut, mit dem Farben erfolgreich kombiniert werden können, auch wenn das Produktteam nicht jede einzelne Farbkombination testet.
Elemente mit einer ähnlichen Leuchtdichte haben keinen angemessenen Kontrast für die Lesbarkeit, während Elemente mit unterschiedlichen Leuchtdichtewerten besser unterscheidbar sind.
Farbtöne
Eine Tonpalette ist eine Übersetzung eines Farbtons (eine dynamisch extrahierte Farbe) in ein Spektrum verwandter Töne. Durch die Übersetzung einer Farbe in dreizehn Töne kann eine Gruppe von Tonbereichen, die sogenannte Tonpalette genannt werden, in verschiedenen Kontexten angewendet werden, von einzelnen Elementen innerhalb einer Komponente bis hin zu ganzen App-Themen.
Farbe wird in einen Tonbereich übertragen.
4. Farben extrahieren
Seed to Scheme
Sehen wir uns an, wie dynamische Farben im Material Theme Builder funktionieren.
- Öffnen Sie den Material Theme Builder. Fügen Sie bei ausgewählter Option Dynamisch ein Bild ein oder wählen Sie ein Bild aus dem Dateibrowser aus. Beachten Sie, dass die Seed-Farbe je nach Bild aktualisiert wird.
- Farbwerte werden aus einem Hintergrund extrahiert und einem "Typ" zugewiesen mit dem bestimmt wird, wie die Farbe zu anderen Farben in einem Schema passt. Diese „Schlüsselfarben“ (rechts) wurden entsprechend aktualisiert.
- Anschließend werden sie in auf Helligkeit basierende Farbpaletten übertragen, wodurch fünf Farbbereiche mit Tönen von hell bis dunkel entstehen. Die Tonpaletten sind in der Farbausgabe entsprechend gekennzeichnet.
- Aus den fünf Tonbereichen werden bestimmte Töne (basierend auf der Leuchtdichte) in die vordefinierten Rollen integriert, die ein Schema ausmachen. Farben werden einem Schema über Designtokens zugeordnet.
Tertiäre Farbrollen, die aus einem tertiären Tonbereich erstellt und Komponenten zugeordnet werden.
5. Designs und Tokens
Designtokens ermöglichen Flexibilität und Einheitlichkeit im gesamten Produkt, da Designer beispielsweise die Farbrolle eines Elements in einer Benutzeroberfläche anstelle eines festgelegten Werts zuweisen können. Tokens dienen als Brücke zwischen der einem Element zugewiesenen Rolle und dem ausgewählten Farbwert für eine Rolle. Das Design für die Rolle einer Farbe und nicht für eine bestimmte Farbe ist mit der Einführung dynamischer Farben grundlegender.
Designs enthalten Material Design-Tokens für Farbe und Typ, wodurch sichergestellt wird, dass Designs und Code eine einzige Quelle der Wahrheit haben, um die Baseline zusammen mit von Nutzern erstellten Paletten und benutzerdefinierten Werten darzustellen.
In Figma generiert das Plug-in diese Tokens als Stile. Wenn Sie also die generierten Stile verwenden, werden Sie die MD-Tokens verwenden.
Farben in einer Tonpalette werden einem hellen oder dunklen Schema durch Designtokens zugeordnet.
Das Zuordnungssystem weist jedem Element in einer Komponente einen Ton zu.
Einrichtungstokens
Um dynamische Farben auf Ihre Designs anzuwenden, müssen wir das Modell auf die Tokens im vorhandenen Material-Thema festlegen.
- Wir legen alle Tokens (Figma-Stile) im Layout auf der rechten Seite fest, um dieses Design zu verwenden. Dazu wählen wir den Frame des Layouts aus und klicken auf Swap. Das Stilpräfix wird nun in den ausgewählten Farben aktualisiert.
Klicke auf „Ändern“, um das verbundene Design des ausgewählten Designs zu aktualisieren.
- Fügen Sie nun ein Bild ein oder wählen Sie ein Bild aus dem Dateibrowser aus. Die Werte des Modells übernehmen die aus dem Bild extrahierte dynamische Farbe.
- Klicken Sie auf die Schaltfläche „Zufallsauswahl“. Dadurch wird die Seed-Farbe für die Extrapolation zufällig ausgewählt, anstatt sie aus dem Bild zu extrahieren. Dies ist eine weitere Möglichkeit, schnell zu erkennen, wie sich dynamische Farben auf Ihre Designmodelle auswirken können.
Durch Klicken auf die Schaltfläche „Zufallsauswahl“ wird die Seed-Farbe zufällig ausgewählt.
Wenn Sie das Plug-in ohne Design öffnen, wird ein Einrichtungsbildschirm angezeigt. „Jetzt starten“ wird die Standardbasis „material-theme“ als Figma-Stilgruppe, die Sie mit Ihren Modellen verbinden oder mit dem Material Design-Kit verwenden können.
6. Wird auf die Benutzeroberfläche angewendet
Die bereitgestellten Layouts wurden mit dem Material Design Kit erstellt, in dem Material Design-Tokens verwendet werden. Es gibt jedoch einige benutzerdefinierte Elemente, die nicht zugeordnet sind.
- Wählen Sie die Artikelkarten aus. Setzen Sie in der Füllung den Stil (das Symbol mit den vier Punkten) auf material-theme/surface (Material-Thema/Oberfläche). Sie können auch nach „Oberfläche“ suchen.
- Wählen Sie auf ähnliche Weise den Typ in den Karten aus, setzen Sie ihn auf Oberflächen und setzen Sie die Kästchen auf „Primär“.
die auf den Karten des Designs verwendeten Figma-Stile.
Als Nächstes erstellen wir zusätzliche Modelle, um die restlichen Schemas zu iterieren.
Designs erstellen und iterieren
Wir haben jetzt ein Modell vollständig verbunden, um dynamische Farben zu visualisieren, aber wir können auch mehrere Themen erstellen und diese auf separate Modelle austauschen, um eine Reihe dynamischer Farben gleichzeitig zu visualisieren.
- Klicken Sie im Plug-in-Modaldialogfeld auf das Drop-down-Menü und wählen Sie Neues Design hinzufügen aus.
- Legen Sie einen eindeutigen Namen für das Design fest und klicken Sie auf Design erstellen. Dadurch werden auch neue Farbdiagramme für jedes erstellte Design generiert.
Hinzufügen eines neuen Designs über das Drop-down-Menü
- Fügen Sie ein Bild hinzu oder geben Sie die Quellfarbe zufällig an.
- Wählen Sie im Plug-in-Modaldialogfeld ein Mockup aus (App-UI-Komponente) aus und klicken Sie auf Austauschen. Dadurch werden die Stilwerte auf das aktuelle Design im Drop-down-Menü aktualisiert.
- Duplizieren Sie das Modell mit Strg + D.
Klicke auf „Ändern“, um das verbundene Design des ausgewählten Designs zu aktualisieren.
- Wiederholen Sie die Schritte 1–5.
Sie haben jetzt mehrere Designs mit verschiedenen dynamischen Farbiterationen!
7. Glückwunsch
Sie haben dynamische Farben gelernt und angewendet! Mit dem Material Theme Builder können Sie Farben in Material Design einfacher gestalten, indem Sie dynamische Farben visualisieren, benutzerdefinierte Designs erstellen und in Code exportieren.
Wenn Sie Fragen haben, können Sie sich jederzeit unter @MaterialDesign auf Twitter an uns wenden.
Weitere Inhalte und Anleitungen zum Thema Design findest du unter youtube.com/MaterialDesign.