Para que una simple App pueda estar disponible para todos los tipos de smartphone y tablets de iOS y Android, tiene que diseñarse para iPhone, iPhone con pantalla retina, Android ldpi, Android mdpi, Android hdpi, Android xhdpi, iPad 2, iPad 3,…
… eso sin incluir Symbian, BlackBerry y Windows 8. (os pongo las guías de estilo de estos SSOO)
Aquí vemos lo que os estaba diciendo:
– Conversión entre las diferentes densidades.
– Tamaños de las diferentes pantallas.
– Tamaños de los iconos.
Acceder a toda esta información de un solo vistazo puede causarte sensación de agobio, pero vamos a resumirlo para que resulte más fácil.
Os explico mi forma de trabajar, después de probar varios métodos me parece el más rápido y organizado:
Comienzo el diseño siempre en una resolución/densidad que me resulte cómoda y tenga una buena percepción de las proporciones de los elementos y que también desde Android y Apple recomiendan, denominándola “BASELINE“.
Android: 160 mdpi – Pantalla: 320×480 px / iPhone: No retina – Pantalla:320×480 px
Después de tener todo esto preparado, empiezo a hacer todo el DISEÑO de la app, con todas las pantallas que lo necesiten (aconsejo trabajar en VECTOR y AJUSTADO AL PIXEL, ya que luego nos será más fácil para manipular los elementos) y una vez que tengo todo el diseño hecho y aprobado finalmente, me preparo para adaptar los elementos o los diseños a las demás densidades.
Os pongo un pequeño truco para que os resulte más cómodo esto de ajustar al pixel:
Preparar una buena GUÍA DE ELEMENTOS es esencial, nos ahorrará mucho tiempo y esfuerzo a la hora de recortar los elementos. Teniendo todos los elementos en la guía, juntos, bien medidos, y organizados, solo nos queda crear los sectores.
Una vez hechos los SECTORES, podremos exportar fácilmente todos los elementos desde Guardar para Web y dispositivos con un solo clic.
Tener la guía de elementos hecha en 160 mdpi, nos permitirá convertirlo todo para las diferentes densidades, multiplicando por los siguientes valores:
Esto se hace desde Photoshop>Imagen>Tamaño de imagen:
Vemos que en la dimensión en píxeles pone 100 de porcentaje y ahí es donde tenemos que poner el porcentaje de conversión que tiene cada densidad con respecto a la 160 mdpi.
Por ejemplo: para aumentar de 160 mdpi a 240 hdpi, tendríamos que cambiar el 100% por un 150% y si lo que queremos es reducir a 120 ldpi, tendríamos que poner en vez de 100% un 75%.
NOTA: acordaos siempre de tener activados los checkboxes de Cambiar escala de estilos, Restringir proporciones y Remuestrear la imagen: Por aproximación (recomendado)
Ya que en Android, los valores no son números enteros, el ajustado al píxel de los elementos puede verse afectado, así que deberíais revisarlo y ajustarlos al píxel de nuevo (es la cruz que nos ha caído con Android), pienso que de aquí viene nuestra fama de fanáticos de Apple ;).
Espero que toda esta información os sirva para facilitar vuestro trabajo como diseñadores de Apps y/o aclararos un poco más sobre esto de las diferentes densidades de pantallas.
Aquí os dejo unos links donde viene toda la información:
Android: Guía de estilo
Apple: Guía de estilo
La fuente se ha obtenido de esta dirección: http://www.untipodigital.com/diseno-de-moviles-tablets-las-diferentes-densidades/