Che forma per la mia app: angoli retti, arrotondati o tondi?

Ecco che cosa cambia la forma in un'app GoodBarber, dove si regola e come arrivare fino al raggio che preferisci.

La forma è l'arrotondamento degli angoli delle tue celle, delle tue miniature, dei tuoi pulsanti e dei tuoi campi, quelli che spesso si chiamano angoli arrotondati. Nel Design System di GoodBarber è lo Shape atom, e propone tre forme pronte all'uso. Quadrato, l'angolo è retto e il raggio vale 0. Arrotondato, il raggio vale 4 pixel, quanto basta per addolcire senza farsi notare. Rotondo, vale 12 pixel su una cella o una miniatura, e su un pulsante o un campo prende tutta l'altezza, la forma che i designer chiamano pill.

Non regoli questi angoli elemento per elemento. Una forma scelta in La mia app › Stile dell'app › Miniature e celle vale per tutti gli elenchi, tutti i widget della Home e le loro intestazioni, su tutte le tue pagine. È il nostro principio «Set once, consistent everywhere», un valore impostato una volta e ripreso ovunque. I pulsanti e i campi hanno la loro opzione, sempre in Stile dell'app, sotto Pulsanti e Campi del modulo, con le stesse tre forme predefinite. Puoi così tenere celle quadrate e pulsanti tondi.

In un'app GoodBarber con angoli retti, non tutto è quadrato. Le celle, le miniature e i pulsanti lo sono. Ma l'avatar di un autore resta un cerchio, tondo per natura. E altri piccoli elementi hanno una forma propria, che non segue quella scelta per l'app, l'icona di riproduzione di un video, l'etichetta della sua durata, il bollino della data. I nostri modelli li consegnano tondi. Un cerchio si riconosce al primo sguardo, anche piccolissimo, e segnala qualcosa a parte, una persona, un'azione, un punto di riferimento.

La loro forma però non è fissa. Il bollino della data ha un proprio cursore di forma, a tre posizioni. È così che l'app di Unit 7 qui sopra, quella di un laboratorio di serigrafia, ha reso quadrati i suoi bollini, per andare fino in fondo con la sua scelta degli angoli retti.

Ecco due volte la stessa schermata, quella di Eastside Music Workshop, una scuola di musica. A sinistra, tutto è quadrato, l'opzione Quadrato per miniature e celle, la barra delle schede con «Stile degli angoli» su Quadrato, il bollino della data nella prima posizione del suo cursore. L'app è pulita, e un po' severa per una scuola. A destra sono cambiate tre impostazioni, l'oggetto shape in custom con un raggio di 20, la barra delle schede su «Completamente arrotondato» e il bollino sull'opzione tonda. Nient'altro si è mosso, né i colori, né i caratteri, né gli spazi. Eppure l'app cambia carattere. Diventa accogliente, come una scuola dove piccoli e grandi vengono a imparare la musica.

È tutto ciò che fa un raggio, ed è per questo che merita di essere scelto invece che subito.

Tre app, tre forme, e ognuna racconta altro. Da sinistra a destra, l'immagine mostra angoli retti per l'app di un laboratorio di serigrafia, arrotondati per quella di una società di storia naturale, tondi per quella di una scuola di musica. La tabella aggiunge il raggio libero.

Le prime tre righe si scelgono in Stile dell'app. La quarta si regola nell'editor, con due chiavi.

Nessuna forma è migliore di un'altra. Ognuna di queste tre app sta in piedi grazie alla sua, perché dice la stessa cosa dei suoi colori e dei suoi caratteri.

La mia impostazione preferita è quella di Eastside, un raggio di 20 sulle celle, pulsanti tondi e una barra delle schede tonda. Viene dal logo della scuola, tre archi arrotondati, e quella curva torna in ogni cella e in ogni pulsante. Con curve così generose, ogni cella diventa un oggetto ben distinto sullo sfondo, e i pulsanti tondi si notano al primo sguardo.

Il raggio di 20 si imposta nel JSON, con i tre passaggi di «Regola la forma della tua app in GoodBarber». I pulsanti e i campi passano all'opzione Rotondo, e la barra delle schede a «Completamente arrotondato».

La forma in breve

• In un'app GoodBarber, la forma degli angoli si sceglie tra tre opzioni, Quadrato (0), Arrotondato (4 px) e Rotondo (12 px, o tutta l'altezza su pulsanti e campi).
• Una forma scelta in Stile dell'app › Miniature e celle vale per tutte le celle, miniature, intestazioni e sfondi dei widget. I pulsanti e i campi hanno la stessa scelta, nel loro pannello.
• La barra delle schede ha una sua impostazione, «Stile degli angoli», con i modelli Bold, Minimal e Clean TabBar.
• Alcuni piccoli elementi non seguono la forma dell'app. L'avatar è tondo per natura, l'icona di riproduzione, la durata e il bollino della data hanno una forma propria, tonda nei nostri modelli.
• Per un raggio preciso, passa dal JSON con l'estensione gratuita Edizione avanzata, impostando type su custom e aggiungendo radius, un numero intero.