20 parasta freebies-ohjelmaa UX Motion Designersille
Käyttöliittymäsuunnittelijat kiinnittävät enemmän huomiota UX-muotoiluun animoiduilla makuilla, jotka emuloivat käyttäjän toimia. Nämä UX-mallit luottaa liikkeeseen animoidut vaikutukset määritellä miten käyttöliittymän tulisi vastata käyttäjän syöttöön.
Useimmat UX-suunnittelijat oppivat käyttämään ohjelmistoja näiden animaatioiden luomiseen. Kaksi suosituinta vaihtoehtoa ovat Adobe After Effects ja Principle (vain OS X). Sinä pystyt suunnitteluliittymän mallit Photoshopin kaltaisessa ohjelmassa ja siirrä käyttöliittymät näihin ohjelmiin animaatiota varten.
Jos olet kiinnostunut oppimaan UX-animaatiota, freebies on valtava voimavara. Voit tutkia muiden työtä ja pelata niiden suunnittelulla nähdäksesi, miten se toimii.
Alla löydät parhaat periaatteet ja AE-käyttäjät UX-liikkeen suunnittelu. He varmasti auttavat sinua ymmärtämään miten UX-animaatio toimii, ja miten rakentaa oma.
1. Poista toiminto
pyyhkäisemällä on hyvin yleinen toimenpide mobiilisovelluksissa eri tarkoituksiin. Oletuksena on oletettu iOS-pyyhkäisytoiminto näyttää vaihtoehtoisia vaihtoehtoja kohteiden muokkaamiseen / poistamiseen, ja se on juuri se, mitä saat tässä ilmaistarjouksessa, jonka on luonut Ramil Derogongun.
Voit ladata ilmaisen AEP-tiedoston After Effects -ohjelmaan ja kokeilla sitä itse. UI seuraa a hyvin yksinkertainen lankaverkkojärjestelmä käyttäjän syötöllä näkyy sininen piste. Tämäntyyppiset käyttäytymismuodot ovat parhaiten näytettävissä animaation kautta koska se antaa kehittäjille mahdollisuuden nähdä miten käyttöliittymä toimii.
2. Widget-pyyhkäisy
Tässä on toinen pyyhkäisevä animoitu maku, joka keskittyy ostoskorin kohteissa diaesityksessä. Leon Wu: n suunnitteleman vapaan pyyhkäisyn animaation mukana tulee PRD-tiedosto, joka on tehty periaatteelle.
Animaatio on äärimmäisen yksinkertainen ja osoittaa, miten kohteet pitäisi liikkua näytöllä kun painetta käytetään. Saat myös tuntuman helpottaa vaikutusta kun pyyhkäisytoiminto vapautetaan.
3. Dualshock-käyttöliittymä
Tässä on uskomattoman dynaaminen UX-animaatiovaikutus, jonka Alexander Boychenko jakaa. Tämä malli perustuu mobiilisovelluksen käyttöliittymän PlayStation-ohjaimeen. Se sisältää Sketch and Principle -tiedoston, jonka voit ladata ilmaiseksi.
Tämä ilmaistarjous näyttää, miten voit luoda siirtymiä pyyhkäise näyttöjen välillä. Mutta näet myös, miten sivuelementit animoivat näytön ympärille eri suuntiin.
4. Hamburger Menu Animation
Hampurilaiset kuvakkeet ovat edelleen kaikki rage mobiililiittymissä. Tämä valikko kuvake ilmaisee, miten animoi kolmipalkkisymboli "X" -kuvakkeeksi.
Se on a toistuva animaatio, "X" myös animoi takaisin hampurilaisvalikkokuvakkeeksi. Tämä on hyvä ilmaistarjous oppia vektorin manipulointi UI-elementtejä varten.
5. Snapster
Tämä ilmainen mockup on tarkoitettu mobiilisovellukselle nimeltä Snapster. Se keskittyy tervetuloa / onboard-näytössä missä käyttäjät näkevät sovelluksen demot ja oppivat, miten se todella toimii.
Se on PRD-tiedosto, ja valitettavasti tämä ei onnistu After Effectsin avulla, joten vain Principle-käyttäjät voivat hyötyä tästä.
6. Ladataan Spinnerit
Tässä on AEP After Effectsin ilmaistarjous mobiililaitteet. Tämäntyyppiset animoidut GIF-levyt tulivat hyvin suosituiksi, kun Ajax teki tiensä mainstream-web-kehitykseen.
Nyt nämä liikkuvat kuormaajat ovat kymmenkunta, ja ne voivat olla jopa voimakkaasti räätälöity sovittaa tiettyjä rajapintoja. Tässä ilmaistarjouksessa on AEP-tiedosto ja Sketch-tiedosto, jonka avulla vektorit voidaan muokata, jos haluat muuttaa niitä.
7. Toista / keskeytä siirtyminen
Siirtymävaiheet näyttävät usein hyvin yksinkertaisilta, mutta vaativat todella hyvää työtä. Tämä Alex Pronskyn tekemä toisto / tauko-animaatio on loistava esimerkki.
Tämän ilmaistarjouksen avulla voit tutkia, miten animoida erilaisia ohuita viivakuvakkeita muotoihin ja symboleihin. Kun olet oppinut ohjelman, se on paljon helpompaa tehdä tällaista tavaraa, joten se auttaa sinua käyttämään freebejä tutkimuksellesi.
8. iPhone Mockup
Vaikka tämä ilmaistarjous ei sisällä suoraan animaatiota, se on tarkoitettu käytettäväksi iPhone-sovellusten tuotantoa varten. Se on ilmainen iPhone 5S AEP-tiedosto käytettäväksi After Effectsissä iPhone-mallina.
Tuo vain käyttöliittymämallisi ja luo animaatioita After Effectsissä. Sitten voit liittää sen tähän iPhone-mockupiin jakamaan tiiminne.
9. iPhone-malli
Tämä on toinen mukautetut After Effects -mallit kanssa nykyaikaisempi iPhone-muotoilu. Ilmaistarjous on saatavilla tällä sivulla osoitteessa UX in Motion.
Kaikki mallissa on erittäin helppo muokata. Lataussivulta löydät myös osion, jonka nimi on "Video-ohjeet", jossa voit oppia, miten animoi sovellus.
10. Mikro-animaatio
Pienimmätkin sovellus-animaatiot voivat vaikuttaa suuresti käyttäjäkokemukseen. Tämä ilmaistarjous näyttää a "Like" mikro-animaatio aina, kun käyttäjä "tykkää" postitse.
Sydän-kuvake on oma animaatio käyttäjän profiilikuva lisättiin tykkipinoon. Tämä ilmaistarjous on vain periaatteelle ja sinulla on myös .mov ladattava tiedosto, jos haluat.
11. Lompakko-sovellus
Digitaaliset lompakot ovat tulossa paljon suositumpia, ja tämä ilmaistarjous helpottaa suunnittelua. Saat Sketch-tiedoston, jossa on kaikki raaka-vektorielementit sekä ilmainen PRD-tiedosto Principle-animaatioon.
Tämän ilmaistarjouksen on suunnitellut Sergei Bykov hauskana sivuprojektina. Mutta se voi olla hyvin koulutuksellinen, jos otat sen erilleen ja työskentelet animaation kanssa vaiheittain.
12. iOS-kytkin
Applen iOS 7: llä maailma sai juuri suunnitellun kytkimen päälle / pois-etiketeille. Tämä johti moniin eri vaikutuksiin, kuten ilmaiseen animaatioon jäljittelee natiivia päälle / pois-kytkintä.
Tässä tiedostossa saat hyvin yksinkertaisen animaatiovaikutuksen, jonka perusparannus on. Kytkin liikkuu yli, ja tausta muuttuu vihreäksi ja palaa sitten, kun kytkin on pois päältä.
13. Ritter-sovellus
Tässä toinen suuri ilmaistarjous, jonka Sergei Bykov julkaisi Ritter-sovellukseksi. Tähän sisältyy ilmainen vektori-liitäntä Sketch-tiedosto sekä vapaa PRD-tiedosto Principle-animaatioon.
Sinä tulet saamaan paljon erilaisia animaatioita tässä ilmaistarjouksessa, joten mielestäni se olisi hyödyllisempi keskitason edistyneelle suunnittelijalle. Aloittelijat voivat myös oppia paljon siitä, mutta heillä voi olla jyrkkä oppimiskäyrä.
14. Kutsu ystäviä
Me kaikki tiedämme ja rakastamme Googlen plus-kuvaketta. No, Jardson Almeida loi Friends Invite -valikon perustuen yksinkertaiseen Material Design -konseptiin.
Kaikki suunniteltiin Sketchissa ja tuotiin animointiperiaatteeseen. Saat molemmat tiedostot ilmaisina ladattaviksi ja leluiksi.
15. Kortin pyyhkäisy
Tässä on toinen yleinen pyyhkäisevä ilmaistarjous, joka on tehty vain periaatteille. Tämä on kortin pyyhkäisyliittymä luotu yleiskäyttöön tarkoitettuihin diaesityksiin tai alkuperäisiin sovellusliittymiin.
Luulen, että tämä on täydellinen ilmaistarjous aloittelijalle, joka vain pääsee periaatteeseen. Se ei ole niin monimutkaista, että sinusta tuntuu kadonneen, mutta se ei ole niin yksinkertaista, että sinusta tuntuu trivialized.
16. Keskustele kartalla
Monet suunnittelijat käyttävät edelleen Photoshopia rajapintoihin, ja tämä pätee myös tämän kartan chat-ilmaistarjoukseen. Voit ladata PSD-tiedoston käyttöliittymälle ja PRD-tiedoston periaatteelle.
Se on yllättävän harhautuva animaatio tyylille, mutta se näyttää silti hyvältä ja toimii juuri sellaisena kuin odotat yksinkertaisissa kartoissa / maantieteellisessä sovelluksessa.
17. Sovelluksen lataaminen
Mobiilisovelluksia käytetään usein näyttöjen lataaminen kertoa kävijöille, että taustalla on jotain. Yksi suosituimmista freebeistä tässä kokoelmassa on Roman Wagnerin luomaa lataus-animaatiota.
Se lataa yksittäisiä elementtejä yksi toisensa jälkeen kun latausnäyttö on päättynyt. Tämä animaatio on erittäin sileä ja täysin uskottava mobiilisovellusten suunnittelussa.
18. Onboarding-kortit
Käyttäjä onboarding on ratkaiseva vaihe jokaiselle uudelle mobiilisovellukselle. On aina mukavaa sisällyttää joitakin animaatioita tässä vaiheessa, siksi nämä onboarding-animaatiot voivat olla erittäin hyödyllisiä sovellusten suunnittelijoille.
Tämän loi Austin Baird, ja se julkaistiin ilmaiseksi käytettäväksi mihin tahansa UI / UX-projektiin.
19. Periaatteet Demot
Kun kaadatte periaatteeseen, opit paljon kehittyneitä työnkulun tekniikoita. Yksi parhaista freebeistä on pidempi Yalantis-luova tiimi.
Tämä on täysin ilmainen resurssi käyttäjille, jotka voivat ladata ja pelata. Se kattaa muutamia temppuja, jotka osoittavat, miten voit tulla Pro-animaation ammattilaiseksi.
20. Pudotusvalikot
Valikon pudotusvalikoissa käytetään usein hulluja animaatioita kiinnittääksemme huomiomme. Tämä After Effects-ilmaistarjous käyttää a pudotusportaiden animaatio yksittäisten elementtien valikossa, jotta ne pudottaisivat kuin portaat.
Tämä ei ehkä ole hyödyllinen kaikille, mutta se on varmasti hyvä tapa oppia After Effects -liitännän animaatiosta.
Lopulliset sanat
Kaikki nämä resurssit ovat täysin vapaasti ladattavissa ja leluina omissa projekteissasi. Jos olet UX-animaation uusi, taaten, että opit paljon oppimalla näitä ilmaistarjouksia. Jos tiedät muita suuria resursseja, voit pudottaa linkkejä kommentteihin.
