Androideity

Programación android en español, tutoriales, documentación, noticias, smartphones, tablets, programación android, aplicaciones android

Diseñando para Android

| | 21 Comentarios

Una de las cosas más fascinantes en el desarrollo de Android es sin duda el diseño de las pantallas que invitarán al usuario a usar tu aplicación. Si bien, la funcionalidad no deja de ser importante, en el mundo móvil he observado el patrón constante de que los usuarios no sólo buscan que la aplicación haga lo que tenga que hacer sino que además las pantallas con las que interactúan sean llamativas, bonitas y usables.

Navegando en la web, me he encontrado con un excelente artículo titulado “Designing for Android” de Dan McKenzie, que me pareció muy interesante y completo y cuya traducción al español vale la pena para que más personas puedan utilizarlo como referencia. Sin más les dejo mi interpretación del artículo:

Para los diseñadores, Android es el referente a tomar en cuenta cuando se habla de diseño de aplicaciones. Por mucho que a los diseñadores les gustaría pensar que se trata de un mundo de iOS, en el que todos los usuarios utilizáramos iPhone, iPad y la App Store, nadie puede ignorar que Android tiene actualmente la mayor parte de la cuota de mercado de los smartphones y que su uso se está extendiendo hacia todo tipo de dispositivos electrónicos. En poco tiempo, la plataforma Android de Google ha crecido rápidamente y las distintas marcas la han empezado a notar.

Pero seamos realistas. Los múltiples dispositivos con Android que podemos encontrar en el mercado hacen sentir que el diseño para esta plataforma es una cuestión difícil de dominar. Sumando además que la poca documentación es difícilmente un buen punto de partida para empezar a diseñar y producir aplicaciones que luzcan realmente geniales. Navegando por la web en busca de recursos que te hablen del diseño en Android te hará darte cuenta de que sólo encontrarás contados recursos al respecto y que poco de ellos te servirán realmente como guía.

Si esto te parece un poco desalentador (y es la razón por la que no te has animado a diseñar aplicaciones para Android) te tengo una buena noticia, no estás solo. Afortunadamente, Android está comenzando a abordar los problemas de tener varios dispositivos y tamaños de pantalla, y los fabricantes de dispositivos están adoptando lentamente los estándares que eventualmente reducirán la complejidad en el tema de diseño.

Este artículo les ayudará a los diseñadores a familiarizarse con lo que necesitan saber para empezar a trabajar con Android y para entregar los resultados adecuados para el equipo de desarrollo. Los temas que vamos a cubrir son los siguientes:

  • Disminuir la densidad de Android pantalla.
  • Conocer los aspectos fundamentales del diseño de Android a través de patrones de diseño.
  • Diseñar los requerimientos a partir de las necesidades de desarrollo.
  • Qué es Android 3.x y qué hay que conocer

 

Smartphones con Android y tamaños de pantalla

Al comenzar cualquier proyecto de diseño digital, la comprensión del hardware como primer paso es una buena idea. Para aplicaciones de iOS, correspondería al iPhone y al iPod Touch. En Android, por su parte, esto se extiende a docenas de dispositivos y fabricantes. ¿Por dónde empezar?

La línea de tiempo de las pantallas soportadas en los dispositivos Android comienza por el T-Mobile G1, el primer dispositivo Android disponible en el mercado que tiene una pantalla HVGA de 320 x 480 píxeles.

HVGA significa “la mitad de la matriz de gráficos de video” (o VGA de medio tamaño) que es el tamaño de pantalla estándar para los smartphones de hoy en día. El iPhone 3Gs, 3G y 2G utilizan la misma configuración.

Para simplificar las cosas, Android clasifica las pantallas (tomando el cuenta la longitud de una diagonal que va desde la esquina superior izquierda a la esquina inferior derecha de la pantalla del dispositivo) en cuatro tamaños generales: pequeño, normal, grande y extra grande.

 

Imagen tomada del artículo original en el que se muestran dos tamaños de pantalla muy comunes en Android.


