Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

Android desde Cero: Patrones de Diseño UI

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Android From Scratch.
Android From Scratch: How to Run Your Application on a Physical Device
Android From Scratch: Understanding Views And View Groups

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Aunque Android le permite crear casi cualquier vista personalizada o interfaz de usuario que pueda querer usted, sin embargo, hay algunos patrones de interfaz de usuarios que han demostrado funcionar bien para los usuarios en la situaciones correctas. En este tutorial, aprenderá sobre algunos de éstos patrones y como pueden ayudar a los usuarios a crear un experiencia genial cuando estén usando su aplicación.

1. Pantalla de Inicio

La primera pantalla que sus usuarios ven cuando abren su aplicación es a menudo la más importante. Desde aquí sus usuarios deberían poder realizar una acción rápida y continuar con su día o buscar más en su aplicación para refinar lo que ellos están tratando de lograr.

Escoja los patrones de diseño de la interface para esta pantalla mediante el objetivo de su aplicación. Es importante notar que la mayoría de las aplicaciones usan más que un patrón en sus pantallas de inicio siempre y cuando ésta soporte el objetivo general de su aplicación.

Lista de Detalles

La lista y los detalles de patrones es uno de los patrones más comunes que verá en los dispositivos portátiles. Como el nombre implica, usted presenta los datos en un formato de lista y cuando un ítem en esa lista es seleccionado por medio de un clic, este abre una nueva pantalla que muestra más detalles.

Si bien este patrón es llamado lista y detalle, no hay razón por la qué usted no podría aplicar esta misma lógica, también a un diseño de cuadrícula. La característica clave de éste patrón es que cada elemento en la lista/cuadrícula, cuando es seleccionado, debería realizar la misma acción de mostrar más detalles.

Un ejemplo de éste patrón puede ser verse en la aplicación Google Play Music, la cual se le presenta a los usuarios con una tabla de álbumes que puede ser seleccionados para mostrar las canciones disponibles para ese álbum. Hangouts es otro ejempl del patrón; lista y detalle. Hangoust le permite seleccionar una conversación para ver la conversación completa e interactuar con ella.

Google Play Music Grid of Items

Carousel

Algunas veces, una lista no va a ser suficiente. Es decir, si su aplicación tiene varias categorías y una forma de representar el contenido bien con una imagen, entonces el patrón carousel puede funcionar para usted. En este patrón usted toma el patrón lista y detalle y lo usa múltiples veces en la misma pantalla. La diferencia es que la lista de elementos, uno puede desplazarse horizontalmente a través de ella en lugar de hacerlo de forma vertical.

Un ejemplo de éste patrón puede ser visto en la aplicación Google Play Store, la cual muestra un carrusel para múltiples categorías de aplicaciones que usted puede explorar.

Carousel Pattern in the Google Play Store

Map

No todas las aplicaciones están construidas alrededor de la necesidad de mostrar una lista de datos para los usuarios. Uno de los rasgos claves de los dispositivos portátiles es que son increíblemente útiles para encontrar cosas mientras los usuarios están absolutamente en el mundo. Un mapa, con frecuencia se vuelve una estupenda herramienta para este propósito.

Si su aplicación se construyó para mostrar ubicaciones, navegaciones o guías, entonces un mapa puede ser perfecto para sus usuarios. Si bien el ejemplo obvio de este patrón está en Google Maps, sin embargo, numerosas aplicaciones, tales como Waze y Uber, también están construidas con un mapa como su punto de enfoque principal.

Map Home Screen in Waze

2. Navegación y Acciones

A pesar de que acaba de aprender sobre algunos de los patrones de interfaces que puede usar en sus pantallas de inicio de sus aplicaciones, probablemente usted aún necesita una manera para navegar a otras secciones dentro de su aplicación. Por fortuna hay algunos patrones de navegación comúnmente utilizados con los cuales los usuarios de Android están familiarizados para ayudarle a crear una estupenda aplicación con la cual pueda trabajar.

Tabs

Tabs son generalmente utilizadas en combinación con el patrón lista y detalle. Si tiene múltiples listas que están relacionadas de alguna forma, pero tienen diferentes categorías, entonces usar un ViewPager con solapas para cada categoría puede ser una solución eficiente para su aplicación de navegación.

Este patrón es útil cuando usted tiene solamente algunas secciones en su aplicación así como proporcionar una manera rápida y fácil para que los usuarios puedan cambiar la vista. Si, por el contrario, usted tiene cinco o más elementos que quiere poner en las pestañas, entonces debería considerar mover las operaciones de navegación en una bandeja.

ViewPager Tab Design Pattern

