Molte tendenze si sono fatte da parte, ma il motion design mantiene la sua posizione al vertice del settore dell’user experience per dispositivi mobili e web. L’animazione è diventata una parte essenziale delle efficaci interfacce utente rendendole più interattive, divertenti e intuitive.

I progettisti di Tubik sanno quanto sia utile l’animazione ben realizzata per l’usabilità dei prodotti digitali, in particolare per le applicazioni mobili. Aggiungendo a diverse idee di progettazione ed esempi pratici, oggi una nuova serie di concetti con sofisticate animazioni dell’user interface è pronta! Diamo un’occhiata…

Vegan Recipe App

 

Questo è un concetto di app Vegan Recipe che consente di scegliere i piatti in base ai principi vegetariani e di aggiungere gli ingredienti necessari alla lista della spesa. Qui puoi vedere il set di base delle interazioni tra cui la scelta delle ricette con lo scorrimento orizzontale. Quando gli utenti toccano la ricetta specifica, possono vedere le informazioni dettagliate sugli ingredienti e sulla nutrizione. La barra delle schede include icone semplici che aiutano a navigare nell’app.

Tasty Burger App

Un altro food concept è la fresca e succosa Tasty Burger App che consente agli utenti di ordinare un hamburger tradizionale dal menu o personalizzare qualsiasi opzione aggiungendo o rimuovendo ingredienti. Lo schermo dell’oggetto è incentrato sulla foto di alta qualità dell’hamburger scelto, in modo che gli utenti lo bramino ancora di più! Gli ingredienti sono visualizzati nella parte inferiore dello schermo in modo che gli utenti possano aggiungerli o rimuoverli senza sforzi poiché è una delle aree di touchscreen più facili da raggiungere. E infine un pulsante CTA giallo “Aggiungi al carrello” aiuta a completare l’acquisto.

La schermata del menu include il nome del marchio in alto per aumentare la riconoscibilità. Gli utenti possono applicare filtri per la ricerca veloce o scegliere da “offerte speciali”.

Mobile Game App

Questo è il concept animato che mostra le interazioni per un gioco mobile Chicken Attack. La combinazione di colori rende l’interfaccia utente più divertente. L’animazione mostra come si rompe un uovo e un altro pollo, presentando un giocatore, si unisce a una squadra. In questo modo l’operazione di base di aggiungere un giocatore diventa vivace e ottiene una forte associazione con il tema del gioco.

Business Card App

Ecco il concetto UI di Business Card App, un’applicazione per la creazione, la conservazione e l’invio di dati di contatto in una forma di biglietti da visita virtuali. Per gli utenti che lavorano in più posizioni, può offrire un set di biglietti da visita come puoi vedere nell’animazione. Le carte nel set dell’utente appaiono trascinando l’icona del profilo verso il basso.

Watering Tracker App

Ecco due schermate che presentano alcune interazioni per un tracker per l’irrigazione. Ricorda agli utenti di annaffiare le piante e di monitorare le statistiche di irrigazione per ogni pianta. Quando gli utenti realizzano l’irrigazione, spingono un pulsante personalizzato con gocce d’acqua e si trasforma in un segno di spunta. Inoltre, ci sono le informazioni che mostrano quando una pianta deve essere irrigata la prossima volta, quindi quando le persone confermano l’irrigazione cambia immediatamente i dati.
La seconda schermata presenta una funzionalità di aggiunta di una nuova pianta all’elenco. Gli utenti possono scattare una foto di una pianta e l’app riconosce automaticamente cosa è e quando dovrebbe essere innaffiata.

Photo App

Ecco un concetto UI per un’applicazione fotografica. È un social network che consente ai fotografi di presentare il loro portfolio in modo elegante e collegarsi al mondo. La vista corrente mostra una schermata del profilo con una galleria fotografica. Gli utenti possono vedere le foto con un tap e aprire le versioni a dimensione intera.

Homey App

Questo è il concetto di interfaccia utente di Homey, l’app che consente agli utenti di sfruttare la funzionalità di home automation nelle loro abitazioni. Gli schermi in primo piano mostrano che gli utenti possono scegliere la stanza e vedere i dati di base come temperatura, umidità e consumo energetico. Inoltre, le persone possono regolare le impostazioni e vedere le spese, nonché attivare la modalità di risparmio e la sicurezza di diversi livelli. Tutte le interazioni sono animate dall’uso di colori che sembrano particolarmente profondi sullo sfondo scuro.

