La Anatomia de Tabs
Daniela Emilia Arias Reina
Created on May 18, 2023
More creations to inspire you
ASTL
Presentation
ENGLISH IRREGULAR VERBS
Presentation
VISUAL COMMUNICATION AND STORYTELLING
Presentation
GROWTH MINDSET
Presentation
BLENDED LEARNING
Presentation
INTRO INNOVATE
Presentation
SUMMER ZINE 2018
Presentation
Transcript
La Anatomía de Tabs
¡Vamos!
Segun Material Design
¡Vamos!
¿Qué son las Tabs o pestañas?
Es un componente de la interfaz de los usuarios (UI) utilizado para organizar y mostrar contenido en diferentes categorías o secciones. Las tabs son especialmente útiles cuando hay varias secciones de contenido relacionado que pueden ser exploradas individualmente.
Playlist
Artists
Music
Playlist
Music
Secundaria
Podcast
Artists
La navegación se da en horizontal pero el desplazamiento dependerá del diseño
Favoritos
Cada tab representa una sección diferente y al seleccionar una tab, se muestra el contenido correspondiente.
Se puede usar cuando queremos agrupar contenido relacionado
Music
Comunity
Primaria
Plans
Home
¿Cómo funcionan?
Debemos saber que hay Tabs primarias y secundarías.
- Visualización de las tabs
- Cambio entre tabs
- Indicador de tab activa
- Contenido dinámico
- Gestión de overflow
- Compatibilidad con interacciones táctiles
Home
Home
Download
Desplazable
Home
Estático
Home
Home
Music
Artists
Playlist
Podcast
Favoritos
Playlist
Artists
Music
Comunity
Plans
Home
¿Qué características deben tener?
Elementos & Tipos de Tabs
Elementos
Music
El diseño es claro y sencillo, debe tener:
- Envase o contenedor tiene varias pestañas. Su contenido puede ser fijo o desplazable.
- Icono (opcional)
- Etiqueta
- Indicador Activo
- Divisor
Activado
Enfocado
Desactivado
Home
Home
Se trata de cuando oprimes la opción pero no la aprietas del todo, por lo que se colorea levemente.
Home
Arquitectura
+ info
Activado: En el envase Altura (solo con el texto de la etiqueta) - 48dp Altura (con icono y texto de etiqueta) 64dp Icono tamaño Máx de 24dp Etiqueta (No sugiere tamaño) Divisor: Máximo tamaño 1dp Enfocado: Color primario enseñando la activación, quiere decir que en ese estado el envase en ese parte tiene el color primario con la opacidad activada o un color secundario (Mayormente gris) Desactivado: Estado inactivo, sin divisor y con color de inactividad toda la sección.
Usos correctos e incorrectos
1. Sí
Las etiquetas de pestañas pueden incluir iconos y texto. Las etiquetas de texto deben ser cortas.
2.No
No cambie el tamaño de las etiquetas de texto para que quepan en una sola línea. Si las etiquetas son demasiado largas, ajuste el texto a una segunda línea o use pestañas desplazables.
3. Sí
Presente las pestañas como una sola fila sobre su contenido asociado.
4. Cuidado
Aunque el texto de la etiqueta puede ajustarse a una segunda línea, las pestañas desplazables limitan el texto a una sola fila.
Realizado por: Daniela Emilia Arias Reina
¡Gracias!
https://m2.material.io/components/tabs#anatomy
https://m3.material.io/components/tabs/specs