Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de pí­xeles de su pantalla. La densidad de pí­xeles es una unidad que se mide en pí­xeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una pantalla y es fundamental a la hora de realizar un diseño para móviles.

Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Esto provoca que los elementos de una interfaz de usuario de las mismas dimensiones de píxeles, aparecen más grandes en las pantallas de baja densidad y más pequeños en las pantallas de alta densidad.

La densidad de píxeles, se calcula del siguiente modo:

Densidad de pantalla = Ancho de pantalla (o alto) en píxeles / Ancho de pantalla (o alto) en pulgadas

Si comparamos un gama alta y un gama media, un iPhone X con una densidad de pantalla de 458 ppp,  y un Samsung J5 con sus 294 ppp, la diferencia de un botón en una y otra pantalla sería de un 40%, una barbaridad. Si hemos diseñado el botón para que se vea bien en el J5, en el iPhone X aparecerá casi a mitad de tamaño, seguramente se verá mal y probablemente, será difícil de accionar por su diminuto tamaño.

En este ejemplo, ambos círculos representan una pulgada de distintos móviles, el de más a la izquierda tiene menos densidad de píxeles y el de la derecha tiene el doble de densidad. Puedes comprobar, cómo un objeto de 6 px de alto se ve exactamente al doble de tamaño en el de baja densidad.

¿Cómo diseñar el interfaz de usuario para que se vea bien en cualquier pantalla?

Acabamos de ver que en las dos pantallas anteriores, la densidad de pantalla es el doble en una que en la otra, la solución para que el botón que diseñemos se vea igual en ambas pantallas, es duplicar el tamaño del botón que hemos diseñado en píxeles para cuando salga en la pantalla de doble densidad. En este caso el multiplicador será 2x, pero no siempre será así.

iOS

En el caso de iOS es más fácil, las pantallas retiina tienen 2x y 3x como multiplicador, pero en Android la diversidad de tamaños es mucho más grande.

Android

A diferencia de los iOS que son Apple, los teléfonos Android son de diferentes marcas, y eso provoca que la diversidad de pantallas sea mucho mayor. En este caso se establece 6 multiplicadores, 5 en realidad.
Si vamos a diseñar un elemento UI de 48×48 px, deberemos salvarlo en los siguiente tamaños:

• DENSIDAD BAJA: 36x36px (0,75x)
• DENSIDAD MEDIA: 48x48px (1x)
• DENSIDAD ALTA: 72x72px (1,5x)
• DENSIDAD EXTRA ALTA: 96x96px (2x)
• DENSIDAD EXTRA EXTRA ALTA: 144x144px (3x)
• DENSIDAD EXTRA EXTRA EXTRA ALTA: 192×192 (4x) . Este caso sólo afecta al icono lanzador.

Diseño UI para dispositivos: PT, DP o Density Independent Pixels

Los DP (Density Independet Pixels para Android) o PT (para iOS) son una unidad de medida multidispositivo que facilita el trabajo de diseñar UI. Esencialmente, definen un tamaño independiente del factor multiplicador que tenga cada dispositivo. De este modo, la comunicación entre diseñadores y desarrolladores es más fácil.

Tomando como base una resolución de 160PPP, un botón de 50x50px será un botón de 50×50 dp, y lo guardaremos en los distintos tamaños, 1,5x, 2x, 3x,…

Un DP es un pixel físico en una pantalla de densidad 160

Conclusión

Como hemos visto, no podemos ignorar las distintas densidades de pantalla si queremos ofrecer una correcta experiencia de usuario.
En el caso iOS salvaremos nuestras imágenes e iconos en 1x, 2x y 3x, el modo de nombrarlos es nombre@1x.png, nombre@2x.png, nombre@3x.png.
Para Android, dado que las pantallas de los móviles cada vez son mejores, en caso de simplificar, se tiende a sacrificar la densidad baja y salvamos para 1x, 1,5x, 2x y 3x.
Cuando se trata de iconos, la mejor solución es utilizar archivos SVG (gráfico vectorial escalable), HTML5 los soporta, con lo cual podemos escalarlos sin ningún miedo a perder resolución.