Goccia: la navigazione diventa liquida
Una barra di navigazione per l'app di un atelier di moda, in cui la scheda attiva non è un'etichetta colorata ma una goccia di liquido che si allunga, si divide e si ricompone.
Concept Questo è un esperimento di Glow Labs, non un lavoro per un cliente. Atelier Nove è un marchio di fantasia.
Demo interattiva · tocca le icone o trascina la goccia
Atelier Nove
Novità
La collezione d'autunno, appena arrivata in atelier.
L'esperimento
La barra di navigazione è il pezzo di un'app che tocchi più spesso, eppure quasi sempre è il più anonimo: un'icona che cambia colore, e niente più. Ci siamo chiesti se quel gesto, ripetuto decine di volte al giorno, potesse avere una consistenza fisica: qualcosa di morbido, che si muove come un materiale vero e che dice qualcosa del brand.
La risposta è una goccia. Quando tocchi una scheda, la goccia si allunga verso la nuova posizione come mercurio; se la distanza è grande si divide in due, poi si ricompone all'arrivo e lascia un'onda leggera sulla barra. Puoi anche prenderla e trascinarla: quando la lasci, scivola sulla scheda più vicina.
Una barra classica
- L'icona attiva cambia colore
- Il passaggio è istantaneo
- Uguale in ogni app
Il concept Glow
- Una goccia che si allunga, si divide e si ricompone
- Movimento fisico, con molle e inerzia
- Colori e carattere del brand
L'abbiamo vestita per Atelier Nove, un atelier di moda immaginario: titoli in corsivo elegante, schede dei capi, un bagliore di sfondo che prende il colore della sezione. I quattro colori sono quelli di Glow: magenta, lime, giallo e arancio.
Come funziona
Il trucco sta in due gocce, non in una. La prima, la "testa", corre verso la scheda scelta con una molla rigida. La seconda, la "coda", la insegue con una molla più morbida e resta indietro. Un filtro grafico sfoca le due forme e poi ne indurisce di nuovo i bordi: quando sono vicine si fondono in un'unica goccia allungata, quando si allontanano si staccano.
Prova i due pulsanti sotto la demo. Il rallentatore mostra il movimento a un quarto della velocità. Mostra lo scheletro toglie il filtro e fa vedere le due gocce come sono davvero: la testa con il bordo pieno, la coda tratteggiata.
Lo stack
Circa 5 KB di codice compresso, zero dipendenze.
- HTML semantico e accessibile. La barra è un vero
tablistWAI-ARIA: si usa con le frecce della tastiera, gli screen reader annunciano la sezione attiva, il focus è sempre visibile. - Fisica a molla. Due molle smorzate con rigidità diverse, integrate in modo semi-implicito con sotto-passi fissi a 240 Hz: il movimento resta stabile anche su telefoni lenti o durante un trascinamento veloce.
- Liquido con filtri SVG.
feGaussianBlur+feColorMatrixapplicati via CSS al livello delle gocce; la deformazione dipende dalla velocità, come in un liquido vero. - Gesti. Pointer Events con cattura del puntatore solo quando il tocco diventa un trascinamento, così un semplice tap resta un tap.
- Animazioni del contenuto. Web Animations API per l'entrata lettera per lettera dei titoli, transizioni CSS con ritardi a cascata per le schede prodotto, variabili CSS per il colore di sezione.
- Layout adattivo. Container queries: la demo si riorganizza in base allo spazio che ha, non solo alla larghezza dello schermo.
- Collaudo automatico. Clic, tastiera e trascinamento verificati con Playwright su Chromium/Edge e WebKit (Safari iOS), simulando iPhone 13 e iPhone SE.
I dettagli che non si vedono
- Velocità che deforma. Più la testa corre, più si schiaccia nella direzione del movimento.
- La coda si assottiglia. Quando le gocce si allontanano la coda si rimpicciolisce: è così che il ponte di liquido si spezza in modo naturale.
- Colore e contrasto. L'icona attiva passa da bianco a nero per restare leggibile su ogni tinta.
- Rispettoso. Chi ha attivato "riduci movimento" nel telefono vede la goccia spostarsi senza animazione.
Per chi è
È pensato per le app e i siti mobile di brand che vendono un'esperienza, prima ancora di un prodotto: moda, gioielli, cosmetica, ma anche centri estetici e studi che vogliono una prenotazione online meno fredda. In un'interfaccia che si tocca decine di volte al giorno, un gesto piacevole diventa un ricordo del marchio.
Le micro-interazioni sono il punto in cui un brand si fa sentire senza dire niente.
Vuoi un'interfaccia così per il tuo brand?
Partiamo dalle tue sezioni, dai tuoi colori e dal carattere del tuo marchio, e progettiamo insieme il gesto giusto.
Parliamone →Concept realizzato da Glow Creative Agency a scopo dimostrativo. Atelier Nove è un marchio di fantasia: prodotti, nomi e prezzi sono inventati e ogni somiglianza con brand esistenti è casuale. Grafica e codice sono originali. Le foto della demo sono immagini stock libere (licenza CC0, pubblico dominio) da StockSnap, di Freestocks.org, Daria Shevtsova, Kris Kemp, Matt Moloney, Hannah Morgan, Seacoast Sage, Michal Kulesza, Philip Meurisse, donterase, Brooke Cagle, Harsh Jadav, Kristin Hardwick e Nathan Walker.