Diese Seite wurde von der Cloud Translation API übersetzt.

Materialfarbe anpassen

1. Einführung

Zuletzt aktualisiert: 18.04.2022

Apps können eine Reihe von Farben annehmen, die auf Basisschemata, von Nutzern erstellten dynamischen Farben oder Markenfarben basieren.

Im vorherigen Material You-Farb-Lab wurde gezeigt, wie dynamische Farben in Design-Mockups visualisiert werden. Sie können Material Design aber auch verwenden, um Ihre App an Ihre Markenfarben anzupassen. Durch die Nutzung des neuen Farbsystems mit den Farben deiner Marke entsteht ein barrierefreies Farbschema, das dynamischere Funktionen nutzen könnte.

Lerninhalte

Hier erfahren Sie, wie Sie ein benutzerdefiniertes Design mit Material Themes erstellen.
Anwenden eines benutzerdefinierten Designs auf Designmodelle
Möglichkeit, dynamische und benutzerdefinierte Farben zu kombinieren.

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
Optional: Dynamische Farben im Codelab Ihrer App visualisieren

Voraussetzungen

2. Erste Schritte

Einrichtung

Um loszulegen, 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

Rufen Sie die Datei Anpassen von Material 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

Beim Durchsehen der Datei stellen Sie fest, dass sie eigenständig ist und mit einer Einführung beginnt. 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 der Reihe nach durchgearbeitet werden.

In diesem Codelab werden diese Konzepte und Übungen im Detail beschrieben. Im Codelab erfährst du mehr über die neuen „Material You“-Funktionen.

Ausgehend von 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. Farbschema des Materials

Zuerst erhalten Sie einen Überblick darüber, wie Farben in Material verwendet werden und wie das neue Farbsystem funktioniert.

Farbe wird verwendet, um Stil auszudrücken und Bedeutung zu vermitteln, unabhängig davon, ob die Bedeutung für den Nutzer persönlich, das Branding oder die semantische Bedeutung ist. Das Farbsystem verarbeitet die Variabilität von sich dynamisch ändernden Farbschemas, die entstehen, wenn sich Nutzereingaben ändern. Die Logik der Beziehungen zwischen Tonwerten und Verschiebungen von Farbton und Chroma bilden die Grundlage für eine flexible Farbanwendung.

Der Farbraum bietet eine Möglichkeit, barrierefreie helle und dunkle Farbschemata zu generieren, die aus einer Quellfarbe extrahiert werden. Dazu werden fünf Schlüsselfarben und dann Tonpaletten generiert, in denen bestimmte Tonstufen ausgewählt werden.

Diese Farbverschiebungstechnik bietet nicht nur ein barrierefreies Farbschema, sondern auch Methoden zum Erstellen von Markenschemata, die barrierefrei sind und zu den von Nutzern erstellten Farbschemata passen.

Farbschemata werden aus fünf Schlüsselfarben in Tonpaletten erstellt, um barrierefreie Schemas zu erstellen

Markendesign

M3 unterstützt die systematische Anwendung benutzerdefinierter Parameter, um die Stile, die Ihre Marke repräsentieren, zu definieren und zu verwalten.

Ein benutzerdefiniertes Schema ist ein Farbschema, das nicht vom Hintergrund des Nutzergeräts abgeleitet wird, sondern vom App-Hersteller. Das M3-Farbsystem und die benutzerdefinierten Schemas bilden die Grundlage für die Aktivierung dynamischer Farben in Apps.

Das benutzerdefinierte Schema schließt die Lücke zwischen M2 und M3 für eine einfache Migration, indem die erforderlichen Tokens (Farbflächen) eingerichtet werden und ein stärker markenbezogenes Erlebnis entsteht.

Markenfarben im Material Theme Builder hinzufügen

4. Farbschema: Akzentfarben

Die Grundlage eines Farbschemas ist ein Satz von fünf Schlüsselfarben, die sich einzeln auf separate Farbpaletten mit 13 Tönen beziehen. Bestimmte Töne aus jeder Tonpalette werden Farbrollen in einer Benutzeroberfläche zugewiesen. Öffnen wir zuerst das Material Theme Builder-Plug-in und richten unsere erste Akzentfarbe ein: Primary.

Wenn Sie nur das primäre Farbschema eingeben, wird es als Quelle verwendet, um ein vollständiges Farbschema zu generieren.

Klicken Sie im Plug-in-Dialogfeld auf „Custom“ (Benutzerdefiniert). Dadurch wird das Design auf ein benutzerdefiniertes Design umgestellt. Für dieses Lab verwenden wir das bereits generierte Material-Design. Sie können aber auch ein neues Design erstellen, wenn Sie möchten. Weitere Informationen finden Sie unter Dynamische Farben visualisieren.
Als Nächstes legen wir eine Farbe für den Primärschlüssel fest. Die Hauptfarbe kann die Hauptfarbe Ihrer Marke oder die am häufigsten verwendete Akzentfarbe sein. Die übrigen Schlüsselfarben werden basierend auf der Primärfarbe dargestellt. Das bedeutet, dass Sie keine zusätzlichen Farben hinzufügen müssen, wenn Sie diese nicht benötigen.

