Mis cursos
Tipo 01
Regular
Título y acciones en una fila de 56 dp.
Componentes Barra de app superior
Barra de app superior
La barra superior muestra el título de la pantalla, la navegación y las acciones más importantes. Es lo primero que se lee en una app.
Cursos
Uso
Úsala en casi todas las pantallas de una app para indicar dónde está el usuario y darle acceso a buscar, volver o abrir el menú.
- Identificar la pantalla actual
- Dar acceso a 1–3 acciones frecuentes
- Meter más de 3 íconos: el resto va al menú de "más"
- Repetir acciones que ya están en la barra inferior
Principios
1
Orienta
El título dice dónde está el usuario.
2
Prioriza
Solo las acciones más usadas se ven; las demás van al menú.
3
Se adapta
Puede crecer, encogerse o cambiar al seleccionar elementos.
Tipos
Diplomado de Office avanzado
Tipo 02
Prominente
Más alta, con el título en dos líneas o una imagen detrás.
Notas
Tipo 03
Densa
Más baja (48 dp) para escritorio o pantallas con mucha información.
3 seleccionados
Tipo 04
Contextual
Aparece al seleccionar elementos: muestra cuántos hay y acciones sobre ellos.
Anatomía
Mis cursos
12345- Contenedor
- Ícono de navegación (menú o volver)
- Título
- Íconos de acción
- Menú de más opciones
Comportamiento
Cursos
- En reposo la barra puede estar al mismo nivel que el contenido.
- Cuando el contenido pasa por debajo, aparece una sombra (elevación).
- Al seleccionar elementos, se transforma en barra contextual.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto (celular) | 56 dp |
| Alto (escritorio) | 64 dp |
| Título | 20 sp, peso medio |
| Íconos | 24 dp, área 48 dp |
| Margen lateral | 16 dp |
| Elevación al desplazar | 4 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Título como encabezado
El título de la pantalla debe ser un h1 o tener role="heading".
Nombra los íconos
aria-label en menú, buscar y más opciones.
Volver
El ícono de volver debe hacer lo mismo que el botón atrás del sistema.