Diseñar UI para múltiples dispositivos

Si quieres diseñar UI para dispositivos táctiles debes tener muy en cuenta la resolución de aquellas pantallas en donde tu interfaz va a funcionar. ¿Por qué? Porque cambia tanto de un dispositivo a otro que rompería totalmente la UX (experiencia de usuario) y la usabilidad de tu diseño.

La densidad de píxeles o resolución de pantalla

La densidad de píxeles es la cantidad de píxeles que caben en un área física de la pantalla. Los píxeles no tienen un tamaño físico definido. Dependen del tamaño del dispositivo en donde se muestran y de la cantidad de píxeles que tenga la pantalla.

Hasta hace unos años, las pantallas sólo trabajaban con una densidad de 72 a 96 píxeles por pulgada. Dicho de otro modo: en una pulgada entraban de 72 a 96 píxeles.

Con la llegada de los dispositivos móviles, las pantallas han ido aumentando la cantidad de píxeles que pueden entrar en una pulgada para ofrecer una mejor calidad de imagen. Cuantos más píxeles tengas en una pantalla, mejor se van a poder definir las imágenes en ella. No se definen igual de bien las curvas de una letra “a” en un cuadrado de 21 x 21 px que en uno de 8 x 8 px.

Cómo calcular la densidad de píxeles. PPI o DPI de una pantalla

La densidad de píxeles se expresa en PPI (Pixels Per Inches o píxeles por pulgada). Pero también se puede hablar de DPI (Dots Per Inches o puntos por pulgada) que es una referencia que se usa habitualmente en el mundo de la impresión.

La densidad de píxeles se calcula en base a dos valores: la cantidad de píxeles que tiene una pantalla de alto (o de ancho) y la cantidad de pulgadas que tiene de alto (o de ancho). Los píxeles, como hemos dicho, tienen un tamaño que depende del tamaño de la pantalla y de su resolución (la cantidad de píxeles que existan en esa pantalla). La fórmula:

Por ejemplo, el primer iphone tenía un tamaño pantalla de 320×480 px. Y unas dimensiones de 1,96×2,94 pulgadas. Si hacemos el cálculo con la fórmula anterior tendríamos que el primer iphone tendría una densidad de 163 PPI y el iphone 4 retina, con 640×960 px y 2×2,9 pulgadas tendría una densidad de 320PPI. La pantalla retina tiene el doble de píxeles en el mismo espacio, prácticamente. En la pantalla con más píxeles la definición de imagen será mucho mejor.

Diseñar UI con multiplicadores

Como hay muchos tamaños de pantalla y resoluciones diferentes, diseñar interfaces que funcionen en cualquier dispositivo supone ahora mucho trabajo. Un botón de 44x44px en una pantalla para iphone saldría muy pequeñito en una pantalla para iphone retina. Como entran más píxeles por pulgada en una pantalla retina, el botón de 44px que físicamente medía un cuarto de pulgada (aprox) en el iphone normal, mediría un octavo de pulgada: la mitad de tamaño. El botón siempre medirá los mismos píxeles, pero como para el mismo tamaño físico de pantalla hay el doble de píxeles… estos tienen que ser más pequeñitos para que quepan todos en las pantallas con mayor resolución (con más ppi).

Para hacer un botón que muestre el mismo tamaño en ambos dispositivos tendremos que duplicar el tamaño del botón en píxeles para cuando vaya a salir en un dispositivo con retina, o con una mayor resolución. Aplicando un multiplicador podemos saber qué tamaño exacto en píxeles tiene que tener muestro botón para que se vea siempre bien en este caso… 2x. Cualquier elemento que diseñemos para iphone, si lo multiplicamos por 2 nos valdrá para iphone con retina. Pero ¿cómo hacemos con cada tamaño pantalla? Porque no siempre tendremos una relación de 2x. Bueno, habrá que calcularlo. En iOS es fácil, las pantallas retina tienen 2x y 3x como multiplicador. Pero en android hay más tamaños…

Solución para diseñar 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.

Se toma como base para todo una pantalla con una resolución de 160PPI. Por ejemplo: ya no hablamos de botones de 44×44 px, sino de botones de 44×44 dp. Después sólo hace falta aplicar el factor multiplicador según los dispositivos donde se vaya a morstrar el diseño: 1.5x, 2x, 3x… etc

…ya no hablamos de botones de 44×44 px, sino de botones de 44×44 dp…

Dos tips de diseño de UI para dispositivos

Primero: diseñar en formato vectorial en lugar de en mapa de bits. Utilizar formas vectoriales nos permite escalarlas a otros tamaños sin perder calidad. Lo habitual sería trabajar con software como Illustrator, aunque con Photoshop también te genera vectores.

Segundo: diseñar en 1x. Esto quiere decir que diseñamos en un entorno con una resolución entre 72 y 120 PPI. Lo normal es hacerlo en 72, que es como viene Photohop predefinido. Podrás discutir correcciones y cambios con los desarrolladores y con el cliente sin sufrir porque tienes que hacer los ajustes en 6 versiones. Una vez que el diseño esté aprobado, sólo habrá que exportar los archivos necesarios al resto de tamaños según su multiplicador.

Volver al glosario
Agencia de Branding

Somos una agencia de branding. Todos nuestros proyectos tienen algo en común: la creatividad y la estrategia. Contáctanos si tienes un proyecto o si te gustaría saber más sobre nuestro método de trabajo.

Conócenos