20 migliori omaggi per i progettisti di Aspiranti UX Motion

I progettisti di interfacce si interessano maggiormente al design UX con mockup animati che emulano azioni dell'utente. Questi mockup UX contare su movimento con effetti animati da definire come un'interfaccia dovrebbe rispondere all'input dell'utente.

La maggior parte dei progettisti di UX impara a usare il software per creare queste animazioni. Le due scelte più popolari sono Adobe After Effects e Principle (solo OS X). Puoi modelli di interfaccia di design in un programma come Photoshop e sposta le interfacce utente in questi programmi per l'animazione.

Se sei interessato a imparare l'animazione UX, allora i regali gratuiti saranno un grande vantaggio. Puoi studiare il lavoro degli altri e giocare con i loro disegni per vedere come funziona.

Di seguito troverai i migliori omaggi per gli utenti Principle e AE entrare in motion design UX. Ti aiuteranno sicuramente a capire come funziona l'animazione UX, e come costruire il tuo.

1. Elimina azione

strisciata è un'azione molto comune nelle app mobili per vari scopi. L'azione di scorrimento iOS predefinita è utilizzata per visualizza opzioni alternative per la modifica / eliminazione di elementi, ed è esattamente quello che ottieni in questo freebie creato da Ramil Derogongun.

Puoi scaricare il file AEP gratuito per After Effects e provarlo tu stesso. L'interfaccia utente segue a schema wireframe molto semplice con l'input dell'utente visualizzato come un punto blu. Questi tipi di comportamenti degli utenti sono i migliori da mostrare attraverso l'animazione perché offre agli sviluppatori la possibilità di vedere come dovrebbe funzionare l'interfaccia.

2. Widget Swipe

Ecco un altro mockup animato a scorrimento che si concentra sugli articoli del carrello in una presentazione. Progettato da Leon Wu, questa animazione a scorrimento libero viene fornita con un file PRD realizzato per Principle.

L'animazione è estremamente semplice e dimostra come gli oggetti dovrebbero spostarsi sullo schermo quando viene applicata la pressione. Hai anche un'idea per il effetto attenuante ogni volta che l'azione di scorrimento viene rilasciata.

3. UI Dualshock

Ecco un effetto di animazione UX incredibilmente dinamico condiviso da Alexander Boychenko. Questo mockup si basa sul controller PlayStation per un'interfaccia utente di un'app mobile. Include un file Schizzo e Principio che puoi scaricare gratuitamente.

Questo omaggio mostra come creare le transizioni scorri tra gli schermi. Ma puoi anche vedere come gli elementi della pagina si animano sullo schermo in varie direzioni.

4. Animazione del menu Hamburger

Le icone di hamburger sono ancora di gran moda nelle interfacce mobili. Questo icona del menu gratuito dimostra come animare l'icona a tre barre in un'icona "X".

È un ripetere l'animazione, così la "X" si riattiva anche in un'icona del menu dell'hamburger. Questo è un grande omaggio da cui imparare manipolazione vettoriale per elementi dell'interfaccia utente.

5. Snapster

Questo mockup gratuito è per un'app mobile chiamata Snapster. Si concentra sullo schermo di benvenuto / di inserimento dove gli utenti possono vedere le demo dell'app e imparare come funziona.

È un file PRD e sfortunatamente questo non funziona bene con After Effects, quindi solo gli utenti Principio possono trarre vantaggio da questo.

6. Caricamento di filatori

Ecco un freebie per After Effects di AEP per filatori mobili di caricamento. Questi tipi di GIF animate sono diventati molto popolari quando Ajax si è fatto strada nello sviluppo del web tradizionale.

Ora questi caricatori mobili sono una dozzina e possono anche essere fortemente personalizzato per adattarsi a determinate interfacce. Questo freebie viene fornito con un file AEP e un file Sketch per modificare i vettori se si desidera modificarli.

7. Riproduci / Sospendi transizione

Effetti di transizione spesso sembrano molto semplici ma in realtà richiedono una buona quantità di lavoro. Questa animazione di riproduzione / pausa creata da Alex Pronsky è un ottimo esempio.

Con questo freebie puoi esaminare come animare varie icone di linee sottili in forme e simboli. Una volta che si impara il programma, diventa molto più facile fare questo tipo di cose, quindi aiuta a disporre di omaggi a vostra disposizione per la ricerca.

8. Mockup per iPhone

Sebbene questo freebie non contenga direttamente l'animazione, è pensato per essere utilizzato per lavori di produzione su applicazioni iPhone. È un file gratuito per iPhone 5S AEP da utilizzare in After Effects come modello per iPhone.

Basta importare il tuo mockup di interfaccia e creare le animazioni in After Effects. Quindi puoi collegarlo a questo mockup di iPhone da condividere con il tuo team.

9. Modello iPhone

Questo è un altro modello After Effects personalizzato con un design iPhone più moderno. L'omaggio è disponibile da questa pagina su UX in Motion.

