los botón de acción flotante es un asistente ligero, elegante, dinámico, rápido y eficiente que tiene como objetivo apoyar la navegación principal y mejorar la experiencia del usuario. Al ser solo un pequeño elemento circular que se mueve junto con el usuario, se eleva de forma independiente por encima de todo y, por regla general, se adhiere al lado derecho, es capaz de extender la funcionalidad de cada pantalla así como hacer un programa más manejable.

Como implican las especificaciones de Google, el botón debe tener un tono constructivo y proporcionar un acceso rápido solo para instrumentos importantes. La guía lo alienta a equiparlo con transiciones elegantes y cambios suaves y agradables a la vista entre varios estados, optar por gráficos intuitivos y claros y un diseño vibrante y llamativo, así como evitar usarlo para funciones menores o destructivas. Hemos recopilado una pequeña colección de nuevos conceptos de interfaz de usuario móvil que han dominado esta nueva tendencia.

Botones de acción flotantes

Rediseño de material de Instagram

Instagram Material Rediseño (Parte 1) de Chris presenta un pequeño botón circular con una sombra sutil que está pintada en un color azul oscuro correspondiente. Permite tomar fotos rápidas y proporciona a los propietarios una funcionalidad adicional. Acompaña a la mayoría de pantallas.

Ecosistema de aplicaciones Android y Wear

Stephan Castro aprovecha un botón flotante redondo que gracias al tono rojo contrasta fuertemente con el contenido. Abre cinco pequeños íconos con títulos de apoyo elaborados en colores brillantes. Están dispuestos de abajo hacia arriba.

Magnet.me

Jules Holleboom apuesta por el mismo enfoque que en el ejemplo anterior. Al principio, es solo un botón circular normal que se adhiere al final de la página. Cuando el usuario lo golpea, revela suavemente otros tres iconos que se colocan verticalmente uno tras otro.

Interfaz de usuario para colorear

Lois Yang hace un excelente trabajo al elegir la paleta de colores, ya que la interfaz de usuario tiene bastante contenido. El fondo rojo sólido brillante en conjunto con una sombra sutil distingue a los íconos del flujo de contenido, llamando la atención discretamente.

Babeo de Henrique Ferreira

Aquí, el botón flotante se ve reforzado por la elegante pantalla superpuesta semitransparente. Este último es necesario para proporcionar a los iconos y títulos una base sólida, ya que la aplicación está repleta de imágenes deliciosas. Una pequeña desviación en la trayectoria agrega entusiasmo al diseño.

Botón de acción flotante – Agregar medios de Eric Azares

El botón de acción en forma de O se encuentra en la parte inferior de la página e incluye cuatro CTA que están organizados en un círculo. De tal manera, son rápidamente accesibles. Cada icono tiene un tamaño relativamente enorme, un color brillante y un glifo nítido e inteligible.

UI diaria 010 por Ben Transue

Aquí, el botón flotante está vinculado a un gran panel de barra lateral que emerge del lado derecho y desplaza ligeramente el contenido hacia la izquierda. Al estar asociado con las redes sociales, incluye todos los portales populares: Pinterest, Twitter, Facebook, Google y otros.

Adjunto de Alex Riabushko

El botón y sus CTA están diseñados en un estilo plano ingenioso y en un solo color. Sin embargo, el estado de desplazamiento cambia el azul predeterminado a naranja vibrante. Los glifos enormes dentro de los círculos son intuitivos y legibles. El elemento ofrece a los usuarios señales visuales para lograr rápidamente sus objetivos.

Plantilla PSD de la aplicación de diseño de materiales por Daniele De Santis

La interfaz de usuario se crea siguiendo las mejores tradiciones de las especificaciones modernas de Google. El clásico botón flotante llama a un gran panel que ocupa casi toda la pantalla y cubre las acciones necesarias para trabajar en la sección ‘Bandeja de entrada’. Además, este es un obsequio, descárguelo y póngalo en acción.

Interfaz de usuario móvil de Smiley

El artista muestra numerosas pantallas funcionales del concepto. Como puede ver, casi todas las páginas tienen su botón de acción. Este último evoca un panel pequeño pero de altura completa que se encuentra a la izquierda y ocupa aproximadamente el quince por ciento del espacio.

Botón de acción flotante

El botón de acción flotante de Tyler Berry rompe con la mayor parte de los que figuran en nuestra colección. No solo elimina colores jugosos y sombras encantadoras, sino que muestra los iconos en una línea en la parte superior de la interfaz de usuario.

Botón de acción flotante de Giulio «bart172» Smedile

Si bien la mayoría de los botones están relacionados con otros botones, este está conectado al excelente teclado. El autor aprovecha al máximo este pequeño asistente flotante. También ofrece un efecto de transición perfecta entre dos estados.

Exploración UX – Gooey FAB por Paul van Oijen

El botón flotante muestra un conjunto de llamadas a la acción en una fila. Ocupa la parte inferior de la pantalla y se coloca de lado a lado. Los colores de dos tonos, los lienzos monocromáticos sólidos, los glifos y las sombras de píxeles perfectos crean la estética.

Interfaz de usuario para el pulgar de Jochem van der Veer

El concepto utiliza un botón de acción flotante que se parece a la mayoría. Se adhiere al lado derecho, tiene un aspecto sencillo y directo y llama la atención. En algunos casos, va de la mano con una versión en miniatura del logo.

Botón mágico flotante

Floating Magic Button de Lee Giles es muy minimalista en cuanto a funcionalidad. Se usa solo para brindar a los usuarios acceso rápido al espacio de trabajo donde pueden crear su libro. El diseño cumple con los estándares de materiales y cumple con el estado de ánimo de la aplicación.

theScore Android de Matt Legaspi

Aquí el botón con los CTA se ve elegante, sofisticado y refinado. Estilo de línea combinado con hermosos colores de dos tonos, donde el azul se roba el espectáculo, logra una estética sobresaliente y transforma las acciones en puntos focales.

FAB para la participación del usuario de Parallel Labs

El artista emplea un botón de acción, cuyo diseño resuena suavemente con la barra de navegación superior. Su objetivo es involucrar a los usuarios y hacerlos sentir cómodos dentro del proyecto. Está vinculado a una ventana emergente que aparece en la esquina inferior derecha y ocupa toda la pantalla.

Alternacare de mayur karodia

El autor se esconde bajo los filtros de botones de acción flotantes que permiten a los usuarios clasificar la información redundante y alcanzar el objetivo en segundos. Gracias a un aspecto atrevido y un color brillante, no se mezcla con el contenido y llama la atención de inmediato.

Concepto de aplicación Swipii

Swipii App Concept de Sarah Ahmad se basa en varias soluciones nuevas. El botón flotante es uno de ellos. Cumple bien su propósito, facilitando la vida del usuario. Se coloca en la esquina de cada página y muestra una página emergente con código QR para escanear y recolectar los puntos tan rápido como siempre.

Botón de acción flotante líquido de Shu Makino

Este es un pequeño gif animado que demuestra el flujo de trabajo estándar del botón de acción flotante. Está impulsado por transiciones suaves. Incluye siete artículos con una forma elegante que van apareciendo uno a uno y se adhieren al lado derecho.

Conclusión

Los botones de acción flotantes pueden convertirse fácilmente en imprescindibles, ya que son una forma elegante y bastante simple de mejorar la interfaz de usuario y la experiencia de usuario. Al proporcionar a los usuarios acceso rápido a funciones vitales, van directamente al grano y hacen que el uso de la aplicación sea rápido, efectivo y productivo.

¿Cómo encuentras esta nueva tendencia? ¿Es una mejora real?