Desmistificando densidade de pixels

visualizações Publicado em: 20/06/2016

Crédito: essa matéria é uma tradução e foi escrita por Peter Nowell. URL do original: Pixel Density, Demystified

Introdução

Densidade de pixels é uma medida que expressa a quantidade de pixels existente em um determinado espaço (normalmente em uma polegada). No primeiro Mac havia 72 pixels por polegada — esta quantidade pode parecer muito, mas é necessário que os gráficos sejam criados para esta quantidade de pixels resultando em ícones tais como os mostrados a seguir.

ícones criados por Susan Kare para o primeiro Mac.

As tecnologias para a fabricação de telas evoluiram drasticamente desde a época do primeiro Mac e atualmente as telas dos monitores dos computadores mais simples têm uma densidade de pixels entre 115 e 160 pixels por polegada (pixel per inch — "ppi"). Em 2010 a Apple escreveu um novo capítulo nesta história quando lançou o iPhone com Retina Display — termo usado para designar uma tela supernítida com o dobro de pixels por polegada, na qual os elementos gráficos são renderizados com nitidez nunca vista até então.

Compare a nítidez dos ícones e textos das duas figuras

Para manter a mesma dimensão física na interface do usuário a dimensão em pixel dobrou. Um botão com 44px de altura deverá ter 88px de altura. Para servir diferentes dispositivos o autor precisa criar gráficos (tais como ícones) com dimensões que atendam uma escala original de "1x" e a escala dobrada "2x". Mas, não é mais possível afirmar-se "hey, este botão deve ter 44 pixels de altura", pois o mesmo botão deverá ter também 88px de altura em um dispositivo diferente. Não existe uma unidade para medir a densidade de pixel no dispositivo (pixel-density-independent). A solução é usar "points(pontos)", uma unidade de medida CSS cuja abreviatura é "pt". Um ponto ou 1pt é igual a 1px em uma display da era pré-retina ou 2px em um display retina 2x. O uso desta unidade de medida CSS permite afirmar-se: "hey, este botão deve ter 44 pontos de altura" pois qualquer que seja o dispositivo ele será capaz de multiplicar 44pt pela sua razão de densidade de pixels seja ela 1x ou 2x, ou mesmo 3x quando se tratar do iPhone "plus-sized" da Apple .

PT & DP

Mas esta não é uma tecnologia exclusiva dos dispositivos da Apple, pois nos dias atuais cada sistema operacional — desktop ou mobile — suporta telas de alta ppi/dpi. O Google definiu sua própria  unidade de medida independente de densidade para o Android. Tal unidade não se chama "points", ela foi designada por "DIPs" sigla para "density-independent pixels (pixels independentes da densidade)" cuja sintaxe abreviada é "dp". Esta unidade não é exatamente equivalente à unidade points no iOS, mas o conceito é o mesmo. Trata-se de uma unidade de medida universal que pode ser convertida em pixel de acordo com a razão de densidade de pixels do dispositivo (2x, 3x, etc.).

Você deve estar perguntando: afinal qual é o tamanho físico de um ponto. Na verdade a necessidade prática dos designers de UI se preocuparem com esta questão é nenhuma, uma vez que não se tem controle algum sobre as características do dispositivo do usuário. Designers têm apenas que acreditar que os fabricantes construiram seus dispositivos com a densidade de pixels apropriada para aquele dispositivo e focar na criação de recursos para serem servidos a dispositivos 1x, 2x, 3x, ou qualquer outra razão de densidade de pixels. Mas, se você está curioso, saiba que para os dispositivos da Apple não existe uma constante para converter polegadas em pontos. Dito de outra forma: não existe uma unidade de densidade de pixels que represente 1pt — isto depende de cada dispositivo (ver a seção "Percepção de escala" adiante nesta matéria). No iOS, 1 ponto varia de 132 a 163 pontos por polegada. No Android, DIP é sempre igual a 160 ppi.

Caos controlado

Prepare-se para a realidade. Tão logo apareceram os dispositivos móveis de alta resolução a densidade de pixels se resumia a 1x e 2x. Mas, nos dias atuais temos uma verdadeira loucura — existem inúmeras densidades de pixels para dar suporte. Android é um exemplo perfeito para ilustrar este fato: à época em que este artigo foi escrito existiam seis densidades de pixels para dispositivos de diferentes fabricantes. Isto significa que um ícone para ser servido a estes diferentes dispositivos teoricamente com as mesmas dimensões, irá requerer a criação de 6 gráficos diferentes. Para os dispositivos da Apple esta quantidade é de 2 ou 3 gráficos diferentes.

Projete vetor. Projete para 1x.

Disso tudo que foi dito pode-se extrair algumas lições práticas. Para ínicio de conversa a primeira lição é: devemos criar formas vetoriais. Isto possibilita que componentes de interfaces, ícones e gráficos em geral escalem para qualquer tamanho.

