Sombras de UI: por que a sombra preta de 25% parece errada e as sombras em camadas que você deve usar

A sombra que a maioria dos designers escolhe é preta a 25%. Nessa força, ela não parece luz. Parece uma mancha embaixo do card.

Uma boa sombra é quase invisível: você sente a elevação antes de ver a sombra. Veja como chegar lá, com quatro tokens para copiar.

Por que o padrão parece uma mancha

A sombra padrão do Figma é preta a 25% de opacidade, com deslocamento de 4 para baixo. Dois tutoriais comuns a repetem, e assim ela se espalha: o padrão de uma ferramenta vira uma decisão de design que ninguém tomou.

Uma sombra real é suave. A luz contorna o objeto, então a borda da sombra se dissolve aos poucos, e a sombra fica mais fraca conforme se afasta do objeto. Uma única camada escura e dura não tem nada disso. Tem uma borda e uma intensidade, e o olho lê isso como sujeira, uma mancha cinza, não como uma superfície elevada.

Correção 1: 8 por cento, não 25

Preto a 25%

Preto a 8%, blur maior

Mesmo card, mesmo fundo. À esquerda, a sombra é a coisa mais barulhenta do card. À direita, é uma elevação suave, e o conteúdo é o que você olha. Reduzir a opacidade é metade da correção. Deixar o blur crescer é a outra metade.

Quando o blur cresce, a mesma quantidade de sombra se espalha por uma área maior, então ela fica mais clara sozinha. Por isso uma sombra ampla a 8 por cento parece mais natural que uma curta a 8 por cento. Comece em 8 por cento e só aumente se o card sumir no seu fundo.

Correção 2: empilhe duas sombras

Uma sombra só precisa fazer dois trabalhos e não faz nenhum bem. Duas sombras dividem a tarefa.

A curta fica logo embaixo da borda e diz "isso está encostado na superfície". A ampla é o halo suave que diz "isso está elevado". Juntas parecem uma sombra natural, porque é isso que a luz real faz: uma linha escura de contato mais uma queda ampla e fraca.

Em CSS, as duas camadas são uma única declaração, separadas por vírgula:

Correção 3: tinja, não acinzente

Preto puro

Tingida com a tinta

Preto puro misturado a um fundo colorido deixa tudo cinza e turvo. Uma sombra num tom escuro do próprio matiz do fundo continua limpa. As duas sombras aqui estão a 16 por cento, então a única diferença é a cor.

A regra é usar sua tinta, a cor mais escura da paleta, como cor da sombra, com baixa opacidade. Nos nossos tokens, a tinta é #1B1530, um violeta bem escuro. Numa página branca, o tom mal se nota. Numa página colorida, um painel de marca ou uma seção tingida, é a diferença entre uma sombra que pertence ali e uma que parece colada.

Correção 4: mais alto significa maior

Quando algo fica mais alto, um menu sobre um card, um modal sobre uma página, sua sombra fica maior e mais suave, porque a luz tem mais espaço para se espalhar. Ela não fica mais escura. O designer que escurece a sombra do elemento mais alto volta direto para a mancha.

Isso resulta num conjunto pequeno e fechado de tokens:

Toda camada usa X 0 e spread 0, com a cor da tinta #1B1530. Os campos X, Y, blur e spread do Figma correspondem direto aos quatro números do box-shadow em CSS.

Os tokens em CSS

Esses quatro são uma recomendação nossa, não um valor de plataforma. Troque a cor da tinta pelo tom de marca mais escuro que você tiver e mantenha a estrutura.

Onde as sombras deixam de funcionar: modo escuro

Sombra no escuro

Superfície mais clara

Uma sombra escurece o que está atrás dela, e um fundo escuro tem pouco a escurecer. À esquerda, a sombra grande é invisível e o card se derrete na página. À direita, o card é simplesmente uma superfície mais clara, e é isso que o eleva.

Então, num tema escuro, eleve uma camada deixando-a mais clara, não sombreando. Nosso paper sobre sistemas de cores do modo escuro cobre a rampa de superfícies, e cor de fundo do modo claro cobre os cinzas do outro lado.

O teste de apertar os olhos

Aperte os olhos para a tela, ou dê um passo para trás. Se você ainda enxerga cada sombra como uma forma escura, ela está forte demais. Se as bordas dos cards somem no seu pior monitor, suba a opacidade um degrau. A sombra certa desaparece quando você olha direto para ela e aparece quando você a tira.

FAQ

Qual é a melhor sombra para UI?

Duas camadas empilhadas num tom escuro da sua própria tinta: uma curta, como 0 1px 2px a 6 por cento, e uma ampla, como 0 8px 24px a 8 por cento. Ela parece luz natural em vez de uma mancha.

Qual opacidade uma sombra de UI deve ter?

Nossos quatro tokens vão de 6 a 12 por cento. Comece em 8 por cento para um card e só aumente se a borda sumir. Preto a 25 por cento, um padrão comum, raramente é certo numa interface limpa.

Qual é a sombra padrão do Figma?

Preto (#000000) a 25 por cento de opacidade, com deslocamento de 4 para baixo. É um ponto de partida da ferramenta, não uma decisão de design, então a maioria dos designs melhora ao mudá-la.

As sombras devem ser pretas puras?

Não. Use uma versão bem escura da cor da sua marca ou da sua tinta. Num fundo colorido, o preto puro deixa a sombra cinza e turva, enquanto uma sombra tingida mantém a cor limpa.

Como mostrar elevação com sombras?

Faça a sombra do elemento mais alto maior e mais suave, não mais escura. Use um conjunto pequeno de tokens, como XS, SM, MD e LG, para que cada camada da interface use uma de quatro sombras.

Sombras funcionam no modo escuro?

Mal. Sobra pouco fundo claro para escurecer, então sombras grandes desaparecem. Eleve uma camada dando a ela uma cor de superfície mais clara.

Como escrever um box-shadow em camadas no CSS?

Liste as camadas numa única declaração box-shadow, separadas por vírgulas: box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);.

Fontes

• A sombra padrão do Figma é #000000 a 25% de opacidade, X 0, Y 4. Os tutoriais concordam sobre o preto a 25%; discordam sobre o blur padrão, por isso este paper nunca o cita.
• #00000040 é #000000 a 25% em hex de 8 dígitos (0x40 é 64 de 255, cerca de 25%).
• Os quatro tokens e a tinta #1B1530 (violet 900) são os estilos de efeito do nosso UX Brainy. São uma recomendação, não um valor de plataforma.
• Os cards acima são exemplos nossos. A demo de tom usa #4E2FB3 a 16 por cento ao lado de preto a 16 por cento.
• Mais posts de uma regra só como este no UX Brainy.