Comment régler l'ombre dans mon app ?

Voici comment l'ombre se règle dans une app GoodBarber, du geste qui l'active au réglage fin, au pixel près.

Dans le panneau de design d'une liste, d'un widget ou d'une barre de catégories, dès que le layout s'y prête, poser une ombre tient en un geste : « Activer l'effet ombre ». Le chemin : Mon app › Structure › votre section › Modifier le design › OPTIONS DE STYLE. Les réglages par défaut de GoodBarber font le reste (3 px de décalage, 6 px de flou, un noir à 20 %). Discrète, l'ombre détache chaque élément du fond sans attirer l'œil.

La TabBar et le bouton flottant portent leur ombre dès le départ, plus élevée (6 px de décalage, 12 px de flou), car ils passent devant le contenu.

Une ombre a besoin d'une surface à soulever, comme le fond d'une cellule, une vignette ou un bouton. Elle ne se pose jamais sur un texte ni sur une icône, pour ne pas en brouiller la lecture.

Vous activez l'ombre, le système sait où elle peut se poser, et à quel niveau. Ce réglage par défaut vous simplifie la vie et garde vos ombres cohérentes sur toute l'app. C'est notre principe « No design burden », pour que le design ne soit jamais une charge.

Dans la vie, une ombre n'est jamais tout à fait noire. Elle prend la couleur de la lumière et de la surface qu'elle touche. Notre ombre par défaut est noire pour une bonne raison, elle s'accorde à toutes les palettes, et c'est ce qui la rend sûre dès le premier geste. Une ombre teintée va un cran plus loin. Sur un fond crème, une ombre brune reste dans le ton du fond.

Voici deux fois le même écran. Une seule valeur a bougé, la couleur de l'ombre, du noir par défaut au brun de la palette (la clé color de l'étape 3). Même décalage, même flou, même force. À gauche, les cellules se détachent du fond. À droite, elles semblent posées sur la page, et la page entière s'accorde à la palette. Pour une seule clé, l'app a l'air dessinée d'un seul tenant.

Pour juger un réglage, faites comme ici. Changez une valeur à la fois, sauvegardez, et jugez dans l'aperçu, la page entière sous les yeux. Une ombre réussie se sent plus qu'elle ne se voit.

La même cellule, dans la même app, peut porter des ombres très différentes. À 5 %, l'ombre ne se voit presque pas, elle décolle la cellule et rien d'autre. Sans flou, elle se découpe net derrière la cellule, et l'app prend du caractère. L'image en montre quatre, de la plus discrète à la plus affirmée, toutes en type custom sauf celle par défaut :

La ligne par défaut rappelle ses valeurs, vous n'avez rien à écrire pour l'obtenir. Les trois autres se reportent telles quelles dans l'éditeur, clé par clé.

Aucune de ces ombres n'est meilleure qu'une autre. Chacune donne un caractère à l'app, et toutes se règlent avec les mêmes clés. L'ombre dure, à elle seule, change le caractère d'une app, comme dans notre maquette d'app de galerie d'art, en néo-brutalisme, sur Dribbble, avec un décalage sur les deux axes, un flou à zéro et une couleur pleine.

Sous un bouton coloré, une ombre de la même couleur. C'est mon réglage préféré, 10 px de décalage, 24 de flou, une force de 38 %. Elle ne pèse pas sur le bouton, elle le fait rayonner, comme une lueur, et l'œil comprend que c'est l'action qui compte. Je la réserve à une seule action par écran. Si tout rayonne, plus rien ne ressort.

Le bouton flottant se règle une fois pour toute l'app, dans Style de l'app, avec le même bouton { EDITION }, sous floatingButton, puis button, puis shadow, avec les mêmes clés.

L'ombre en bref

• Un geste pour l'activer, « Activer l'effet ombre », dans le panneau de design d'une liste.
• Trois réglages, le décalage, le flou, la couleur et sa force.
• Par défaut, 3 px de décalage, 6 px de flou, noir à 20 % ; 6 et 12 px sous la TabBar et le bouton flottant.
• Une extension gratuite pour le réglage fin, Édition avancée, bouton { EDITION }.
• Une clé pour teinter l'ombre sans toucher au reste, color.
• Deux positions, externe (relief) ou interne (creux, réservée aux champs de formulaire).
• Un piège, l'opacité s'écrit avec un point, 0.2 et non 0,2.