Elevação

Shadow

A elevação pode ser representada por sombras projetadas com diferentes intensidades de acordo com a elevação em que o elemento se encontra. O uso de sombras auxilia na percepção da altura do elemento em relação a uma determinada superfície. É um aspecto importante na organização do layout pois auxilia na percepção do usuário em relação a hierarquia entre diferentes elementos na tela.

Eficiência e clareza

O efeito de elevação deve fazer com que os elementos pareçam empilhados uns sobre os outros mas que não possam passar entre si.

Lei da impenetrabilidade

Dois corpos distintos não podem ocupar o mesmo lugar no espaço e ao mesmo tempo. Prevenir isso usando elevações diferentes.

O elemento com maior relevância ou destaque deve se encontrar na elevação mais alta, como por exemplo, uma caixa de diálogo que aparece temporariamente sobre os demais elementos da tela. Não utilize apenas como elemento decorativo sem a intenção de destacar ou dar relevância, o objetivo de usar shadow é fornecer uma hierarquia significativa entre elementos dentro da interface. A elevação de uma camada não é adicionada ao conteúdo (imagine as camadas sem espessura).

Escala de elevações

Cada camada sobreposta está em um nível, 0 (superfície), 1, 2, 3, 4, 5, 6. Quanto maior o nível, mais distante a camada se encontra da superfície. As elevações, +1dp, +2dp, +3dp ou +4dp, não são vinculadas ao nível que o componente está, um elemento no nível 4 pode receber +1dp de elevação.

Um componente com elevação +1dp está mais próximo da superfície do que um elemento em +3dp, e assim por diante. Essa sobreposição de elevações cria uma hierarquia espacial entre os componentes, de forma sutil, permite que o usuário consiga perceber quais elementos têm maior relevância na tela. 
As elevações também podem ser representadas através das cores.

Veja mais no tópico: 🔗 - Como elevar?.

Recomendações

Quando elevar?

Mais perto = mais foco (hierarquia)

Elevar elemento quando:

• Sempre que for um elemento fixo no scroll;

• Tiverem conteúdo mais importante (como modais);

• Quando eles controlarem os elementos atrás deles (como a app bar);

• Precisarem reagir à alguma interação (como itens arrastáveis ou clicáveis);

• Quanto maior o número(nível), mais alto, mais importante o elemento é.

Como elevar?

• Adicionando sombra;

• Usando overlays/scrims;

• Mostrando animações alterando tamanho ou posição (para interações);

• Aumentando o tom de fundo

  ↳ Em alguns casos a elevação pode ser representada com cor e sem shadow, apenas subindo a escala da cor.

Exemplo:

No dark mode, nem sempre a elevação dos elementos consegue ser resolvida e ter o destaque necessário apenas com shadow, por isso, pode ser necessário usar cores para criar a sobreposição das camadas.

Estilos

As sombras são divididas em quatro estilos: soft, heavy, candy e header.

• Soft - sombras difusas de cor neutra;

• Heavy - sombras mais duras de cor neutra

• Candy - sombra colorida.

• Header - sombra mais difusa e neutra, de uso exclusivo do componente de header.

Aplicações

Histórico de Atualizações