Source: http://www.untipodigital.com/diseno-de-moviles-tablets-las-diferentes-densidades/?replytocom=184
Timestamp: 2018-10-18 15:05:18+00:00

Document:
Un Tipo Digital – Diseñador visual de interfaces digitales » Diseño de móviles & tablets: las diferentes densidades
Diseño de móviles & tablets: las diferentes densidades
Publicado el 28 jun, 2012 | 36 Comments
Me apasiona diseñar Apps para los smartphone y tablets pero cuando pasamos a la siguiente fase: adaptar ese diseño a todos los dispositivos, es como si me tirasen un jarro de agua fría. Es un trabajo mecánico por el que tenemos que pasar y cuanto más eficiente lo hagamos, mejor.
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
Está genial el post! Me ha ayudado mucho, ahora estoy empezando con esto de las apps y no hay mucha info específica por internet. Gracias!
UnTipoDigital
Me alegro de que te haya servido ;)
CR_Design
Muchas gracias por compartir la información. Voy a intentar hacer, como bien dices, todo el diseño en vector. Saludos!
Just Indómita
Realmente genial :)
Me gustaría estar en contacto contigo.
Gracias! Me alegro de que te sirva.
Muchas por tu información, es de mucha ayuda para quienes iniciamos a diseñar App para los dispositivos móviles.
Cuando creas un nuevo documento en Photoshop y que sera tu BASELINE, por ejemplo, si tomo las dimensiones de pantalla 320x480px para 160mdpi, el 160 corresponde a la resolución que debere ponerle al nuevo documento que en este caso seria 160dpi??
La resolución en tus documentos debe de ser 72ppp. No hace falta que cambies esa resolución porque para eso cambiamos el tamaño (320×480 px). Esos valores están relacionados, así que si mantienes el mismo tamaño pero aumentas la resolución es lo mismo que mantener la resolución y aumentar el tamaño
Perdona que te de las gracias hasta ahora pero me habia ausentado por unos días.
Se te agradece por tu información que me ha servido de mucho, no sabes cuanto.
Donde he tenido un poco de mas trabajo ha sido con las densidades de los BlackBerry, pero al final termine haciendo 5 densidadades, pero si tu sabes de algún metodo que me pueda servir no dudes en mencionarlo.
Cuidate mucho, saludos.
I blog too and I am writing something very
close to this specific article, “Un Tipo Digital – Diseñador visual de interfaces digitales
Muchas gracias por tus consejos!! me han sido de gran utilidad.
Solo me queda una duda; dices que hay que diseñar a 72 dpi? al ser así,y teniendo en cuenta que un iphone tiene 326 dpi, no saldría pixelado o desenfocado?
He leído en algún otro foro que lo ideal es diseñar (en photoshop) a 200 dpi…
El tamaño en píxeles y la resolución son proporcionales, de modo que la pantalla del iphone 3 y la del 4 tienen el mismo tamaño de pantalla (3,5″) por lo que el tamaño en píxeles sería el mismo 320x480px pero aquí entra la densidad de píxeles (en el mismo espacio, la pantalla retina tiene el doble de píxeles que la normal).
A ver si te aclara este ejemplo: Un papel con tamaño A2 podríamos dividirlo en 2 A3, pero con mayor densidad, un A2 podríamos dividirlo en 4 A4. Es el mismo tamaño pero tiene más partes y más pequeñas.
Pues igual pasa con las pantallas: 320×480 a 72ppp = 640×960 a 72ppp = 320×480 a 144ppp
Diseñando en base a tamaños en píxeles, lo que ganamos es que en nuestra pantalla del monitor al ser de 72ppp vamos a ver exactamente toda la app y sus detalles visuales tal y como van a quedar, ya que si diseñamos en densidad a 144ppp por ejemplo una linea de 1px en nuestro monitor serán 2px en la pantalla retina. Así tenemos unos tamaños y proporciones reales, que por lo menos a mí me ayudan bastante.
Espero que te haya aclarado, si no, no dudes en preguntarme ;)
Hola Cristina, con respecto a tu pregunta, yo trabajo el diseño de la App tal como lo explican aca, que es a 72dpi, a esta resolución cortas todas las partes y la programas en en xcode.
La resolución que comentas del iphone de 326dpi la utilizo si el cliente de un inicio me pide una imagen grande de la App para publicidad impresa.
Saludos, y suertes con tus diseños de App.
Gracias UnTipoDigital por el espacio para las consultas.
Bastante útil tu información amigo, una pregunta más? Recomiendas los fondos obscuros texto blanco para la lectura? o tienes algún estudio sobre esto para ver repercusiones o que tan viable pueda ser esto?
Gracias David! Pues sobre ese tema hay mucha información por internet, una pequeña muestra es este artículo http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
Además hay que tener en cuenta que los dispositivos móviles se usan en exterior y por efectos de la luz, reflejos, sombras… puede no tener suficiente contraste como para leerlo cómodamente. Para leer alguna frase o 2-3 lineas de texto se podría utilizar el fondo oscuro y texto blanco pero para leer más cantidad de texto creo que sería muy arriesgado.
Entiendo tu planteamiento de partir de esa resolucion/densidad (Baseline) .
Es cómodo para escalar los elementos basados en vectores.
Pero si tienes por fondo una imagen que ocupa toda la pantalla y empiezas el diseño a 320×480 (72ppp) al escalarla al 150% o 200%. ¿No se pixeliza o pierde calidad la imagen? ¿Cómo solucionas esto?¿Cúal es tu forma de trabajar para las imágenes de fondo?
Para las imágenes de fondo es conveniente hacer algo revés, de mayor tamaño a menor. Cualquier imagen (que no sea vector) pierde calidad si la tienes en pequeño y la haces grande, pero al contrario no. Entonces en este caso, coges la imagen de fondo, la pones sobre tu resolución mayor y de ahí vas escalando a menos. En la imagen del post tienes los porcentajes para hacer a la inversa, útiles en estos casos. Espero que te haya aclarado la duda.
Una gran publicación, gracias.
Solo me queda la misma duda que han planteado otros lectores de que al trabajar de menos a mas resolución puede verse afectada la nitidez de los elementos.
Gracias José! La nitidez no se ve afectada porque trabajamos con vectores. Un vector puedes hacerlo de pequeño a gigante y siempre va a estar nítido. No funciona con píxeles, si no con formulas matemáticas que calculan lineas y curvas. Aquí puedes ver un ejemplo. http://www.xaraxone.com/webxealot/xealot30/bitmap_01.gif Puedes buscar más información sobre Vector Vs. Bitmap. Espero que te haya ayudado la aclaración.
Gracias, muy util!!,.
Mi duda es si no sería más funcional guardar solo las imagenes xxhdpi y que en programación estas se ajusten automáticamente a los demás tamaños, siendo menos engorroso al tener solamente un archivo de cada y menos pesada la app. Hablo desde la inexperiencia, sería una buena opción?
Pues según tengo entendido, sí que se puede hacer pero no siempre va a quedar bien ya que la proporción de las pantallas los móviles es diferente y además, al reducirse por programación, puede que las imágenes no se ajusten al pixel y no se vean nítidos y definidos. Te puedes arriesgar, pero desde luego si quieres hacer una app bien hecha, deberías asegurarte de que en todos los dispositivos se ve perfecto y no hay ningún fallo.
Gracias, realizaré alguna prueba para ver que tal se ajusta automaticamente, pero para que quede profesional como bien dices es mejor asegurarte de que todo se ajusta ala perfección. Un saludo.
Muy bien explicado, me has ahorrado un buen rato planeando una rutina para hacer todo eso.
Tengo un problema con los sectores, al aumentar por escala la guía de elementos, los sectores no hacen el mismo escalada y tengo que ir modificando los secotres manualmente. ¿Me podrías decir que hago mal?
Para mi que es mejor hacer el tamaño más grande y luego obtener todos los demás con este generador: http://romannurik.github.io/AndroidAssetStudio/
Lo encontré recientemente
Hola! Gracias, me ha quedado bastante más claro contigo, explicado por humanos para humanos.
Tengo duda si para las imágenes de fondo es también igual que para los íconos: 72ppp de resolución. Lo otro es q veo q utilizaste centímetros como unidad de medida ¿Por qué?
Gracias, ahora te sigo en Tw
I’m not quite sure how to say this; you made it extmerely easy for me!
Gracias por tu ayuda lo primero. Soy un poco nueva en esto y el programador de una app que estoy haciendo me pide el diseño de las pantallas como las quiero. Se lo tengo que dar ya en el aspect ratio de cada tablet? o valdría que le hiciera un diseño genérico y el que lo adecue?
Livier Méndez
Sería bueno una nueva explicación con photoshop cc :)
Buenas Livier y a todos los demás.
Siento haber estado ausente, he estado bastante liado con trabajo, pero vuelvo a estar disponible para ayudaros en las dudas.
Como bien dices, sería buena una explicación con CC, espero tener algo de tiempo y poder hacerla en breve.
https://www.facebook.com/cachdangky3gmobifone/
might not be a taboo matter but generally folks
Gracias amigo, fue de gran ayuda esta publicación. :)
Dejar un comentario a UnTipoDigital

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución