Sketch + inVision: Cómo mostrar acciones desde un Botón de acción flotante (FAB)
Construir prototipos es una manera poderosa de comunicar tus conceptos de diseño ya que permite a las partes interesadas comprender la navegación e interacción de los elementos de tu interfaz. También acelera el proceso de validación interna ya que pueden ver in situ cómo funciona la interfaz en vez de tener que imaginárselo.
Que es un FAB?
Un botón de acción flotante (FAB) es uno de los componentes de Google Material Design y representa la acción primaria en una aplicación Android. Al pulsar el botón, puede desplegar acciones secundarias o relacionadas con la acción primaria.
Exportando elementos desde Sketch
Establece la posición del botón FAB en la parte inferior de tu mesa de trabajo (dejando transparente el fondo)
Exporta esta imagen (pantalla de diseño + FAB)
Exporta otra imagen con las acciones relacionadas + botón de cerrar
Crea la interacción en el prototipo de inVision
En inVision:
Crea el FAB (que sea fijo cuando el usuario hace scroll)
Ve al Build Mode y crea un nuevo hotspot sobre el FAB.
Click en Screen as overlay en el Link to option y selecciona la imagen con tus acciones relacionadas + botón de cerrar como pantalla.
Deselecciona la opción Close on clicking outside of overlay (para evitar cerrar las acciones relacionadas cuando se hace tap en otra parte de la pantalla)
Cambia la posición de la screen overlay. Margin-bottom: 48px y Margin-right: 8px.
Ve a la pantalla con tus acciones relacionadas + botón de cerrar. Crea un hotspot sobre la acción de Cerrar. Selecciona Link Back / Close en la Link to option.
Crea enlaces a tantas pantallas de diseño como quieras creando más hotspots en cada una de las acciones relacionadas.
¿Qué más?
Si quieres saber más, únete a mi clase en Skillshare sobre cómo construir prototipos en inVision usando Sketch y Craft plugin.
Espero que esto te haya ayudado. Gracias por leerme :)