Materialfarbe anpassen

1. Einführung

Zuletzt aktualisiert: 18.04.2022

Apps können eine Reihe von Farben aus Basisschemata, von Nutzern generierten dynamischen Farben oder Markenfarben annehmen.

Im vorherigen Material You-Farblabor wurde untersucht, wie dynamische Farben in Designmodellen visualisiert werden können. Sie können aber auch Material-Theming verwenden, um Ihre App mit Ihren Markenfarben anzupassen. Wenn Sie das neue Farbsystem mit Ihren Markenfarben verwenden, erhalten Sie ein barrierefreies Farbschema, das dynamischer sein kann.

Lerninhalte

Benutzerdefiniertes Design mit dem Material Theme Builder erstellen
Ein benutzerdefiniertes Design auf Designmodelle anwenden.
Dynamische und benutzerdefinierte Farben lassen sich kombinieren.

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

Voraussetzungen

2. Jetzt starten

Einrichtung

Rufen Sie zuerst die Designlab-Figma-Datei auf. 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 Customizing 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

Die Datei ist in sich geschlossen und beginnt mit einer Einführung. Jeder Abschnitt ist in eine Reihe von Artboards unterteilt, die miteinander verknüpft sind. Er beginnt mit einigen Kernkonzepten für den Abschnitt und wird dann mit Übungen fortgesetzt. Die Abschnitte und Übungen bauen aufeinander auf und sollten nacheinander durchgearbeitet werden.

In diesem Codelab werden diese Konzepte und Übungen genauer erläutert. In diesem Codelab erfahren Sie mehr über die neuen Material You-Funktionen.

Auf der Zeichenfläche Intro befinden sich Schaltflächen, die die Zeichenflächen 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. Material-Farbschema

Zuerst ein Überblick darüber, wie Farbe in Material verwendet wird und wie das neue Farbsystem funktioniert.

Farbe wird verwendet, um Stil auszudrücken und Bedeutung zu vermitteln, sei es eine persönliche Bedeutung für den Nutzer, eine Markenbedeutung oder eine semantische Bedeutung. Das Farbsystem berücksichtigt die Variabilität dynamisch wechselnder Farbschemas, die sich aus Änderungen der Nutzereingaben ergeben. Die Logik von Tonbeziehungen und Verschiebungen in Farbton und Chroma bildet die Grundlage für eine flexible Farbanwendung.

Der Farbraum bietet eine Möglichkeit, barrierefreie helle und dunkle Farbschemata aus einer Quellfarbe zu generieren. Dazu werden fünf Primärfarben und dann tonale Paletten generiert, in denen bestimmte tonale Schritte ausgewählt werden.

Diese Technik zur Farbverschiebung bietet nicht nur ein barrierefreies Farbschema, sondern auch Methoden zum Erstellen von Markenschemas, die barrierefrei sind und mit nutzergenerierten Farbschemas harmonieren.

Farbschemata werden aus fünf Hauptfarben in tonale Paletten generiert, um zugängliche Schemata zu erstellen.

Markenspezifisches Thema

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

Ein benutzerdefiniertes Schema ist ein Farbschema, das nicht vom Hintergrundbild des Geräts des Nutzers, sondern vom App-Entwickler abgeleitet wird. Das M3-Farbsystem und benutzerdefinierte Schemata sind die Grundlage für die Aktivierung dynamischer Farben in Apps.

Das benutzerdefinierte Schema schließt die Lücke zwischen M2 und M3, indem die erforderlichen Tokens (Farbslots) eingerichtet werden, um die Migration zu vereinfachen und eine stärkere Markendarstellung zu ermöglichen.

Markenfarben in den Material Theme Builder einfügen

4. Farbschema: Akzentfarben

Die Grundlage eines Farbschemas ist die Gruppe von fünf Hauptfarben, die sich jeweils auf separate Tonpaletten mit 13 Tönen beziehen. Den Farbrollen in einer Benutzeroberfläche werden bestimmte Töne aus jeder tonalen Palette zugewiesen. Öffnen Sie zuerst das Material Theme Builder-Plug-in und richten Sie die erste Akzentfarbe ein: Primär.

Wenn Sie nur „Primär“ eingeben, wird diese Farbe als Quelle zum Generieren eines gesamten Farbschemas verwendet.

Klicken Sie im Plug-in-Modal auf „Benutzerdefiniert“. Dadurch wird das Design auf ein benutzerdefiniertes Design umgestellt. In diesem Lab verwenden wir das bereits generierte Material-Design. Sie können aber auch ein neues Design erstellen. Weitere Informationen finden Sie unter Dynamische Farben visualisieren.
Als Nächstes legen wir eine primäre Schlüsselfarbe fest. Die primäre Farbe kann Ihre Hauptmarkenfarbe oder die am häufigsten verwendete primäre Akzentfarbe sein. Die restlichen Schlüsselfarben werden basierend auf der Primärfarbe automatisch ausgefüllt. Sie müssen also keine zusätzlichen Farben hinzufügen, wenn Sie sie nicht benötigen.