De acuerdo a las normas de diseño de materiales de Android, las pestañas, además, pueden existir en el fondo de la pantalla, como se puede ver en la aplicación Google+.

Bottom Tabs Design Pattern

Bandeja de navegación

La bandeja de navegación es una vista que puede ser sacar del lado de una aplicación para presentar una lista de opciones para el usuario. Este patrón de diseño es bastante regular en las aplicaciones Android para proporcionar una manera para cambiar secciones dentro de una aplicación o para realizar acciones globales que no están juntas, necesariamente, para alguna pantalla.

Ya que este patrón se presta a los niveles de navegación superior, esto puede se acoplado fácilmente con el patrón tabs para crear un complejo sistema de navegación dentro de sus aplicaciones.

Navigation Drawer Design Pattern

Toolbar

Probablemente haya observado que la mayoría de las páginas en la aplicación Android incluyen una barra de herramientas en la parte superior de la pantalla. Como mínimo, esta barra de herramientas contiene un título para la sección o aplicación, sin embargo, el patrón de diseño toolbar o barra de herramientas también facilita la colocación de botones de acción ya sea; directamente en la barra de herramientas o en un menú overflow que le permite a los usuarios realizar tareas en esa sección de una aplicación.

Un ejemplo de esto puede ser encontrado en la aplicación Google Keep, la cual le permite cambiar el color de una nota, añadir otra persona a esa nota, y numerosas acciones más que están en el menú overflow.

Toolbar Design Pattern With Action Buttons

El botón de acción flotante

El patrón; botón de acción flotante, le permite a los programadores resaltar un sola aplicación que sus usuarios pueden realizar mientras en una sección de una aplicación. Ejemplos de tales acciones son una composición de un botón de acción flotante en un correo de un cliente, un botón play/pause en una aplicación de música, o un botón añadir en aplicaciones que manipulan eventos o datos.

Este patrón, no debería ser utilizado para acciones menores o para algo destructivo como botones de acción flotantes diseñados para tener una presencia potente en una pantalla cuando está siendo utilizada.

Floating Action Button

3. Factores de Forma

Aunque algunos de los patrones sobre los que hemos discutido anteriormente se dan para otras factores de forma, sobre todo pertenecen a diseñar aplicaciones de teléfonos o tabletas. Recientemente, Google, ha cambiado a usar Android en varios tipos de dispositivos, incluyendo televisores y relojes de pulseras inteligentes. Esto exige nuevos patrones de diseño para sacar el mejor partido de cada factor de forma.

Android Wear

Debido al pequeño tamaño de pantalla, un conjunto, completamente nuevo de patrones de interfaces de usuario fueron presentados por Android Wear. Wear trabaja con sistemas de tarjetas y botones de acción que los usuarios puede arrastrar entre ellos usando un GridViewPager.

Además, puede continuar y usar el patrón lista y detalle, sin embargo, los objetos de la lista necesitarán ser más grandes y encajar en la posición para que los usuarios puedan acceder a ellos con facilidad. Puede encontrar más información sobre diseñar para Android Wear en la documentación oficial.

Android Wear Card and Action Button UI Design Pattern

Televisión

Aunque los patrones de diseño para los dispositivos que usan Android Wear tienen que considerar un tamaño de pantalla más grande, sin embargo; diseñar para Android TV tiene el problema contrario. Las pantallas son mucho más grande y los usuarios tienden a estar mucho más lejos de ellas.

No solamente tiene que hacer que sus aplicaciones para TV necesiten tener estas dos cosas en cuenta, también los televisores usan control de mando de teclado en lugar de una pantalla táctil por interacción. Por esta razón, el enfoque carrusel funciona asombrosamente bien.

TV UI Design Pattern Rows of Content

Los usuarios pueden moverse entre las filas de los elementos y luego desplazarse horizontalmente para visualizar el contenido que está disponible en ellos. Cuando un usuario encuentra un elemento que quieren ver, entonces pueden seleccionarlo para visualizar los detalles en pantalla, lo cual proporciona una lista de acciones para ese elemento.

En conclusión

Si bien esto está lejos de una lista exhaustiva de los patrones de diseño de las interfaces de usuario de Android, sin embargo, a usted han sido presentado algunos de los patrones más comunes en Android y, además, cómo son utilizados para hacer aplicaciones más útiles.

Habiendo dicho eso, no todas las aplicaciones son iguales y, puede haber ocasiones cuando necesite concebir una solución creativa para cómo los usuarios interactuarán con su aplicación. La cosa que todos los patrones tienen en común es que son sencillos, útiles y no se consiguen en la forma del usuario.

A medida que continúe el uso y aprenda sobre Android, usted incrementará la experiencia necesaria para saber qué funciona y qué no funciona en una situación dada.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.