20 parimat võistlust UX Motion Designerite jaoks

Liidese disainerid tunnevad suuremat huvi UX disaini vastu animeeritud makettidega, mis emiteerivad kasutaja tegevust. Need UX-i makettid tugineda liikumisele animeeritud efektidega kuidas liides peaks kasutaja sisendile vastama.

Enamik UX disainereid õpib kasutama tarkvara nende animatsioonide loomiseks. Kaks kõige populaarsemat valikut on Adobe After Effects ja Principle (ainult OS X). Sa saad disaini liidese mudelid sellises programmis nagu Photoshop, ja liigutage kasutajaliideseid nendesse programmidesse animatsiooni jaoks.

Kui olete huvitatud UX-i animatsiooni õppimisest, siis on freebies tohutu vara. Te saate õppida teiste tööd ja mängida oma disainilahendustega, et näha, kuidas see kõik toimib.

Allpool leiate parimad freesid põhimõttele ja AE kasutajatele UX-i liikumise kujundamine. Nad kindlasti aitavad teil mõista kuidas UX animatsioon töötab, ja kuidas ise üles ehitada.

1. Kustuta toiming

Swiping on väga tavaline tegevus mobiilirakendustes erinevatel eesmärkidel. Vaikimisi kasutatakse iOS-i pühkimismeetmeid kuvada üksuste muutmise / kustutamise alternatiivseid võimalusi, ja see on täpselt see, mida sa saad selle freebie'ga, mille on loonud Ramil Derogongun.

Võite tasuta alla laadida AEP-faili After Effectsi jaoks ja proovida seda ise. UI järgib a väga lihtne traatvõrk kasutaja sisend kuvatakse sinise punktina. Seda tüüpi käitumised on kõige parem näidata animatsiooni abil sest see annab arendajatele võimaluse näha kuidas liides peaks töötama.

2. Vidina pühkimine

Siin on veel üks pühkida animeeritud makett, mis keskendub slaidiseansi ostukorvi üksustel. Leon Wu poolt kujundatud tasuta swipe-animatsioon on varustatud PRD-failiga, mis on tehtud põhimõttele.

Animatsioon on äärmiselt lihtne ja näitab, kuidas üksused peaksid ekraanil liikuma rõhu rakendamisel. Te saate ka tunne leevendav mõju kui pühkimismeede vabastatakse.

3. Dualshocki kasutajaliides

Siin on uskumatult dünaamiline UX animatsiooniefekt, mida jagavad Alexander Boychenko. See mudel põhineb mobiilirakenduse kasutajaliidese PlayStation Controlleril. See sisaldab sketch ja Principle faili, mida saate tasuta alla laadida.

See freebie näitab, kuidas luua üleminekuid liikuge ekraanide vahele. Aga sa saad ka näha, kuidas leheküljeelemendid ekraani ümber animeerivad erinevates suundades.

4. Hamburgeri menüü animatsioon

Hamburgeri ikoonid on endiselt kõik mobiilse liidese raevud. See menüü ikoon freebie näitab, kuidas seda teha animeerida kolme riba ikoon "X" ikooniks.

See on korduv animatsioon, nii "X" ka animatsioon tagasi hamburger menüü ikoon. See on suurepärane tasuta õpetus vektori manipuleerimine UI elementide jaoks.

5. Snapster

See tasuta makett on mobiilirakenduseks, mida nimetatakse Snapsteriks. See keskendub ekraanil kus kasutajad näevad rakenduse demosid ja õpivad, kuidas see tegelikult toimib.

See on PRD-fail ja kahjuks ei mängi see After Effectsiga kena, nii et ainult põhimõtted saavad sellest kasu.

6. Spinnerite laadimine

Siin on AEP After Effects'i tasuta mängud mobiilsed laadimisseadmed. Sellised animeeritud GIF-id muutusid väga populaarseks, kui Ajax jõudis veebipõhisesse arengusse.

Nüüd on need mobiililaadurid kümmekond peenraha ja nad võivad isegi olla tugevalt kohandatud teatud liidesed. See freebie on varustatud AEP-failiga ja Sketch-failiga, et muuta vektoreid, kui soovite neid muuta.

7. Esitus / paus Üleminek

Ülemineku mõju sageli tunduvad väga lihtsad, kuid tegelikult vajavad nad head tööd. See Alex Pronsky loodud mängu- / pausianimatsioon on suurepärane näide.

Selle freebie abil saate uurida, kuidas animeerida erinevaid õhuke jooni kuju ja sümboliteks. Kui olete programmi õppinud, muutub seda tüüpi asjad palju lihtsamaks, nii et see aitab teil vabalt kasutada teadustööks.

8. iPhone'i makett

Kuigi see freebie ei sisalda otseselt animatsiooni, on see mõeldud kasutamiseks iPhone'i rakenduste tootmise jaoks. See on tasuta iPhone 5S AEP-fail, mida saab kasutada ka After Effectsis iPhone'i mallina.

Lihtsalt importige oma liidese makett ja looge animatsioonid After Effectsis. Seejärel saate selle iPhone'i maketi ühendada oma meeskonnaga.

9. iPhone'i mall

See on teine kohandatud After Effectsi mall koos kaasaegsem iPhone'i disain. Ilmaistarjous on saadaval sellelt leheküljelt aadressil UX in Motion.

Kõik mallis on super lihtne kohandada. Allalaadimislehelt leiate ka osa "Videojuhised", kus saate teada, kuidas rakendust animeerida.

