--- title: "Angles droits, arrondis ou ronds dans votre app GoodBarber" description: "Dans GoodBarber, les angles de votre app se choisissent droits, arrondis à 4 px ou ronds, pour les cellules, boutons et champs. Tout autre rayon, dans le JSON." canonical_url: "https://fr.goodbarber.com/blog/quelle-forme-pour-mon-app-angles-droits-arrondis-ou-ronds-a1493/" lang: fr date: 2026-11-05 last_updated: 2026-11-06 --- # Quelle forme pour mon app : angles droits, arrondis ou ronds ? Dans GoodBarber, la forme des angles de votre app se choisit parmi trois options, et le rayon exact, si vous le voulez, se règle dans le JSON. C'est la signature la plus visible d'une app. Droits, les angles donnent un caractère net et affirmé. Légèrement arrondis, ils adoucissent. Ronds, ils rendent l'app chaleureuse et accueillante. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://fr.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Choisissez **GoodBarber** commeSource d’actualités préféréeChoisissez **GoodBarber** comme](https://www.google.com/preferences/source?q=fr.goodbarber.com) 5 nov. 2026 · Mis à jour le 6 nov. 2026 · 7 min de lecture ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98605325-68813629.jpg?v=1793871884.3338952) Voici ce que la forme change dans une app GoodBarber, où elle se règle, et comment aller jusqu'au rayon de votre choix. ## Trois formes pour toute l'app : angles droits, arrondis, ronds ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98605325-68813630.jpg?v=1793871885.933905) La forme, c'est l'arrondi des angles de vos cellules, de vos vignettes, de vos boutons et de vos champs, ce qu'on appelle souvent les coins arrondis. Dans le Design System GoodBarber, c'est l'[atome Shape](https://fr.goodbarber.com/uxdesign/atom-shape/), et il propose trois formes, prêtes à l'emploi. **Carré**, l'angle est droit, le rayon vaut 0. **Arrondi**, le rayon vaut 4 pixels, assez pour adoucir sans se faire remarquer. **Rond**, il vaut 12 pixels sur une cellule ou une vignette, et sur un bouton ou un champ, il prend toute la hauteur, c'est la forme que les designers appellent la pill. Vous ne réglez pas ces angles élément par élément. Une forme choisie dans **Mon app › Style de l'app › Vignettes et cellules** vaut pour toutes les listes, tous les widgets de la Home et leurs en-têtes, sur toutes vos pages. C'est notre principe « Set once, consistent everywhere », une valeur posée une fois, reprise partout. Les boutons et les champs ont leur propre option, dans Style de l'app également, sous **Boutons** et **Champs de formulaire**, avec les trois mêmes formes prédéfinies. Vous pouvez ainsi garder des cellules carrées et des boutons ronds. ## Les petits éléments restent ronds ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98605325-68813631.jpg?v=1793871887.6939156) Dans une app GoodBarber aux angles droits, **tout n'est pas carré**. Les cellules, les vignettes et les boutons le sont. Mais **l'avatar** d'un auteur reste un cercle, rond par nature. Et d'autres petits éléments ont leur propre forme, qui ne suit pas la forme choisie pour l'app, **l'icône de lecture** d'une vidéo, **l'étiquette de sa durée**, **la pastille de date**. Nos modèles les livrent ronds. Un rond se reconnaît d'un coup d'œil, même tout petit, et il signale quelque chose à part, une personne, une action, un repère. **Leur forme n'est pas figée pour autant.** La pastille de date a son curseur « Forme du fond de la date », à trois positions. C'est ainsi que l'app d'Unit 7 ci-dessus, celle d'un atelier de sérigraphie, a passé ses pastilles en carré, pour aller au bout de son parti pris des angles droits. ## Réglez la forme de votre app dans GoodBarber [Animation : la forme Rond choisie dans Vignettes et cellules, puis un rayon de 20 réglé dans le JSON](https://player.vimeo.com/video/1243651729?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Tout se passe dans **Mon app › Style de l'app**. Trois panneaux y portent le même choix, Carré, Arrondi ou Rond. **Vignettes et cellules** règle les cellules, les vignettes, les en-têtes et les fonds de widget. **Boutons** règle les boutons, et **Champs de formulaire** les champs. Le choix s'enregistre au clic, et l'aperçu se met à jour. Avec les modèles Bold, Minimal et Clean TabBar, la barre d'onglets a son propre réglage, « Style des coins », dans **Mon app › Structure › Menu › Paramètres**. Pour un rayon qui n'est pas parmi les trois options, l'extension gratuite **Édition avancée** ouvre le JSON, la liste complète des réglages, la même que pour [l'ombre](https://fr.goodbarber.com/blog/comment-regler-l-ombre-dans-mon-app-a1462/) et [les bordures](https://fr.goodbarber.com/blog/comment-regler-les-bordures-dans-mon-app-a1472/). Elle s'installe depuis le menu **« Extensions Store »**, à la fiche « Édition avancée », et vos écrans de design gagnent le bouton { EDITION }, en haut à droite. 1. **Ouvrez le JSON de l'app.** Dans **Mon app › Style de l'app › Vignettes et cellules**, cliquez sur { EDITION }. L'éditeur s'ouvre sur les réglages généraux de l'app, rangés par ordre alphabétique. Dépliez shape, vous y trouvez la clé **type**, avec la valeur de votre choix (sharp, rounded ou round). 2. **Passez en rayon libre.** Cliquez sur la valeur de type et remplacez-la par **custom**. 3. **Donnez votre rayon.** Sous shape, cliquez sur « + Ajouter », tapez **radius** dans le champ newKey, laissez « Valeur » sélectionné, saisissez un nombre entier en pixels (20 ici), puis « Ajouter ». La clé apparaît, marquée « Nouveau ». Cliquez sur « Sauvegarder ». Les cellules, les vignettes, les en-têtes et les fonds de widget prennent ce rayon. Les boutons et les champs gardent l'option choisie dans leur panneau, et les petits éléments ronds leur propre forme. Un repère. Le rayon est un nombre entier, et il se lit à l'échelle d'une page, pas d'une cellule isolée. Comparez dans l'aperçu avant de choisir. ## Avant, après : un rayon de 20 change le caractère d'une app ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98605325-68813633.jpg?v=1793871889.3699257) Voici deux fois le même écran, celui d'Eastside Music Workshop, une école de musique. À gauche, tout est carré, l'option Carré pour les vignettes et les cellules, la barre d'onglets au « Style des coins » Carré, la pastille de date en première position de son curseur. L'app est propre, et un peu sévère pour une école. À droite, trois réglages ont changé, l'objet shape en custom avec un rayon de 20, la barre d'onglets en « Arrondi maximal » et la pastille sur l'option Rond. Rien d'autre n'a bougé, ni les couleurs, ni les polices, ni les espaces. Et pourtant l'app change de caractère. Elle devient accueillante, à l'image d'une école où petits et grands viennent apprendre la musique. C'est tout ce qu'un rayon fait, et c'est pour cela qu'il mérite d'être choisi plutôt que subi. ## Angles droits, arrondis ou ronds, quel effet sur votre app ? ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98605325-68813634.jpg?v=1793871891.0379357) Trois apps, trois formes, et chacune raconte autre chose. De gauche à droite, l'image montre des angles droits pour l'app d'un atelier de sérigraphie, arrondis pour celle d'une société d'histoire naturelle, ronds pour celle d'une école de musique. Le tableau ajoute le rayon libre. | Forme | type | Rayon | L'effet | | -------------- | ------- | ----------------------------------------------------- | ----------------------------------------------------------------- | | 1. Carré | sharp | 0 | Net, affirmé, un air d'affiche | | 2. Arrondi | rounded | 4 px | Adouci sans se faire remarquer, le choix le plus discret | | 3. Rond | round | 12 px, toute la hauteur sur les boutons et les champs | Doux, accueillant, un air d'app grand public | | 4. Rayon libre | custom | le nombre de votre choix | Votre signature, hors de l'échelle, comme les 20 de l'avant-après | Les trois premières lignes se choisissent dans Style de l'app. La quatrième se règle dans l'éditeur, en deux clés. Aucune forme n'est meilleure qu'une autre. Chacune de ces trois apps tient par la sienne, parce qu'elle dit la même chose que ses [couleurs](https://fr.goodbarber.com/blog/comment-changer-les-couleurs-de-mon-app-a1481/) et ses polices. ## Un rayon de 20 et des boutons ronds, pour une app chaleureuse ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98605325-68813635.jpg?v=1793871892.4219441) Mon réglage préféré est celui d'Eastside, un rayon de 20 sur les cellules, des boutons ronds et une barre d'onglets ronde. Il vient du logo de l'école, trois arches arrondies, et cette courbe revient dans chaque cellule et chaque bouton. Avec ces grands arrondis, chaque cellule devient un objet bien distinct sur le fond, et les boutons ronds se repèrent au premier coup d'œil. Le rayon de 20 se pose dans le JSON, avec les trois étapes de « Réglez la forme de votre app dans GoodBarber ». Les boutons et les champs passent sur l'option Rond, et la barre d'onglets sur « Arrondi maximal ». **La forme en bref** - Dans une app GoodBarber, la forme des angles se choisit parmi trois options, **Carré** (0), **Arrondi** (4 px) et **Rond** (12 px, ou toute la hauteur sur les boutons et les champs). - Une forme choisie dans **Style de l'app › Vignettes et cellules** vaut pour toutes les cellules, vignettes, en-têtes et fonds de widget. Les boutons et les champs ont le même choix, dans leur propre panneau. - La barre d'onglets a son propre réglage, **« Style des coins »**, avec les modèles Bold, Minimal et Clean TabBar. - Certains petits éléments **ne suivent pas la forme de l'app**. L'avatar est rond par nature, l'icône de lecture, la durée et la pastille de date ont leur propre forme, ronde dans nos modèles. - Pour un rayon précis, passez par le JSON avec l'extension gratuite **Édition avancée**, en mettant type sur custom et en ajoutant radius, un nombre entier. ## À vous Ouvrez **Mon app › Style de l'app › Vignettes et cellules** et essayez les trois options, l'aperçu suit. Quand l'envie d'un rayon à vous viendra, l'extension gratuite Édition avancée ajoute le bouton { EDITION } sur le même écran, et deux clés suffisent. Pas encore d'app ? [Créez la vôtre](https://fr.goodbarber.com/create/) avec GoodBarber, le Mobile App Builder. Suivez GoodBarber sur Google [![Ajouter en tant que source préférée sur Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-fr.fa4aafcf456d.png)](https://www.google.com/preferences/source?q=fr.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) À propos de l'auteur Marie-Pierre Jeffard UI Designer Je suis UI Designer chez GoodBarber. Design system des apps, composants, layouts, site, illustrations, animations : tout ce que je fais tourne autour de l'interface. Ce qui me plaît dans notre produit, c'est d'inventer des règles universelles, qui tiennent sur tous les écrans et accueillent toutes les identités visuelles. L'app devient un écrin pour votre contenu. J'aime ce qui a l'air simple, et tout le travail invisible qu'il faut pour y arriver : les règles, les choix et les contraintes qui font qu'une interface tient debout. C'est ce que je raconte ici. [Voir tous ses articles](https://fr.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)