20 bästa freebies för attraktiva UX Motion Designers

Gränssnittsdesigners tar större intresse för UX-design med animerade mockups som efterliknar användaråtgärder. Dessa UX mockups lita på rörelse med animerade effekter för att definiera hur ett gränssnitt ska svara på användarens inmatning.

De flesta UX-designers lär sig att använda programvara för att skapa dessa animeringar. De två mest populära valen är Adobe After Effects and Principle (endast OS X). Du kan design gränssnitt mockups i ett program som Photoshop, och flytta gränssnittet till dessa program för animering.

Om du är intresserad av att lära dig UX-animering, blir freebies en enorm tillgång. Du kan studera andras arbete och leka med sina mönster för att se hur allt fungerar.

Nedan hittar du de bästa freebiesna för Principle and AE-användare bara komma in i UX rörelse design. De kommer säkert att hjälpa dig att förstå hur UX-animering fungerar, och hur man konstruerar din egen.

1. Ta bort åtgärd

svepa är en mycket vanlig åtgärd i mobilappar för olika ändamål. Den vanliga iOS-swipe-åtgärden används till visa alternativa alternativ för redigering / radering av objekt, och det är precis vad du får i den här freebie skapad av Ramil Derogongun.

Du kan ladda ner den fria AEP-filen för After Effects, och prova själv. Användargränssnittet följer a väldigt grundläggande wireframe-system med användarinmatning som en blå punkt. Dessa typer av användarbeteenden är de bästa som ska visas genom animering eftersom det ger utvecklare en chans att se hur gränssnittet ska fungera.

2. Widget Swipe

Här är en annan svep animerad mockup som fokuserar på kundvagnsposter i ett bildspel. Designad av Leon Wu, kommer denna gratis swipe animation med en PRD-fil som är gjord för Principle.

Animeringen är extremt enkel och visar hur objekt ska flyttas på skärmen när tryck appliceras. Du får också en känsla för lätta effekten när svepverkan släpps.

3. Dualshock UI

Här är en otroligt dynamisk UX-animeringseffekt som delas av Alexander Boychenko. Den här mockupen är baserad på PlayStation Controller för en mobilappgränssnitt. Den innehåller en Sketch and Principle-fil som du kan ladda ner gratis.

Denna freebie visar hur man skapar övergångar som dra mellan skärmarna. Men du får också se hur sidelementen animerar runt skärmen i olika riktningar.

4. Hamburger Meny Animation

Hamburger-ikoner är fortfarande allt raseri i mobila gränssnitt. Denna menyikon freebie visar hur man ska animera ikonen med tre linjer i en "X" -ikonen.

Det är en upprepa animering, så "X" animerar också tillbaka till en hamburger menyikon. Detta är en bra freebie att lära sig om vektor manipulering för UI-element.

5. Snapster

Denna gratis mockup är en mobilapp som heter Snapster. Det fokuserar på välkommen / onboarding-skärmen där användarna kan se demos av appen och lära sig hur det fungerar.

Det är en PRD-fil, och tyvärr spelar det inte bra med After Effects, så bara principiella användare kan dra nytta av den här.

6. Ladda spinnare

Här är en AEP After Effects freebie för mobila lastspinnare. Dessa typer av animerade GIF-filer blev väldigt populära när Ajax gick in i den vanliga webbutvecklingen.

Nu är dessa mobila lastare ett dussin ett dussin, och de kan även vara kraftigt anpassad för att passa vissa gränssnitt. Denna freebie kommer med en AEP-fil och en Sketch-fil för att redigera vektorerna om du vill ändra dem.

7. Spela upp / pausa övergången

Övergångseffekter verkar ofta mycket enkelt men kräver faktiskt en bra mängd arbete. Denna uppspelning / paus animering skapad av Alex Pronsky är ett bra exempel.

Med den här freebie kan du undersöka hur man kan animera olika tunna linjepictogram in i former och symboler. När du väl har läst programmet blir det mycket lättare att göra den här typen av saker, så det hjälper dig att ha gratisbehållare till ditt förfogande för forskning.

8. iPhone Mockup

Medan denna freebie inte direkt innehåller animering, är det tänkt att användas för produktionsarbete på iPhone-applikationer. Det är en gratis iPhone 5S AEP-fil för användning i After Effects som en iPhone-mall.

Importera enkelt gränssnittsmockupen och skapa animationerna i After Effects. Då kan du ansluta den till denna iPhone mockup för att dela med ditt team.

9. iPhone mall

Detta är en annan anpassad After Effects-mall med en mer modern iPhone design. Freebie är tillgänglig från denna sida på UX in Motion.

