Come regolare l'ombra nella mia app?

Ecco come si regola l'ombra in un'app GoodBarber, dal gesto che la attiva alla regolazione fine, al pixel.

Nel pannello di design di una lista, di un widget o di una barra di categorie, quando il layout lo consente, mettere un'ombra è questione di un gesto: «Attivare l'effetto ombra». Il percorso: La mia app › Struttura › la tua sezione › Modificare il design › OPZIONI DI STILE. Le impostazioni predefinite di GoodBarber fanno il resto (3 px di spostamento, 6 px di sfocatura, un nero al 20 %). Discreta, l'ombra stacca ogni elemento dallo sfondo senza attirare lo sguardo.

La TabBar e il pulsante flottante hanno la loro ombra fin dall'inizio, più alta (6 px di spostamento, 12 px di sfocatura), perché passano davanti al contenuto.

Un'ombra ha bisogno di una superficie da sollevare, come lo sfondo di una cella, una miniatura o un pulsante. Non si posa mai su un testo né su un'icona, per non disturbarne la lettura.

Tu attivi l'ombra; il sistema sa dove può posarsi, e a quale livello. Questa impostazione predefinita ti semplifica la vita e mantiene le tue ombre coerenti in tutta l'app. È il nostro principio «No design burden», perché il design non sia mai un peso.

Nella vita reale, un'ombra non è mai del tutto nera. Prende il colore della luce e della superficie che tocca. La nostra ombra predefinita è nera per una buona ragione: si accorda con tutte le palette, ed è questo che la rende sicura fin dal primo gesto. Un'ombra tinta fa un passo in più. Su uno sfondo crema, un'ombra marrone resta nel tono dello sfondo.

Ecco la stessa schermata due volte. È cambiato un solo valore, il colore dell'ombra, dal nero predefinito al marrone della palette (la chiave color del passo 3). Stesso spostamento, stessa sfocatura, stessa forza. A sinistra, le celle si staccano dallo sfondo. A destra, sembrano appoggiate sulla pagina, e la pagina intera si accorda con la palette. Per una sola chiave, l'app sembra disegnata tutta d'un pezzo.

Per giudicare un'impostazione, fai come qui. Cambia un valore alla volta, salva, e giudica nell'anteprima, con la pagina intera sotto gli occhi. Un'ombra riuscita si sente più di quanto si veda.

La stessa cella, nella stessa app, può portare ombre molto diverse. Al 5 %, l'ombra quasi non si vede: stacca la cella e nient'altro. Senza sfocatura, si ritaglia netta dietro la cella, e l'app prende carattere. L'immagine ne mostra quattro, dalla più discreta alla più decisa, tutte in type custom tranne quella predefinita:

La riga predefinita ricorda solo i suoi valori: non devi scrivere nulla per ottenerla. Le altre tre si riportano tali e quali nell'editor, chiave per chiave.

Nessuna di queste ombre è migliore di un'altra. Ognuna dà un carattere all'app, e tutte si regolano con le stesse chiavi. L'ombra dura, da sola, cambia il carattere di un'app, come nel nostro mockup di app per una galleria d'arte, in stile neobrutalista, su Dribbble, con uno spostamento sui due assi, sfocatura zero e un colore pieno.

Sotto un pulsante colorato, un'ombra dello stesso colore. È la mia impostazione preferita: 10 px di spostamento, 24 di sfocatura, una forza del 38 %. Non pesa sul pulsante, lo fa brillare, come un alone, e l'occhio capisce che è quella l'azione che conta. La riservo a una sola azione per schermata. Se tutto brilla, non spicca più niente.

Il pulsante flottante si regola una volta sola per tutta l'app, in Stile dell'app, con lo stesso pulsante { EDIZIONE }, sotto floatingButton, poi button, poi shadow, con le stesse chiavi.

L'ombra in breve

• Un gesto per attivarla, «Attivare l'effetto ombra», nel pannello di design di una lista.
• Tre impostazioni, lo spostamento, la sfocatura, il colore e la sua forza.
• Per impostazione predefinita, 3 px di spostamento, 6 px di sfocatura, nero al 20 %; 6 e 12 px sotto la TabBar e il pulsante flottante.
• Un'estensione gratuita per la regolazione fine, Edizione avanzata, pulsante { EDIZIONE }.
• Una chiave per tingere l'ombra senza toccare il resto, color.
• Due posizioni, esterna (rilievo) o interna (incavo, riservata ai campi dei moduli).
• Una trappola, l'opacità si scrive con il punto, 0.2 e non 0,2.