10. Mikro-animatsioon

Isegi väikseimad rakenduste animatsioonid võivad kasutajate kogemusi oluliselt mõjutada. See freebie kuvab a "Like" mikro animatsioon kui kasutaja "meeldib" postitust.

Süda ikoon on oma animatsioon kasutajaprofiili fotoga, mis on lisatud meeldivaimale. See freebie on ainult põhimõtte jaoks ja teil on ka a .mov allalaaditav fail, kui soovite.

11. Rahakoti rakendus

Digitaalsed rahakotid on muutumas üha populaarsemaks ja see vabakäik muudab selle disaini lihtsamaks. Saate sketch-faili koos kõigi toores vektori elementidega ning tasuta PRD-faili põhimõttelise animatsiooni jaoks.

Selle freebie kujundas Sergei Bykov kui lõbus väike külgprojekt. Aga see võib olla väga hariv, kui te seda lahutate, ja töötage animatsiooniga samm-sammult.

12. iOS-lüliti

Apple'i iOS 7-ga sai maailm värskelt kujundatud lüliti sisse / välja sildile. See tõi kaasa palju erinevaid mõjusid, sealhulgas tasuta animatsiooni jäljendab natiivset sisse / välja lülitit.

Selles failis saad väga lihtsa animatsiooniefekti põhilise lihtsustamisega. Lüliti liigub üle ja taust muutub roheliseks ja lülitub seejärel tagasi, kui lüliti on välja lülitatud.

13. Ritter App

Siin on veel üks suur freebie, mille Sergei Bykov avaldas Ritteri rakenduseks. See sisaldab vektori liidese jaoks tasuta Sketch-faili koos tasuta PRD-failiga põhimõttelise animatsiooni jaoks.

Sa saad palju erinevaid animatsioone selles freebie's, nii et ma arvan, et see oleks kasulikum vahepealse disaineri jaoks. Algajad saavad sellest ka palju õppida, kuid neil võib olla järsk õpikõver.

14. Kutsu sõpru

Me kõik teame ja armastame Google'i pluss-ikooni lendamismenüüd. Noh, Jardson Almeida lõi sõprade kutse menüü lihtsa materjali disaini kontseptsiooni alusel.

Kõik loodi Sketchis ja imporditi animatsiooni printsiibile. Sa saad mõlemad failid tasuta alla laadida ja mängida.

15. Kaardi pühkimine

Siin on veel üks üldine pühkimisvaba beebi, mis on tehtud ainult põhimõtete kasutajatele. See on kaardi tõmbamise liides loodud üldotstarbeliste slaidiesitluste või kohalike rakenduste kasutajaliideste jaoks.

Ma arvan, et see on täiuslik freebie algajale, kes lihtsalt saab põhimõttesse. See ei ole nii keeruline, et tunned end kadunud, kuid see ei ole nii lihtne, et tunned end trivializeerituna.

16. Vestlus kaardil

Paljud disainerid kasutavad endiselt Photoshopi liideste jaoks ning see kehtib ka selle kaardivestluse tasuta. PSD-faili saate alla laadida liidese jaoks ja PRD-faili põhimõttelise animatsiooni jaoks.

See on stiili jaoks üllatavalt tame animatsioon, kuid see näeb endiselt hea välja ja toimib täpselt nii, nagu oleksite oodanud lihtsates kaartides / geolokatsioonirakenduses.

17. Rakenduse laadimine

Sageli kasutatakse mobiilirakendusi ekraanide laadimine öelda külastajatele, et taustaprogrammis toimub midagi. Üks minu lemmikvabadusi selles kogumikus on see Roman Wagneri loodud laadimis animatsioon.

See laadib üksikuid elemente üksteise järel kui laadimisekraan on lõppenud. See animatsioon on mobiilirakenduste disainis väga sile ja täiesti usaldusväärne.

18. Onboarding kaardid

Kasutaja onboarding on iga uue mobiilirakenduse jaoks oluline samm. Sellel etapil on alati tore lisada mõningaid animatsioone, mistõttu võivad need onboarding-kaardi animatsioonid olla väga kasulikud rakenduste disaineritele.

Selle on loonud Austin Baird ja see vabastati tasuta, et seda saaks kasutada mis tahes UI / UX projektis.

19. Põhimõtted Demod

Põhimõttesse lähenedes õpid palju arenenud töövoo tehnikaid. Üks parimaid freebies, mida edasi minna, on see, mis on loodud Yalantis loomingulise meeskonna jaoks.

See on täiesti tasuta ressurss, mille abil kasutajad saavad alla laadida ja mängida. See hõlmab mõningaid trikke, mis näitavad, kuidas saada põhimõtteliseks animatsiooniks pro.

20. Loobumiste menüüd

Menüü rippmenüüdes kasutatakse tihti hullumeelseid animatsioone meie tähelepanu püüdmiseks. See After Effects freebie kasutab a rippmenüüst animatsioon üksikute elementide menüüs, et need langeksid nagu trepid.

See ei pruugi olla kasulik kõigile, kuid see on kindlasti suurepärane võimalus After Effects liidese animatsiooni tundmaõppimiseks.

Lõplikud sõnad

Kõik need vahendid on oma projektides täiesti tasuta allalaadimiseks ja mänguasjadeks. Kui oled UX animatsiooniga täiesti uus, siis garanteerin, et õpid neid tasuta. Kui teate muid suuri ressursse, võite kommentaarides lingid vabalt lasta.