Diseño para Android ¿proporciones, densidades y resoluciones?
Hola a todos.
Estoy observando últimamente la fragmentación masiva de los dispositivos de Android, y los problemas que ello conlleva. Existe la propia guía de desarrolladores de Android en cuanto a las proporciones de pantalla, donde en una guía tan confusa como esta te hablan sobre las distintas densidades de pantalla asociados a lo que ellos llaman ldpi, mdpi, hdpi, xdpi.
He sintetizado en un resumen muy básico y sencillo cuáles son las proporciones actuales y las resoluciones más comunes asociadas a las mismas. También la proporción que se rigen entre ellas.
Proporción base: 480*800
ldpi = 0.75 = 360*600
mdpi = 1 = 480*800
hdpi = 1.5 = 720*1200
xdpi = 2 = 960*1600 (sin apenas uso)
Proporción base: 320*480
ldpi = 0.75 = 240*360
mdpi = 1 = 320*480
hdpi = 1.5 = 480*720
xdpi = 2 = 640*960
Después de toda esta info, que prácticamente se basa en hacer 2 diseños proporcionales y automatizar, llegan y nos aparecen con el nexus one con otras proporciones completamente distintas de 720*1280.
Me gustaría saber vuestras experiencias de diseño bajo esta plataforma, y cómo solventaríais esta nueva proporción que se está colocando en el mercado ¿Otro diseño a mayores?
Usuario desconocido
Dudo mucho que las primeras versiones de Android tengan un estándar, hay un montón de modelos chinos adaptados que no respetan ninguna convención.
Rolan Gonzalez
marotorod
Me parece que querías decir el galaxy nexus, el nexus one era wvga es decir: 480*800.
Yo e estado diseñando para aplicaciones móviles y es un tema bastante curioso, yo lo que hago es montar una aplicación para poder visualizar la aplicación en el movil de vez en cuando para adaptar mi mente a los tamaños porque si no tiendo a hacerlo todo demasiado pequeño. Instalandote el sdk de android luego puedes visualizarlo en todos los terminales con diferentes resoluciones y modificar lo que veas necesario para las resoluciones mas pequeñas.
Mi experiencia a la hora de maquetar una aplicación android es que todavia estoy muy verde y hay cosas que se me escapan de las manos, dos pngs del mismo tamaño se veian a tamaño diferente luego en la aplicación, cosas así te sacan loco y no sabes por qué pasan. Lo mejor para acostumbrarse es ir probando con el sdk y experimentar al máximo durante el proceso de diseño hasta cojer un poco de experiencia.
UnTipoDigital
Yo suelo empezar por el "baseline" que llaman ellos, su tamaño estandar 320x480 px en móviles. A partir de ahí hago las demás. Aquí os dejo un post que escribí sobre esto mismo.
http://www.untipodigital.com/diseno-de-moviles-tablets-las-diferentes-densidades/
;)
EricPuigdollers
Gracias por el post UnTipoDigital… le he echado un ojo y, como suele pasar, he salido con más dudas de las que tenía antes, estoy empezando con el tema de las Apps y voy, por decirlo eufemísticamente, algo perdido… de momento, un par de cosas: Si empiezas diseñando con la resolución más baja (320x480) ¿al trabajar con mayores densidades no pierdes resolución? es decir, ¿no sería más lógico empezar con las grandes y luego reducir? y la otra, no entiendo por que se trabaja siempre con Photoshop… ¿hay algún motivo para no trabajar con Illustrator? yo lo veo mucho más fácil, y al ser vectorial 100% no tienes los problemas de resoluciones… veo que todo el mundo trabaja en Photshop y no entiendo el porqué, ¿me estoy perdiendo algún detalle?
Muchas gracias por compartir tus conocimientos, sin gente como tu los comienzos serían mucho más duros!!
Skeku
En mi caso y tras hacer un buen estudio y tirarnos bastante tiempo investigando hasta la fecha hemos partido de una base de 800x480 que nos sirve como término medio teniendo en cuenta por ejemplo que un iphone4 son 960x640 o que hay móviles aún en el mercado a 320x480. Sin embargo generalmente trabajamos con un sistema de reescalado desarrollado en Adobe AIR que nos permite adaptar de manera fluída el contenido sin tener que preparar diferentes "assets" gráficos.
Independientemente de esto yo lo que hago es usar de manera intensiva el LiveView para previsualizar el contenido en iPhone (http://www.zambetti.com/projects/liveview/) y también el Android Design Preview para hacer lo mismo en dispositivos Android (http://code.google.com/p/android-ui-utils/). De esta manera voy viendo en tiempo real lo que diseño en Fireworks, directamente en los dispositivos :)
alfonsomartinde
Muy interesante Skeku, gracias por los aportes
UnTipoDigital
Buenas!
Perdón por la tardanza, he estado algo liadillo...
EricPuigdollers; te contesto a las preguntas.
- ¿no sería más lógico empezar con las grandes y luego reducir?: la forma de convertir da igual, de mas a menos o de menos a más (luego te explico porqué) lo que no da igual es la forma en que tú estás viendo y haciendo el diseño. Si trabajas en 320x480 vas a poder ver un diseño muy aproximado a como se vería en un móvil, a parte de ver exactamente los efectos que añadas a los elementos (bordes de 1px, degradados, sombras...). Además si trabajases en una resolución mayor, tendrías que estar haciendo zoom in para ser preciso y trabajar al pixel y zoom out para ver como queda en conjunto.
Lo de convertir de más a menos o de menos a más: como explico en el post, lo ideal es trabajar con vectores y así de paso te contesto a la segunda pregunta:
¿hay algún motivo para no trabajar con Illustrator? El motivo principal es que trabajamos para ver cosas en pantallas y éstas se rigen por píxeles, con lo que en Photoshop vas a ver con exactitud cual será el resultado final de un diseño, mientras que en illustrator todo es vectorial y no existen los píxeles.
Por ejemplo, imagina que tienes que hacer un icono de 16x16, lo haces en illustrator y queda genial, se ve perfecto a cualquier nivel de zoom, pero si luego lo pasas a Photoshop y es muy posible que tengas que retocarlo porque los píxeles te jueguen una mala pasada, lineas que en illustrator se ven definidas al 100%, en Photoshop sean 2 px, o menos que 1px y se vean transparente.
Para ahorrarte ese trabajo de retocar, se hace directamente desde Photoshop y ya está.
Además, antiguamente solo se podía trabajar con vectores en Illustrator, pero ahora puedes trabajar con vectores desde Photoshop y por eso, si haces el diseño de la App en Photoshop con vectores, te da igual al tamaño que lo hagas, siempre vas a poder escalarlo sin perder nada de resolución, incluso puedes escalar los efectos de capa que tengas.
No sé si te he aclarado un poco más, espero que te sirva la aclaración.
Saludos!
UnTipoDigital
Holas!
Skeku, una pregunta ¿los gráficos salen al pixel? porque hay conversiones entre las diferentes pantallas que no son escalas perfectas.
A ver si tengo un hueco y le echo un vistazo a ver que tal sale con esto...
Gracias!
Skeku
UnTipoDigital, creo que no es un sistema 100% perfecto el que usamos por lo que dices precisamente de que no siempre las conversiones son 1:1. Lo que tenemos en cuenta principalmente son porcentajes y espaciados, no el tamaño en sí definido en px. Un ejemplo:
Para un ancho de 400px diseño un campo de texto que ocupa, digamos, 320px. En realidad lo que estoy diciendo es que quiero un campo de texto que ocupe el 80% del ancho disponible. Intentamos siempre jugar con valores lo más exactos posibles.
Sin embargo el método más correcto es el de trabajar para cada "casa" bajo sus normas y requisitos. Es más costoso pero es la que consigue la precisión perfecta. Como no todos están dispuestos a afrontar un desarrollo multiplataforma específico, nosotros propusimos en su día usar Adobe AIR y este sistema de reescalado. Y a nivel visual queda tremendamente bien. De hecho justo antes de irnos ahora de vacaciones, terminábamos una a la que se le habían aplicado unos detalles extra de config creo recordar y se veía perfecta :)
Usuario desconocido
Hola a todos, cómo se instala AndroidDesignPreview en mac?
qué resolución base recomiendan para comenzar a diseñar una app android?
gracuas
jokin_l
@luciabustamanteds que programa usas para el diseño de la UI?
En vez de usar AndroidDesignPreview para Sketch o Photoshop tienes Skala Preview. Hace mucho probe AndroidDesignPreview pero a estas alturas me quedo con Skala. Sketch tiene su propia app pero necesitas tener un dispositivo con IOS.
Si usas Adobe XD puedes usar la propia de Adobe https://play.google.com/store/apps/details?id=com.adobe.sparklerandroid.
Usuario desconocido
jokin_l
Ese mismo día descargué Skala y anduvo bien
gracias
kavarela
¿qué resolución base recomiendan? para una pantalla de 320x480 ?
actualizarandroid
Las resoluciones android son relativas
actualizarappyprogramas
Correcto son muy realtivas y dependen de fabricante, modelo,... Aconsejo última versión ver más información
cribreak3215
yo diria que siempre es mejor usar la resolucion de 720*1280. para que la aplicacion que estemos desarrollando no de problemas
nisafitri539
ngobrol games With higher image resolution, WhatsApp Mod Image Resolution allows users to display profile pictures more clearly. This is not just a display, but also a visual statement that can better reflect the user's identity.