Design: Farben, Schrift und Formen für die ganze App

Design bestimmt das Aussehen Ihrer ganzen App: Farben und Schriftart, Ecken und Schatten sowie den Stil aller Buttons, Karten und Popups und der Felder, in die Mitglieder tippen. Sie legen es dort einmal fest, und alle Bildschirme übernehmen es, außer einem Element mit eigener Farbe.

Spickzettel

Linke Leiste → Design (die Farbpalette) → einen Bereich öffnen → einen Wert ändern → das Handy prüfen → Veröffentlichen.

Was Design festlegt

Farben, Schrift, Form und Abstand und Schatten legen die Grundlagen fest. Buttons, Felder, in die Mitglieder tippen, Karten und Popups gestalten jeweils eine Art von Element, und was Sie dort leer lassen, kommt aus den Grundlagen. Ein gefüllter Button zum Beispiel nutzt die Hauptfarbe und für seinen Text Text auf der Hauptfarbe, bis Sie Buttons ausfüllen.

Bereich	Was er für die ganze App festlegt
Farben	Die Palette: Hauptfarbe und Zweite Farbe, die Seite, die Karten, der Text und die Linien, die Farben für gute Nachrichten, Warnungen und Fehler sowie Hinweistext in Feldern, der Beispieltext, den ein leeres Feld zeigt
Schrift	Die Schriftart und die Basisgröße des Textes
Form und Abstand	Wie rund die Ecken sind und wie viel Abstand zwischen den Elementen und an den Rändern des Bildschirms bleibt
Schatten	Der leichte, der mittlere und der starke Schatten, die die Elemente nutzen
Buttons	Füllung, Text, Ecken und Höhe aller Buttons
Felder, in die Mitglieder tippen	Füllung, Text, Linie und Ecken aller Felder in einem Formular, etwa beim Anmelden
Karten und Popups	Füllung, Text und Ecken aller Karten und Popups. Karten haben zusätzlich einen Schatten
Hintergrund der App	Eine Farbe oder ein Bild hinter jedem Bildschirm
Logoleiste und Titelzeile	Die Leiste mit Ihrem Logo oben und die Zeile mit dem Namen jedes Bildschirms, die beim Scrollen oben bleiben kann
Marke und Installation	Das Symbol im Browser-Tab, das Logo beim Anmelden sowie Name und Symbol der installierten App: siehe Logo, Tab-Symbol und App-Namen ändern

Hinweistext wirkt blasser als die gewählte Farbe

Die App zeigt den Beispieltext in einem leeren Feld mit halber Stärke, er wirkt also immer blasser als die Farbe unter Hinweistext in Feldern. Wählen Sie eine Farbe, die sich etwas stärker vom Feld abhebt, als der Text wirken soll.

So ändern Sie es

1. Öffnen Sie im Hub Benutzeroberflächen → Web & App. Ihre App erscheint auf dem Handy.
2. Klicken Sie in der schmalen Leiste links auf Design (die Farbpalette). Die Vorschau ganz oben zeigt eine Karte, ein Feld, einen Button und die Leiste im aktuellen Aussehen.
3. Öffnen Sie einen Bereich und ändern Sie einen Wert. Das Suchfeld findet eine Einstellung über ihren Namen: Geben Sie zum Beispiel Ecken ein.
4. Sehen Sie sich zwei oder drei Bildschirme auf dem Handy an und klicken Sie dann auf Veröffentlichen. Siehe Veröffentlichen und einen Fehler rückgängig machen.

Ein Wert, der für Ihre App gesetzt ist, zeigt Eigene. Der Pfeil daneben (Dieses Feld zurücksetzen) nimmt Ihren Wert weg, und die Einstellung kehrt zu ihrem Ausgangswert zurück.

Ein Element mit eigener Farbe folgt Design nicht

Eine Farbe, die an einem Element unter Eigenschaften → Stil gesetzt ist, gehört diesem Element, und Änderungen unter Design erreichen es nicht mehr: Ändern Sie die Hauptfarbe, behält dieses Element seine alte Farbe. Das gilt auch für jeden anderen eigenen Wert eines Elements, etwa seine Ecken. Sie können eine Farbe Element für Element wieder an Design binden oder, für Hauptfarbe und Zweite Farbe, alle auf einmal.

Ein Element

Klicken Sie das Element auf dem Handy an und öffnen Sie den Reiter Stil. Unter seiner Farbe:

• Folgt Hauptfarbe heißt, dass es schon an Design gebunden ist.
• Hauptfarbe folgen heißt, dass es dieselbe Farbe hat, aber als Kopie. Klicken Sie darauf, und von da an folgt das Element Design.

Der Editor nennt die Design-Farbe, die passt, nicht nur die Hauptfarbe. Sind zwei Design-Farben gleich, zum Beispiel Weiß, prüfen Sie, ob er die gemeinte anbietet. Eine Design-Farbe, die Sie im Farbfeld auswählen, ist ebenfalls eine Kopie, und der Link zum Binden erscheint danach darunter.

Alle auf einmal

Unter Design → Farben zählt ein Hinweis unter Hauptfarbe und unter Zweite Farbe die Stellen, an denen diese Farbe noch als eigene Farbe steht, zum Beispiel "An 4 Stellen ist #E30613 noch als eigene Farbe hinterlegt." Klicken Sie auf Diese mit ändern: Von da an folgen diese Stellen der Design-Farbe, und der Hinweis verschwindet.

Erst binden, dann die Farbe ändern

Der Hinweis sucht die Farbe, die die Hauptfarbe hatte, als Sie Design geöffnet haben. Klicken Sie zuerst auf Diese mit ändern und wählen Sie dann die neue Farbe: Alle diese Stellen ändern sich mit. Direkt nach einer Änderung klappt es auch, solange Design dazwischen geöffnet blieb.

Nicht unter Design

• Die Leiste, über die Mitglieder in der App navigieren: Öffnen Sie Navigation in der linken Leiste. Die Vorschau unter Design zeigt sie nur an.
• Eine Farbe nur für ein Element: Klicken Sie das Element auf dem Handy an, dann Eigenschaften → Stil. Dieses Element behält dann seine eigene Farbe, wie oben beschrieben.

Siehe auch

• Der neue Editor: die drei Teile des Editors und was Eigene bedeutet
• Logo, Tab-Symbol und App-Namen ändern
• Veröffentlichen und einen Fehler rückgängig machen