¿Cuál es la mejor resolución para trabajar en dispositivos Android?

Estoy tratando de diseñar una aplicación para dispositivos Android, pero vienen en todos los tamaños y demás... con diferentes resoluciones y es un poco confuso. ¿Cuál es la mejor manera de hacerlo?

¿Trabaja a la mayor resolución y luego el programador reduce todo para otros dispositivos? ... El problema es que los dispositivos vienen con diferentes resoluciones y las proporciones no coinciden... así que estoy muy confundido, si reduce la escala y no mantiene las proporciones... todo el diseño se arruinará. ..

¿Qué enfoque debo seguir al diseñar para pantallas con diferentes proporciones? Cualquier consejo, flujo de trabajo, enlace, consejo... es más que bienvenido.

Encontré esto en el sitio web de Android, es bastante útil... pero me pregunto si puedo obtener una respuesta de alguien que haya hecho un diseño para una aplicación... ¿cuál fue el flujo de trabajo?

Gracias.

Respuestas (4)

Esta es la respuesta es puramente desde el punto de vista del sitio web.

La consulta de medios, cortesía de CSS3, nos brinda más control sobre cómo se verá un sitio web en varias resoluciones. A medida que reduce el ancho del navegador, cambiará al código para ese ancho.

Alguna información sobre Media Queries - http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Esto cae bajo el Diseño Web Responsivo, que es la moda actual.

Alguna información sobre diseño web receptivo y consultas de medios: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Ahora, para la desventaja del diseño receptivo: imágenes receptivas / escalables:

"Ver un sitio web receptivo en un dispositivo móvil fuerza la CPU y la memoria mientras cambia el tamaño de las imágenes porque está descargando una imagen grande, descomprimiéndola en la memoria de su teléfono y luego redimensionándola para que quepa en una pantalla pequeña. Este proceso toma alrededor de 3 bytes por píxel de memoria, por lo que una imagen de 1024 × 768 ocupará aproximadamente 2,36 MB de memoria. La mayoría de los clientes solo solicitan un promedio de 4 imágenes en ese momento, pero 9,44 MB sigue siendo mucho para cargar una página. Un tamaño de archivo recomendado para imágenes en un El contexto móvil podría ser de 100 × 100, pero esto es un poco utópico ya que una imagen adecuada para sitios web de escritorio supera esa resolución". - http://www.webdesignshock.com/responsive-design-problems/

Hay varias soluciones para esto:

http://stuffandnonsense.co.uk/projects/320andup/

http://adaptive-images.com/

Es una forma relativamente nueva de crear sitios web, pero hay mucha información en línea, desde revistas increíbles hasta una lista aparte .

* Editar: probablemente obtendrá muchas más respuestas si la pregunta estaba en stackoverflow o webmasters.

* Editar: probablemente obtendrá muchas más respuestas ... probé el intercambio de pila de entusiastas de Android y mi pregunta se cerró allí porque es subjetiva ... : | . Aniway, muchas gracias por tu respuesta :)
Maldición :(. Lamentablemente, solo puedo responder desde el punto de vista de los sitios web. Tal vez puedas salvar algo de eso.
Super +1 por el enlace a las imágenes adaptativas. ¡Voy a usar ese en mi próximo proyecto!

Ok, muchas de estas respuestas son geniales, pero déjame darte algunas ideas de un diseñador.

  1. En este momento, tiene 3 densidades diferentes para diseñar (mdpi, hdpi y xhdpi).

  2. Aunque elegir una densidad para comenzar es su preferencia, recomendaría comenzar con hdpi y escalar su diseño desde allí. Si busca las estadísticas sobre cuántas personas usan dispositivos xhdpi, es bastante bajo. Y, los dispositivos mdpi son físicamente pequeños, y probablemente desee comenzar a diseñar con un poco más de detalle. Esperemos que no esté diseñando para el usuario propietario del dispositivo mdpi;)

  3. En lo que respecta al proceso, lo que suelo hacer es abrir Photoshop, crear un nuevo documento y hacer que el lienzo tenga una resolución de 480x800 (resolución de dispositivo hdpi promedio). A partir de ahí, diseñaré toda la aplicación. Una vez que el diseño está terminado, empiezo a cortar los activos (a menos que su desarrollador sepa manejar un documento de Photoshop). Durante el proceso de corte de los activos hdpi, escalaré cada activo individual en Photoshop para que se ajuste a la densidad adecuada y luego los guardaré.

El escalado es otro tema. Aquí hay algunas referencias rápidas:
hdpi > mdpi = -66%
hdpi > xhdpi = +133%

Escale cada uno restando o sumando un porcentaje. Una vez que haya escalado un activo, asegúrese de comprobar si hay píxeles desalineados antes de guardarlo.

  1. Cuando se trata de activos, hay una cosa realmente importante para recordar. Si está diseñando una aplicación para múltiples resoluciones, querrá crear tantos activos de 9 parches como sea posible. Consulte este enlace para ver la explicación de un parche 9: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Lo siento si esto fue largo, pero pensé que apreciaría una respuesta detallada. Sé lo increíble que es tener un compañero diseñador que venga y ayude.

¡Buena suerte!

En primer lugar, ¿también admitirá solo teléfonos o tabletas?

En segundo lugar, tienes bastante razón. Mi experiencia proviene de los juegos, pero estoy seguro de que también se aplica a otras aplicaciones. Simplemente cree primero sus activos de alta resolución y luego amplíelos en consecuencia para dispositivos de media y baja resolución. No debería tener que preocuparse por diferencias minúsculas en el tamaño de la pantalla, digamos menos de 20 px, ya que el contenido debería poder fluir correctamente gracias a la forma en que funcionan las aplicaciones de Android. Esta es otra cosa a tener en cuenta. Debe diseñar su aplicación para que pueda estar sujeta a un poco de flujo libre.

La conclusión es que diseñe sus activos gráficos en función de las densidades de píxeles, en lugar de las resoluciones, y haga que su diseño se adapte en función de las resoluciones. (la aplicación elegirá automáticamente los recursos de resolución apropiados según el ppi del dispositivo)

¡Espero que esto ayude! :)

No estoy seguro, pero creo que las tabletas también :)

Android usa píxeles independientes de la densidad y escala la interfaz de usuario para que coincida con la resolución de la pantalla del dispositivo. Dado que hay una variedad de fabricantes diferentes, los diseñadores suelen crear activos a 160ppi , 240ppi y 320ppi , lo que se relaciona con escalas de 100%, 150% y 200%.

De las pautas para desarrolladores de Android :

“El píxel independiente de la densidad es equivalente a un píxel físico en una pantalla de 160 ppp, que es la densidad de referencia asumida por el sistema para una pantalla de densidad “media”. En tiempo de ejecución, el sistema maneja de forma transparente cualquier escala de las unidades de dp, según sea necesario, en función de la densidad real de la pantalla en uso. La conversión de unidades de dp a píxeles de pantalla es simple: px = dp * (dpi / 160). Por ejemplo, en una pantalla de 240 ppp, 1 ppp equivale a 1,5 píxeles físicos”.

Cuando escala su trabajo, considere usar el método del vecino más cercano para evitar una escala de mala calidad para diferentes resoluciones. Bjango tiene un conjunto útil de acciones de Photoshop para facilitar un poco el diseño para dispositivos móviles.