Material

Design:
Ambiente
Larissa Hortêncio de Souza
Professor: Leandro Lesqueves Costalonga
Sumário
Superfícies………………………………3

Elevação………………………………….42

Luz e Sombra………………………….66
Superfícies: Visão Geral

● Mundo físico:
○ objetos refletem a luz e projetam sombras
○ podem ser sobrepostos uns sobre os
outros.
○ não atravessam a superfície uns dos
outros.

3/70
Superfícies:Visão Geral

● O Material Design aborda essas características

de modo a representar como elas se movem
no mundo físico.
● Representação em 3D

4/70
Superfícies:Profundidade
● A profundidade é representada colocando
elementos em vários pontos ao longo do eixo z
positivo, estendendo-se em direção ao
observador.
● Na web, a interface do usuário expressa o
espaço 3D manipulando o eixo y.

5/70
Superfícies:Profundidade

6/70
Fonte: Material Design
Superfícies:Propriedades

● As superfícies dos materiais possuem

características e comportamentos consistentes
e imutáveis.
● Dimensões:
○ O material tem dimensões variáveis ​X&Y
(medidas em dp) e uma espessura
uniforme (1dp).

7/70
Superfícies:Propriedades

8/70
Fonte: Material Design
Superfícies:Propriedades

● Sombras:
○ Superfícies de material em diferentes
altitudes projetam sombras.

9/70
Superfícies:Propriedades- Video Sombras

10/70
Fonte: Material Design
Superfícies:Propriedades

● Resolução:
○ Superfícies de Material tem resolução
infinita.

11/70
Superfícies:Propriedades-Vídeo Resolução

Fonte: Material Design 12/70

Superfícies:Propriedades
● Conteúdo:
○ O conteúdo é exibido em qualquer forma e
cor no material.
○ O conteúdo não adiciona espessura ao
Material.
○ O conteúdo é expresso sem ser uma
camada separada.

13/70
Superfícies:Propriedades-Vídeo Conteúdo

14/70
Fonte: Material Design
Superfícies:Propriedades
● Propriedades físicas
○ O material é sólido.
○ A entrada e a interação do usuário não
podem passar pelo material.
○ Elementos de vários materiais não podem
ocupar o mesmo ponto no espaço
simultaneamente.

15/70
Superfícies:Propriedades

16/70
Fonte: Material Design
Superfícies:Propriedades

17/70
Fonte: Material Design
Superfícies:Propriedades

Fonte: Material Design

18/70
Superfícies:Propriedades

● Propriedades físicas
○ O material não pode passar por outro
material.
○ O material não se comporta como um gás.
○ O material não é fluido como um líquido ou
gel, embora possa exibir conteúdo com
essas propriedades.

19/70
Superfícies:Propriedades

20/70
Fonte: Material Design
Superfícies:Propriedades
● Transformações
○ Mudar de forma.
○ Alterar a opacidade.
○ Crescer e Encolher apenas ao longo do seu
plano

21/70
Superfícies:Propriedades

22/70
Fonte: Material Design
Superfícies:Propriedades

Fonte: Material Design 23/70

Superfícies:Propriedades

Fonte: Material Design 24/70

Superfícies:Propriedades

Fonte: Material Design 25/70

Superfícies:Propriedades
● Movimento
○ Gerado espontaneamente ou descartado
em qualquer parte do ambiente.
○ Pode se mover ao longo de qualquer eixo.
○ Superfícies de material podem coordenar
seu movimento.
○ O movimento do material ao longo do eixo
z é tipicamente um resultado da interação
do usuário. 26/70
Superfícies:Propriedades

Fonte: Material Design 27/70

Superfícies:Propriedades

Fonte: Material Design 28/70

Superfícies:Propriedades

Fonte: Material Design

29/70
Superfícies:Propriedades

Fonte: Material Design

30/70
Superfícies:Atributos
● A superfície básica do material:
○ branca opaca
○ espessura de 1dp
○ lança uma sombra.
● Todos os elementos da interface do usuário no
Material Design resultam de modificações
nessa superfície.

31/70
Superfícies:Atributos
● Comportamento:
○ Superfícies rígidas- permanecem do mesmo tamanho em
todas as interações.
○ Superfícies esticáveis- podem crescer ou encolher ao
longo de uma ou mais arestas até um limite de tamanho e,
em seguida, comportar-se como superfícies rígidas.
○ Superfícies panificáveis- ​permanecem do mesmo
tamanho durante as interações. Eles podem exibir
conteúdo adicional ao rolar pela área até atingir um limite
de conteúdo.

32/70
Superfícies:Atributos