5. Rest des Designs erstellen

Die Primärfarbe wird zum Generieren des Designs verwendet. Sie können aber auch Akzentfarben haben, die die primäre Markenfarbe unterstützen.

Fügen Sie im Plugin-Modal eine sekundäre Farbe hinzu, indem Sie auf das Feld „Secondary color“ (Sekundäre Farbe) klicken. Sekundäre Rollen werden für weniger wichtige Komponenten der Benutzeroberfläche verwendet und bieten mehr Möglichkeiten für die Farbauswahl. Die sekundäre Farbe wird im Farbschema und in der App-Benutzeroberfläche aktualisiert.
Wiederholen Sie den Vorgang für „Tertiär“. Tertiäre Rollen werden für kontrastierende Akzente verwendet, mit denen Primär- und Sekundärfarben ausgeglichen oder die Aufmerksamkeit auf ein Element gelenkt werden kann. Die tertiäre Farbe kann von Herstellern nach Belieben verwendet werden und soll eine größere Farbvielfalt bei Produkten ermöglichen.
Neutrale Rollen werden jetzt für Oberflächen und Hintergründe sowie für Text und Symbole mit hoher Gewichtung verwendet.

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

Ihre Markenfarben sind jetzt im primären Farbschema enthalten, das an den M3-Farbraum angepasst wurde. Es ist vollständig barrierefrei und kann als Design exportiert und im Code implementiert werden.

6. Design anwenden

Rollen und Tokens

Jede Akzentfarbe (primär, sekundär und tertiär) wird in einer Gruppe von vier kompatiblen Farben mit unterschiedlichen Tönen bereitgestellt, die sich für die Kombination, die Definition von Akzenten und die visuelle Darstellung eignen. Die Gruppe besteht aus der Akzentfarbe, der Farbe „Ein“, der Containerfarbe und der Farbe „Auf Container“.

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

Design-Tokens stellen die kleinen, wiederholten Designentscheidungen dar, aus denen sich der visuelle Stil eines Designsystems zusammensetzt. Tokens ersetzen statische Werte wie Hex-Codes für Farben durch selbsterklärende Namen. Design-Tokens stellen eine sinnvolle Verbindung zwischen Stilentscheidungen her, die sonst keine klare Beziehung zueinander hätten.

Mit dem Figma-Plug-in werden Tokens erstellt und Ihre eigenen Quellfarben in Form von Figma-Stilen eingegeben, um eine Verbindung zu vorhandenen Mock-ups, Marken-Styleguides und sogar Designsystemen herzustellen.

Design-Tokens schaffen eine gemeinsame Sprache zwischen Farbrollen und Implementierung.

Farbenhierarchie

Wenn Sie Farbrollen auf Ihre Mockups anwenden, sollten Sie die Reihenfolge der Wichtigkeit oder Hierarchie Ihrer Elemente berücksichtigen. Mit diesem Konzept können Markenfarben den entsprechenden Rollen zugewiesen und in der Benutzeroberfläche abgebildet werden. In der Regel ziehen gesättigtere oder konzentriertere Farben zuerst die Aufmerksamkeit eines Nutzers auf sich. Daher werden der primären Farbrolle Komponenten zugeordnet, die stärker auf Calls-to-Action ausgerichtet sind. Der Material Theme Builder verwendet das M3-Farbsystem, um geeignete Farben zu generieren. Wenn Sie jedoch sekundäre oder tertiäre Farben mit höherer Sättigung angeben, werden Farben erstellt, die die Primärfarbe überstrahlen. Überlegen Sie sich, in welcher Reihenfolge Ihre Nutzer mit der Benutzeroberfläche und den Inhalten interagieren sollen, um Farbrollen zuzuweisen. Nicht alle Komponenten sollten die Primärfarbe verwenden.

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

7. Zum Design wechseln

Damit wir das von Ihnen erstellte benutzerdefinierte Design auf Ihre Designs anwenden können, müssen wir das Mockup auf die Tokens im vorhandenen Material-Design festlegen.

Material-Komponenten werden mit vordefinierten Rollen ausgeliefert und funktionieren automatisch mit dem Material Theme Builder.