Loading Motion per iPhone X

Ecco un concept di caricamento del contenuto mostrato nella barra di stato di iPhone X. Quando gli utenti lo trascinano verso il basso viene visualizzata l’animazione arcobaleno. Questo è un modo brillante per diminuire il tempo di attesa e intrattenere gli utenti per un momento.

Balance App

Questo è un concept di Balance App, un’applicazione mobile per il monitoraggio delle finanze. Aiuta gli utenti a controllare facilmente il saldo delle proprie carte di credito, a controllare le spese in base a determinate categorie e tenere aggiornato il denaro lasciato ai limiti impostati dall’utente. Il designer ha scelto il colore verde come base perché spesso è associato a sicurezza, fiducia e crescita. L’animazione fluida mostra la transizione da uno schermo all’altro.

Travel Brightly App

Questo è un concetto di interfaccia utente per Travel Brightly App. È un’applicazione mobile che fornisce informazioni su varie destinazioni in tutto il mondo. L’app raccoglie varie offerte su alloggi e biglietti per loro e consente agli utenti di condividere le loro recensioni. La caratteristica che rende l’app davvero speciale è rappresentata dalle brillanti illustrazioni personalizzate per ogni luogo presentato. I grafici sono seguiti con i nomi delle città ed entrambi dimostrano l’animazione quando gli utenti scelgono una città.

Mobile Menu Interactions

Ecco il concetto che presenta le interazioni con il menu di categorie per una semplice app che consente a un utente di raccogliere e tracciare tutti i tipi di attività quotidiane. I colori contrastanti e la tipografia audace contribuiscono anche a rendere la navigazione chiara e intuitiva. Un movimento fluido supporta l’usabilità e l’eleganza delle interazioni.

Learn Chinese App

Questo è un concetto di UI un’app per imparare i caratteri cinesi e la loro pronuncia. Un lato di una carta mostra all’utente un carattere e l’altro lato permette di vedere la sua traslitterazione e traduzione e permette di ascoltarlo. Gli utenti possono salvare le carte, contrassegnarle studiate o non studiate e apprendere varie raccolte tematiche. L’interessante movimento rende il processo di apprendimento più luminoso e interattivo.

WineYard App

Questo è WineYard, l’applicazione che consente agli utenti di conoscere diversi tipi di vino, ottenere consigli su come servirli e piatti da combinare. Inoltre, l’app fornisce informazioni su dove il vino scelto può essere acquistato in base alla posizione dell’utente. Quando gli utenti fanno clic su “Visualizza altro”, i dati completi relativi a un elemento vengono visualizzati in modo fluido mentre altri elementi dell’interfaccia utente, quali foto e titoli, svaniscono.

Cinema App

Questo è un conpect UI di un’applicazione mobile per una catena di cinema. La prima schermata presenta interazioni con la schermata principale che mostra l’elenco dei film. I film vengono presentati tramite poster posizionati l’uno vicino all’altro in modo che gli utenti possano vedere più opzioni contemporaneamente. Toccando un poster, le persone vanno su uno schermo del film particolare con tutti i dettagli necessari.
La seconda schermata mostra il flusso di scelta e prenotazione del posto. Gli utenti possono vedere i posti disponibili, scegliere quelli che preferiscono e prenotarli, pagando direttamente dall’app.

Music News App

Questo è un concept creativo per Music News App che aiuta a raccogliere testi, notizie e quiz sulla musica in un unico posto. L’interfaccia utente viene presentata tramite una combinazione di colori brillanti e illustrazioni personalizzate che rendono l’app originale. Lo sfondo di una home page applica forme geometriche che cambiano la loro posizione e i colori quando gli utenti passano lo schermo.

Food App

Questa è un’applicazione mobile che fornisce agli utenti un database di ricette. Aiuta a trovare le ricette sulla base della dispensa dell’utente o creare una lista della spesa per acquistare gli ingredienti che mancano. Il concetto mostra il processo di interazione con le card delle ricetta. Gli utenti possono scegliere la carta giusta con uno scorrimento laterale. Un’animazione discreta ed elegante durante la prima interazione può suggerire la funzionalità aggiuntiva nascosta sotto la scheda e disponibile con il metodo di scorrimento verso il basso.

via: Tubik Studio