12 Gratis AE Tutorials for UX Professionals
Moderne webdesign involverer mange bevægelige dele som indholdsdesign, ikonarbejde og UX design strategier . En nyere tendens er brugen af mikrointeraktioner på web- og mobilprojekter.
Disse ser godt ud i det endelige projekt, men er ikke så let at lave med en statisk mockup. Så designere har hentet animationsprogrammer som After Effects for at skabe bevægelsesbaserede mockups.
Hvis du prøver at lære denne færdighed, anbefaler jeg stærkt disse gratis videoer på YouTube. De vil ikke lære dig alt, men de dækker det grundlæggende og giver dig et solidt fundament til at fremme din færdighed.
1. Knappen UI Animeret
Dette meget kort UI animation tutorial er perfekt til begyndere med lille til ingen AE oplevelse. Det kræver lidt tålmodighed at arbejde gennem grænsefladen, men vejledningen er krystalklar.
Du lærer at oprette en lille knap animation effekt, der kan fungere godt til websites eller mobil apps.
Dette er ikke noget spektakulært, men i sidste ende får du en meget stærkere forståelse for dette koncept.
2. Prototype bevægelse
En anden simpel animation du kan lave er en glidende menu som i denne video . Det lærer dig hvordan man animerer en menu i After Effects og hvordan man arbejder med individuelle lag i softwaren.
Det er en temmelig lang vejledning med over 40 minutters trin-for-trin vejledning. Men det er værd at være tid, hvis du kan se det igennem til slutningen.
3. AE Icon Animation
Små ikon animationer tilføjer ikke direkte til grænsefladen, men de kan forbedre brugeroplevelsen. Disse ikonbevægelser vedrører de små mikrointeraktioner, der er nævnt tidligere.
Og dette ikon animation tut taler om mikrointeraktioner med let at følge anvisningerne. Du kan endda downloade gratis ikoner i PSD / AI-format og brug dem til animationen.
Men det er også praktisk for ikondesignere, der opretter deres egne ikoner fra bunden og ønsker at animere dem til produktion.
4. Animerede UI / UX markører
Mange designere opretter UX-animationer for at vise, hvordan en grænseflade skal fungere. Dette vil naturligvis indeholde museklik / swipes, fordi du vil se, hvordan indholdet bevæger sig på tværs af siden.
Hvis du vil tilføj markørbevægelser til dine mockups så er denne vejledning til dig. Det er en temmelig kort vejledning, kun 15 minutter lang, men oplysningerne er super værdifulde og relevante for både mobile og webdesignere.
5. iPhone App UI
Et andet godt eksempel på en brugerfokuseret animation er denne efter en typisk iPhone app input. Du opretter en brugers vej gennem en iPhone-app udfyldning af individuelle formularfelter.
Det kan i sig selv ikke virke så meget, da folk ved, hvordan denne proces ser ud.
Men hvis du designer en webside eller et program, der har et unikt flow, hjælper det med at vise hele brugeradfærden fra at indtaste info for at logge ind og måske mere.
6. App Page Swipes
Mobile app designere kan bruge side swipes til multi-paged interfaces. Disse arbejder godt til gallerier og for paginerede effekter.
I denne korte tutorial Du lærer, hvordan du opretter sidevejs animationer med After Effects ved hjælp af et par eksisterende mockups. Denne video kommer fri fra UX in Motion hvor de har masser af lignende tutorials og private workshops.
Emnet for UX-bevægelse er ikke dækket meget på nettet, men disse fyre er et af de få gode, der virkelig dræber ind i detaljerne. Tjek hele deres YouTube-kanal, hvis du vil lære mere.
7. Jelly UI Animationer
Du har sikkert set underlige væske-gelé menuer i Android apps eller endda i hele internettet. Disse er ikke super almindelige, fordi de er svære at genskabe i kode, men med denne Jelly UI tutorial Du kan i det mindste bygge animationerne fra bunden.
Det er en anden freebie fra UX in Motion, og den udgør kun ca. 5 minutter.
Men du vil lære meget om After Effects og den overordnede UX animationsproces. Specifikt hvordan man importerer vektorer og arbejder med disse filer over en tidslinje - virkelig bare det grundlæggende i interface-animationsarbejde.
8. Udfoldelse Animation
Selvom jeg ikke kan sige, at denne animation har direkte indflydelse på grænsefladen, er det noget cool, du kan føje til dit websites logo. Udfoldning af animationer bruges mest i videointroer til at skabe et brandable visuelt.
Men hjemmesider kan også have lignende udfoldede animationer ved at bruge SVG-grafik og grundlæggende JS animationer.
Selvom du ikke ønsker at oprette logo animationer, kan denne vejledning stadig lede dig gennem en enkel AE-grænseflade-arbejdsgang. Perfekt til at lære rebene uden meget stress.
9. Grundlæggende UI Prototype Animationer
Mobile app menuer kommer i mange forskellige stilarter med forskellige animationsteknikker. Denne brugervejledning lærer dig, hvordan man animerer flybubble-ikonmenuen.
Dette blev først krediteret til appen Path, men er siden vokset til en fælles trend for Android og iOS-enheder.
I løbet af denne 20 minutters video optager du ideer til ikonanimation og menustruktur. Det er ret nemt at arbejde med, og du kan bruge foruddesignede ikoner til arbejdsgangen for at spare tid.
10. 3D-lagsplitter
Præsentations animationer er værdifulde for klientarbejde eller for at dele dine ideer foran et hold. Det er der denne 3D-lag animation tutorial kan hjælpe.
Det lærer dig, hvordan man opdeler forskellige lagelementer og adskiller dem fra den fulde grænseflade. Du kan endda fremvise forskellige sideelementer for at vise, hvordan appen / hjemmesiden skal fungere.
Jeg kan ikke forestille mig, at dette ville være værdifuldt for personligt arbejde, men det er cool effekt at lære især for kommercielle koncerter.
11. IOS 8-switche
Animerede tænd / sluk-switche viste sig først i de tidlige versioner af iOS og har siden spredt sig til Android og generelle websteder.
De bedste UI-switche har brugerdefinerede animationer, og du kan opbygge dine egne ved at følge denne 25 minutters tutorial . Det går ud fra, at du allerede har skiftegrafik, men du kan også downloade en freebie PSD og brug det i stedet.
Plus, du kan omfordele denne animation til enhver form for kontakt, du designer i fremtiden. En god vejledning til nogen, der lige kommer ind i After Effects for UI / UX.
12. Smooth Ikon Animationer
Sidst på min liste er Denne detaljerede ikon bevægelse tut ved hjælp af et par forskellige vektorformer. Det er en ret detaljeret vejledning i alt over 30 minutter og dækker et par forskellige teknikker.
Når du kender din vej omkring After Effects kan du anvende disse ideer til andre ikon stilarter. Derfor er denne vejledning så stor for begyndere; det lærer dig, hvordan man arbejder i AE-grænsefladen med specifikke teknikker til UI / UX-designere.
Men nogen af disse tutorials vil du forbedre dine UX animation færdigheder så sørg for at bogmærke nogen, der fanger dit øje.
