domingo, 29 de abril de 2012

Diseñar Apps Android, buenas practicas y patrones


Para terminar el mes en el Blog, quiero charlar sobre una de las cosas más fascinantes en el desarrollo de Android, que 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 comprarte 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.

No hay comentarios:

Publicar un comentario