Welche Form für meine App: spitze, abgerundete oder runde Ecken?

Hier sehen Sie, was die Form in einer GoodBarber-App verändert, wo sie eingestellt wird und wie Sie bis zum Radius Ihrer Wahl gehen.

Die Form ist die Rundung der Ecken Ihrer Zellen, Ihrer Vorschaubilder, Ihrer Buttons und Ihrer Felder, das, was man oft abgerundete Ecken nennt. Im GoodBarber Design System ist das das Shape atom, und es bietet drei fertige Formen. Quadrat, die Ecke ist spitz, der Radius beträgt 0. Abgerundet, der Radius beträgt 4 Pixel, genug, um weicher zu wirken, ohne aufzufallen. Runde, er beträgt 12 Pixel bei einer Zelle oder einem Vorschaubild, und bei einem Button oder einem Feld nimmt er die ganze Höhe ein, die Form, die Designer Pill nennen.

Sie stellen diese Ecken nicht Element für Element ein. Eine Form, die Sie unter Meine App › App-Stil › Vorschaubilder und Zellen wählen, gilt für alle Listen, alle Widgets der Home und ihre Kopfzeilen, auf all Ihren Seiten. Das ist unser Prinzip „Set once, consistent everywhere“, ein Wert, einmal gesetzt und überall übernommen. Buttons und Felder haben ihre eigene Option, ebenfalls im App-Stil, unter Schaltflächen und Formularfelder, mit denselben drei vordefinierten Formen. So können Sie eckige Zellen und runde Buttons behalten.

In einer GoodBarber-App mit spitzen Ecken ist nicht alles eckig. Zellen, Vorschaubilder und Buttons sind es. Aber der Avatar eines Autors bleibt ein Kreis, von Natur aus rund. Und andere kleine Elemente haben ihre eigene Form, die nicht der für die App gewählten Form folgt, das Abspielsymbol eines Videos, die Anzeige seiner Dauer, der Datumspunkt. Unsere Vorlagen liefern sie rund. Einen Kreis erkennt man auf einen Blick, auch ganz klein, und er kennzeichnet etwas Besonderes, eine Person, eine Aktion, eine Orientierung.

Ihre Form ist trotzdem nicht festgelegt. Der Datumspunkt hat seinen eigenen Formregler mit drei Stufen. So hat die App von Unit 7 oben, die einer Siebdruckwerkstatt, ihre Datumspunkte eckig gemacht, um ihre Entscheidung für spitze Ecken bis zum Ende durchzuziehen.

Hier sehen Sie zweimal denselben Bildschirm, den von Eastside Music Workshop, einer Musikschule. Links ist alles eckig, die Option Quadrat für Vorschaubilder und Zellen, die Tab-Leiste mit „Eckenstil“ auf Quadratisch, der Datumspunkt in der ersten Stufe seines Reglers. Die App ist sauber, und für eine Schule etwas streng. Rechts haben sich drei Einstellungen geändert, das Objekt shape auf custom mit einem Radius von 20, die Tab-Leiste auf „Vollständig abgerundet“ und der Datumspunkt auf der runden Option. Sonst hat sich nichts bewegt, weder die Farben noch die Schriften noch die Abstände. Und doch verändert die App ihren Charakter. Sie wird einladend, wie eine Schule, in die Groß und Klein kommen, um Musik zu lernen.

Mehr macht ein Radius nicht, und genau deshalb verdient er es, gewählt statt hingenommen zu werden.

Drei Apps, drei Formen, und jede erzählt etwas anderes. Von links nach rechts zeigt das Bild spitze Ecken für die App einer Siebdruckwerkstatt, abgerundete für die einer naturkundlichen Gesellschaft, runde für die einer Musikschule. Die Tabelle ergänzt den freien Radius.

Die ersten drei Zeilen wählen Sie im App-Stil. Die vierte stellen Sie im Editor ein, mit zwei Schlüsseln.

Keine Form ist besser als eine andere. Jede dieser drei Apps hält durch ihre eigene zusammen, weil sie dasselbe sagt wie ihre Farben und ihre Schriften.

Meine liebste Einstellung ist die von Eastside, ein Radius von 20 auf den Zellen, runde Buttons und eine runde Tab-Leiste. Sie kommt aus dem Logo der Schule, drei abgerundeten Bögen, und diese Kurve kehrt in jeder Zelle und jedem Button wieder. Mit so großzügigen Rundungen wird jede Zelle zu einem klar abgesetzten Objekt auf dem Hintergrund, und die runden Buttons fallen auf den ersten Blick auf.

Der Radius von 20 kommt ins JSON, mit den drei Schritten aus „Stellen Sie die Form Ihrer App in GoodBarber ein“. Buttons und Felder wechseln auf die Option Runde, und die Tab-Leiste auf „Vollständig abgerundet“.

Die Form in Kürze

• In einer GoodBarber-App wählen Sie die Form der Ecken unter drei Optionen, Quadrat (0), Abgerundet (4 px) und Runde (12 px, oder die ganze Höhe bei Buttons und Feldern).
• Eine Form, die unter App-Stil › Vorschaubilder und Zellen gewählt wird, gilt für alle Zellen, Vorschaubilder, Kopfzeilen und Hintergründe der Widgets. Buttons und Felder haben dieselbe Wahl, in ihrem eigenen Panel.
• Die Tab-Leiste hat ihre eigene Einstellung, „Eckenstil“, mit den Vorlagen Bold, Minimal und Clean TabBar.
• Einige kleine Elemente folgen nicht der Form der App. Der Avatar ist von Natur aus rund, das Abspielsymbol, die Dauer und der Datumspunkt haben ihre eigene Form, in unseren Vorlagen rund.
• Für einen genauen Radius gehen Sie über das JSON mit der kostenlosen Erweiterung Advanced edition, indem Sie type auf custom setzen und radius hinzufügen, eine ganze Zahl.