Abbiamo trasformato la schermata iniziale della nostra app in un universo vivo che cambia nel corso della giornata. È diventata una delle funzioni più artistiche della nostra app e in questo articolo sveleremo le particolarità della sua realizzazione.
Se preferisci il formato video, eccolo qui:
Nell’ultimo anno, solo il 6% degli utenti di tTravel ha cambiato lo sfondo: la maggior parte non sapeva nemmeno che questa funzione esistesse, perché non veniva mostrata esplicitamente. Così ci siamo chiesti: come possiamo dare agli utenti una piccola spinta senza rovinare l’atmosfera da Easter egg?
Per portare a termine questo compito, abbiamo collaborato con Liuba Syrotiuk, una talentuosa animatrice Rive che abbiamo conosciuto al Lisbon Web Summit.
Durante il brainstorming avevamo in mente due idee per il suggerimento:
- Bordi luminosi dello sfondo. Ispirati all’effetto alone di Journey.
- Un uccello che attraversa la schermata iniziale dell’app: qualcosa che suscita interesse e fa venire voglia di «catturarlo» toccando lo schermo. Quando tocchi, lo sfondo cambia.
Abbiamo scelto l’uccello e deciso di trasformare gli sfondi statici che avevamo in universi pieni di vita, movimento e tempo.
Per prima cosa, Liuba ha ampliato i design dei nostri vecchi sfondi
creando sette nuovi universi e correggendone i colori per armonizzarli con la palette della nostra app.
Poi, nel file di Illustrator, ha sviluppato varianti basate sull’orario per ogni universo, così da creare un ciclo completo giorno-notte. Apri l’app al mattino e vedrai un paesaggio soleggiato. Torna la sera e vedrai un tramonto luminoso o una notte stellata.
Inoltre, Liuba ha realizzato un effetto parallasse che reagisce all’inclinazione del telefono e ha aggiunto elementi in movimento, come nuvole o meteore, per attirare l’attenzione dell’utente.
Infine, puntavamo a creare transizioni a livelli: invece della sostituzione statica delle immagini della prima iterazione, ora gli elementi sfumano e scorrono dolcemente.
Progettare transizioni fluide
Ecco gli appunti di Liuba sul suo processo di lavoro e sulle difficoltà incontrate nel dare vita alla nostra schermata iniziale:
Una delle principali sfide di design e animazione che ho affrontato non consisteva nel creare l’effetto parallasse in sé, ma nel capire come organizzare transizioni fluide tra due parametri di ogni universo: l’ora del giorno e il cambio di universo.
Il nostro obiettivo era ottenere una transizione a livelli con effetto di scorrimento, in cui un elemento sostituisse l’altro senza soluzione di continuità. Il primo passo in Rive è stato trasferire tutto da Illustrator, assicurarsi che i colori funzionassero, correggere i gradienti e impostare un semplice effetto di scorrimento.
Una volta esportato tutto in Rive, ho configurato l’effetto parallasse e perfezionato i colori prima di concentrarmi sulle transizioni.
All’inizio, per fare una prova, ho costruito entrambe le transizioni come livelli separati, facendo cambiare qualsiasi stato attraverso un semplice trigger. Avevamo previsto di costruire le transizioni con due trigger numerici: il primo cambia l’universo, mentre il secondo controlla l’ora del giorno (che dovrebbe cambiare automaticamente da sola nell’arco delle 24 ore). Dopo aver testato il primo file Rive, ci siamo resi conto che servivano trigger per ogni universo e ogni ora del giorno, così che gli sviluppatori potessero controllarli meglio.
Ho testato diverse macchine a stati e, per correggere la transizione tra gli universi, ho provato ad aggiungere un altro livello con animazioni di entrata/uscita per ogni universo, in cui i livelli entravano e uscivano. Questo approccio funzionava quando si attivava sia un cambio di universo sia un cambio dell’ora del giorno. A questo punto la transizione aveva un aspetto migliore e risultava più fluida, ma non era ancora perfetta:
Dopo alcuni cicli di test, ho capito che le transizioni apparivano al meglio quando le animazioni di entrata/uscita venivano aggiunte a ogni livello di transizione. Ho quindi costruito una matrice complessa per le transizioni dell’ora del giorno e degli universi, con stati di entrata/uscita dedicati:
Alla fine ha funzionato proprio come avevo immaginato. Ho perfezionato i tempi rallentando alcune parti e aggiungendo pause tra le animazioni. Il risultato è stato un effetto parallasse fluido e graduale. In Rive appariva molto rifinito:
Quando ho visto l’animazione in funzione nell’app reale, era ancora più bella di quanto mi aspettassi. Sembrava che la schermata iniziale dell’app fosse un piccolo mondo interattivo capace di reagire a te e all’ora del giorno.
Abbiamo effettuato diversi cicli di correzione del colore per garantire che tutto risultasse armonioso e ho colto l’occasione per separare i livelli in singoli elementi — come il sole, le nuvole, il gradiente del cielo e i dettagli più piccoli — dando all’animazione maggiore profondità e flessibilità.
Ed ecco il risultato finale:
Naturalmente non ci aspettiamo che questa funzione faccia schizzare alle stelle le metriche, ma vogliamo che la nostra app abbia un aspetto immersivo, creativo e semplicemente bello. Con questo Easter egg dello sfondo vogliamo premiare gli utenti abbastanza coinvolti nell’app da scoprirne tutte le funzioni e i segreti. In definitiva, non si tratta sempre di metriche: a volte si tratta semplicemente del nostro amore per tTravel. Per noi, ogni schermata della nostra app dovrebbe sembrare una piccola opera d’arte.
Speriamo che questo articolo ti sia stato utile. Scarica tTravel per iOS o Android, se non l’hai ancora fatto. Continua a seguirci per i prossimi articoli. Alla prossima.