320 × 480 se considera un tamaño “normal” de pantalla en Android. Cuando hablemos de tamaño “extra grande” piensa en las pantallas de las tablets. Sin embargo, hay que tomar en cuenta que los smartphones más populares de hoy en día tienen WVGA (es decir, un VGA más grande) 800+ x 480 píxeles HD de pantalla. Por lo tanto, lo que es “normal” está cambiando rápidamente. Por ahora, vamos a tomar como referente que la mayoría de los smartphones con Android tienen pantallas grandes.

 

Imagen tomada del artículo original cuya tabla muestra las diferentes configuraciones de pantalla disponibles en los skins del emulador del Android SDK.


La variedad de tamaños de pantalla puede ser un reto para los diseñadores que están tratando de crear un tamaño único para todos los diseños de layout. Para resolver esto, he encontrado que el mejor enfoque consiste en diseñar un conjunto de layouts para 320 x 533 píxeles físicos y luego introducir diseños personalizados para los otros tamaños de pantalla.

Si bien esto crea más trabajo tanto para el diseñador y el desarrollador, el tamaño de pantalla más grande de los dispositivos tales como el Motorola Droid y Evo HTC puede requerir cambios en los diseños base que hagan un mejor uso de los recursos visuales del dispositivo.

 

¿Qué necesitas saber acerca de las densidades de pantalla?

Los tamaños de pantalla es sólo la mitad del asunto. Los desarrolladores no hacen referencia a la resolución de las pantallas, sino más bien a su densidad. Así es como Android define los términos y conceptos acerca del soporte de las pantallas en la documentación de Android developers:

  • Resolución. El número total de pixeles físicos en una pantalla.
  • Densidad de la pantalla. La cantidad de pixeles en un área física de la pantalla, normalmente se conoce como DPI (puntos por pulgada).
  • Pixeles independientes de la densidad (DP). Esta es una unidad de pixel virtual que se utiliza en la definición de un diseño de interfaz de usuario con el fin de expresar las dimensiones del diseño o la posición de una manera independiente de la densidad. Los pixeles independientes de la densidad equivalen a un píxel físico en una pantalla de 160 DPI, que es la densidad de referencia asumida por el sistema como la densidad “media” de la pantalla. En tiempo de ejecución, el sistema maneja de manera transparente cualquier ampliación de las unidades de DP según sea necesario, en base a la densidad real de la pantalla que se esté utilizando. La conversión de las unidades de DP a los píxeles de la pantalla es simple: los píxeles = DP * (DPI / 160). Por ejemplo, en una pantalla de 240 DPI, un DP es igual a 1,5 píxeles físicos. Utiliza siempre los DP como unidad para definir los diseños de tu interfaz de usuario para asegurarte de que se mostrará correctamente en pantallas con diferentes densidades.

Es un poco confuso, pero esto es lo que necesitas saber: Al igual que los tamaños de pantalla, Android divide a las densidades de pantalla en cuatro densidades básicas: LDPI (bajo), MDPI (medio), HDPI (alto), y XHDPI (muy alta). Esto es importante porque tendrás que entregar todos los elementos gráficos (bitmaps) en sets de diferentes densidades. Por lo menos, tendrás que entregar un set en MDPI y HDPI para cualquier aplicación Android que hagas.

Lo que esto significa es que todos los gráficos de bitmaps necesitan ser ampliados o reducidos partiendo de su tamaño base (320 x 533). Nota: hay también una forma de parsear los archivos SVG que proporciona una forma de escalar el vector en diferentes tamaños de pantallas y densidades sin perder calidad en la imagen.

El requerimiento de los bitmaps es similar al de preparar gráficos para imprimir contra los que tenemos para la web. Si tienes experiencia en el campo de las impresiones, sabrás que una imagen de 72 PPI se verá muy pixelada y borrosa cuando son ampliadas o impresas. En lugar de ello, necesitarías rehacer la imagen a modo de vector o utilizar una foto de alta resolución y ajustar la resolución del archivo en torno a 300 PPI con el fin de imprimirla sin perder la calidad de la imagen. La densidad de la pantalla de Android funciona de manera similar, a excepción de que no estamos cambiando la resolución del archivo, sino únicamente el tamaño de la imagen. Un buen estándar a adoptar es 72 PPI.