Allt i mallen är super lätt att anpassa. På hämtningssidan hittar du också en sektion med etiketten "Videoinstruktioner" där du kan lära dig hur du animerar appen.

10. Mikro Animation

Även de minsta appanimationerna kan få stor inverkan på användarupplevelse. Denna freebie visar en "Gilla" mikroanimering när en användare "gillar" ett inlägg.

Hjärtikonet har sin egen animering med användarens profilfoto lagt till i stacken av likes. Denna freebie är endast för Princip och du har också en .mov fil att ladda ner om du vill.

11. Wallet App

Digital plånböcker blir mycket mer populära, och den här freebie gör det enklare att designa en. Du får en Sketch-fil med alla råa vektorelement, plus en gratis PRD-fil för Principal animation.

Denna freebie designades av Sergey Bykov som ett roligt litet sidoprojekt. Men det kan vara väldigt pedagogiskt om du tar det ifrån varandra och jobbar med animationen steg för steg.

12. IOS Switch

Med Apples iOS 7 har världen en nykonstruerad strömbrytare för på / av-etiketter. Detta ledde till många olika effekter, inklusive en fri animering som efterliknar den inbyggda på / av-omkopplaren.

I den här filen får du en mycket enkel animeringseffekt med en grundläggande lättnad. Växeln växlar över, och bakgrunden blir grön och återgår sedan tillbaka när strömbrytaren är avstängd.

13. Ritter App

Här är en annan stor freebie släppt av Sergey Bykov för vad han kallar Ritter App. Detta inkluderar en fri skissfil för vektorgränssnittet, tillsammans med en fri PRD-fil för principen animation.

Du kommer få många olika animationer i den här freebieen, så jag tycker att det skulle vara mer användbart för en mellan-till-avancerad designer. Nybörjare kan också lära sig mycket av det, men kan ha en brant inlärningskurva.

14. Bjud in vänner

Vi känner alla till och älskar plus-ikonen för flyktmenyn från Google. Jo, Jardson Almeida skapade en Friends Invite-meny baserat på ett enkelt materialdesignkoncept.

Allt var designat i Sketch, och importerades till Princip for animation. Du får båda filerna som freebies att ladda ner och leksak runt med.

15. Card Swipe

Här är en annan generell swiping-freebie som endast är gjord för principiella användare. Det här är en kort swipe gränssnitt skapad för generella bildspel eller inbyggda app-användargränssnitt.

Jag tycker att det här är den perfekta freebie för en nybörjare som bara går in i principen. Det är inte så komplicerat att du kommer att känna dig vilse, men det är inte så enkelt att du känner dig trivialiserad.

16. Chatt på karta

Många designers använder fortfarande Photoshop för gränssnitt, och det är också sant för den här korta chat-freebie. Du kan ladda ner en PSD-fil för gränssnittet och en PRD-fil för Principle animationen.

Det är en överraskande tämtig animering för stilen, men det ser fortfarande bra ut och fungerar precis som du förväntar dig i en enkel kart / geolocation-app.

17. App Laddar

Mobila appar använder ofta laddar skärmar att berätta för besökare att något händer i backenden. En av mina favoritgrader i denna samling är den här lastningsanimationen skapad av Roman Wagner.

Det laddar enskilda element en efter en när laddningsskärmen är klar. Denna animering är mycket smidig och helt trovärdig inom ramen för mobilappdesign.

18. Ombordkort

Användare ombordstigning är ett viktigt steg för varje ny mobilapplikation. Det är alltid trevligt att ta med några animeringar på detta stadium, det är därför dessa onboarding-kortanimeringar kan vara till stor hjälp för appdesigners.

Detta skapades av Austin Baird, och släpptes gratis för att användas på alla UI / UX-projekt.

19. Princip Demos

När du gräver vidare i principen lär du dig mycket avancerade arbetsflödestekniker. En av de bästa freebiesna att gå vidare är den här skapad för Yalantis kreativa team.

Detta är en helt gratis resurs för principiella användare att ladda ner och spela med. Det täcker några knep som visar hur man blir ett proffs på Principle animation.

20. Dropdown Menyer

Meny dropdowns använder ofta galna animationer för att fånga vår uppmärksamhet. Denna After Effects-freebie använder a dropdown trappanimering på menyn för enskilda element för att få dem att falla som trappor.

Det här kanske inte är användbart för alla, men det är verkligen ett bra sätt att lära dig om After Effects-gränssnittsanimering.

Slutord

Alla dessa resurser är helt gratis att ladda ner och leksak med i dina egna projekt. Om du är helt ny på UX-animering garanterar du att du lär dig mycket genom att studera dessa freebies. Om du vet några andra stora resurser kan du släppa länkar i kommentarerna.