Como regular a sombra na minha app?

Eis como se regula a sombra numa app GoodBarber, do gesto que a ativa à regulação fina, ao píxel.

No painel de design de uma lista, de um widget ou de uma barra de categorias, sempre que o layout o permita, pôr uma sombra é coisa de um gesto: «Ativar efeito sombra». O caminho: Minha App › Estrutura › a sua secção › Editar o design › OPÇÕES DE ESTILO. As definições por defeito do GoodBarber fazem o resto (3 px de deslocamento, 6 px de desfoque, um preto a 20 %). Discreta, a sombra destaca cada elemento do fundo sem chamar a atenção.

A TabBar e o botão flutuante trazem a sua sombra desde o início, mais alta (6 px de deslocamento, 12 px de desfoque), porque passam à frente do conteúdo.

Uma sombra precisa de uma superfície para levantar, como o fundo de uma célula, uma miniatura ou um botão. Nunca se põe sobre um texto nem sobre um ícone, para não lhes perturbar a leitura.

Você ativa a sombra; o sistema sabe onde ela pode pousar, e a que nível. Esta definição por defeito simplifica-lhe a vida e mantém as suas sombras coerentes em toda a app. É o nosso princípio «No design burden», para que o design nunca seja um fardo.

Na vida real, uma sombra nunca é completamente preta. Ganha a cor da luz e da superfície que toca. A nossa sombra por defeito é preta por uma boa razão: combina com todas as paletas, e é isso que a torna segura desde o primeiro gesto. Uma sombra com tom vai um passo mais longe. Sobre um fundo creme, uma sombra castanha fica no tom do fundo.

Eis o mesmo ecrã duas vezes. Só um valor mudou, a cor da sombra, do preto por defeito ao castanho da paleta (a chave color do passo 3). Mesmo deslocamento, mesmo desfoque, mesma força. À esquerda, as células destacam-se do fundo. À direita, parecem pousadas na página, e a página inteira combina com a paleta. Por uma só chave, a app parece desenhada de uma só peça.

Para julgar uma regulação, faça como aqui. Mude um valor de cada vez, guarde, e julgue na pré-visualização, com a página inteira à vista. Uma sombra bem conseguida sente-se mais do que se vê.

A mesma célula, na mesma app, pode ter sombras muito diferentes. A 5 %, a sombra quase não se vê: destaca a célula e nada mais. Sem desfoque, recorta-se nítida atrás da célula, e a app ganha caráter. A imagem mostra quatro, da mais discreta à mais marcada, todas em type custom salvo a por defeito:

A linha por defeito só recorda os seus valores: não tem nada a escrever para a obter. As outras três passam tal e qual para o editor, chave a chave.

Nenhuma destas sombras é melhor do que outra. Cada uma dá um caráter à app, e todas se regulam com as mesmas chaves. A sombra dura, por si só, muda o caráter de uma app, como na nossa maquete de app de galeria de arte, em neobrutalismo, no Dribbble, com um deslocamento nos dois eixos, desfoque zero e uma cor plena.

Sob um botão colorido, uma sombra da mesma cor. É a minha regulação preferida: 10 px de deslocamento, 24 de desfoque, uma força de 38 %. Não pesa sobre o botão, fá-lo irradiar, como um halo, e o olhar percebe que é essa a ação que conta. Reservo-a a uma única ação por ecrã. Se tudo irradia, já nada sobressai.

O botão flutuante regula-se uma só vez para toda a app, em Estilo da App, com o mesmo botão { EDIÇÃO }, sob floatingButton, depois button, depois shadow, com as mesmas chaves.

A sombra em resumo

• Um gesto para a ativar, «Ativar efeito sombra», no painel de design de uma lista.
• Três definições, o deslocamento, o desfoque, a cor e a sua força.
• Por defeito, 3 px de deslocamento, 6 px de desfoque, preto a 20 %; 6 e 12 px sob a TabBar e o botão flutuante.
• Uma extensão gratuita para a regulação fina, Edição avançada, botão { EDIÇÃO }.
• Uma chave para dar tom à sombra sem tocar no resto, color.
• Duas posições, exterior (relevo) ou interior (cavidade, reservada aos campos de formulário).
• Uma armadilha, a opacidade escreve-se com ponto, 0.2 e não 0,2.