eCommerce
Membresía
Chatbot
Cursos online
Reserva online
Guía de viaje
Eventos
Creadores de contenido
Entrega local y Recogida en tienda
Periódico
Radio
Escuelas y Universidades
Fe
Organizaciones
Restaurante
Tienda de comestibles
Apps personalizadas
Comunicación con los empleados
APP BUILDER SIN CÓDIGO
TECNOLOGÍA
¿POR QUÉ GOODBARBER?
Diseño
RECURSOS DE PRODUCTOS
TEMAS
RESELLERS DE APLICACIONES MÓVILES
DESCUBRIRItem: el elemento que da forma a cada pestaña de tu app
En una app GoodBarber, cada pestaña de la barra de navegación se apoya en un mismo elemento: el Item, que puede reunir un icono, una etiqueta y un indicador. Lo diseñamos para dar forma a nuestras TabBar de hoy y de mañana. Ya está documentado en el Design System de GoodBarber.
Tus contenidos están cuidados, tus colores elegidos. Queda la barra de navegación, la que usan tus usuarios para pasar de una sección a otra y que pesa mucho en la impresión que deja tu app. Cada una de sus pestañas se apoya en un elemento concebido como una pieza de construcción: el Item. En la nueva generación de TabBar, es él quien da a cada navegación su carácter.
Un icono, una etiqueta, un indicador
En un Item, cada elemento tiene su función. El icono representa la sección, la etiqueta muestra su nombre y el indicador, opcional, señala la pestaña activa. Cada uno se muestra u oculta por separado, lo que da tres composiciones: icono y etiqueta, solo icono, solo etiqueta.
Es lo que separa la Minimal TabBar, toda en iconos, de la Clean TabBar, toda en texto: el mismo elemento, compuesto de otra manera.
17 propiedades para las TabBar de hoy y de mañana
Para diseñar una TabBar, los diseñadores de GoodBarber disponen de 17 propiedades: 8 para el Item, 6 para su icono y 3 para su etiqueta. La superficie del Item admite un color sólido, un degradado o un efecto de desenfoque, un borde, una sombra, esquinas rectas o redondeadas. Su maquetación define su tamaño, su orientación, su margen interior, que delimita la zona táctil, y el espaciado que deja respirar a sus elementos.
Toda esta riqueza no te obliga a ajustarlo todo. Nos sirve para componer layouts de TabBar completos, alineados con los códigos actuales del diseño de apps: Bold, Minimal y Clean TabBar son los tres primeros. Cuando esos códigos evolucionen, nacerán nuevos layouts del mismo elemento, sin partir de cero. Así podemos ofrecerte TabBar siempre al día.
En tu back office, eliges tu TabBar y luego la adaptas a tu identidad: tamaño de las pestañas, redondeo de las esquinas, colores, tipografía de las etiquetas, forma de señalar la pestaña activa. Tus propios iconos pueden incluso convivir con los del sistema.
Cómo señala el Item la pestaña activa
Un Item tiene dos estados: por defecto y seleccionado. Para distinguir la pestaña activa, dispone de cuatro recursos, solos o combinados: el color, el fondo, el borde y el indicador. Este último solo aparece en la pestaña seleccionada, en tres formas: un punto (Dot), un trazo corto (Tiny) o una línea (Line).
Cada forma tiene su propio movimiento. El punto y la línea se encogen en la pestaña anterior y crecen en la nueva; el trazo corto se desliza de una a otra. Cuando la selección se marca con el fondo, como en la Bold TabBar, es el fondo de color el que se desplaza. Transiciones breves, que hacen legible cada cambio sin excederse.
El mismo Item, del móvil al escritorio
El Item adapta su orientación, su margen interior y su espaciado a cada pantalla: móvil, tableta y escritorio. En la parte inferior de un teléfono, el icono se coloca encima de la etiqueta. En escritorio, la TabBar se convierte en una barra lateral y el Item puede pasar a horizontal para encajar en ella. Configuras tu navegación una sola vez: cada pantalla recibe la versión que le conviene.
El Item en resumen
- 3 elementos: un icono, una etiqueta, un indicador (opcional).
- 3 composiciones: icono y etiqueta, solo icono, solo etiqueta.
- 17 propiedades de diseño: 8 para el Item, 6 para su icono, 3 para su etiqueta.
- 2 estados: por defecto y seleccionado.
- 4 formas de señalar la pestaña activa: el color, el fondo, el borde, el indicador.
- 3 indicadores, cada uno con su animación: Dot, Tiny, Line.
- 3 pantallas: móvil, tableta, escritorio.
El Item entra en el Design System
Después de la TabBar, el Item tiene su página en el Design System de GoodBarber, y llega en familia. Con el Item Icon, el Item Label y el Item Indicator, abre una nueva categoría: los UI Elements, las piezas básicas de nuestros componentes, cada una dedicada a una sola función.
Para descubrir el Item en detalle, visita su página del Design System. Y para verlo en acción, elige tu TabBar en la sección Menú de tu back office. ¿Aún no tienes una app GoodBarber? Crea la tuya.
