Proporcao de tela (aspect ratio)

A relacao entre a largura e a altura de um elemento, como 16:9 ou 1:1.

Hard

O que é

Proporcao de tela e a relacao entre a largura e a altura de um elemento, escrita com dois numeros e dois pontos, como 16:9 ou 4:3. E ela que define como uma imagem ou um video sao enquadrados e exibidos.

Em interface, a proporcao garante consistencia entre aparelhos. Um video pensado em 16:9, por exemplo, distorce no celular se nao for adaptado. Por isso o layout responsivo preserva a proporcao, pra que a imagem nao estique nem esprema, mantendo a clareza e evitando o corte que esconde informacao.

A proporcao tambem molda a identidade de uma plataforma. O Instagram comecou so com o quadrado 1:1, e foi isso que definiu a cara do feed antes de ele abrir o 4:5 e o 16:9. Ou seja, escolher uma proporcao e, em parte, escolher como o conteudo vai ser lido.

Em uma frase

Essa capa foi feita em 16:9, mas o card pede 1:1, por isso ela está cortando feio no celular.

A pergunta que ele responde

Por que minha imagem aparece cortada ou esticada quando muda de tela?

Quando usar

Ajuda na hora de definir o formato de uma imagem, video ou card que precisa funcionar em telas diferentes.

Como não usar

O cuidado e nao forcar um formato unico em todo canal e deixar o conteudo cortar justo onde a proporcao nao bate.

Na prática

Imagine uma capa que aparece cortada feio no celular. O problema costuma ser de proporcao: ela foi desenhada em 16:9, mas o card pede 1:1.

Não confunda com

Vale separar proporcao de resolucao. A proporcao e a relacao entre os lados, enquanto a resolucao e a quantidade de pixel. Tanto e assim que duas imagens podem ter a mesma proporcao e uma nitidez bem diferente.

D

Em inglês

Aspect Ratio

Pronúncia

as-pect-rei-xio

Também chamado de

aspect ratio, proporcao, razao de aspecto, 16:9, 1:1

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigos sobre design responsivo