Wie ändere ich die Farben meiner App?

Hier sehen Sie die Rolle jeder Farbe, wie Sie die Farben für die ganze App ändern und wie Sie einem einzelnen Element eine eigene Farbe geben.

Im Panel Farben haben die vier „Primärfarben“ und danach die zwei „Sekundärfarben“ jeweils eine Rolle, dieselbe in der ganzen App. Hier sind sie in der Reihenfolge des Panels, wie auf dem Bild.

1. Der Haupttext, die Titel und der Text der Artikel.
2. Der Akzent, die Information unter dem Titel, die Adresse einer Veranstaltung, das Icon einer ausgewählten Aktion.
3. Der Sekundärtext, die Information über dem Titel (Datum, Kategorie), die Autoren, der Link zur vollständigen Liste.
4. Der Hintergrund der Flächen, die Zellen und die Widget-Kopfzeilen.
5. Die Rahmen, um die Zellen.
6. Der sekundäre Hintergrund, der eines Widgets, wenn Sie ihm einen geben.

In einer GoodBarber-App hat eine Farbe also eine Funktion, keinen festen Platz. Ist Ihr Akzent blau, wird alles, was den Akzent trägt, blau, von einem Bildschirm zum nächsten. Und wenn Sie den Farbton wechseln, bleibt Text Text und Hintergrund Hintergrund. Die Bereiche der App, die „Kopfzeile“, das Menü, die Buttons, haben ihre eigenen Einstellungen, im selben Panel. So kommt das Gelb der Datumspunkte, die 7 auf dem Bild, aus der Einstellung „Andere Schaltflächen“.

Hier derselbe Bildschirm zweimal, und zwischen beiden hat sich nur eine Farbe geändert, der Akzent. Links hat er die Farbe des Textes, und alles liest sich auf derselben Ebene. Rechts wechselt er zum Blau der Marke, und mit ihm die Information unter dem Titel der Mitteilung und die Adresse jeder Probe, mit ihrem Icon. Das Auge findet sofort, was nützlich ist. Weder die Titel noch die Hintergründe noch die Schriften haben sich verändert.

Eine einzige Einstellung reicht weit. In einer unserer GoodBarber-Apps hat das Ändern der Haupttextfarbe 95 Einstellungen auf einen Schlag neu gefärbt, in der ganzen App, ohne einen einzigen Bildschirm zu öffnen. Das ist unser Prinzip „No design burden“, damit Sie sich nie selbst um die Stimmigkeit kümmern müssen.

Um Ihre Einstellung zu beurteilen, schauen Sie sich die Vorschau an, bevor Sie auf „Übernehmen“ klicken, und gehen Sie dann zwei oder drei Seiten durch. Springt der Akzent dort ins Auge, wo er es nicht sollte, liegt es wahrscheinlich an dem Element, das ihn trägt. Bessern Sie es in seinem Design-Panel nach.

Diese vier Apps nutzen dieselben Rollen, und doch sehen sie sich nicht ähnlich. Der Unterschied liegt in den Einstellungen, in denen jede ihre Farbe einsetzt.

• Bei Eastside Music Workshop steckt das Blau im Akzent, der hier die Adresse einer Probe färbt, und das Gelb in „Andere Schaltflächen“, die die Datumspunkte färben.
• Bei Blandas Astronomy Club sitzt das Bernsteingelb in den Einstellungen der Tab-Leiste, und hier leuchtet nur der aktuelle Tab auf.
• Bei Unit 7 füllt das Neongrün den Hintergrund des aktiven Tabs, eine Farbfläche, auf der sein Name steht.
• Bei Tweed & Cheviot steckt das Rot im Akzent, doch die Information unter dem Titel erscheint nur dort, wo sie zählt, hier die Zahl, die man sich merken soll.

Wo Sie Ihre Akzentfarbe einsetzen, entscheiden Sie selbst. Fragen Sie sich, was sie sagen soll, was aktiv ist, was neu ist, was auf eine Aktion wartet.

Meine Lieblingseinstellung fällt nicht auf. Für den Hintergrund der Flächen nehme ich nie #FFFFFF, sondern ein leicht getöntes Weiß, #FFF8ED bei Eastside, auf einem „App-Hintergrund“, der eine Stufe dunkler ist, #EDE7DD. Die Zellen heben sich ohne Schatten ab, und der Bildschirm bekommt eine Materialität, wie Papier. Für den Haupttext ebenso nie #000000, sondern ein farbiges Fast-Schwarz, hier #23252B. Reines Schwarz auf Weiß ergibt den maximalen Kontrast, 21:1, den ich bei langem Lesen hart finde. #23252B auf #FFF8ED hält 14,5:1, das Doppelte der strengsten WCAG-Stufe (7:1), und wirkt dabei weicher.

Drei Werte, und die ganze App gewinnt, die Titel, die Texte, die Zellen. Das ermöglicht die Rolle, einmal einstellen, überall wirksam.

Die Farben in Kürze

• In einer GoodBarber-App werden die Farben der ganzen App in einem einzigen Panel eingestellt, zwanzig Einstellungen, darunter sechs Farben mit je einer Rolle.
• Eine Farbe hat eine Funktion, keinen festen Platz, der Haupttext, der Akzent, der Sekundärtext, der Hintergrund der Flächen, die Rahmen, der sekundäre Hintergrund.
• Alles wird im Panel Farben eingestellt, ein Farbschema, die Magische Palette oder eine einzelne Farbe, dann der Button „Übernehmen“, der die ganze App neu färbt.
• Ein Element passen Sie im Panel seiner Rubrik oder seines Widgets an, oder Schlüssel für Schlüssel mit der kostenlosen Erweiterung Advanced edition.
• Stellen Sie zuerst das Farbschema ein, danach die Details.
• Zwei Designer-Einstellungen, nie reines Weiß für die Flächen, nie reines Schwarz für den Text.