5. Den Rest des Designs aufbauen

Das Feld „Primär“ wird verwendet, um das Design zu generieren. Sie können jedoch Akzentfarben verwenden, um die primäre Markenfarbe zu unterstützen.

Fügen Sie im Plug-in-Modaldialogfeld eine zweite Farbe hinzu, indem Sie auf das Feld für die sekundäre Farbe klicken. Sekundäre Rollen werden für weniger auffällige Komponenten in der Benutzeroberfläche verwendet, wodurch die Möglichkeiten zur Farbdarstellung erweitert werden. Die Sekundärfarbe wird im Farbschema und in der App-UI aktualisiert.
Wiederholen Sie diesen Schritt für Tertiär. Tertiäre Rollen werden für kontrastierende Akzente verwendet, um Primär- und Sekundärfarben in Einklang zu bringen oder die Aufmerksamkeit auf ein Element zu lenken. Die Rolle der tertiären Farbpalette bleibt den Herstellern nach eigenem Ermessen überlassen. Sie soll eine breiter gefasste Farbdarstellung in Produkten unterstützen.
Jetzt werden neutrale, neutrale Rollen für Oberflächen und Hintergründe sowie für Text und Symbole mit hoher Betonung verwendet.

Geben Sie sekundäre, tertiäre und neutrale Werte an, um Ihr Farbschema vollständig anzupassen.

Ihre Markenfarben werden jetzt in das Kernfarbschema aufgenommen, das an den M3-Farbraum angepasst wurde. Sie sind vollständig verfügbar und können im Code als Design exportiert und implementiert werden.

6. Design wird übernommen

Rollen und Tokens

Jede Akzentfarbe (primär, sekundär und tertiär) wird in einer Gruppe von vier kompatiblen Farben in verschiedenen Farbtönen bereitgestellt, um sie zu koppeln, hervorzuheben und visuell auszudrücken. Die Gruppe besteht aus der Akzentfarbe, auf Farbe, auf Behälter und am Behälter.

Neutrale Rollen werden für Oberflächen und Hintergründe sowie für Text und Symbole mit hoher Betonung verwendet.

Designtokens stehen für kleine, sich wiederholende Designentscheidungen, aus denen sich der visuelle Stil eines Designsystems zusammensetzt. Tokens ersetzen statische Werte wie Hexadezimalcodes für Farben durch selbsterklärende Namen. Designtokens verbinden sinnvolle Stilentscheidungen, die andernfalls keine klare Beziehung hätten.

Das Figma-Plug-in erstellt Tokens und geben Ihre eigenen Quellfarben in Form von Figma-Stilen ein, um eine Verbindung zu bestehenden Modellen, Marken-Styleguides und sogar Designsystemen herzustellen.

Designtokens schaffen eine gemeinsame Sprache zwischen Farbrollen und der Implementierung.

Farbhierarchie

Wenn Sie Farbrollen auf Ihre Modelle anwenden, berücksichtigen Sie die Reihenfolge der Wichtigkeit oder Hierarchie Ihrer Elemente. Mit diesem Konzept können Markenfarben ihren jeweiligen Rollen zugewiesen, aber auch innerhalb der Benutzeroberfläche zugeordnet werden. In der Regel ziehen gesättigte oder konzentriertere Farben zuerst die Aufmerksamkeit der Nutzenden auf sich. Aus diesem Grund werden mit der Rolle "Primäre Farbe" Komponenten zugeordnet, die stärker auf Calls-to-Action ausgerichtet sind. Während der Material Theme Builder das M3-Farbsystem verwendet, um passende Farben zu erzeugen, werden durch die Bereitstellung von Sekundär- oder Tertiärfarben mit höherer Sättigung Farben erzeugt, die die primären Farben übertreffen. Überlegen Sie sich, in welcher Reihenfolge Ihre Nutzer zwischen der Benutzeroberfläche und dem Inhalt interagieren sollen, um ihnen die Zuweisung von Farbrollen zu erleichtern. Nicht alle Komponenten sollten die Option „Primär“ verwenden.

Eine feste, gesättigte Farbe zieht die meiste Aufmerksamkeit auf sich.

7. Zum Design wechseln

Um das von Ihnen erstellte benutzerdefinierte Design auf Ihre Designs anzuwenden, müssen wir das Modell auf die Tokens im vorhandenen Material-Thema festlegen.

Für Materialkomponenten sind Rollen bereits zugewiesen und sie funktionieren automatisch mit dem Material Theme Builder.

Im Dialogfeld „Material Theme Builder“ zum Design wechseln.

