Come regolare i bordi nella mia app?

Ecco come funziona il bordo in un'app GoodBarber, dove si trova e come regolarne il colore e lo spessore, fino al filetto sotto un titolo.

Un bordo è un tratto che segue il margine di un elemento. Segna dove comincia e dove finisce, e ne rivela la forma, angoli vivi o arrotondati. Una cella, un campo, un pulsante, un bollino della data, una scheda di categoria, la barra delle schede ne portano uno. Tre impostazioni lo descrivono:

• Il colore, trasparente per impostazione predefinita su una cella o un widget, da scegliere nella tua palette o altrove.
• Lo spessore, un numero intero, in pixel. Vale 1 per impostazione predefinita.
• I lati, sull'intestazione di un widget: in alto, a destra, in basso e a sinistra (top, right, bottom, left), ciascuno attivo o disattivato. Attivi tutti e quattro, incorniciano il titolo. Quello in basso, da solo, lo sottolinea.

Tutto qui, ed è questo che rende il bordo così semplice da regolare. Nel Design System di GoodBarber è l'atomo Border, con le sue chiavi color e size e, per un'intestazione, una chiave per lato.

In un'app GoodBarber non aggiungi un bordo, lo riveli. Le celle, i widget della Home e le loro intestazioni ne portano uno, di 1 px, trasparente. Dagli un colore e appare. Anche i campi e i pulsanti ne hanno uno, e il loro si vede già, grigio chiaro su un campo, del colore del testo su un pulsante con contorno. È il nostro principio «Design by system», ogni elemento è costruito con il suo bordo, pronto all'uso.

Su un widget della Home, il colore si sceglie nel pannello di design, seguendo il percorso La mia app › Struttura › Home › il tuo widget › Personalizza. Vi trovi tre colori, «Contorni» per l'intestazione, «Colore bordo» per la cornice dell'intero widget e «Colore del bordo» per ogni cella. Lo spessore, invece, si regola nel JSON, ci arriviamo.

Per i campi, una sola impostazione basta per tutta l'app. Vive in Stile dell'app, con il pulsante { EDIZIONE } di cui parliamo più sotto, sotto designComponents, textField e poi border.

Una lista ha una regola in più. Quando le sue celle non hanno né sfondo né bordo, si susseguono direttamente sulla pagina e un filetto sottile le separa, il separatore, nel colore «Separatore dell'elenco» dei tuoi Colori. Dai un colore alle celle, al loro sfondo o al loro bordo, e la lista cambia modalità. Il separatore scompare da solo. Ogni cella si stacca dalle vicine e i suoi angoli appaiono, secondo la tua impostazione di forma. Niente da disattivare, niente da allineare.

Così, in un'app GoodBarber, una lista non accumula mai due tratti, il filetto tra le righe o il tratto attorno a ogni cella, ed è il sistema a scegliere. È il nostro principio «No design burden», perché il design non sia mai un peso.

Ecco due volte la stessa schermata. A sinistra, tutti i bordi sono a 1 px, in un grigio discreto. Delimitano ogni elemento, ma niente risalta, tutto si equivale. A destra, passano al nero morbido della palette (#282727) e il loro spessore segue il ruolo di ogni elemento. 1 px per la barra di navigazione e la cella dell'evento, 2 px per le intestazioni dei widget e il bollino della data, 4 px per l'unica notizia in evidenza. Un'ombra dura sotto il bollino finisce di dare alla schermata il suo carattere da manifesto. L'occhio sa subito dove andare.

Gli spessori si cambiano in un attimo. Prova, confronta nell'anteprima e tieni ciò che il tuo occhio preferisce.

La stessa cella può portare bordi molto diversi, e ognuno cambia lo stile della tua app. L'immagine ne mostra quattro, dal più discreto al più deciso:

La prima riga corrisponde all'impostazione predefinita, quella che ottieni senza scrivere nulla. Le altre tre si riportano tali e quali nell'editor, chiave per chiave.

Nessuno di questi bordi è migliore di un altro, e tutti si regolano con le stesse chiavi. Il più spesso, da solo, può dare il suo stile a un'app, come nel nostro mockup di app di galleria d'arte, in neobrutalismo, su Dribbble, con bordi neri spessi e angoli vivi.

La mia impostazione preferita sta in un tratto, un filetto di 1 px sotto il titolo di un widget, nel colore dei filetti della palette. L'hai incontrato nelle immagini di questo articolo. Come in un giornale, separa il titolo dal contenuto senza chiudere nulla, e la lista respira. Una cornice completa attorno al titolo ne farebbe un pulsante.

Il suo colore si sceglie nel pannello del widget, in «Contorni», e i suoi lati in { EDIZIONE }, è il gesto del punto 4 qui sopra.

Il bordo in breve

• In un'app GoodBarber, il bordo è già lì, 1 px, sulle celle, sui widget e le loro intestazioni, sui campi e sui pulsanti, trasparente tranne che sui campi e sui pulsanti con contorno.
• Tre impostazioni, il colore, lo spessore (un numero intero in pixel) e, sull'intestazione di un widget, i lati (top, right, bottom, left), ciascuno attivo o disattivato.
• Bordo o separatore, mai entrambi. Un colore di sfondo o di bordo sulla cella cancella il separatore e la stacca.
• Su un widget della Home, tre colori nel pannello, l'intestazione, il widget, la cella.
• Per i campi, una sola impostazione vale per tutta l'app.
• Lo spessore e i lati si regolano nel JSON, con l'estensione gratuita Edizione avanzata (pulsante { EDIZIONE }).