User Experience Design Portfolio of Martina Pérez

Artículos en español

Sketch + inVision: Cómo mostrar acciones desde un Botón de acción flotante (FAB)

01.png
 

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.

02.png

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)

03.png
  • Exporta otra imagen con las acciones relacionadas + botón de cerrar

04.png

Crea la interacción en el prototipo de inVision

En inVision:

  1. Crea el FAB (que sea fijo cuando el usuario hace scroll)

  2. Ve al Build Mode y crea un nuevo hotspot sobre el FAB.

  3. Click en Screen as overlay en el Link to option y selecciona la imagen con tus acciones relacionadas + botón de cerrar como pantalla.

  4. 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)

  5. Cambia la posición de la screen overlay. Margin-bottom: 48px y Margin-right: 8px.

07.gif

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.

08.gif

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: https://skl.sh/2Y4hj6l

Espero que esto te haya ayudado. Gracias por leerme :)

 
martina perez