Diseño y navegación de las aplicaciones Android (Material Design)

Diseño y navegación de las aplicaciones Android (Material Design)

Cuando Google hace unos meses nos presentó el “preview” de Android L vimos un Android totalmente renovado en su interfaz, esta nueva interfaz o guía de diseño fue bautizada por Google como Material Design. Material Design viene a cambiar lo que hasta el día de hoy ha sido el look de Android y nos trajo una propuesta refrescante y diferente. Con este nuevo diseño Google adopta una imagen más limpia, clara, viva y minimalista pero se sale de la tendencia “flat” que hemos visto en otros sistemas operativos.

Material Design vino para cambiar la tendencia, romper los patrones y traernos perspectiva a nuestro sistema operativo. Para lograr crear esta perspectiva Google incorporó el uso de 5 elementos claves: capas (layers), transparencias, nuevas transiciones/animaciones y sombras que se mueven en tiempo real; para así darle a Android un sentido de profundidad y de dimensión. Junto con un nuevo diseño a lo largo del sistema también se incluye una nueva guía de diseño y navegación para las aplicaciones nativas de Google y que se espera sean adoptadas por los desarrolladores de aplicaciones con el paso del tiempo.

Este artículo pretende explicar el lenguaje de diseño de las aplicaciones de Google/Android.

Conociendo Material Design, diseño y navegación de las aplicaciones en Android.

Panel de Navegación

También conocido como “Navigation Drawer” generalmente está representado mediante un icono de 3 líneas horizontales alineadas de forma vertical (una debajo de la otra) en la parte superior izquierda de la aplicación, de esta forma podrás saber si la aplicación cuenta con dicho panel. Se utiliza para navegar las diferentes áreas o secciones de la aplicación, por ejemplo: Inbox, Sent Items o Drafts en la aplicación de Gmail.

menu Material

Este icono de tres líneas cumple con un doble propósito para efectos de navegación. Al acceder algún área de la aplicación el mismo se convierte en un botón de “back”, al presionarlo te llevará a la ventana en la que te encontrabas anteriormente.

Navegacion

Botón flotante de nuevo contenido

Este botón se encuentra ubicado en la parte inferior derecha de la aplicación y aparenta “estar flotando”, por eso su nombre. Por medio de este botón (el cual generalmente llevará un símbolo de “+”) podrás crear nuevo contenido en la aplicación, por ejemplo; Google+ te permite crear un post para añadir fotos, textos o enlaces. Aplicaciones como Evernote, Tweetings, Textra SMS, Google Docs, Google Slides y Google Sheets hacen uso del mismo. Este botón es interactivo y en varias aplicaciones “se esconde” o desaparece cuando comenzamos a navegar la aplicación, un ejemplo de esto es la aplicación de Google+ o Textra SMS.

Google-Docs-Sheets-Slides-update

Menú

Esta opción está representada por un icono de 3 puntos alineados de forma vertical en la parte superior derecha de casi todas las aplicaciones. Es por medio de este menú que podemos acceder al área de ajustes o configuración de las diferentes aplicaciones. Esta opción puede ser sustituida por defecto en equipos Samsung o cualquier otro equipo que aun cuente con botones capacitivos o táctiles dedicados a una opción de menú en específico. En este último caso esta opción no será visible en la aplicación, sino que se accederá al menú por medio de este botón dedicado.

App menu

Panel de Notificaciones

Este panel está ubicado en la parte derecha de la aplicación y puede ser accedido por mediante gesto deslizando tu dedo desde el borde derecho de la pantalla hacia el lado izquierdo. Este panel está presente en varias de las aplicaciones de Google como Google+ pero poco a poco ha ido siendo adoptado por los desarrolladores de aplicaciones, un ejemplo de esto son las aplicaciones para Twitter Talon y Tweetings.

notificationmaterial

Aplicaciones se adaptan a la pantalla de tu equipo

