20 geriausių nemokamų „UX Motion“ dizainerių
Sąsajų dizaineriai domisi UX dizainu su animuotais maketais, kurie imituoja vartotojo veiksmus. Šie UX modeliai pasikliauti judesiu su animuotais efektais kaip sąsaja turėtų reaguoti į vartotojo įvestį.
Dauguma UX dizainerių išmoksta naudoti programinę įrangą, kad sukurtų šias animacijas. Du populiariausi pasirinkimai yra „Adobe After Effects“ ir „Principle“ (tik OS X). Tu gali dizaino sąsajos maketai programoje, pavyzdžiui, „Photoshop“, ir perkelkite UI į šias programas animacijai.
Jei domitės išmokti UX animaciją, tada nemokami žaidimai bus didžiulis turtas. Galite studijuoti kitų darbą ir žaisti su savo dizainu, kad pamatytumėte, kaip visa tai veikia.
Žemiau rasite geriausius „Principle“ ir „AE“ naudotojų nemokamus „freebies“ patekti į UX judesio dizainą. Jie tikrai padės jums suprasti kaip veikia UX animacija, ir kaip sukurti savo.
1. Ištrinkite veiksmą
Swiping yra labai dažnas veiksmas mobiliosiose programose įvairiems tikslams. Naudojamas numatytasis iOS braukimo veiksmas rodyti alternatyvias elementų redagavimo / ištrynimo parinktis, ir tai būtent tai, ką gausite šioje „Ramil Derogongun“ sukurtoje nemokama.
Galite atsisiųsti nemokamą „AEP“ failą „After Effects“ ir išbandyti jį patys. UI seka a labai paprasta vielos schema vartotojas įvestas kaip mėlynas taškas. Šie naudotojų elgesio tipai yra geriausi rodomi per animaciją nes suteikia kūrėjams galimybę pamatyti kaip sąsaja turėtų veikti.
2. Valdiklio slinkimas
Štai dar vienas braukimas animuotu maketu, kuris sutelktas į krepšelio elementus skaidrių peržiūroje. Sukurta Leon Wu, ši laisva braukimo animacija yra su PRD failu, kuris yra sukurtas principui.
Animacija yra labai paprasta ir rodo, kaip elementai turėtų judėti ekrane kai naudojamas slėgis. Jūs taip pat gausite jausmą palengvinti poveikį kai išjungiamas braukimo veiksmas.
3. Dualshock UI
Čia yra neįtikėtinai dinamiškas UX animacinis efektas, kurį dalijasi Aleksandras Boychenko. Šis maketas pagrįstas „PlayStation“ valdikliu, skirtu mobiliosios programos vartotojo sąsajai. Jame yra failo „eskizas ir principas“, kurią galite atsisiųsti nemokamai.
Ši nemokama paroda rodo, kaip sukurti perėjimus braukite tarp ekranų. Bet jūs taip pat pamatysite, kaip ekrano elementai animuojami įvairiomis kryptimis.
4. Hamburgerio meniu animacija
„Hamburger“ piktogramos vis dar yra mobiliųjų sąsajų pyktis. Ši meniu piktograma rodo, kaip animuoti trijų juostų piktogramą į „X“ piktogramą.
Tai yra kartoti animaciją, todėl „X“ taip pat atkuria hamburgerio meniu piktogramą. Tai yra puiki nemokama dovanėlė, apie kurią sužinoti vektoriaus manipuliacija UI elementams.
5. Snapster
Šis nemokamas maketas skirtas mobiliajai programai „Snapster“. Jame pagrindinis dėmesys skiriamas ekrane kur vartotojai gali matyti programos demonstracijas ir sužinoti, kaip jis veikia.
Tai PRD failas, ir, deja, tai nepavyksta gražiai su „After Effects“, todėl tiktai „Principės“ naudotojai gali pasinaudoti šia.
6. Įkėlimas Spinners
Čia yra „AEP After Effects“ nemokamų dovanų mobilūs įkrovikliai. Tokie animaciniai GIF tipai tapo labai populiarūs, kai „Ajax“ įsijungė į pagrindinį interneto kūrimą.
Dabar šie mobilieji krautuvai yra dešimtukas, ir jie netgi gali būti labai pritaikyta pritaikyti tam tikras sąsajas. Ši nemokama dovanėlė ateina su AEP failu ir „Sketch“ failu, jei norite redaguoti vektorius, jei norite juos keisti.
7. Paleisti / pristabdyti perėjimą
Pereinamojo laikotarpio poveikis dažnai atrodo labai paprasta, bet iš tikrųjų reikia gero darbo. Šis „Alex Pronsky“ sukurtas grojimo / pauzės animacija yra puikus pavyzdys.
Naudodami šį nemokamą dovaną galite ištirti, kaip animuoti įvairias plonas linijos piktogramas į formas ir simbolius. Kai sužinosite programą, tai bus daug lengviau atlikti šio tipo daiktus, todėl padeda jums laisvai naudotis moksliniais tyrimais..
8. „iPhone“ maketas
Nors ši nemokama reklama tiesiogiai neturi animacijos, ji skirta naudoti „iPhone“ programų gamybai. Tai nemokamas „iPhone 5S AEP“ failas, skirtas naudoti „After Effects“ kaip „iPhone“ šabloną.
Tiesiog importuokite sąsajos maketą ir sukurkite animacijas „After Effects“. Tada galite jį prijungti prie šio „iPhone“ maketo, kad galėtumėte pasidalinti su savo komanda.
9. „iPhone“ šablonas
Tai dar vienas „Custom After Effects“ šablonas su modernesnis iPhone dizainas. Laisvas žaidimas yra prieinamas šiame puslapyje „UX in Motion“.
Viskas šablone yra labai lengva pritaikyti. Atsisiuntimo puslapyje taip pat rasite skyrių, pavadintą „Vaizdo nurodymai“, kur galite sužinoti, kaip suaktyvinti programą.
10. Mikro animacija
Net mažiausios programos animacijos gali daryti didelę įtaką naudotojų patirčiai. Ši nemokama paroda rodo a "Kaip" mikro animacija kai vartotojas „mėgsta“ įrašą.
Širdies piktograma turi savo animaciją su naudotojo profilio nuotrauka, pridėta prie mėgstamiausių. Ši nemokama yra tik principas ir jūs taip pat turite .mov failą, jei norite.
11. „Piniginės“ programa
Skaitmeninės piniginės tampa vis populiaresnės, o tai nemokama. Gaunate eskizo failą su visais neapdorotais vektoriniais elementais ir nemokamą PRD failą, skirtą pagrindiniam animavimui.
Šį nemokamą dovaną sukūrė Sergejus Bykovas kaip įdomus mažas šalutinis projektas. Bet tai gali būti labai švietėjiška, jei ją išskiriate ir dirbate su animacija žingsnis po žingsnio.
12. iOS jungiklis
Su „Apple“ iOS 7, pasaulis gavo naujai suprojektuotą jungiklį, skirtą įjungti / išjungti etiketes. Tai lėmė daugybę skirtingų efektų, įskaitant nemokamą animaciją imituoja vietinį įjungimo / išjungimo jungiklį.
Šiame faile gausite labai paprastą animacijos efektą su pagrindiniu palengvinimu. Jungiklis persijungia, o fonas tampa žalias, tada grįžta atgal, kai jungiklis yra išjungtas.
13. „Ritter“ programa
Štai dar vienas puikus laisvalaikis, išleistas Sergejus Bykovas už tai, ką jis vadina „Ritter App“. Tai apima nemokamą „Vizito“ failą vektoriaus sąsajai ir nemokamą PRD failą pagrindiniam animavimui.
Jūs gausite daug įvairių animacijų šiame nemokamajame rinkinyje, taigi, manau, kad būtų naudingiau vidutinio ir pažangaus dizainerio. Pradedantiesiems taip pat gali daug išmokti, bet gali turėti stiprią mokymosi kreivę.
14. Pakvieskite draugus
Visi žinome ir mylime „Google“ pliuso piktogramą. Na, Jardonas Almeida sukūrė „Draugų pakvietimo“ meniu pagal paprastą medžiagos dizaino koncepciją.
Viskas buvo suprojektuota pagal eskizą ir importuota į animacijos principą. Jūs gausite abu failus kaip nemokamus parsisiuntimus ir žaislus.
15. Kortelės braukimas
Štai dar vienas bendras svyravimas, skirtas tik pagrindiniams naudotojams. Tai yra kortelės braukimo sąsaja sukurta bendrosios paskirties skaidrių demonstravimui arba vietinėms programų UI.
Manau, kad tai yra puikus nemokamųjų žaidėjų už pradedantiesiems, kurie tiesiog patenka į principą. Tai nėra taip sudėtinga, kad pajusite prarastą, tačiau tai nėra taip paprasta, kad jausitės trivializuota.
16. Pokalbis žemėlapyje
Daugelis dizainerių vis dar naudoja „Photoshop“ sąsajoms, ir tai taip pat pasakytina apie šio žemėlapio pokalbių nemokamą dovaną. Galite atsisiųsti PSD failą sąsajai ir PRD failą, skirtą pagrindinei animacijai.
Tai stulbinantis stiliaus animacija, tačiau jis vis dar atrodo puikiai ir veikia taip, kaip tikitės paprastuose žemėlapiuose / geografinės vietovės programoje.
17. Programų įkėlimas
Dažnai naudojamos mobiliosios programos įkeliami ekranai pasakyti lankytojams, kad kažkas vyksta backend. Vienas iš mano mėgstamiausių nemokamų žaidimų šioje kolekcijoje - tai Roman Wagner sukurta įkėlimo animacija.
Jis įkelia atskirus elementus vienas po kito baigus pakrovimo ekraną. Ši animacija yra labai sklandi ir visiškai patikima mobiliųjų programų dizaino srityje.
18. Borto kortelės
Vartotojas įjungtas yra svarbus žingsnis kiekvienai naujai mobiliai programai. Šiame etape visada malonu įtraukti kai kurias animacijas, todėl šios onboarding animacijos gali būti labai naudingos programuotojams.
Tai sukūrė Austin Baird ir išleido nemokamai, kad būtų galima naudoti bet kuriame UI / UX projekte.
19. Principai Demos
Toliau gilindami į principą, sužinosite daug pažangių darbo eigos metodų. Vienas iš geriausių nemokamų žaidimų - tai sukurtas Yalantis kūrybinei komandai.
Tai visiškai nemokama priemonė, skirta „Principle“ vartotojams atsisiųsti ir žaisti. Jis apima keletą triukų, rodančių, kaip tapti pagrindinio animacijos pro.
20. Išskleidžiamieji meniu
Meniu išskleidžiamajame meniu dažnai naudojami beprotiški animacijos, kad užfiksuotų mūsų dėmesį. Šis „After Effects“ nemokamų žaidimų rinkinys naudoja a išskleidžiamųjų laiptų animacija atskirų elementų meniu, kad jie taptų panašūs į laiptus.
Tai gali būti naudinga ne visiems, bet tai tikrai puikus būdas sužinoti apie „After Effects“ sąsajos animaciją.
Galutiniai žodžiai
Visi šie ištekliai yra visiškai laisvi atsisiųsti ir žaisti su savo projektais. Jei esate visiškai nauji UX animacijai, galiu garantuoti, kad jūs daug išmoksite studijuodami šiuos nemokamus žaidimus. Jei žinote kokių nors kitų didelių išteklių, nedvejodami atsisakykite nuorodų į komentarus.
