Wie stelle ich die Rahmen in meiner App ein?

So funktioniert der Rahmen in einer GoodBarber-App, wo er sitzt und wie Sie seine Farbe und seine Stärke einstellen, bis zur Linie unter einem Titel.

Ein Rahmen ist ein Strich, der der Kante eines Elements folgt. Er zeigt, wo das Element beginnt und wo es endet, und er macht seine Form sichtbar, gerade oder abgerundete Ecken. Eine Zelle, ein Feld, ein Button, ein Datumspunkt, ein Kategorie-Tab, die Tab-Leiste tragen alle einen. Drei Einstellungen beschreiben ihn:

• Die Farbe, auf einer Zelle oder einem Widget standardmäßig transparent, aus Ihrer Palette oder von anderswo.
• Die Stärke, eine ganze Zahl, in Pixeln. Standardmäßig 1.
• Die Seiten, an der Kopfzeile eines Widgets: oben, rechts, unten und links (top, right, bottom, left), jede aktiv oder deaktiviert. Alle vier aktiv, rahmen sie den Titel ein. Die untere allein unterstreicht ihn.

Das ist alles, und genau das macht den Rahmen so einfach einzustellen. Im Design System von GoodBarber ist er das Border-Atom, mit seinen Schlüsseln color und size und, für eine Kopfzeile, einem Schlüssel pro Seite.

In einer GoodBarber-App fügen Sie keinen Rahmen hinzu, Sie machen ihn sichtbar. Die Zellen, die Widgets der Home und ihre Kopfzeilen tragen einen, 1 px breit, transparent. Geben Sie ihm eine Farbe, und er erscheint. Die Felder und die Buttons haben ebenfalls einen, und ihrer ist schon zu sehen, hellgrau auf einem Feld, in der Textfarbe auf einem Outline-Button. Das ist unser Prinzip „Design by system“, jedes Element wird mit seinem Rahmen gebaut, einsatzbereit.

Bei einem Widget der Home wählen Sie die Farbe im Design-Panel, über den Pfad Meine App › Struktur › Start › Ihr Widget › Bearbeiten. Dort finden Sie drei Farben, „Umrandungen“ für die Kopfzeile, „Randfarbe“ für den Rahmen des ganzen Widgets und „Farbe der Umrandung“ für jede Zelle. Die Stärke dagegen stellen Sie im JSON ein, dazu kommen wir gleich.

Für die Felder genügt eine einzige Einstellung für die ganze App. Sie liegt unter App-Stil, mit dem Button { EDITION }, von dem weiter unten die Rede ist, unter designComponents, textField, dann border.

Eine Liste hat eine Regel mehr. Wenn ihre Zellen weder Hintergrund noch Rahmen haben, folgen sie direkt auf der Seite aufeinander, und eine feine Linie trennt sie, die Trennlinie, in der Farbe „Trennzeichen für Listen“ Ihrer Farben. Geben Sie den Zellen eine Farbe, auf dem Hintergrund oder auf dem Rahmen, und die Liste wechselt den Modus. Die Trennlinie verschwindet von selbst. Jede Zelle löst sich von ihren Nachbarn, und ihre Ecken erscheinen, je nach Ihrer Formeinstellung. Nichts zu deaktivieren, nichts auszurichten.

So stapelt eine Liste in einer GoodBarber-App nie zwei Striche, die Linie zwischen den Zeilen oder den Strich um jede Zelle, und das System trifft die Wahl. Das ist unser Prinzip „No design burden“, damit Design nie zur Last wird.

Hier derselbe Bildschirm zweimal. Links sind alle Rahmen 1 px breit, in einem dezenten Grau. Sie grenzen jedes Element ab, aber nichts sticht hervor, alles ist gleichwertig. Rechts wechseln sie zum weichen Schwarz der Palette (#282727), und ihre Stärke folgt der Rolle jedes Elements. 1 px für die Navigationsleiste und die Termin-Zelle, 2 px für die Widget-Kopfzeilen und den Datumspunkt, 4 px für die eine hervorgehobene Meldung. Ein harter Schatten unter dem Datumspunkt gibt dem Bildschirm den letzten Schliff seines Plakat-Charakters. Das Auge weiß sofort, wohin.

Die Stärken sind im Handumdrehen geändert. Probieren Sie, vergleichen Sie in der Vorschau, und behalten Sie, was Ihrem Auge besser gefällt.

Dieselbe Zelle kann sehr unterschiedliche Rahmen tragen, und jeder verändert den Stil Ihrer App. Das Bild zeigt vier, vom dezentesten bis zum kräftigsten:

Die erste Zeile entspricht der Standardeinstellung, die Sie erhalten, ohne etwas zu schreiben. Die drei anderen übernehmen Sie genau so in den Editor, Schlüssel für Schlüssel.

Keiner dieser Rahmen ist besser als ein anderer, und alle werden mit denselben Schlüsseln eingestellt. Der kräftigste kann ganz allein einer App ihren Stil geben, wie bei unserem Entwurf einer Kunstgalerie-App, im Neobrutalismus, auf Dribbble, mit kräftigen schwarzen Rahmen und geraden Ecken.

Meine Lieblingseinstellung passt in einen Strich, eine 1 px breite Linie unter dem Titel eines Widgets, in der Linienfarbe der Palette. Sie ist Ihnen in den Bildern dieses Artikels begegnet. Wie in einer Zeitung trennt sie den Titel vom Inhalt, ohne etwas zu schließen, und die Liste atmet. Ein vollständiger Rahmen um den Titel würde ihn zu einem Button machen.

Ihre Farbe wählen Sie im Panel des Widgets unter „Umrandungen“, und ihre Seiten in { EDITION }, das ist der Handgriff aus Schritt 4 oben.

Der Rahmen in Kürze

• In einer GoodBarber-App ist der Rahmen schon da, 1 px, auf den Zellen, den Widgets und ihren Kopfzeilen, den Feldern und den Buttons, transparent außer auf Feldern und Outline-Buttons.
• Drei Einstellungen, die Farbe, die Stärke (eine ganze Zahl in Pixeln) und, an der Kopfzeile eines Widgets, die Seiten (top, right, bottom, left), jede aktiv oder deaktiviert.
• Rahmen oder Trennlinie, nie beides. Eine Hintergrund- oder Rahmenfarbe auf der Zelle entfernt die Trennlinie und setzt die Zelle ab.
• Bei einem Widget der Home drei Farben im Panel, die Kopfzeile, das Widget, die Zelle.
• Für die Felder gilt eine einzige Einstellung für die ganze App.
• Die Stärke und die Seiten werden im JSON eingestellt, mit der kostenlosen Erweiterung Advanced edition (Button { EDITION }).