20 najboljih Freebies za ambicioznih UX Motion dizajnera
Dizajneri sučelja sve više se zanimaju za UX dizajn s animiranim modelima koji oponašaju radnje korisnika. Ove UX makete osloniti se na pokret s definiranim animiranim efektima kako bi sučelje trebalo odgovoriti na korisničke unose.
Većina UX dizajnera uči koristiti softver za stvaranje ovih animacija. Dvije najpopularnije opcije su Adobe After Effects i Princip (samo OS X). Možeš dizajn sučelja sučelja u programu kao što je Photoshop i premjestite korisnička sučelja u te programe za animaciju.
Ako ste zainteresirani za učenje UX animacije, onda će freebies biti ogromna prednost. Možete proučavati rad drugih i igrati se s njihovim nacrtima kako biste vidjeli kako sve to funkcionira.
U nastavku ćete pronaći najbolju besplatnu uslugu za principijelne i AE korisnike ulazak u UX motion dizajn. Sigurno će vam pomoći razumjeti kako funkcionira UX animacija, i kako izgraditi vlastitu.
1. Izbrišite radnju
Prijelaz kroz je vrlo uobičajena radnja u mobilnim aplikacijama za različite svrhe. Uobičajeno je iščitavanje iOS-a prikazati alternativne opcije za uređivanje / brisanje stavki, i to je upravo ono što dobivate u ovoj freebie koju je stvorio Ramil Derogongun.
Možete preuzeti besplatnu AEP datoteku za After Effects i isprobati je sami. UI slijedi a vrlo osnovna shema s korisničkim unosom koji se prikazuje kao plava točka. Ove vrste ponašanja korisnika najbolje je prikazati kroz animaciju jer programerima pruža priliku da vide kako bi sučelje trebalo raditi.
2. Widget Swipe
Evo još jednog animiranog maketa koji se fokusira na stavkama košarice u dijaprojekciji. Dizajnirao ga je Leon Wu, a ova besplatna animacija s dodirom dolazi s PRD datotekom koja je napravljena za Princip.
Animacija je vrlo jednostavna i pokazuje kako se predmeti trebaju pomicati po zaslonu kada se primjenjuje pritisak. Također dobivate osjećaj za olakšavajući učinak svaki put kada je puštena akcija.
3. Dual Shock UI
Evo nevjerojatno dinamičnog UX animacijskog efekta koji dijeli Alexander Boychenko. Ovaj se model temelji na PlayStation kontroleru za korisničko sučelje mobilnih aplikacija. To uključuje skicu i princip datoteku koju možete besplatno preuzeti.
Ovaj freebie pokazuje kako stvoriti prijelaze povucite između zaslona. Ali možete vidjeti i kako se elementi stranice animiraju oko zaslona u različitim smjerovima.
4. Animacija izbornika Hamburger
Ikone hamburgera su još uvijek besni u mobilnim sučeljima. Ovaj izbornik ikona freebie pokazuje kako animirajte ikonu s tri trake u ikonu "X".
To je ponavljanje animacije, tako da "X" također animira natrag u ikonu izbornika hamburgera. Ovo je veliki freebie za saznati više o tome manipulacija vektorima za elemente sučelja.
5. Snapster
Ovaj besplatni model je za mobilnu aplikaciju Snapster. Usredotočuje se na zaslonu dobrodošlice gdje korisnici mogu vidjeti demo aplikacije i saznati kako to zapravo funkcionira.
To je PRD datoteka, i nažalost ovo se ne igra s After Effectsom, tako da samo korisnici Principa mogu imati koristi od ove.
6. Učitavanje Spinnera
Evo AEP After Effects freebie pokretni utovarivači. Ove vrste animiranih GIF-ova postale su vrlo popularne kada je Ajax ušao u mainstream web razvoj.
Sada su ovi pokretni utovarivači deset centi, a mogu čak biti jako prilagođen da stane određena sučelja. Ovaj freebie dolazi s AEP datotekom i datotekom Sketch za uređivanje vektora ako ih želite modificirati.
7. Reprodukcija / pauziranje prijelaza
Učinci prijelaza često se čini vrlo jednostavnim, ali zapravo zahtijevaju dobru količinu posla. Ova animacija za reprodukciju / pauzu koju je stvorio Alex Pronsky odličan je primjer.
Uz ovaj freebie možete ispitati kako animirati različite ikone tankih linija u oblike i simbole. Jednom kada naučite program, postaje mnogo lakše obaviti ovu vrstu stvari, pa vam pomaže da imate na raspolaganju besplatno istraživanje.
8. iPhone Mockup
Iako ova freebie ne sadrži izravno animaciju, ona je namijenjena uporabi za produkcijski rad na iPhone aplikacijama. To je besplatna iPhone 5S AEP datoteka za korištenje u After Effects kao iPhone predložak.
Jednostavno uvezite podsustav sučelja i stvorite animacije u After Effectsu. Tada ga možete priključiti na ovaj iPhone model i podijeliti s timom.
9. Predložak za iPhone
Ovo je još jedan prilagođeni predložak After Effects s moderniji dizajn iPhonea. Freebie je dostupan na ovoj stranici na UX in Motion.
Sve u predlošku je super jednostavno prilagoditi. Na stranici za preuzimanje pronaći ćete i odjeljak pod nazivom "Video upute" gdje možete naučiti kako animirati aplikaciju.
10. Micro Animation
Čak i najmanje animacije aplikacija mogu značajno utjecati na korisničko iskustvo. Ovaj freebie prikazuje a Mikro animacija "Like" kada korisnik "voli" post.
Ikona srca ima vlastitu animaciju s fotografijom korisničkog profila dodana u snop "like". Ovaj freebie je samo za Princip i vi također imate .mov datoteku za preuzimanje ako želite.
11. App App
Digitalni novčanici postaju sve popularniji, a ovaj freebie olakšava dizajniranje. Dobivate datoteku Skica sa svim sirovim elementima vektora, plus besplatnu PRD datoteku za animaciju Principa.
Ovaj freebie je dizajnirao Sergey Bykov kao zabavni mali strani projekt. Ali to može biti vrlo poučno ako ga rastavite i radite s animacijom korak po korak.
12. iOS Switch
Uz Appleov iOS 7, svijet je dobio svježe dizajnirani prekidač za on / off naljepnice. To je dovelo do mnogo različitih efekata uključujući besplatnu animaciju koja oponaša izvorni prekidač za uključivanje / isključivanje.
U ovoj datoteci dobivate vrlo jednostavan animacijski efekt uz osnovno ublažavanje. Prekidač se pomiče, a pozadina postaje zelena, a zatim se vraća kad je prekidač isključen.
13. Ritter App
Evo još jednog velikog freebie kojeg je izdao Sergey Bykov za ono što on naziva Ritter App. To uključuje besplatnu datoteku Sketch za vektorsko sučelje, kao i besplatnu PRD datoteku za animaciju Principa.
Dobit ćeš mnogo različitih animacija u ovoj freebie, pa mislim da bi to bilo korisnije za dizajnera srednjeg do naprednog. Početnici također mogu puno naučiti od njega, ali mogu imati strmu krivulju učenja.
14. Pozovite prijatelje
Svi znamo i volimo plus izbornik Google-a. Pa, Jardson Almeida je stvorio izbornik Friends Invite na temelju jednostavnog koncepta dizajna materijala.
Sve je bilo dizajnirano u Sketchu i uvezeno u Princip animacije. Možete dobiti obje datoteke kao freebies za preuzimanje i igračke s oko.
15. Povlačenje kartice
Evo još jednog općeg hvatanja freebiea samo za korisnike Principa. Ovo je kartično sučelje izrađene za dijaprojekcije opće namjene ili izvorna korisnička sučelja aplikacije.
Mislim da je ovo savršen freebie za početnike koji tek ulaze u Princip. Nije toliko komplicirano da ćete se osjećati izgubljeno, ali nije tako jednostavno da ćete se osjećati trivijalno.
16. Chat na karti
Mnogi dizajneri još uvijek koriste Photoshop za sučelja, a vrijedi i za ovu besplatnu besplatnu mapu. Možete preuzeti PSD datoteku za sučelje i PRD datoteku za animaciju Principa.
To je iznenađujuće pitoma animacija za stil, ali i dalje izgleda sjajno i funkcionira točno onako kako biste očekivali u jednostavnoj aplikaciji za karte / geolokaciju.
17. Učitavanje aplikacije
Mobilne aplikacije često koriste učitavanje zaslona reći posjetiteljima da se nešto događa u pozadini. Jedna od mojih omiljenih freebies u ovoj kolekciji je ova animacija koju je stvorio Roman Wagner.
Ona učitava pojedinačne elemente jedan za drugim kada se zaslon za učitavanje završi. Ova animacija je vrlo glatka i potpuno vjerodostojna u području dizajna mobilnih aplikacija.
18. Kartice na brodu
Korisnik na ploči je ključan korak za svaku novu mobilnu aplikaciju. U ovoj je fazi uvijek lijepo uključiti neke animacije, zato ove animacije na karticama mogu biti od velike pomoći dizajnerima aplikacija.
To je stvorio Austin Baird, a pušten je besplatno kako bi se koristio na bilo kojem UI / UX projektu.
19. Princip Demos
Dok se više bavite načelom, naučit ćete mnogo naprednih tehnika rada. Jedna od najboljih besplatnih igara koja ide dalje je ona stvorena za kreativni tim Yalantisa.
Ovo je potpuno besplatan izvor za korisnike s principima za preuzimanje i igranje. Pokriva nekoliko trikova koji pokazuju kako postati profesionalac u animaciji Principa.
20. Padajući izbornici
Izbornici s padajućim izbornicima često koriste lude animacije kako bi privukli našu pozornost. Ovaj After Effects freebie koristi a animacija padajućih stepenica na izborniku za pojedine elemente kako bi ih učinili padom poput stepenica.
To možda neće biti korisno za svakoga, ali je svakako sjajan način da saznate više o animaciji sučelja After Effects.
Završne riječi
Svi ovi resursi su potpuno besplatni za preuzimanje i igranje sa svojim projektima. Ako ste potpuno novi u UX animaciji, jamčim da ćete puno naučiti proučavanjem ovih besplatnih igara. Ako znate bilo koje druge velike resurse slobodno ispustite linkove u komentarima.
