Diseñando para Android

Diseñando para Android

Cuando vamos a diseñar para Android, el primer problema con el que nos encontramos es la enorme diferencia que existe de un terminal a otro, no solo en cuanto a rendimiento, si no a resolución, que es el verdadero problema con el que nos vamos a encontrar cara al diseño.

Android pone a nuestra disposición una completa documentación en la que podemos consultar todos los aspectos técnicos que tenemos que tener en cuenta a la hora de abordar un diseño App.

Android simplifica las cosas y para definir tamaños, lo hace con una diagonal que traza desde la esquina superior izquierda a la inferior derecha.

resolución Android

resolución Android

En general divide las resoluciones en cuatro tamaños, pequeño, normal, grande y extragrande, ldpi (bajo), mdpi(medio), ipap(alto), y xhdpi (muy alta)

320x480px se considera el tamaño normal, aunque este tamaño «normal» puede cambiar debido a la cantidad de smartphones que salen continuamente al mercado y sus distintas resoluciones.

En la siguiente tabla podemos ver las distintas resoluciones agrupadas en estos cuatro grupos principales.

Como podéis ver, se tratan todas las pantallas, desde las más pequeñas a las de dispositivos tablet.

resoluciones Android

resoluciones Android

Dan McKenzie en su artículo de Smashing Magazine, nos recomienda utilizar como referencia, la resolución de 320 x 533 píxeles y luego introducir diseños personalizados para los otros tamaños de pantalla.
En el desarrollo para Android, no se habla de resoluciones si no de densidades de pantalla, la diferencia es que mientras en resolución estamos hablando de la cantidad de pixels que forman la pantalla, en densidad, nos referimos a la cantidad de pixels que hay en un área de pantalla.

Densidad de pixeles independientes (dp) es la unidad utilizada y se expresa del siguiente modo:

px=dp*(dpi/160)

 Por ejemplo, en una pantalla de 240 ppp, 1 DP es igual a 1,5 píxeles físicos. Android no sugiere que utilicemos  siempre las unidades de DP en la definición de la interfaz de usuario de la aplicación para asegurarse de que la interfaz de usuario se muestra correctamente en las pantallas con diferentes densidades.

Mantener la independencia de densidad es importante porque, sin ella, un elemento de interfaz de usuario (como por ejemplo un botón) aparece físicamente más grande en una pantalla de baja densidad y pequeño en una pantalla de alta densidad. Como la densidad de los cambios relacionados con el tamaño pueden causar problemas en su aplicación de diseño y usabilidad.

Las figuras 1 y 2 muestran la diferencia entre una aplicación cuando no proporciona independencia de la densidad y cuando lo hace, respectivamente.

En la primera vemos cómo a mayor densidad la imagen aparece más pequeña, sin embargo en la figura 2 obtenemos el mismo tamaño para cualquier densidad.

Fig I

Fig I

Fig II

Fig II

Cuando diseñamos para iPhone, es mucho más fácil, la relación entre iPhone4 y iPhone3 es de 2:1.

Para Android las proporciones son 3:4:6:8

Densidades

Densidades

  • 36×36 baja densidad
  • 48×48 densidad media
  • 72×72 alta densidad
  • 96×96 muy alta densidad

Entonces, la solución es crear en el proyecto una carpeta por cada tipo de resolución y en función del terminal enviarle a usar una u otra.

De esta forma además no hará falta cambiar el nombre de las imágenes y tener distintas programaciones.

Como estáis viendo, no tiene nada que ver con iPhone.

Si luego además nos centramos en la navegación, tampoco es similar a iPhone.

Para empezar la botonera se centra en la parte inferior de la pantalla, el botón back por ejemplo, en el iPhone está arriba y en Android abajo y además está integrado en la botonera del terminal.

GUIDELINES PARA PHOTOSHOP GRATIS !!!

Si necesitas guidelines en photoshop de smartphones Android, aquí os dejo unos cuantos para descargar gratis.