Desmistificando a densidade de pixel!
Como a densidade de pixel funciona e como ela afeta o seu design.
Esse artigo e vídeo foram originalmente criados como parte do curso Sketch Master.
Esse vídeo animado cobre a maioria dos tópicos desse artigo, mas, se você está interessado em animados detalhes a lá nerds, continue lendo!
Densidade de pixel, refere-se a quantidade de pixel apertado em um espeço físico (normalmente, uma polegada). No primeiro Mac, existiam 72 pixels por polegada — que pode parecer muito, mas necessário e exigia que os arquivos gráficos estivessem em conformidade com essa quantidade enorme de pixel.
Tecnologia para telas evoluiram drásticamente, e desde então, e hoje, mesmo o computador mais básico, tem uma escala em torno de 115 à 160 pixels por polegada (“ppi”, pixel per inch). Mas, um novo capítulo nessa história começou em 2010, quando a Apple introduziu o iPhone com a tela de retina — uma tela super nítida que dobrou a quantidade de pixel por polegada. O resultado? Detalhes gráficos com uma clareza nunca antes vista!
Para manter tudo em ordem, com o mesmo tamanho físico para a interface, as dimensões de pixel foram dobradas. Um botão com 44px de altura, se tornou 88px. Para acomodar essas diferenças nos aparelhos, designers precisavam criar gráficos (como ícones) em ambas os tamanhos, o original “1x”, e também a nova escala de “2x”. Mas, criou-se um problem: você não poderia dizer “ei, esse botão deve ter 44px de altura”, porque ele também será 88px de altura em um aparelho diferente. Não existe uma unidade de densidade de pixel independente para se medir. A solução era usar “Points”, ou “pt”. 1pt era igual a 1px em uma era pre-retina, ou 2px em uma era pos-retina. Isso permitiu ao designers falarem algo como: “ei, esse botão deve ter 44pt de altura” e então, qualquer aparelho pode multiplicar esse valor pela sua própria taxa de densidade de pixel, algo como, 1x ou 2x (e até mesmo 3x no caso de alguns novos iPhone’s).
PT & DP
Mas claro, isso não se aplica apenas aos aparelhos da Apple, hoje em dia, todos os sistemas operacionais — para desktop ou mobile — têm suporte para telhas de alta resolução (do inglês, high-ppi/dpi). O Google definiu sua própria unidade de densidade de pixel independente no Android. Eles não são chamados de "pontos" (ou "pt"), eles chão chamados de “DIPs”, no inglês density-independent pixels, que é equivalente à 1 pixel de densidade independente. Sua abreviação é “dp”. Eles não são exatamentes iguais aos pixels do iOS, mas a idéia é práticamente a mesma. Eles são uma unidade de medida universal, que pode ser convertida em pixels usando a taxa de escala do aparelho (2x, 3x, etc).
Você deve estar se perguntando sobre o tamanho físico de um pt. Para ser sincero, é praticamente não necessário para um desenvolvedor de interface se preocupar com isso, porquê temos um controle muito, muito pequeno sobre as alterações específicas de cada aparelho. E designers precisam confiar que o fabricante do aparelho colocou uma densidade de pixel apropriada para o aparelho, e focar sua atenção em criar os recursos em taxas de 1x, 2x, 3x ou outros. Mas, se você está realmente curioso, saiba você, que nos aparelhos da Apple, não há conversão entre polegadas e pontos. Em outras palavras, não há uma única densidade de pixel que represente 1 pt — tudo é específico ao aparelho (veja a sessão abaixo sobre Percepção de Escala). No iOS, um ponto pode variar entre 132 pontos por polegadas, até 163 pontos por polegadas. No Android, DIPs são sempre baseados em 160 ppi.
Caos controlado
Preparado para o choque de realidade? No começo da era de aparelhos com alta resolução, densidade de pixel eram apenas 1x e 2x. Mas hoje, é completamente doido — existem muitas densidades para ser suportado. Android é um exemplo perfeito: no presente momento em que esse artigo está sendo escrito, existem seis densidades de pixel comuns através de todas as fabricantes de aparelhos. Isso significa que um ícone parece ter o mesmo formato em todas essas telas, na verdade, requer seis imagens diferentes. Para aparelhos Apple, é algo em torno de dois há três imagens diferentes.
Crie em vetor, crie para 1x!
Existem várias lições práticas que podemos aprender com isso. De início, devemos sempre criar designs usando vetores. Isso permite que nossa interface, ícones e imagens, possam ser escalados em qualquer tamanho.
A segunda lição é que nós deveríamos estar criando designs na escala de 1x. Em outras palavras, criar usando pontos para todas as medidas, e em seguida, escalar isso para todas as taxas e variações de densidade de pixel quando estivermos exportando o arquivo… ao contrário de criar peças específicamentes para as dimensões de pixel do aparelho (2x, 3x, etc) e cair em todos os tipos de problemas quando formos exportar. Porquê, escalar um gráfico 2x em 150% para criar um 3x, podemos ter vários resultados inesperados, mas, escalar um vetor de 1x para 200% ou 300%, isso mantém uma consistência visual maior.
Prototipar para um tamanho padrão de iPhone, deve ser 375x667, e não 750x1334, que é a resolução que os gráficos são mostrado na tela. A maioria das ferramentas de design não distinguem pontos de pixel (Flinto é a única exceção), então, fica a cargo do designer identificar que aquelas unidades são na verdade pontos, e então, ter a flexibilidade de exportar em diferentes tamanhos.
Fingindo em tudo, até funcionar!
Isso é um pouco avançado, mas vale mencionar: as vezes, os aparelhos fingem sua resolução. Eles fingem manter a taxa padrão de pixel-para-ponto, como 3x, mas na verdade é 2.61x e a imagem é escalada para 3x apenas por conveniência. Isso é o que o iPhone Plus atualmente faz. Ele “encolhe” a interface criada em 1242x2208 para caber em uma tela 1080x1920 (o chip gráfico do iPhone faz isso em tempo real).
Devido a imagem estar sendo escalada para baixo apenas um pouquinho (87%), o resultado parece decente — uma linha de 1px ou quase em uma tela 3x ainda parece muito nítido. E as chances são, apesar de eu ter zero informações sobre isso, que a Apple irá lançar um iPhone Plus com tela 3x em um futuro onde os hardwares para esse tipo de produto sejam viáveis para produção em massa dessa quantidade. O atual iPhone Plus vai continuar fingindo isso até sabe lá quando.
(Bruce Wang escreveu um ótimo artigo sobre a tela do iPhone Plus, em inglês)
Essa escala-por-não-inteiros uma abordagem aceitável? Ultimamente, a prova está aí; essa escala é sutíl o suficiente para ser imperceptível? Em vários aparelhos Android fazem o mesmo para alcançar uma escala pixel-para-ponto mais consistente, e, infelizmente, alguns fazem aparelhos fazem isso muito mau. Escalar dessa maneira não é legal, porque, pegando tudo que você criou, pixel-perfect e nítido, em uma determinada escala, vai ficar um pouco borrado devido a proporção (exemplo, linhas de 1px se tornam 1,15px). Mesmo se você não for fanático por perfeição, como eu, não há quem negue que elementos devem ser alinhados corretamente para ficarem nítidos e confortáveis aos nossos olhos. Infelizmente, agora, como as densidades de pixel estão entrando na casa dos 4x e acima, fica muito difícil de detectar essa escala não linear de pixel-para-ponto, então, eu imagino, que os fabricantes de aparelhos irão usar mais e mais dessa abordagem. Nossa única esperança seria que, essa escala não-linear causa-se algum inconveniente de performance e no final, eles tenham que fazer isso corretamente.
Perpcepção de Escala em nossos olhos
Vamos colocar todo esse papo de densidade de lado um pouco, e considerar essa questão: um botão deve ter o mesmo tamanho físico entre todos os aparelhos? Claro, estamos usando um botão como exemplo, mas nós poderíamos estar falando de um ícone, texto ou barra de tarefas. Eles devem ter um tamanho consistente entre todos os aparelhos? O senso comum é, depende!
- Depende da precisão dos métodos de entrada (touch vs cursor)
- Depende do tamanho físico da tela
- E depende da distância que estamos da tela
Os dois últimos são mais perceptíveis quando testamos pessoalmente, na nossa mão. Porque um tablet tem uma tela maior que um celular, e seguramos isso em uma distância maior. Então vamos para o laptop, ou desktop e então uma TV…a distância de cada um cresce assim como o tamanho da tela.
Um botão na sua TV pode ter o tamanho do seu celular — devido a distância, ele tem que ser desse tamanho.
Aqui vai um exemplo real e menos dramático: os ícones em um tablet precisam ser maiores que os do seu celular, e isso pode ser concluído em duas maneiras, usando uma densidade de pixel menor ou então mudando o tamanho do botão (em pt).
Densidade de pixel menor
Telas maiores que usamos a uma distância maior, normalmente possuem uma densidade de pixel menor. Um TV deve ter algo menor que 40ppi! Para uma TV típica isso é permitido. Um iPad de tela de retina tem algo em torno de 264ppi, enquanto um iPhone tem 326ppi. Devido as pixels no iPad serem maiores (a tela é menos densa), toda a interface fica um pouco maior. Isso soma para a distância extra em que ficamos da tela.
Dimensões diferentes
Mais, de vez em quando, usar densidade de pixel menor não é o suficiente…talvez um elemento precise de um design um pouco maior. Isso acontece com ícones para o iPad. No iPhone, todos são 60x60, mas no iPad, por ter uma tela maior, ele oferece mais espaço, então, é uma prática considerável (e visualmente agradavél) aumentar eles para 76x76.
Mudar o tamanho do elemento para todos os diferentes tamanhos de tela cria um trabalho maior para os designers. É um dos poucos cenários onde os aparelhos da Apple requerem mais imagens que os aparelhos Android. Felizmente, não é muito comum fora do mundo dos ícones.
Paz de espírito?
Nós acabamos de discutir um punhado de complexidades de co-existem para você se conciliar. Felizmente, design de interface é apenas uma questão de usar unidades independentes de densidade (como pt ou dp). É mais complicado para ícones, mas existem templates para ajudar você nisso. Abaixo, uma lista de rescursos nesse tópico:
Recursos essenciais
- Google Device Metris: Uma lista impressionante com as especificações de aparelhos de todos os tipos (Android, iOS, Mac, Windows, etc). Com informações sobre a dimensão da tela, densidade de pixel e até mesmo, a distância comum que os usuários usam esses aparelhos.
- ScreenSiz.es é outro ótimo recurso similar ao anterior.
- Bjango App Icon Templates: Esses templates de design (disponíveis para a maioria dos softwares de design) são de fácil compreensão. Úteis para uso e também como referência para as últimas especificações para Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone e muito mais.
- Designer’s Guide to DPI: Esse é um extensivo guia criado por Sebastien Gabriel, que cobre mais detalhes e práticas de fluxo de trabalho para criar peças para Android e iOS.
Veja mais nos recursos de densidade de pixel para designers.
Créditos
- Pixel Density, Demystified escrito originalmente por Peter Nowell