Ahora supongamos que tomaste un icono en bitmap de 100×100 pixeles de una de tus pantallas de tu diseño base (recuerda que “la base” es un layout de 320×480). Colocando este mismo icono de 100×100 en un dispositivo con una pantalla IDPI haría que la apariencia del icono fuera grande y borrosa. Del mismo modo, colocarlo en otro dispositivo con una pantalla HDPI lo haría verse demasiado pequeño (esto se debe a que el dispositivo tiene más puntos por pulgada que la pantalla MDPI).

Imagen tomada del artículo original en la que se muestra una aplicación que no tiene soporte a la densidad.


Para ajustar las imágenes a las diferentes densidades de pantalla de los dispositivos, necesitamos seguir una relación de escala de 3:4:6:8 entre los cuatro tamaños de densidad. Usando esto y un poco de matemáticas simples, podremos crear cuatro versiones diferentes de nuestro bitmap para poder trabajar en la aplicación:

  • 75×75 para pantallas de baja densidad (x0.75);
  • 100×100 para pantallas de media densidad (nuestra base);
  • 150×150 para pantallas de alta densidad (x1.5);
  • 200×200 para pantallas de muy alta densidad (x2.0)

Imagen tomada del artículo original en la que se muestran las cuatro versiones de una imagen optimizadas para las diferentes densidades de las pantallas.


Una vez de que hayas creado todos los gráficos, puedes organizarlos de la siguiente manera:

Imagen tomada del artículo original en el que se muestra la organización y nombrado sugerido de la estructura de directorios y archivos. De esta manera podemos utilizar el mismo nombre para cada uno de los archivos de cada densidad de pantalla.


Puede que te confunda un poco el uso de PPI (pixeles por pulgada) para realizar cada versión de las imágenes. Bastará con crear las imágenes bajo un estándar de 72 PPI y escalar las imágenes según sea la versión que necesites crear.

 

Usando patrones de diseño en Android

A menudo, los clientes preguntan si pueden usar su diseño de aplicación en iPhone para Android. Si lo que estás buscando son atajos, hacer una aplicación para los navegadores web para móviles utilizando una herramienta como Webkit HML5 sea quizás la mejor opción para ti. Sin embargo, para crear aplicaciones nativas en Android, la respuesta es no. ¿Por qué? Porque las convenciones de las interfaces de usuario en Android son diferentes a las del iPhone.

La gran diferencia reside en la tecla “Back”, para navegar a las páginas previas. La tecla “Back” en los dispositivos Android es fija y siempre está disponible para el usuario, independientemente de la aplicación. O es una tecla física del dispositivo o se encuentra fija digitalmente en la parte inferior de la pantalla independientemente de cualquier aplicación, tal y como se aprecia en la versión Android 3.x para tablets.

La presencia de una tecla “Back” fuera de la aplicación deja espacio para otros elementos en la parte superior de la pantalla, tales como el logo, título o menú. Mientras que esta convención relacionada con la navegación difiere mucho de la de iOS, existen otras diferencias que en Android se conocen como “patrones de diseño”. De acuerdo con Android, un patrón de diseño es una “solución general a un problema recurrente”. A continuación se presentan los principales patrones de diseño de Android que se introdujeron desde la versión 2.0.

 

Dashboard

Este patrón resuelve el problema de tener que navegar entre las diferentes capas de una aplicación. Proporciona una plataforma de lanzamiento alternativa para aplicaciones ricas e interactivas como Facebook, Evernote y LinkedIn.

Imagen tomada del artículo original que muestra el patrón de diseño de Dashboard y su uso en las aplicaciones de Facebook y LinekdIn.

 

Action Bar

La barra de acciones es uno de los patrones de diseño más importantes de Android y que además lo diferencia. Su funcionamiento es muy similar a la de un banner de los sitios web, con el logo o el título generalmente a la izquierda y los elementos de navegación a la derecha. El diseño de la barra de acciones es flexible y permite que se cierren menús y se amplíen las cajas de búsqueda. Generalmente es usada como una característica global en lugar de una característica contextual.

