Barras de pestañas y navegación inferior: reglas de diseño que se mantienen
Cómo diseñar barras de pestañas y navegación inferior en iOS y Android: de 3 a 5 destinos, navegación sin acciones, etiquetas, insignias, visibilidad y estados activos animados.
Idea clave
Utilice una barra de pestañas o navegación inferior para entre tres y cinco destinos de nivel superior, no para acciones. Asigne a cada pestaña un ícono y una etiqueta, mantenga la barra visible a medida que las personas se mueven entre las secciones, evite que se desborden las pestañas "Más" siempre que pueda y use insignias con moderación. Anima sutilmente el estado activo para que las personas vean dónde están.
Lo que dicen las plataformas
Material Design 3 dice que las barras de navegación brindan acceso a de tres a cinco destinos, cada uno con un ícono y una etiqueta, y un destino siempre está activo. Las pautas de Apple dicen que se debe usar una barra de pestañas para la navegación, no proporcionar acciones, mantenerla visible cuando las personas se mueven entre secciones (excepto cuando un modal la cubre) y evitar pestañas desbordadas.
Elegir las pestañas
Las pestañas representan la estructura de la aplicación:
- Elija las secciones que la gente usa con más frecuencia, no todas las que tenga.
- Utilice sustantivos para destinos ("Biblioteca"), no verbos para acciones ("Cargar").
- Pon acciones en la propia pantalla, en una barra de herramientas o en un botón de acción flotante.
- Si necesita más de cinco, reconsidere su estructura antes de agregar una pestaña "Más".
Etiquetas e insignias
Las pestañas con íconos ahorran espacio pero obligan a las personas a adivinar. Las etiquetas hacen que la navegación sea más clara, especialmente para los íconos menos comunes. Las insignias deben indicar algo en lo que la gente debe actuar; una insignia que siempre está presente deja de hacerse notar.
Preservar el estado por pestaña
Apple señala que las barras de pestañas permiten a las personas cambiar de sección conservando el estado de navegación actual dentro de cada sección. Volver a una pestaña debería mostrar dónde lo dejaron, no restablecerse al principio.
Movimiento
Una pequeña transición en el indicador activo, como una pastilla que se desliza o un ícono que se llena, ayuda a las personas a rastrear dónde se encuentran. Manténgalo rápido, por debajo de aproximadamente 250 milisegundos, evite que cada ícono rebote en cada toque y simplifíquelo cuando el movimiento reducido esté activado.
Principios clave para recordar
- De tres a cinco destinos de primer nivel
- Navegación, no acciones.
- Icono más etiqueta para cada pestaña
- Mantenlo visible y conserva el estado de cada pestaña.
- Movimiento sutil y rápido en estado activo.
Preguntas frecuentes
Fuentes
- Navigation bar guidelines — Material Design 3
- Tab bars — Directrices de la interfaz humana de Apple