Quelle forme pour mon app : angles droits, arrondis ou ronds ?

Voici ce que la forme change dans une app GoodBarber, où elle se règle, et comment aller jusqu'au rayon de votre choix.

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, 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.

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.

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.

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.

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 et ses polices.

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.