Imagen tomada del artículo original que muestra el patrón de diseño de barra de acciones utilizada por la aplicación de Twitter.


Search Bar

Le brinda al usuario una forma sencilla de buscar por categoría y ofrece además sugerencias de búsqueda.

Imagen tomada del artículo original que muestra el patrón de diseño de barra de búsqueda en la aplicación de Google Search.


Quick Action

Este patrón de diseño es similar al comportamiento de los pop-ups en iOS, que le da al usuario acciones contextuales adicionales. Por ejemplo, hacer el gesto de tapping sobre una foto en una aplicación podría lanzar una barra de acción rápida que le permita al usuario compartir la foto.

Imagen tomada del artículo original que muestra el patrón de diseño de barra rápida en la aplicación de Twitter.


Widgets

Los widgets le permiten a una aplicación mostrar notificaciones en la pantalla de inicio del usuario. A diferencia de las notificaciones push en iOS que se comportan como modal dialog temporales, los widgets permanecen en la pantalla de inicio.

Imagen tomada del artículo original que muestra unos widgets de ejemplo en la pantalla principal del dispositivo.


Utilizar los patrones de diseño establecidos es importante para mantener la experiencia intuitiva y familiar de los usuarios. Hay que tener presente que los usuarios no quieren la misma experiencia del iPhone en su dispositivo Android. Es por ello que la compresión de los patrones de diseño es el primer paso para aprender a hablar en Android y diseñar una experiencia óptima para los usuarios. ¡Los desarrolladores también te lo agradecerán!

 

Acerca de las tablets con Android

En la celebración del CESS 2011, las compañías presentaron una gran variedad de tablets con Android, con diferentes tamaños de pantalla. Sin embargo, después de una rápida revisión de las más populares, podemos concluir que los dos tamaños de pantalla más importantes se centran en las medidas de 1280×800 y 800×480 pixeles físicos.

Con el lanzamiento de Android 3 Honeycomb, Google proporciona a los fabricantes de dispositivos una interfaz gráfica especialmente diseñada para tablets, dejando atrás el botón “Back” que ha sido reemplazado por un ancla de navegación y una barra de status del sistema localizada en la parte inferior de la pantalla.

Android 3.0 tiene un aspecto visual renovado, sin dejar de incorporar todos los patrones de diseño que se introdujeron desde la versión 2.0. Una de las grandes diferencias de Honeycomb es que la barra de acciones ha sido actualizada para incluir pestañas y menús desplegables.

Otra nueva característica añadida a Android 3.x es el mecanismo llamado “fragmentos”. Un fragmento es un componente auto-contenido en un layout que puede cambiar de tamaño y posición dependiendo de la orientación y el tamaño de la pantalla. Esto además aborda el problema de hacer diseños para diferentes tipos de pantalla dándole a los diseñadores y desarrolladores una manera de hacer sus componentes flexibles dependiendo de las limitantes de pantalla con las que se tope la aplicación. Así, los componentes de la pantalla pueden estirarse, apilarse, expandirse y contraerse, así como mostrarse y ocultarse.

Imagen tomada del artículo original que muestra ejemplos de cómo pueden ser usados los fragmentos.


La próxima versión de Android, llamada Ice cream sándwich, promete traer esta funcionalidad a los smartphones con Android, dándole a los diseñadores y desarrolladores la opción de construir un único layout que se ajuste a las necesidades de la aplicación. Esto podría ser un cambio de paradigma para los diseñadores y desarrolladores, que tendrán que aprender a pensar en el diseño como si fuese las piezas de un rompecabezas que puede  ser ampliado o reducido para ajustarse a la pantalla de los dispositivos. En resumen, esto le permitirá al sistema operativo Android correr en cualquier dispositivo (¡con posibilidades infinitas!).

 

Un consejo