Superfície Rígida
Fonte: Material Design 33/70
Superfícies:Atributos

Superfície Esticável
Fonte: Material Design 34/70
Superfícies:Atributos

Superfície Panificável
Fonte: Material Design
35/70
Superfícies:Atributos
● Posicionamento e movimento de superfície(x
/y)
○ Os movimentos podem ser fixos nos eixos X e Y ou em
qualquer direção.
○ O movimento da superfície pode ser confinado a um único
eixo ou movimento ao longo dos dois eixos
simultaneamente.

36/70
Superfícies:Atributos

Movimento em uma ou qualquer direção

Fonte: Material Design 37/70
Superfícies:Atributos
● Opacidade da superfície
○ Superfícies de material podem ser
transparentes, semi transparentes ou
opacas.

38/70
Superfícies:Atributos

Fonte: Material Design

39/70
Superfícies:Atributos
● Scrims
○ Os scrims são tratamentos temporários que
podem ser aplicados a superfícies de
Material com o objetivo de tornar o
conteúdo em uma superfície menos
proeminente.

40/70
Superfícies:Atributos

Fonte: Material Design 41/70

Elevação
● Medindo a elevação
○ A elevação no material design é medida como a distância
entre as superfícies do material.
○ A distância da frente de uma superfície de Material para a
frente de outra é medida ao longo do eixo z em pixels
independentes de densidade (dps) e representada (por
padrão) usando sombras.

42/70
Elevação

Fonte: Material Design 43/70

Elevação
● O sistema de elevação
○ Todas as superfícies e componentes do
Material Design possuem valores de
elevação.

44/70
Elevação

Fonte: Material Design 45/70

Elevação
● Elevação em repouso
○ Os componentes se movem de elevações
em repouso em resposta ao usuário ou a
um evento do sistema.
● Variam de acordo com o ambiente, a
plataforma ou o aplicativo.

46/70
Elevação

Fonte: Material Design 47/70

Elevação
● Mudança de elevação
○ Os componentes podem alterar a elevação
em resposta a entradas do usuário ou
eventos do sistema.

48/70
Elevação

Fonte: Material Design 49/70

Elevação
● Interferência de elevação
○ Quando um componente se move entre a
elevação em repouso e o deslocamento de
elevação dinâmico, ele não deve colidir
com outros componentes.

50/70
Elevação

Fonte: Material Design 51/70

Elevação
● Representar com sucesso a elevação:
○ Bordas da superfície, contrastando a
superfície do entorno
○ Sobrepor com outras superfícies, em
repouso ou em movimento
○ Distância de outras superfícies

52/70
Elevação

● Bordas
○ As bordas ajudam a expressar a qualidade
tátil das superfícies dos materiais.

53/70
Elevação

Fonte: Material Design 54/70

Elevação
● Sobreposição de superfície
○ Quando uma superfície se sobrepõe a
outra superfície, parcial ou completamente,
indica que as duas superfícies ocupam
diferentes elevações.

55/70
Elevação

Fonte: Material Design 56/70

Elevação

● Distância
○ O grau de diferença de elevação entre
superfícies pode ser expresso usando
fundos scrimmed ou usando sombras.

57/70
Elevação

Scrimmed Fonte: Material Design Sombras

58
 Elevação

● Movimento
○ Mudanças nas
sombras

59
Fonte: Material Design
 Elevação

● Movimento
○ Exibindo
sobreposição

Fonte: Material Design 60

 Elevação

● Movimento
○ Empurrando

Fonte: Material Design 61

 Elevação

● Movimento
○ Escala

Fonte: Material Design 62

 Elevação

● Movimento
○ Parallax

Fonte: Material Design 63

Elevação

● Superfícies na frente de outras superfícies

tipicamente:
○ Contém conteúdo mais importante
○ Concentre a atenção, como um diálogo
○ Controle as superfícies por trás dele, como
ações em uma barra de aplicativos
64/70
Elevação

● No Material Design todos os elementos

possuem valores padrão para elevações em
repouso e deslocamentos dinâmicos de
elevação.

65/70
Luz e Sombra
● No ambiente do Material Design, a iluminação
das superfícies sé projetada por luzes virtuais.

66/70
Fonte: Material Design
Luz e Sombra

● Sombras
○ fornecem dicas sobre profundidade,
direção do movimento e arestas da
superfície.
○ é determinada pela sua elevação e relação
com outras superfícies.

67/70
Luz e Sombra

68/70
Fonte: Material Design
Luz e Sombra

Fonte: Material Design 69/70

ATIVIDADE

70
ATIVIDADE

71
Dúvidas?

72