Wir legen alle Tokens (Figma-Stile) im Layout auf der rechten Seite fest, um dieses Design zu verwenden, indem wir den Frame des Layouts auswählen und auf „Swap“ klicken. Das Stilpräfix wird nun in den ausgewählten Farben aktualisiert.
Nicht alle Updates wurden aktualisiert? Bei benutzerdefinierten Komponenten wie der Karte mit Tipp zur Pflanzenpflege muss zuerst der Figma-Stil angewendet werden. Wählen Sie den Container für die Care-Tipps aus und klicken Sie auf das Dreipunkt-Menü, um einen Stil zuzuweisen. Wählen Sie tertiärer Container aus. Wiederholen Sie den Vorgang mit dem Inhalt der Karte mit den Pflegetipps, weisen Sie aber einen tertiären Container zu. Die kleinen Labels in der Liste sind auch benutzerdefinierte Komponenten, auf die wir später zurückkommen.
Für die Material Design-Komponenten werden Standardzuordnungen verwendet, aber Sie können mit Stilzuweisungen experimentieren, um sie optimal an die Benutzeroberfläche anzupassen. Nehmen Sie sich einen Moment Zeit, um mit verschiedenen Farbhierarchien und Markenausdruck zu experimentieren.

In der Exportdatei für Code ist nur das Design enthalten. Wenn Sie mit einem Entwickler zusammenarbeiten, teilen Sie Modelle, um Tokenzuordnungen zu kommunizieren, da diese nicht im Export enthalten sind.)

Wenn Sie das Plug-in ohne Design öffnen, wird ein Einrichtungsbildschirm angezeigt. „Jetzt starten“ wird die Standardbasis „material-theme“ als Figma-Stilgruppe, die eine Verbindung zu Ihren Modellen herstellt oder im Material Design-Kit verwendet wird.

8. Über das Kernschema hinaus erweitert

Sie haben jetzt Komponenten und Designmodellen ein Markenfarbdesign zugeordnet, aber Sie haben möglicherweise zusätzliche Farben, die hinzugefügt werden müssen. Hier kommt ein erweitertes Schema ins Spiel, mit dem benutzerdefinierte Farben hinzugefügt werden können.

Dabei kann es sich um semantische Farbe, markenspezifische oder sogar produktspezifische Farben handeln, denen entweder Rollen zugewiesen und durch den Farbalgorithmus verschoben werden müssen oder die wie eingegeben bleiben müssen.

Das erweiterte Farbschema bietet auch die Möglichkeit, dynamische (nutzergenerierte) Farben mit Ihren Markenfarben zu kombinieren. Erlaubt dem Kernschema einen personalisierten Einfluss der Nutzenden, während Markenfarben im erweiterten Schema festgelegt werden. Das bedeutet, dass die UI-Elemente für Ihre Nutzer persönlicher sein können und die Farben Ihrer Marke in der App präzisere Momente haben können.

Das Kernschema kann um benutzerdefinierte Farben erweitert werden.

9. Erweitern und anpassen

Wenn das Schema mit benutzerdefinierten Farben erweitert wird, können Sie Farben wie semantische oder zusätzliche Markenfarben hinzufügen.

Benutzerdefiniertes Schema mit benutzerdefinierten Farben

Klicken Sie im Plug-in-Modaldialogfeld unter den Schlüsselfarben auf Farbe hinzufügen.
Das aktuelle Design wird mit einer neuen Zeile „Benutzerdefiniert0“ aktualisiert. Aktualisieren Sie diese Farbe, indem Sie darauf klicken und eine neue Farbe auswählen.
Diese erweiterten Farben sind als Stil in schreibgeschützten Stilen als Custom0 zu finden. Ihre Tonpalette und ihr Schema sind präsent. Ordnen Sie einige der Labels der Liste der neuen Farbe zu. Wählen Sie dazu den Labelhintergrund aus und weisen Sie eine der Rollen der hinzugefügten Farbe zu (Container „Benutzerdefiniert0“).

Benutzerdefinierte Farbe in ausgewählten Farben festlegen.

Der Material Theme Builder generiert die Farben automatisch als Custom#. Wenn Sie eine hinzugefügte benutzerdefinierte Farbe umbenennen möchten, maximieren Sie im Stilsteuerfeld die Gruppe der Stile des Designs. Diese Option wird angezeigt, wenn nichts ausgewählt ist. Suchen Sie dann in der Quelluntergruppe nach Custom0. Wenn Sie die Quelle hier umbenennen, wird die Farbe im Plug-in-Modaldialogfeld umbenannt.

Benutzerdefinierte Farbstile finden Sie im Bedienelement „Stile“.

Das Löschen der hinzugefügten Farbe kann auf ähnliche Weise erreicht werden, indem Sie mit der rechten Maustaste klicken und den Stil löschen. Beim nächsten Öffnen des Plug-ins wird die hinzugefügte Farbe entfernt. Das Umbenennen oder Löschen spiegelt sich möglicherweise nicht im Farbdiagramm wider.

10. Glückwunsch

Sie haben gelernt, wie Sie mit dem Material Theme Builder ein benutzerdefiniertes Farbschema erstellen, es auf Designmodelle anwenden und dem Farbschema etwas hinzufügen. Das neue Farbsystem Material 3 bringt barrierefreie, flexible und kohärente Farben in Designs und wir sind schon gespannt, wie Sie sie einsetzen!

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.