A segunda lição é: devemos criar as formas para a escala 1x. Ou seja, crie usando pontos para todas as medidas e quando for exportar as formas escale para as diferentes densidades de pixels a servir... em lugar de criar de acordo com as dimensões finais em pixel para os diferentes dispositivos (2x, 3x, etc.) e ter problemas quando exportar. Isto porque ao escalar 150% um gráfico 2x em pixel para obter um gráfico 3x resulta em um gráfico de baixa qualidade gráfica, mas ao escalar 200% ou 300% um gráfico vetorial 1x para obter gráficos 2x e 3x não há perda de qualidade gráfica.

Mockups for a standard-sized iPhone should be 375×667, not 750×1334 which is the resolution they're actually displayed at. Most design tools don't distinguish pontos from pixels (Flinto is the only exception I'm aware of), so it's up to designers to pretend that units in pixels are actually pontos, then have the flexibility to export at two or three times the size.

Fake it 'till ya make it!

This is a bit more advanced, but it's worth mentioning: sometimes devices fake it. They pretend their pixel-to-point ratio is a common one, like 3x, but it's actually 2.61x and the image is scaled to 3x for convenience. This is what the iPhone Plus currently does. It shrinks an interface made at 1242×2208 down to fit on a 1080×1920 screen (the phone's graphics chip performs this scaling in real-time).

Design for the iPhone Plus as though it was truly 3x. The device will scale it 87% for you.

Because the image is only being scaled down a little bit (87%), the result still looks decent — a 1px line on a nearly-3x screen still looks pretty darn crisp. And chances are, although I have zero inside information, Apple will probably release a true 3x iPhone Plus in the future as those hardware components become viable for a product made in such outrageous quantities. The current iPhone Plus is probably faking it until it makes it.

(Bruce Wang wrote a great articleabout the iPhone 6 Plus's screen.)

Is this scaling-by-non-integers approach acceptable? Ultimately, the proof is in the pudding; is the scaling subtle enough to be imperceptible? Many Android devices also use scaling to achieve a more standard pixel-to-point ratio, and unfortunately some of them do it really poorly. Scaling like this is undesirable because everything that you designed to be crisp and pixel-perfect at a certain scale will become blurry due to interpolation (i.e. a 1px line becomes 1.15 pixels). Even if you're not a fanatical pixel perfection nerd like I am, there's no denying the fact that design elements need to align with full pixels in order to appear crisp to our eyes. Unfortunately as pixel densities enter the 4x and above range, the blurriness caused by non-integer scaling becomes far more difficult to perceive, so I predict that device makers will be using this approach more as time goes on. We can only hope that the performance drawback of scaling will deter them!

Your Eye's Perception of Scale

Let's put all this pixel density stuff aside for a minute, and consider this question: should a button always be the same physical size across devices? Of course we're just using a button as an example, but we could be talking about an icon, or text, or a toolbar. Should these be a consistent size across all devices? The general consensus is that it depends.

Those last two kind of go hand-in-hand; because a tablet has a bigger screen than a phone, we hold it farther away. Then you get to a laptop, then a desktop, then a TV… the distance increases with screen size.

A button on your TV screen might actually be the size of your phone — because it has to be from that distance.

Here's a less dramatic and very real example of this: the app icons on a tablet need to be larger than those on your phone, and this is accomplished in two ways: by using a lower pixel density and by changing the dimensions of the button (e.g. in pontos).

Lower Pixel Density

Larger screens that we use at a distance tend to have lower pixel densities. A TV might be as low as 40 pixels per inch! For typical TV-viewing that's permissible. An iPad's retina display is around 264ppi while an iPhone's retina display is 326ppi. Because the pixels on an iPad are larger (the screen is less dense), the entire interface becomes slightly larger. That accounts for the extra distance from the iPad's screen.

Different Dimensions

But every once in a while, using a lower pixel density isn't enough… a specific design element needs to be even larger. This happened with app icons on the iPad. On the iPhone they're 60×60, but the iPad's larger screen offers a lot more space, so there's a considerable practical (and visual) upside to using 76×76 app icons.

Changing an element's dimensions for different devices creates more work for designers. It's one of the few scenarios where Apple devices require more sizes than Android devices! Fortunately, it's not very common outside the realm of app icons.

Sanity Check?

We've just discussed a ton of co-existing complexities for you to reconcile. Fortunately, interface design is just a matter of using density independent units (like pt or dp). It's more complicated for app icons, but there are templates to help you with that. Here's a list of resources on these topics:

Essential Resources

Google Device Metrics: An impressive list of specs for devices of all kinds (Android, iOS, Mac, Windows, etc.). Get screen dimensions, pixel density, and even the approximate distance the device is held from a user's eyes.ScreenSiz.es is a similar resource.

Bjango App Icon Templates: These design templates (available for all major design software) are immensely comprehensive. Useful both practically and as a reference to the latest specifications for Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone, and more.

Designer's Guide to DPI: This extensive guide by Sebastien Gabriel covers even more details and practical workflows for Android and iOS designers.

Check out more of the top pixel density resources for designers.

Be the first to know when I publish new design articles and resources.

This article and video are part of Sketch Master — online training courses for professionals learning Sketch. You'll learn tons of tricks and practical workflows, by designing real-world UI/UX and app icon projects.