A estas alturas ya conocemos el diseño y el lenguaje de navegación en las aplicaciones de Android, pero hay un tema que debemos tocar, este es “la forma en que las aplicaciones se re-ajustan al tamaño de tu equipo, o más bien, dependiendo el tamaño de la pantalla de tu equipo. Por mucho tiempo ha sido un tema de debate el hecho de que “las aplicaciones tardan más tiempo en llegar a Android que a iOS”, en parte esto es cierto, pero este tiene su razón de ser. Android es un sistema operativo que funciona en una gran cantidad de equipos, cada uno con especificaciones, tamaños y por ende pantallas con resoluciones diferentes. Y precisamente esta es una de las causas a estos “retrasos”, pero también es una de las ventajas de las aplicaciones en Android por encima de otros sistemas.

EvernoteMaterial

Interfaz de Evernote para Android en su versión para celulares y tablets pequeñas como la Nexus 7

unnamed-3

Interfaz de Evernote para Android en Tablets 10.1 o modo landscape.

Desde sus comienzos los desarrolladores de aplicaciones para Android han tenido que lidiar con el hecho de que haya diferentes tipos de hardware y que sus aplicaciones deban adaptarse a diferentes tamaños de pantallas y diferentes resoluciones. Esto aunque bajo un punto de vista puede ser mas trabajo para el desarrollador en un principio al final es una ventaja, me explico; con el inminente aumento del tamaño de las pantallas en nuestros equipos los desarrolladores han comenzado a crear mas de una interfaz dentro de la misma aplicación para ajustarse al tamaño de la misma y así maximizar el uso de dicho tamaño. ¿Qué quiere decir esto? Que al final del día el desarrollador de las aplicaciones no tiene que hacer una versión para celulares y una aplicación adicional exclusiva para tablets, teniendo que hacer así dos aplicaciones a la vez, como pasa en otras plataformas.

Instagram vista en una Nexus 7 2013

Instagram vista en una Nexus 7 2013

Otra ventaja que representa este método es que muchas aplicaciones que usamos en nuestros teléfonos puedan ser usadas en tablets sin la necesidad de verse estiradas o fuera de proporción, al menos en el caso de tablets entre 7 y 8 pulgadas. En el caso de las tablets con pantalla de 10.1 pulgadas en adelante si la aplicación no cuenta con un interfaz optimizada para tablets inevitablemente la aplicación se verá “estirada”. Aunque este ultimo caso no es el mas conveniente al menos no nos privamos de usar X o Y aplicación o ver una aplicación enclaustrada en el medio de la pantalla con bordes negros alrededor hasta que los desarrolladores de la misma la adapten al nuevo tamaño como pasa en iOS.

Instagram vista en un iPad Mini. Nótese que la aplicación esta ubicada en el medio de la pantalla, desperdiciando de esa manera el espacio.

Instagram vista en un iPad Mini. Nótese que la aplicación esta ubicada en el medio de la pantalla, desperdiciando de esa manera el espacio.

Como ven en la foto arriba un ejemplo claro de que una aplicación se adapte al tamaño de la pantalla es la aplicación de Instagram vista en una Nexus 7 y en un iPad Mini. En el caso de la Nexus 7 aunque Instagram no cuenta con una interfaz dedica a tablets el hecho de que se pueda ajustar a cualquier tamaño de pantalla hace que se vea bien en ella. En contraste en el caso del iPad Mini Instagram queda en el mismo medio de la pantalla y visiblemente la calidad de la aplicación es pésima. Como ven, el hecho de que las aplicaciones Android estén hechas para ajustarse a cualquier tipo de pantalla tiene sus ventajas y desventajas, de igual forma no todos los desarrolladores han dedicado el tiempo o esfuerzo necesario a optimizar sus aplicaciones para contar con un interfaz para tablets.

Como ven, Google ha creado poco a poco un ecosistema que cada vez se va haciendo mas solido y mas completo, y con la llegada de Material Design y las nuevas guías de diseño de aplicaciones se espera que el panorama siga mejorando.

Compartelo:

Sobre el autor

Joel EscuderoEditor en Jefe de YoSoyAndroid. Amante de la tecnología, fanático de Android. Administrador de los foros de esta comunidad. Usuario Android desde mi Galaxy S Captivate y definitivamente no cambio Android. También usuario de Windows Phone, iOS y Chrome OS. Hablo de lo que sé y no por referencia. Sígueme en Twitter @JoLoEsc.

Ver todos los articulos de Joel Escudero

Dejar un comentario