20 Best Freebies za ambiciozne UX Motion oblikovalce
Oblikovalci vmesnikov se zanimajo za oblikovanje UX z animiranimi modeli, ki posnemajo dejanja uporabnikov. Te UX makete zanašajo na gibanje z definiranimi animiranimi učinki kako naj se vmesnik odzove na vnos uporabnika.
Večina UX oblikovalcev se nauči uporabljati programsko opremo za ustvarjanje teh animacij. Dve najbolj priljubljeni izbiri sta Adobe After Effects in Princip (samo OS X). Ti lahko oblikovalske vmesne modele v programu, kot je Photoshop, in premaknite uporabniške vmesnike v te programe za animacijo.
Če vas zanima učenje UX animacije, bo brezplačna vsebina ogromna prednost. Lahko proučite delo drugih in se igrate z njihovimi modeli, da vidite, kako deluje.
Spodaj boste našli najboljše brezplačne brezplačne storitve za uporabnike Princip in AE zasidranje UX gibanja. Zagotovo vam bodo pomagali razumeti kako deluje UX animacija, in kako zgraditi svoje.
1. Izbriši akcijo
Odmikanje je zelo pogost ukrep v mobilnih aplikacijah za različne namene. Privzeto je privzeto dejanje za iOS prikaže nadomestne možnosti za urejanje / brisanje elementov, in to je točno to, kar dobite v tej freebie, ki jo je ustvaril Ramil Derogongun.
Lahko prenesete brezplačno AEP datoteko za After Effects in jo preizkusite sami. UI sledi a zelo osnovno žično shemo z uporabniškim vnosom, prikazanim kot modra pika. Te vrste vedenja uporabnikov je najbolje prikazati skozi animacijo ker daje razvijalcem možnost videti kako naj vmesnik deluje.
2. Pripomoček Potegnite
Tukaj je še en potezan animirani model, ki se osredotoča na predmetih vozička v diaprojekciji. Ta brezplačna animacija, ki jo je oblikoval Leon Wu, ima PRD datoteko, ki je izdelana za princip.
Animacija je zelo preprosta in prikazuje, kako se predmeti premikajo po zaslonu ob pritisku. Prav tako dobite občutek za blažilni učinek vsakič, ko je sprožitev odstranjena.
3. Uporabniški vmesnik Dualshock
Tukaj je neverjetno dinamičen UX animacijski učinek, ki ga deli Alexander Boychenko. Ta model temelji na krmilniku PlayStation Controller za uporabniški vmesnik mobilne aplikacije. Vsebuje datoteko Skica in Princip, ki jo lahko brezplačno prenesete.
Ta freebie kaže, kako ustvariti prehodi povlecite med zasloni. Toda tudi vi boste videli, kako elementi strani animirajo okoli zaslona v različnih smereh.
4. Animacija menija Hamburger
Ikone hamburgerjev so še vedno bes v mobilnih vmesnikih. Ta menijska ikona freebie prikazuje, kako animirajte ikono s tremi vrsticami v ikono "X".
Je ponavljajoča animacija, tako se tudi "X" animira nazaj v ikono menija hamburgerja. To je odličen freebie, da se naučijo manipulacija vektorjev za elemente uporabniškega vmesnika.
5. Snapster
Ta brezplačen model je za mobilno aplikacijo, imenovano Snapster. Osredotoča se na zaslonu za dobrodošlico / vkrcanje kjer uporabniki lahko vidijo predstavitve aplikacije in se naučijo, kako deluje.
To je PRD datoteka, in na žalost to ne igra lepo z After Effectsom, zato lahko samo uporabniki Principa izkoristijo to.
6. Nalaganje Spinnerjev
Tukaj je AEP After Effects freebie za premični nakladalniki. Te vrste animiranih GIF-ov so postale zelo priljubljene, ko je Ajax prišel v osrednji spletni razvoj.
Zdaj so ti mobilni nakladalniki deset centimetrov in lahko so celo močno prilagojena prilagoditi določene vmesnike. Ta freebie ima datoteko AEP in datoteko Sketch za urejanje vektorjev, če jih želite spremeniti.
7. Predvajanje / začasna prekinitev prehoda
Učinki prehoda pogosto se zdijo zelo preproste, vendar dejansko zahtevajo veliko dela. Animacija predvajanja / pavze, ki jo je ustvaril Alex Pronsky, je odličen primer.
S tem freebie lahko preučite, kako animirati različne ikone tanke črte v oblike in simbole. Ko se boste naučili programa, bo veliko lažje narediti to vrsto stvari, zato vam je na voljo brezplačna uporaba za raziskave.
8. iPhone Mockup
Čeprav ta freebie ne vsebuje neposredno animacije, je namenjena uporabi za produkcijsko delo na aplikacijah iPhone. To je brezplačna datoteka iPhone 5S AEP za uporabo v After Effects kot predlogo za iPhone.
Preprosto uvozite model vmesnika in ustvarite animacije v After Effects. Nato ga lahko priključite v ta iPhone, da ga delite s svojo ekipo.
9. Predloga za iPhone
To je drugo po meri predloge After Effects z bolj sodoben dizajn iPhone. Freebie je na voljo na tej strani na UX in Motion.
Vse v predlogi je zelo lahko prilagodite. Na strani za prenos boste našli tudi razdelek z oznako »Navodila za videoposnetke«, kjer boste izvedeli, kako animirati aplikacijo.
10. Mikro animacija
Tudi najmanjše animacije aplikacij lahko močno vplivajo na uporabniško izkušnjo. Ta freebie prikazuje a Mikro animacija "Like" vsakič, ko uporabnik »objavi«.
Ikona srca ima svojo animacijo s fotografijo profila uporabnika, dodano v kup okusov. Ta freebie je samo za Princip in imate tudi a .mov datoteko za prenos, če želite.
11. Denarnica App
Digitalne denarnice postajajo vse bolj priljubljene in ta freebie olajša načrtovanje. Datoteko Skica dobite z vsemi neobdelanimi elementi vektorja in brezplačno datoteko PRD za animacijo Princip.
To freebie je oblikoval Sergey Bykov kot zabaven projekt ob strani. Vendar pa je lahko zelo vzgojno, če ga ločite in delate z animacijo korak za korakom.
12. iOS stikalo
Z Appleovim iOS 7 je svet dobil sveže oblikovano stikalo za nalepke za vklop / izklop. To je privedlo do številnih različnih učinkov, vključno z brezplačno animacijo, ki posnema izvirno stikalo za vklop / izklop.
V tej datoteki dobite zelo preprost animacijski učinek z osnovnim sproščanjem. Stikalo se premika in ozadje postane zeleno, nato pa se vrne nazaj, ko je stikalo izklopljeno.
13. Ritter App
Tukaj je še en velik freebie, ki ga je izdal Sergey Bykov za to, kar imenuje Ritter App. To vključuje brezplačno datoteko Skica za vektorski vmesnik, skupaj z brezplačno datoteko PRD za animacijo Princip.
Dobili boste veliko različnih animacij v tej freebie, tako da mislim, da bi bilo bolj koristno za srednje-do-napredni oblikovalec. Začetniki se lahko od tega tudi veliko naučijo, vendar imajo lahko strmo krivuljo učenja.
14. Povabite prijatelje
Vsi poznamo in obožujemo plus plus menu Google. No, Jardson Almeida je ustvaril meni Friends Invite na podlagi preprostega koncepta materialnega oblikovanja.
Vse je bilo zasnovano v Sketchu in uvoženo v Princip animacije. Dobite obe datoteki kot freebies za prenos in igrače okoli s.
15. Kartica Swipe
Tukaj je še en splošni prevzem freebie, ki je bil narejen samo za uporabnike načela. To je a vmesnik kartice ustvarjene za diaprojekcije splošnega namena ali uporabniške vmesnike aplikacij.
Mislim, da je to popolna freebie za začetnike, ki pravkar vstopajo v načelo. Ni tako zapleteno, da se boste počutili izgubljeni, vendar ni tako preprosto, da se boste počutili nepomembne.
16. Klepetajte na zemljevidu
Mnogi oblikovalci še vedno uporabljajo Photoshop za vmesnike, kar velja tudi za brezplačne brezplačne pogovore. Prenesete lahko datoteko PSD za vmesnik in datoteko PRD za animacijo Princip.
To je presenetljivo pitna animacija za slog, vendar še vedno izgleda odlično in deluje točno tako, kot bi pričakovali v preprosti aplikaciji zemljevidov / geolokacije..
17. App Loading
Mobilne aplikacije pogosto uporabljajo nakladanje zaslonov obiskovalcem povedati, da se nekaj dogaja v podpornem delu. Ena od mojih najljubših freebies v tej zbirki je ta animacija, ki jo je ustvaril Roman Wagner.
Naloži posamezne elemente en za drugim ko se zaslon za nalaganje konča. Ta animacija je zelo gladka in povsem verodostojna na področju oblikovanja mobilnih aplikacij.
18. Kartice na vozilu
Uporabnik se vkrca je ključni korak za vsako novo mobilno aplikacijo. V tej fazi je vedno lepo vključiti nekatere animacije, zato so lahko te animacije na kartici zelo koristne za oblikovalce aplikacij.
To je ustvaril Austin Baird, in sprosti brezplačno, da se uporabljajo na katerem koli UI / UX projekta.
19. Principi Demos
Ko se boste poglobili v načelo, se boste naučili veliko naprednih tehnik dela. Ena izmed najboljših freebies, da gredo še dlje, je ta ustvarjena za kreativno ekipo Yalantisa.
To je popolnoma brezplačen vir za uporabnike Principa, ki ga lahko prenesejo in igrajo. Zajema nekaj trikov, ki kažejo, kako postati profesionalni animator.
20. Spustni meniji
V spustnih menijih menija pogosto uporabljate noro animacije, ki pritegnejo našo pozornost. Ta brezplačni After Effects uporablja a animacija spustnih stopnic na meniju za posamezne elemente, da se spustijo kot stopnice.
To morda ne bo koristno za vse, vendar je zagotovo odličen način za spoznavanje animacije vmesnika After Effects.
Končne besede
Vsi ti viri so popolnoma brezplačni za nalaganje in igranje s svojimi projekti. Če ste popolnoma novi UX animaciji, vam zagotavljam, da se boste veliko naučili s preučevanjem teh brezplačnih iger. Če poznate druge velike vire, vas v komentarjih lahko spustite.