Trata de hacerte de un teléfono o Tablet con Android y tómate el tiempo de descargar aplicaciones para explorar sus interfaces. Con el fin de diseñar para Android, tienes que sumergirte en el entorno y conocerlo a profundidad. Esto puede sonar obvio, pero es siempre sorprendente escuchar que incluso el jefe del producto no tiene un dispositivo con Android.

 

Conclusiones

Los invito a visitar el apartado de recursos que nos comparte el autor del artículo original en inglés. En lo personal aprendí mucho de esta publicación porque pone sobre la mesa puntos muy importantes del desarrollo de aplicaciones móviles y que a veces se nos olvida tomar en cuenta, espero que te haya gustado la interpretación del mismo.

¿Algo por mejorar o algún otro aporte interesante acerca del diseño para Android? Compártelo con la comunidad :D

 

Comparte este post

Acerca de: Condesa

Desarrolladora de aplicaciones Android, freelance, apasionada de la tecnología, y precursora del crecimiento tecnológico en México.

Sígueme en Twitter

Leer todos mis artículos

También puede interesarte

Comentarios de este artículo

  • rock

    Hola podrias dar credito de donde sacaste las imagenes por favor.

    • http://twitter.com/#!/condesa_sama Condesa-sama

      He puesto el link del artículo original al inicio y al final del post, o ¿a qué te refieres? ¿a poner el link en el pie de cada imagen?

  • http://www.uv.mx/univirtual Raúl

    Te mando una gráfica de los dispositivos que comunmente tienen los usuarios de acuerdo a estadísticas del android market (fecha al primero de agosto de 2011).

    http://developer.android.com/resources/dashboard/screens.html

    • http://twitter.com/#!/condesa_sama Condesa-sama

      Muchas gracias por la información, sin duda alguna será de ayuda a otros lectores :D

  • Pingback: Patrones de diseño en Android « Androideity

  • http://www.dib18.wordpress.com @dbillyx

    Hola… pues es genial la dedicacion al crear los diseños, mas aun las caracteristicas para las tablets… lo que trate de ver fueron los link de la pagina original pero me tiran error 403 Forbidden…
    saludos…

    • http://twitter.com/#!/condesa_sama Condesa-sama

      Qué curioso lo que me comentas acerca de los links del artículo original, los acabo de checar nuevamente y sí puedo accesar al material extra que comparte el autor, date una vuelta más tarde a ver si ya puedes tener acceso, saludos!

  • Pingback: DISEÑANDO PARA ANDROID | 3tristesmicos.com

  • Alberto

    Muy bueno, muchas gracias por la traducción, se agradece!!Un saludo.

  • Pingback: 10 asombrosos tips para desarrollar en Android - AndroideityAndroideity

  • http://twitter.com/RaulGomo Raúl González Moya

    Un gran trabajo, muchas gracias. Creo que todo el blog está estupendo desde hoy lo seguiré.

  • Anonymous

    Sumamente interesante el artículo y muy buen contenido sin duda un blog que se va directo a mis Feeds del gReader

  • Leo

    Que tal, estoy desarrollando una aplicación que corre en Motorila Milestone 2 y en Samsung Galaxy Pro. Las dimensiones de pantalla son diferentes cuando hice la aplicación siempre prove con Milestone pero cuando lo instale en Galaxy Pro los icono quedaron diferente y una botonera que tenia luego de una lista ni si quiera la puedo ver. Tendras algun ejemplo que se vea bien en diferentes pantallas como para guiarme.

    saludos.

  • Juccis

    Excelente Blog!!!! me ha servido mucho Saludos!!!!!

  • richisk8

    es bueno tener artículos en español porque avanzamos mas rápido, si el lenguaje java estuviera en español los niños de 10 años aprenderían a programar de volada jaja
    gracias !

  • Pingback: Diseñando para Android | Androideity » Web Design

  • patadejaguar

    Muy interesante articulo, gracias.

  • Manuel

    ok en todo esto, habra alguna manera de obligar al dispositivo a trabajar en una resolucion especifica? por decir.. tengo una aplicacion 320*480, podria ejecutarla en un telefono de 480*800 obligandolo a trabajar en 320*480??