Über das Material Theme Builder-Modal zum Design wechseln.

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 „Tauschen“. Das Stilpräfix wird in den Auswahlfarben aktualisiert.
Nicht alles aktualisiert? Bei benutzerdefinierten Komponenten wie der Karte mit Pflanzenpflegetipps muss zuerst der Figma-Stil angewendet werden. Wählen Sie den Container mit dem Pflegetipp aus. Klicken Sie dann auf das Vierpunkt-Symbol, um einen Stil zuzuweisen, und wählen Sie Tertiärer Container aus. Gehen Sie mit dem Inhalt der Karte mit dem Pflegetipp genauso vor, weisen Sie ihm aber einen on-tertiary-Container zu. Die kleinen Labels in der Liste sind ebenfalls benutzerdefinierte Komponenten. Darauf gehen wir später noch einmal ein.
Die Material Design-Komponenten verwenden Standardzuordnungen. Sie können jedoch mit Stilzuweisungen experimentieren, um die UI optimal anzupassen. Nehmen Sie sich einen Moment Zeit, um verschiedene Farbhierarchien und Markendarstellungen auszuprobieren.

(Nur das Theme ist in der Exportdatei für Code enthalten. Wenn Sie mit einem Entwickler zusammenarbeiten, sollten Sie ihm Mockups zur Verfügung stellen, um die Tokenzuordnungen zu kommunizieren, da diese nicht im Export enthalten sind.

Wenn Sie das Plug-in ohne ein Theme öffnen, wird ein Einrichtungsbildschirm angezeigt, auf dem Sie mit der Einrichtung beginnen können. Wenn Sie auf „Get started“ (Loslegen) klicken, wird das Standard-Referenzdesign „material-theme“ als Figma-Stilgruppe generiert, die Sie mit Ihren Mockups verbinden oder mit dem Material Design-Kit verwenden können.

8. Über das Kernschema hinaus

Sie haben jetzt ein Markenfarbdesign, das Komponenten und Design-Mockups zugeordnet ist. Möglicherweise müssen Sie jedoch zusätzliche Farben einfügen. Hier kommt ein erweitertes Schema ins Spiel, mit dem benutzerdefinierte Farben hinzugefügt werden können.

Das können semantische, markenspezifische oder sogar produktspezifische Farben sein, denen Rollen zugewiesen werden müssen und die durch den Farbalgorithmus verschoben werden oder so bleiben, wie sie eingegeben wurden.

Das erweiterte Farbschema bietet auch die Möglichkeit, dynamische (nutzergenerierte) Farben mit Ihren Markenfarben zu kombinieren. Im Hauptschema können Nutzer die Farben anpassen, während die Markenfarben im erweiterten Schema festgelegt werden. So können die UI-Elemente besser auf Ihre Nutzer abgestimmt werden und Ihre Markenfarben können in der App präziser eingesetzt werden.

Das Kernschema kann um benutzerdefinierte Farben erweitert werden.

9. Erweitern und anpassen

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

Benutzerdefiniertes Schema mit benutzerdefinierten Farben.

Klicken Sie im Plugin-Modal unter den Schlüsselfarben auf Farbe hinzufügen.
Das aktuelle Design wird mit einer neuen Custom0-Zeile aktualisiert. Klicken Sie auf das Farbfeld, um die Farbe zu ändern, und wählen Sie eine neue Farbe aus.
Diese erweiterten Farben sind als Stil in schreibgeschützten Stilen unter Custom0 verfügbar. Sowohl die Farbpalette als auch das Farbschema sind vorhanden. Wir weisen nun einigen der Labels in der Liste die neue Farbe zu. Dazu wählen wir den Labelhintergrund aus und weisen ihm eine der hinzugefügten Rollen (on-custom0-Container) zu.

Benutzerdefinierte Farbe in ausgewählten Farben festlegen

Im Material Theme Builder werden die Farben automatisch als „Custom#“ generiert. Wenn Sie eine hinzugefügte benutzerdefinierte Farbe umbenennen möchten, maximieren Sie im Stilbereich die Gruppe mit den Stilen des Designs (diese 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-Modal umbenannt.

Benutzerdefinierte Farbstile finden Sie im Bereich „Stile“.

Die hinzugefügte Farbe kann auf ähnliche Weise gelöscht werden, indem Sie mit der rechten Maustaste klicken und den Stil löschen. Wenn das Plug-in das nächste Mal geöffnet wird, wird die hinzugefügte Farbe entfernt. Das Umbenennen und Löschen wird möglicherweise nicht im Farbdiagramm berücksichtigt.

10. Glückwunsch

Sie haben gelernt, wie Sie mit dem Material Theme Builder ein benutzerdefiniertes Farbdesign erstellen, es auf Designmodelle anwenden und das Farbschema erweitern. Das neue Material 3-Farbsystem bietet barrierefreie, flexible und einheitliche Farben für Designs. Wir sind gespannt, wie Sie es nutzen werden.

Wenn Sie Fragen haben, können Sie uns jederzeit über @MaterialDesign auf Twitter kontaktieren.

Weitere Designinhalte und Tutorials findest du auf youtube.com/MaterialDesign.