Quais as diferenças entre px, dpi e sp?

Redação |11 de agosto de 2021

Um dos maiores desafios na hora de desenvolver um aplicativo é criar uma interface que se adeque aos diversos tamanhos de tela e à variação de densidades. Esse tipo de compatibilidade requer um cuidado especial, mas conta com a ajuda de unidades de medida pré-estabelecidas que podem ser usadas como parâmetro no desenvolvimento.

Para garantir que o app rode nos mais distintos dispositivos, a programação usa um escalonamento e um redimensionamento que desempenha a função de adequação da imagem. É nesse cenário que surgem os termos como px, dpi e sp, peças fundamentais para guiar a jornada na criação de uma interface.

Entretanto, esses conceitos podem gerar dúvidas nas pessoas e para guiar os primeiros passos no universo dos apps, a Flowsense elaborou um glossário com definições que podem ajudar você a se situar nesse percurso. Confira a nossa seleção de palavras em detalhes nas próximas linhas.

Px, dpi, sp, pixel: o que cada um deles quer dizer

Se você chegou agora no mundo dos apps, certamente se deparou com com esses termos na hora de criar uma interface. Por mais semelhantes que eles possam parecer, cada um conta com uma propriedade fundamental que não só o diferencia dos demais, como ajuda especificamente na tarefa de criar uma interface bem escalonada e passível de um bom redimensionamento.

PX

O px corresponde ao número de pixels da tela. Embora seja uma medida amplamente conhecida, o uso dela não é recomendado. De acordo com o guia do Android para desenvolvedores, a representação real conta com variação entre os dispositivos, o que significa que a quantidade de pixels por polegada pode mudar de acordo com cada aparelho.

Dessa forma, essa unidade não é confiável justamente por trazer essa inconstância em decorrência da particularidade de cada display. Mesmo assim, vale ressaltar que o px não é totalmente inadequado, já que podem existir casos específicos em que ele pode ser aplicado.

DPI

O DPI refere-se ao Dots Per Inch, palavra que na tradução livre quer dizer “pontos por polegada”. Diferente da resolução, que versa sobre o número total de pixels de um painel, o DPI é o número de pontos existentes dentro de uma polegada de imagem. Aplicando a um exemplo prático, é possível dizer em uma tela de 160 dpi, um dp simboliza 1 pixel entre os 160 existentes.

SP

O SP, ou pixel escalonável (Scale-independent Pixels), é uma medida usada no tamanho de um texto. Diferente do DPI, ele não deve ser aplicado ao layout, fator que o torna exclusivo para a determinação das fontes. Apesar da diferença mencionada, inicialmente a unidade SP caminha em consonância com a de pontos por pixels. Por outro lado, ao usar essa medida específica na programação de texto, a fonte consegue fazer adaptações de dimensão para se adequar à variação de densidade de tela ou preferências do usuário.

Para além das unidades mencionadas, é possível esbarrar ainda em outras que também são utilizadas pelo Android. A característica comum a todas elas, é que são medidas baseadas no tamanho físico da tela:

  • in: faz menção às polegadas
  • mm: como visto usualmente, refere-se à unidade de medida “milímetro”;
  • pt: são os “pontos”, que indicam 1/72 de uma polegada;

 

Outros aspectos do desenvolvimento

Essas unidades de medida ajudam a guiar a interface para garantir a compatibilidade de tela. Mas existem muitos recursos mais específicos que também otimizam a dimensão de imagens ou textos e devem ser considerados durante a programação.

No que diz respeito a essas ferramentas, é possível mencionar a que permite a criação de layouts flexíveis para que eles se adaptem bem à mudança de tamanho. No caso da variação entre smartphone e tablet, também é válido trazer um layout alternativo, esquema que vai possibilitar a adequação aos devices sem maiores complicações.

Outra alternativa para ser trabalhada na criação de uma UI é o uso das imagens expansíveis, visto que elas são fundamentais para garantir uma boa experiência para o usuário durante a navegação. Uma das possibilidades de conseguir isso é por meio do suporte para bitmaps conferido pelo Android. Ao usar esse recurso, a programação viabiliza a expansão de pequenas regiões de pixels que são previamente especificadas.

Enfim, depois de ver a vastidão do ferramental oferecido pelos sistemas, as medidas ficam parecendo apenas uma pequena parte dentro da série de fatores que podem integrar a dinâmica do desenvolvimento. Apesar de básicas, elas entregam coordenadas imprescindíveis para que toda a visualização seja executada sem engasgos da plataforma.

Vale ressaltar que todo esse planejamento primário constrói a caminhada para uma boa experiência do usuário na versão final de um aplicativo. E é pensando nisso que o próximo tópico avança para a navegação do consumidor.

Como esses fatores interferem no mobile engagement?

Antes mesmo de falar em UX, ou seja, na experiência do usuário, é preciso pensar na UI – responsável por trabalhar a interface de um aplicativo. Isso requer um planejamento cauteloso que busque soluções para criar uma página de navegação intuitiva e responsiva. E nessas horas, todos os detalhes contam, até mesmo essa parte mais técnica do desenvolvimento.

Imagens e fontes bem calculadas dentro da interface podem otimizar a jornada do cliente, de modo a facilitar os próximos passos que vão programar o engajamento e a boa experiência de usuário.

Por isso, a automação dos apps, as análises de jornada e todas as medidas de mobile engagement dependem de uma criação inicial assertiva dos aplicativos. Se bem planejado desde o início, as ferramentas adotadas posteriormente podem entregar resultados ainda mais satisfatórios.

Acompanhe o blog da Flowsense e fique por dentro de conteúdos que incluem o universo do desenvolvimento, dicas sobre interface responsivas e otimização da experiência do usuário.