--- title: "Angoli retti, arrotondati o tondi nella tua app GoodBarber" description: "In GoodBarber, gli angoli della tua app possono essere retti, arrotondati a 4 px o tondi, per celle, pulsanti e campi. Ogni altro raggio, nel JSON." canonical_url: "https://it.goodbarber.com/blog/che-forma-per-la-mia-app-angoli-retti-arrotondati-o-tondi-a1156/" lang: it date: 2026-11-05 last_updated: 2026-11-06 --- # Che forma per la mia app: angoli retti, arrotondati o tondi? In GoodBarber, la forma degli angoli della tua app si sceglie tra tre opzioni, e il raggio esatto, se lo vuoi, si regola nel JSON. È la firma più visibile di un'app. Retti, gli angoli danno un carattere netto e deciso. Leggermente arrotondati, lo addolciscono. Tondi, rendono l'app calda e accogliente. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Scegli **GoodBarber** come tuaFonte di notizie preferitaScegli **GoodBarber** come tua](https://www.google.com/preferences/source?q=it.goodbarber.com) 5 nov 2026 · Aggiornato il 6 nov 2026 · 6 min di lettura ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98605387-68813760.jpg?v=1793872333.5964978) Ecco che cosa cambia la forma in un'app GoodBarber, dove si regola e come arrivare fino al raggio che preferisci. ## Tre forme per tutta l'app: angoli retti, arrotondati, tondi ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98605387-68813761.jpg?v=1793872335.3525076) 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](https://it.goodbarber.com/uxdesign/atom-shape/), 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. ## I piccoli elementi restano tondi ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98605387-68813762.jpg?v=1793872337.0445173) 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. ## Regola la forma della tua app in GoodBarber [Animazione: la forma Rotondo scelta in Miniature e celle, poi un raggio di 20 impostato nel JSON](https://player.vimeo.com/video/1243651729?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Tutto avviene in **La mia app › Stile dell'app**. Lì tre pannelli offrono la stessa scelta, Quadrato, Arrotondato o Rotondo. **Miniature e celle** regola le celle, le miniature, le intestazioni e gli sfondi dei widget. **Pulsanti** regola i pulsanti, e **Campi del modulo** i campi. La scelta si salva al clic, e l'anteprima si aggiorna. Con i modelli Bold, Minimal e Clean TabBar, la barra delle schede ha una sua impostazione, «Stile degli angoli», in **La mia app › Struttura › Menu › Impostazioni**. Per un raggio che non è tra le tre opzioni, l'estensione gratuita **Edizione avanzata** apre il JSON, l'elenco completo delle impostazioni, lo stesso che per [l'ombra](https://it.goodbarber.com/blog/come-regolare-l-ombra-nella-mia-app-a1124/) e [i bordi](https://it.goodbarber.com/blog/come-regolare-i-bordi-nella-mia-app-a1133/). Si installa dal menu **«Extension Store»**, nella scheda «Edizione avanzata», e le tue schermate di design guadagnano il pulsante { MODIFICA }, in alto a destra. 1. **Apri il JSON dell'app.** In **La mia app › Stile dell'app › Miniature e celle**, clicca su { MODIFICA }. L'editor si apre sulle impostazioni generali dell'app, in ordine alfabetico. Apri shape, e trovi la chiave **type**, con il valore che hai scelto (sharp, rounded o round). 2. **Passa a un raggio libero.** Clicca sul valore di type e sostituiscilo con **custom**. 3. **Dai il tuo raggio.** Sotto shape, clicca su «+ Aggiungi», scrivi **radius** nel campo newKey, lascia selezionato «Valore», inserisci un numero intero in pixel (qui 20), poi «Aggiungi». La chiave compare, segnata «Nuovo». Clicca su «Salva». Le celle, le miniature, le intestazioni e gli sfondi dei widget prendono questo raggio. I pulsanti e i campi mantengono l'opzione scelta nel loro pannello, e i piccoli elementi tondi la loro forma. Un consiglio. Il raggio è un numero intero, e si legge alla scala di una pagina, non di una cella isolata. Confronta nell'anteprima prima di scegliere. ## Prima, dopo: un raggio di 20 cambia il carattere di un'app ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98605387-68813764.jpg?v=1793872338.6525261) 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. ## Angoli retti, arrotondati o tondi, che effetto sulla tua app? ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98605387-68813765.jpg?v=1793872340.2765353) 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. | Forma | type | Raggio | L'effetto | | ---------------- | ------- | ------------------------------------------ | ----------------------------------------------------- | | 1. Quadrato | sharp | 0 | Netto, deciso, un'aria da manifesto | | 2. Arrotondato | rounded | 4 px | Addolcito senza farsi notare, la scelta più discreta | | 3. Rotondo | round | 12 px, tutta l'altezza su pulsanti e campi | Morbido, accogliente, un'aria da app per tutti | | 4. Raggio libero | custom | il numero che preferisci | La tua firma, fuori scala, come i 20 del prima e dopo | 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](https://it.goodbarber.com/blog/come-cambiare-i-colori-della-mia-app-a1143/) e dei suoi caratteri. ## Un raggio di 20 e pulsanti tondi, per un'app calda ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98605387-68813766.jpg?v=1793872341.7085433) 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. ## Tocca a te Apri **La mia app › Stile dell'app › Miniature e celle** e prova le tre opzioni, l'anteprima ti segue. Quando ti verrà voglia di un raggio tutto tuo, l'estensione gratuita Edizione avanzata aggiunge il pulsante { MODIFICA } sulla stessa schermata, e bastano due chiavi. Non hai ancora un'app? [Crea la tua](https://it.goodbarber.com/create/) con GoodBarber, il Mobile App Builder. Segui GoodBarber su Google [![Add as a preferred source on Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-en.172e670ec003.png)](https://www.google.com/preferences/source?q=it.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Informazioni sull'autore Marie-Pierre Jeffard UI Designer Sono UI Designer di GoodBarber. Design system delle app, componenti, layout, sito, illustrazioni, animazioni: tutto quello che faccio ruota intorno all'interfaccia. Quello che mi piace del nostro prodotto è inventare regole universali, che funzionano su tutti gli schermi e accolgono tutte le identità visive. L'app diventa uno scrigno per i tuoi contenuti. Amo ciò che sembra semplice, e tutto il lavoro invisibile che serve per arrivarci: le regole, le scelte e i vincoli che tengono in piedi un'interfaccia. È questo che racconto qui. [Altri articoli di Marie-Pierre](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)