Tutto nel modello è super facile da personalizzare. Nella pagina di download, troverai anche una sezione denominata "Istruzioni video" in cui puoi imparare come animare l'app.

10. Micro animazione

Anche le più piccole animazioni delle app possono avere un grande impatto sull'esperienza utente. Questo omaggio mostra a "Mi piace" micro animazione ogni volta che un utente "mi piace" un post.

L'icona del cuore ha una sua animazione con la foto del profilo dell'utente aggiunta alla pila di Mi piace. Questo freebie è solo per Principio e hai anche a .mov file da scaricare, se lo desideri.

11. App Wallet

I portafogli digitali stanno diventando molto più popolari e questo freebie rende più facile crearne uno. Si ottiene un file di schizzo con tutti gli elementi vettoriali grezzi, oltre a un file PRD gratuito per l'animazione Principle.

Questo omaggio è stato progettato da Sergey Bykov come un divertente piccolo progetto collaterale. Ma può essere molto educativo se lo distingui e lavori passo dopo passo con l'animazione.

12. Switch iOS

Con l'iOS 7 di Apple, il mondo ha un interruttore appena progettato per etichette on / off. Ciò ha portato a molti effetti diversi tra cui un'animazione gratuita che imita l'interruttore on / off nativo.

In questo file, si ottiene un effetto di animazione molto semplice con un andamento di base. L'interruttore si sposta e lo sfondo diventa verde, quindi torna indietro quando l'interruttore è spento.

13. App Ritter

Ecco un altro grande omaggio rilasciato da Sergey Bykov per quello che chiama l'App Ritter. Questo include un file Sketch gratuito per l'interfaccia vettoriale, insieme a un file PRD gratuito per l'animazione Principle.

Otterrai un sacco di diverse animazioni in questo freebie, quindi penso che sarebbe più utile per un designer intermedio-avanzato. I principianti possono imparare molto anche da esso, ma possono avere una curva di apprendimento ripida.

14. Invita amici

Tutti conosciamo e amiamo il menu a comparsa dell'icona del plus di Google. Bene, Jardson Almeida ha creato un menu Invito amici basato su un semplice concetto di Material Design.

Tutto è stato progettato in Sketch e importato in Principle per l'animazione. Ottieni entrambi i file come omaggi da scaricare e divertiti.

15. Card Swipe

Ecco un altro omaggio generico per lo swip realizzato solo per gli utenti principali. Questo è un interfaccia di scorrimento della carta creato per presentazioni generiche o interfacce utente native.

Penso che questo sia l'omaggio perfetto per un principiante che sta appena entrando in Principle. Non è così complicato che ti sentirai perso, eppure non è così semplice che ti sentirai banalizzato.

16. Chatta sulla mappa

Molti designer usano ancora Photoshop per le interfacce, ed è anche vero per questo freebie di chat cartografico. È possibile scaricare un file PSD per l'interfaccia e un file PRD per l'animazione Principle.

È un'animazione sorprendentemente addomesticata per lo stile, ma è comunque eccezionale e funziona esattamente come ci si aspetterebbe in una semplice applicazione per mappe / geolocalizzazione.

17. Caricamento delle app

Le app mobili spesso usano schermate di caricamento per dire ai visitatori che qualcosa sta accadendo nel back-end. Uno dei miei omaggi preferiti in questa raccolta è questa animazione di caricamento creata da Roman Wagner.

Carica singoli elementi uno dopo l'altro una volta terminata la schermata di caricamento. Questa animazione è molto fluida e completamente credibile nell'ambito della progettazione di app per dispositivi mobili.

18. Carte di bordo

Onboarding dell'utente è un passaggio cruciale per ogni nuova applicazione mobile. È sempre bello includere alcune animazioni in questa fase, ecco perché queste animazioni di carte su scheda possono essere molto utili per i progettisti di app.

Questo è stato creato da Austin Baird e rilasciato gratuitamente per essere utilizzato su qualsiasi progetto UI / UX.

19. Principali demo

Mentre approfondisci ulteriormente il principio, imparerai molte tecniche avanzate per il flusso di lavoro. Uno dei migliori omaggi per andare oltre è questo creato per il team creativo di Yalantis.

Questa è una risorsa completamente gratuita per gli utenti Principio da scaricare e giocare. Copre alcuni trucchi che mostrano come diventare un professionista all'animazione Principle.

20. Menu a discesa

I menu a discesa dei menu spesso utilizzano animazioni pazze per catturare la nostra attenzione. Questo freebie di After Effects utilizza a animazione scale a discesa sul menu per i singoli elementi per farli cadere come scale.

Questo potrebbe non essere utile a tutti ma è sicuramente un ottimo modo per conoscere l'animazione dell'interfaccia di After Effects.

Parole finali

Tutte queste risorse sono completamente gratuite da scaricare e utilizzare nei propri progetti. Se sei nuovo di zecca per l'animazione UX ti garantisco che imparerai molto studiando questi omaggi. Se conosci altre grandi risorse, sentiti libero di inserire link nei commenti.