20 Best Freebies for Aspiring UX Motion Designers

Grensesnitt designere tar større interesse for UX design med animerte mockups som etterligner brukerhandlinger. Disse UX mockups stole på bevegelse med animerte effekter for å definere hvordan et grensesnitt skal svare på brukerinngang.

De fleste UX-designere lærer å bruke programvare for å lage disse animasjonene. De to mest populære valgene er Adobe After Effects and Principle (kun OS X). Du kan design grensesnitt mockups i et program som Photoshop, og flytt brukergrensesnittene til disse programmene for animasjon.

Hvis du er interessert i å lære UX-animasjon, vil freebies bli et enormt aktivum. Du kan studere andres arbeid, og leke med deres design for å se hvordan alt fungerer.

Nedenfor finner du de beste freebies for Principle and AE brukere bare komme inn i UX-bevegelsesdesign. De vil sikkert hjelpe deg å forstå hvordan UX-animasjon fungerer, og hvordan du bygger din egen.

1. Slett handling

sveipe er en svært vanlig handling i mobile apps for ulike formål. Standard iOS swipe-handlingen er vant til Vis alternativer for redigering / sletting av elementer, og det er akkurat det du får i denne freebie laget av Ramil Derogongun.

Du kan laste ned den gratis AEP-filen for After Effects, og prøve den selv. Brukergrensesnittet følger a veldig grunnleggende wireframe-skjema med brukerinngang vises som en blå prikk. Disse typer brukeradferd er det beste som skal vises gjennom animasjon fordi det gir utviklere en sjanse til å se hvordan grensesnittet skal fungere.

2. Widget Swipe

Her er en annen sveipe animert mockup som fokuserer på handlekurv i en lysbildefremvisning. Designet av Leon Wu, kommer denne gratis swipe animasjonen med en PRD-fil som er laget for prinsipp.

Animasjonen er ekstremt enkel, og viser hvordan elementer skal bevege seg på skjermen når trykk påføres. Du får også en følelse for lettelse effekt når sveipingen utløses.

3. Dualshock brukergrensesnitt

Her er en utrolig dynamisk UX-animasjonseffekt delt av Alexander Boychenko. Denne mockupen er basert på PlayStation Controller for en mobil app-brukergrensesnitt. Den inneholder en Sketch and Principle-fil som du kan laste ned gratis.

Denne freebie viser hvordan du oppretter overganger som sveip mellom skjermene. Men du får også se hvordan sideelementer animerer rundt på skjermen i forskjellige retninger.

4. Hamburger Meny Animasjon

Hamburger-ikoner er fortsatt alle raseri i mobile grensesnitt. Dette menyikonet freebie demonstrerer hvordan animer trebarikonet i et "X" -ikon.

Det er en gjentatt animasjon, så "X" animerer også tilbake til et hamburger menyikon. Dette er en flott freebie å lære om vektormanipulering for grensesnittelementer.

5. Snapster

Denne gratis mockupen er for en mobil app kalt Snapster. Det fokuserer på velkomst / onboard-skjermen hvor brukere kan se demoer av appen, og lære hvordan det egentlig fungerer.

Det er en PRD-fil, og dessverre virker dette ikke bra med After Effects, så bare prinsippbrukere kan dra nytte av denne.

6. Laster spinnere

Her er en AEP After Effects freebie for mobil lastespinnere. Disse typer animerte GIF ble svært populære da Ajax gjorde sin vei inn i vanlig webutvikling.

Nå er disse mobillasterne en dime et dusin, og de kan til og med være tungt tilpasset for å passe til visse grensesnitt. Denne freebie kommer med en AEP-fil og en Sketch-fil for å redigere vektorene hvis du vil endre dem.

7. Spill / pause overgang

Overgangseffekter Det virker ofte veldig enkelt, men faktisk krever en god del arbeid. Denne avspillings / pause animasjonen opprettet av Alex Pronsky er et godt eksempel.

Med denne freebie kan du undersøke hvordan du kan animere forskjellige tynne linjepikoner inn i former og symboler. Når du har lært programmet, blir det mye lettere å gjøre denne typen ting, så det hjelper å få freebies til din disposisjon for forskning.

8. iPhone Mockup

Mens denne freebie ikke direkte inneholder animasjon, er det ment å bli brukt for produksjonsarbeid på iPhone-applikasjoner. Det er en gratis iPhone 5S AEP-fil for bruk i After Effects som en iPhone-mal.

Bare importer ditt grensesnitt mockup, og opprett animasjonene i After Effects. Deretter kan du koble den til denne iPhone-mockupen for å dele med teamet ditt.

9. iPhone mal

Dette er en annen tilpasset Etter Effects-mal med en mer moderne iPhone design. Freebie er tilgjengelig fra denne siden på UX in Motion.

