Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Pq as elevações sâo assim?

Olhando a aula de elevações eu senti que faltou a explicação do pq dos valores serem: x=2 y=2 blur=2

e se repete num: x=4 y=4 blur=4

pq os valores foram decididos assim e não um: x=0 y=0 blur=4

existe algum padrão que descobriram que é melhor pra elevação que nem de espaçamento (8px) ? O u essa questão de elevação é mais individual?

Queria entender melhor como eu posso escolher uma boa elevação, ou essa escala de repetir é a melhor forma de usar uma elevação?

2 respostas
solução!

E aí Gabriel, como vai?

Vamos lá, se prepara pra uma explicação um pouquinho aprofundada sobre sombras:

Existem diversos estudos sobre maneiras corretas de se aplicar sombras digitalmente, mas nenhum considerado "melhor que o outro", ou até mesmo "esse é o correto e os outros são errados". Eu não usaria a palavra "individual", mas de certa forma, é dessa maneira, porque vai muito do produto que você está produzindo, dos estudos por trás dele, e como isso vai se converter num design system.

Como um exemplo de estudo sobre, eu te trago o Material Design da Google. Basicamente, o Material Design tem inspirações diretas com objetos físicos para criar a alusão digital. O estudo deles com as sombras foi colocando camadas de papel umas sobre as outras, com uma iluminação direta batendo neles, e entendendo como a sombra se dissipava nos cenários. Se vc quiser entender mais como eles fizeram toda essa pesquisa, vc pode ler mais na página Elevation da segunda versão do Material Design, que está mais completa: https://m2.material.io/design/environment/elevation.html

Agora, falando dos valores "X", "Y", o esquema é o seguinte: comumente, os design systems controlam um desses valores para fazer a dissipação da sombra, e esse valor normalmente é o Y, pois controla a sombra na vertical, que é o que traz mais a sensação de elevação, ou seja, algo que vai começar a flutuar sobre outros elementos na tela. Isso não significa que o "X" nunca deve ser utilizado, pois tudo vai depender do contexto. Digamos que possa haver algum elemento que fique fixo na sua tela na esquerda ou direta. Com uma sombra em que o valor de "Y" foi modificada, dependendo do blur, dificilmente enxergaremos ela, e para isso o "X" pode resolver essa questão, trazendo a sensação de elevação que citei.

Agora referente ao blur, é mais uma questão de entender o valor para espaçamentos que você estará utilizando. Em particular, eu me baseio muito no 4-pt grid e no 8-pt grid, então até mesmo para esses valores de X, Y e o Blur, eu levo em consideração os múltiplos de 4 ou 8.

Qualquer dúvida a mais q vc tiver, lança aí que te helpamos, abraço!

Muito boa a explicação!! Acho que faz todo sentido do jeito que vc explicou! Muito obrigado!!