Elevação
Elevation é a distância entre duas superfícies ao longo do eixo z.
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.
0
+1
+2
+3
+4
Aplicações
-
Page content
Button Card
Input
List
Index bar
Footer
Disclaimers
0
-
kosmos-shadow-soft-2dp
Elementos maiores que tenham maior destaque em casos comparativos
+2dp
Soft
kosmos-shadow-header
Header
+3dp
Header
kosmos-shadow-heavy+1dp
Button hover
Button candy
Card hover
List hover/drag
Dropdown
+1dp
Heavy
kosmos-shadow-heavy+2dp
Tab bar
Bottom app bar
Song progress bar
+2dp
Heavy
kosmos-shadow-heavy+3dp
Menus
Bottom sheets
Snackbars
Fixed buttons
+3dp
Heavy
kosmos-shadow-heavy+4dp
Modal
Barra de busca
+4dp
Heavy
kosmos-shadow-academyCandy+2dp
Aplicação em elementos de interface que precisam de maior destaque visual
+2dp
Candy
Histórico de Atualizações
Atualizado