¿Qué son los app bars en material design?

En el lenguaje de diseño desarrollado por Google material design, encontramos diferentes elementos gráficos que podemos agregar para mejorar la interacción del usuario con el producto o servicio que le estamos presentando. Por ello, en este post, te explicaremos qué son las app bars en material design.

Tipos de app bars en material design

Las app bars en material design son unas barras en la aplicación donde se agregan contenido o elementos gráficos que le permitan al usuario realizar una acción. Estas se clasifican en dos:

• Bottom
• Top

Si te interesa aprender sobre algunos aspectos generales de material design, te invitamos a leer nuestro post ¿Qué es el material design?, en donde te hablamos acerca de qué es, cómo surge y cuál es su propósito.

App bars: bottom

El concepto app bars bottom hace referencia a las barras de aplicación que están ubicadas en la parte de abajo o inferior. En ellas se muestran gestos claves para la pantalla móvil y se incluyen hasta cuatro acciones que el usuario puede realizar.

Este tipo de app bars en material design tienen unos principios fundamentales para su diseño. Se consideran procesables, es decir, estas barras inferiores resaltan acciones importantes y crean conciencia sobre un elemento gráfico denominado floating action button (FAB).

También son flexibles, dado que estas barras cambian de acuerdo con las necesidades de la pantalla del dispositivo móvil.

Además, resultan ergonómicas, lo que quiere decir que son fáciles de alcanzar para los usuarios; en otras palabras, el usuario puede acceder de forma sencilla a estas acciones desde su dispositivo móvil.

Ahora te preguntarás cuando puedes utilizar este tipo de barras. Material design recomienda su uso para dispositivos móviles, para tener acceso a un cajón de navegación inferior y para pantallas con dos o más acciones. Al mismo tiempo, aclara que no debe usarse este elemento en aplicaciones que ya contengan una barra de navegación inferior o en pantallas que solo tengan una acción o ninguna.

La anatomía de las app bars en material design consta de cinco partes:

• Contenedor
• Control del cajón de navegación
• Botón de acción flotante
• Icono de acción
• Control del menú de desbordamiento

Asimismo, las app bars en material design cuentan con tres posibilidades de diseños que se clasifican según la posición del botón de acción flotante. Estos posibles diseños son:

• En el centro: cuando este se encuentra centrado se pueden añadir un mínimo de una y un máximo de dos acciones que sean adicionales a este botón.
• En los laterales: en el caso de que este se encuentre en los laterales de la barra de aplicación, es posible añadir tres o cuatro acciones adicionales.
• En el borde opuesto: por último, cuando no se agrega un botón de acción flotante en la app bar se puede agregar un icono de menú de navegación y hasta cuatro acciones en el borde opuesto.

App bars: top

Por otro lado, la app bar top o superior se utiliza para proporcionarle al usuario contenido y acciones que se relacionan con la pantalla en la que se encuentra. Además, se suele añadir información sobre la marca, títulos de pantalla, un menú de navegación y otras acciones.

Sus principios fundamentales no difieren de los mencionados para una barra inferior, sin embargo, es oportuno decir que tiene sus propias características.

Por esto, es una barra persistente que tiene la cualidad de desaparecer al ir desplazándonos por la pantalla. También contiene una estrella de guía, es decir, un elemento que sirve para guiar a los usuarios a través de una aplicación.

Por último, es consistente, puesto que su posición y contenido sirven para aumentar la familiaridad con la aplicación.

Estas app bars se clasifican en dos tipos, en función de la forma o acciones que le proporcionan al usuario:

• Regular: una barra superior regular es la que podemos ver constantemente en la parte superior.
• Barra de acción: por el contrario, la barra de acción es más contextual, debido a que aparece solo cuando seleccionamos un elemento para ofrecernos una serie de acciones relacionadas con dicho contenido.

La recomendación de material design para la anatomía de este tipo de app bars es:

• Ubicar el botón de navegación en el extremo izquierdo.
• Ubicar el título de la página al lado derecho del botón de navegación.
• Ubicar las acciones contextuales al lado derecho del título.
• Ubicar un menú de desbordamiento, en caso de ser necesario, en el extremo derecho.

Puedes encontrar más información sobre app bars en material design en la página web de material design. Asimismo, puedes acceder a diferentes elementos gráficos o recursos que te pueden servir como guía para tu proceso de diseño.

Después de saber qué son los app bars en material design, ¿te gustaría aprender cómo puedes desarrollar y diseñar una aplicación incluyendo estos elementos? Si quieres convertirte en un experto del diseño de apps en solo unos pocos meses, te invitamos a conocer nuestro Bootcamp Desarrollo de Apps Móviles. En él, los mejores profesores te enseñarán pautas para diseñar, varios programas enfocados en el diseño y desarrollo de aplicaciones y mucho más.