Botones de acción flotantes: cuándo utilizar un FAB y cómo animarlo
Cuando un botón de acción flotante ayuda, cuando duele, un FAB por pantalla, FAB extendidos y menús FAB, comportamiento de desplazamiento y movimiento.
Idea clave
Utilice un botón de acción flotante para la acción más importante en una pantalla, como redactar o crear. Muestre solo uno por pantalla, sáltelo en pantallas sin una acción principal clara, use un FAB extendido con una etiqueta cuando el ícono por sí solo no esté claro y mantenga su movimiento determinado cuando se expanda, contraiga al desplazarse o abra un menú.
Para que sirve una FAB
Material Design 3 describe el FAB como la acción principal de la pantalla y desaconseja mostrar múltiples FAB en una pantalla. También señala que los FAB no son necesarios en todas las pantallas, por ejemplo cuando las imágenes ya representan las acciones principales.
Variantes
El material ofrece varias formas:
- FAB estándar: un icono para una acción conocida como redactar.
- FAB extendido: ícono más etiqueta, más claro para acciones menos obvias y en pantallas más grandes.
- FAB grande: para acciones primarias destacadas, adecuado para ventanas más amplias, como tabletas y plegables desplegados.
- Menú FAB: el FAB abre un breve conjunto de acciones relacionadas.
Cuando no usar uno
Omita el FAB para acciones menores o destructivas, en pantallas donde la acción principal ya es obvia y donde cubriría contenido o controles importantes. En iOS, un FAB no es un patrón nativo; Los botones de la barra de herramientas o de la barra de navegación son más familiares para los usuarios de iPhone.
Movimiento
Un FAB a menudo colapsa de extendido a estándar a medida que las personas se desplazan, luego se expande nuevamente y puede transformarse en una hoja o menú cuando se toca. Estas transiciones explican hacia dónde fue la acción y de dónde vino su contenido. Manténgalos breves, evite rebotar en cada desplazamiento y respete el movimiento reducido.
Principios clave para recordar
- Un FAB por pantalla, para la acción principal
- No todas las pantallas necesitan una
- Utilice un FAB extendido cuando el icono no sea obvio
- Evite los FAB para acciones menores o destructivas
- Utilice el movimiento para mostrar de dónde proviene el contenido de la FAB
Preguntas frecuentes
Fuentes
- FAB guidelines — Material Design 3