Alt i malen er super lett å tilpasse. På nedlastingssiden finner du også en seksjon merket "Videoinstruksjoner" der du kan lære å animere appen.

10. Micro Animation

Selv de minste app animasjonene kan gi stor innvirkning på brukeropplevelsen. Denne freebie viser en "Like" mikroanimasjon når en bruker "liker" et innlegg.

Hjertikonet har sin egen animasjon med brukerens profilbilde lagt til stabelen av liker. Denne freebie er bare for prinsipp, og du har også en .mov fil å laste ned hvis du ønsker det.

11. Wallet App

Digitale lommebøker blir mye mer populære, og denne freebie gjør det enklere å designe en. Du får en Sketch-fil med alle de raske vektorelementene, pluss en gratis PRD-fil for prinsipp animasjon.

Denne freebie ble designet av Sergey Bykov som et morsomt lite sideprosjekt. Men det kan være veldig lærerikt hvis du tar det fra hverandre, og jobber med animasjonen trinn for trinn.

12. IOS Switch

Med Apples iOS 7 har verden fått en nyskapet bryter for på / av-etiketter. Dette førte til mange forskjellige effekter, inkludert en gratis animasjon som etterligner den innkommende på / av-bryteren.

I denne filen får du en veldig enkel animasjonseffekt med en enkel lettelse. Bryteren beveger seg over, og bakgrunnen blir grønn, og vender tilbake når bryteren er slått av.

13. Ritter App

Her er en annen flott freebie utgitt av Sergey Bykov for det han kaller Ritter App. Dette inkluderer en gratis Sketch-fil for vektorgrensesnittet, sammen med en gratis PRD-fil for prinsipp animasjonen.

Du vil få mange forskjellige animasjoner i denne freebie, så jeg tror det ville være mer nyttig for en mellom-til-avansert designer. Nybegynnere kan lære mye av det også, men kan ha en bratt læringskurve.

14. Inviter venner

Vi vet alle og elsker pluss-ikonet flyout-menyen av Google. Vel, Jardson Almeida opprettet en Friends Invite-meny basert på et enkelt Material Design-konsept.

Alt var designet i Sketch, og importert til prinsipp for animasjon. Du får begge filene som freebies å laste ned og leke rundt med.

15. Kortkutt

Her er en annen generell swiping-freebie laget kun for prinsippbrukere. Dette er en kort swipe grensesnitt opprettet for generelle lysbildefremvisninger eller opprinnelige app-brukergrensesnitt.

Jeg tror dette er den perfekte freebie for en nybegynner som bare kommer inn i prinsipp. Det er ikke så komplisert at du vil føle seg fortapt, men det er ikke så enkelt at du vil føle deg trivialisert.

16. Chat på kart

Mange designere bruker fortsatt Photoshop for grensesnitt, og det gjelder også for denne kortspratfreeen. Du kan laste ned en PSD-fil for grensesnittet, og en PRD-fil for prinsipp animasjonen.

Det er en overraskende tam animasjon for stilen, men det ser fortsatt flott ut og fungerer akkurat som du ville forvente i et enkelt kart / geolocation-app.

17. App Loading

Mobilapper bruker ofte laster skjermer for å fortelle besøkende at noe skjer i backend. En av mine favorittfribere i denne samlingen er denne laste animasjonen laget av Roman Wagner.

Det laster individuelle elementer en etter en når lasteskjermen er ferdig. Denne animasjonen er veldig jevn, og helt troverdig i rike av mobilappdesign.

18. Onboarding Kort

Bruker på bordet er et viktig skritt for alle nye mobile applikasjoner. Det er alltid hyggelig å ta med noen animasjoner på dette stadiet, derfor kan disse onboarding kort animasjonene være svært nyttige for app designere.

Dette ble opprettet av Austin Baird, og utgitt gratis for å bli brukt på alle UI / UX-prosjekter.

19. Prinsipp Demoer

Som du dyper videre til prinsippet, lærer du mange avanserte arbeidsflytteknikker. En av de beste freebies å gå videre er dette laget for Yalantis kreative team.

Dette er en helt gratis ressurs for prinsippbrukere å laste ned og spille med. Den dekker et par triks som viser hvordan man kan bli et proffs ved prinsipp animasjon.

20. Dropdown Menyer

Meny dropdowns bruker ofte galne animasjoner for å fange vår oppmerksomhet. Denne After Effects-freebie bruker a dropdown trapper animasjon på menyen for individuelle elementer for å få dem til å falle som trapper.

Dette kan ikke være nyttig for alle, men det er absolutt en fin måte å lære om After Effects-grensesnitt animasjon.

Endelige ord

Alle disse ressursene er helt gratis å laste ned og leke med i dine egne prosjekter. Hvis du er helt ny på UX-animasjon, garanterer jeg at du lærer mye ved å studere disse freebies. Hvis du vet noen andre gode ressurser, vær så snill å slippe koblinger i kommentarene.