20 Bedste Freebies for Aspiring UX Motion Designers
Interface designere tager en større interesse for UX design med animerede mockups, der efterligner bruger handlinger. Disse UX mockups stole på bevægelse med animerede effekter til at definere hvordan en grænseflade skal reagere på brugerens input.
De fleste UX-designere lærer at bruge software til at oprette disse animationer. De to mest populære valg er Adobe After Effects and Principle (kun OS X). Du kan design interface mockups i et program som Photoshop, og flyt brugergrænsefladerne til disse programmer til animation.
Hvis du er interesseret i at lære UX animation, så bliver freebies et enormt aktiv. Du kan studere andres arbejde og spille med deres designs for at se, hvordan det hele virker.
Nedenfor finder du de bedste freebies for Principle and AE brugere bare komme ind i UX motion design. De vil helt sikkert hjælpe dig med at forstå hvordan UX animation fungerer, og hvordan man konstruerer dit eget.
1. Slet handling
aflæse er en meget almindelig handling i mobile apps til forskellige formål. Standard iOS swipe-handling bruges til Vis alternative muligheder for redigering / sletning af elementer, og det er præcis det, du får i denne freebie oprettet af Ramil Derogongun.
Du kan downloade den gratis AEP-fil til After Effects, og prøve det selv. Brugergrænsefladen følger a meget grundlæggende wireframe-skema med brugerindgang vises som en blå prik. Disse typer brugeradfærd er de bedste, der skal vises gennem animation fordi det giver udviklere en chance for at se hvordan grænsefladen skal fungere.
2. Widget Swipe
Her er et andet strejf animeret mockup, der fokuserer på kurvobjekter i et diasshow. Designet af Leon Wu, leveres denne gratis swipe-animation med en PRD-fil, som er lavet til Principle.
Animationen er ekstremt enkel, og viser hvordan elementer skal bevæge sig på skærmen når der påtrykkes tryk. Du får også en fornemmelse for lette effekt når svejseprocessen frigives.
3. Dualshock UI
Her er en utrolig dynamisk UX animation effekt delt af Alexander Boychenko. Denne mockup er baseret på PlayStation Controller til en mobil app-brugergrænseflade. Den indeholder en Sketch and Principle-fil, som du kan downloade gratis.
Denne freebie viser hvordan man skaber overgange det skub mellem skærme. Men du får også se, hvordan sideelementer animerer rundt om skærmen i forskellige retninger.
4. Hamburger Menu Animation
Hamburger ikoner er stadig alle raseri i mobile grænseflader. Dette menupunkt freebie demonstrerer, hvordan man skal animere ikonet med tre bjælker i et "X" -ikon.
Det er en gentagende animation, så "X" animerer også tilbage til et hamburger menuikon. Dette er en fantastisk freebie at lære om vektor manipulation for UI elementer.
5. Snapster
Denne gratis mockup er til en mobil app kaldet Snapster. Det fokuserer på velkomst / onboarding skærmen hvor brugerne kan se demoer fra appen og lære, hvordan det rent faktisk virker.
Det er en PRD-fil, og det synes desværre ikke godt med After Effects, så kun principielle brugere kan nyde godt af denne.
6. Indlæsning af spinnere
Her er en AEP After Effects freebie for mobil loading spinners. Disse typer af animerede GIF'er blev meget populære, da Ajax fik sin vej til mainstream webudvikling.
Nu er disse mobile læsere en dime et dusin, og de kan endda være stærkt tilpasset at passe visse grænseflader. Denne freebie leveres med en AEP-fil og en Sketch-fil for at redigere vektorerne, hvis du vil ændre dem.
7. Afspil / Pause Overgang
Overgangseffekter synes ofte meget simpelt, men kræver faktisk en god mængde arbejde. Denne afspilning / pause animation lavet af Alex Pronsky er et godt eksempel.
Med denne freebie kan du undersøge, hvordan du animerer forskellige tynde linjepiktogrammer ind i figurer og symboler. Når du har lært programmet, bliver det meget nemmere at gøre denne type ting, så det hjælper med at få gratisbøger til din rådighed for forskning.
8. iPhone Mockup
Mens denne freebie ikke direkte indeholder animation, er det meningen at blive brugt til produktionsarbejde på iPhone applikationer. Det er en gratis iPhone 5S AEP-fil til brug i After Effects som en iPhone-skabelon.
Du skal blot importere din interface mockup og oprette animationerne i After Effects. Så kan du tilslutte det til denne iPhone mockup for at dele med dit team.
9. iPhone skabelon
Dette er en anden skræddersyede After Effects-skabelon med en mere moderne iPhone design. Freebie er tilgængelig fra denne side på UX in Motion.
Alt i skabelonen er super let at tilpasse. På download siden finder du også en sektion mærket "Videoinstruktioner", hvor du kan lære at animere appen.
10. Micro Animation
Selv de mindste app animationer kan få stor indflydelse på brugeroplevelsen. Denne freebie viser en "Som" mikroanimation når en bruger "kan lide" et indlæg.
Hjertikonet har sin egen animation med brugerens profilbillede tilføjet til stakken af lignende. Denne freebie er kun for princippet, og du har også en .mov fil til download, hvis du ønsker det.
11. Wallet App
Digitale tegnebøger bliver meget mere populære, og denne freebie gør det lettere at designe en. Du får en Sketch-fil med alle de rå vektorelementer, plus en gratis PRD-fil til Principal animation.
Denne freebie blev designet af Sergey Bykov som et sjovt lille sideprojekt. Men det kan være meget pædagogisk, hvis du tager det fra hinanden, og arbejder med animationen trin for trin.
12. IOS Switch
Med Apples iOS 7 fik verden en frisk designet switch til on / off etiketter. Dette førte til mange forskellige effekter, herunder en gratis animation som efterligner den indbyggede tænd / sluk-knap.
I denne fil får du en meget simpel animationseffekt med en grundlæggende lettelse. Omskifteren bevæger sig over, og baggrunden bliver grøn, og vender tilbage, når kontakten er slukket.
13. Ritter App
Her er en anden stor freebie udgivet af Sergey Bykov for hvad han kalder Ritter App. Dette inkluderer en gratis Sketch-fil til vektorgrænsefladen, sammen med en gratis PRD-fil til princippens animation.
Du får det en masse forskellige animationer i denne freebie, så jeg synes det ville være mere nyttigt for en mellemliggende til avanceret designer. Begyndere kan også lære meget af det, men kan have en stejl indlæringskurve.
14. Inviter venner
Vi kender alle og elsker plus-ikonet fly-menuen til Google. Nå lavede Jardson Almeida en Friends Invite menu baseret på et simpelt Material Design koncept.
Alt var designet i Sketch, og importeret til Princip for animation. Du får begge filer som freebies for at downloade og legetøj med.
15. Kort swipe
Her er en anden generel swiping freebie kun lavet til Principle brugere. Dette er en kort swipe interface oprettet til slideshows med generelle formål eller indbyggede app-brugergrænseflader.
Jeg synes, det er den perfekte freebie for en nybegynder, der bare kommer ind i princippet. Det er ikke så kompliceret, at du vil føle dig fortabt, men det er ikke så simpelt, at du vil føle dig trivialiseret.
16. Chat på kort
Mange designere bruger stadig Photoshop til grænseflader, og det gælder også for denne kort chat-freebie. Du kan downloade en PSD-fil til grænsefladen og en PRD-fil til Principle animationen.
Det er en overraskende tæppe animation til stilen, men det ser stadig godt ud og fungerer nøjagtigt som du ville forvente i et simpelt kort / geolocation-app.
17. App Loading
Mobil apps bruger ofte indlæser skærme at fortælle besøgende, at der sker noget i bagenden. En af mine foretrukne freebies i denne samling er denne loading animation skabt af Roman Wagner.
Det laster individuelle elementer den ene efter den anden når indlæsningsskærmen er færdig. Denne animation er meget glat og helt troværdig inden for rammerne af mobilappdesign.
18. Onboarding Kort
Bruger på bordet er et afgørende skridt for alle nye mobile applikationer. Det er altid rart at medtage nogle animationer på dette tidspunkt, derfor kan disse onboarding kort animationer være meget nyttige for app designere.
Dette blev oprettet af Austin Baird, og frigivet gratis til at blive brugt på ethvert UI / UX-projekt.
19. Princip Demos
Som du dykker videre ind i princippet, lærer du en masse avancerede workflow teknikker. En af de bedste freebies at gå videre er denne skabt til Yalantis kreative team.
Dette er en helt gratis ressource for Princippet brugere at downloade og lege med. Det dækker et par tricks, der viser, hvordan man bliver et proffs ved Principal animation.
20. Dropdown Menuer
Menu dropdowns bruger ofte skøre animationer til at fange vores opmærksomhed. Denne After Effects freebie bruger a dropdown trapper animation på menuen for individuelle elementer for at få dem til at falde som trapper.
Dette kan ikke være nyttigt for alle, men det er helt sikkert en fantastisk måde at lære om After Effects interface animation.
Endelige Ord
Alle disse ressourcer er helt gratis at downloade og legetøj med i dine egne projekter. Hvis du er helt ny til UX-animation, garanterer du, at du vil lære meget ved at studere disse freebies. Hvis du kender andre gode ressourcer, er du velkommen til at droppe links i kommentarerne.
