12 gratis AE opplæringsprogrammer for UX Professionals
Moderne webdesign innebærer mange bevegelige deler som innholdsdesign, ikonarbeid og UX design strategier . En nyere trend er bruken av mikrointeraksjoner på web- og mobilprosjekter.
Disse ser flott ut i det endelige prosjektet, men er ikke så lett å lage med en statisk mockup. Så designere har plukket opp animasjonsprogrammer som After Effects for å skape bevegelsesbaserte mockups.
Hvis du prøver å lære denne ferdigheten, anbefaler jeg disse gratis videoene på YouTube. De vil ikke lære deg alt, men de vil dekke grunnleggende og gi deg et solid grunnlag for å fremme dine ferdigheter.
1. Knapp UI animert
Dette veldig kort UI animasjon opplæringen er perfekt for nybegynnere med liten-til-nei AE-opplevelse. Det krever litt tålmodighet til å arbeide gjennom grensesnittet, men instruksjonene er krystallklare.
Du lærer å lage en liten animasjonseffekt som kan fungere bra for nettsteder eller mobilapper.
Dette er ikke noe spektakulært, men til slutt har du en mye sterkere forståelse av dette konseptet.
2. Prototypebevegelse
En annen enkel animasjon du kan lage er en glidende meny som i denne videoen . Det lærer deg hvordan du animerer en meny i After Effects og hvordan du arbeider med individuelle lag i programvaren.
Det er en ganske lang opplæring med over 40 minutter med steg-for-steg veiledning. Men det er vel verdt tiden hvis du kan se det gjennom til slutten.
3. AE Icon Animation
Små ikon animasjoner legger ikke direkte til grensesnittet, men de kan forbedre brukeropplevelsen. Disse ikonbevegelsene vedrører de små mikrointeraksjonene som er nevnt tidligere.
Og dette ikonet animasjon tut snakker om mikrointeraksjoner med enkle å følge retninger. Du kan til og med laste ned gratis ikoner i PSD / AI-format og bruk dem for animasjonen.
Men dette er også praktisk for ikondesignere som lager egne ikoner fra grunnen og ønsker å animere dem for produksjon.
4. Animerte UI / UX markører
Mange designere lager UX-animasjoner for å vise frem hvordan et grensesnitt skal fungere. Dette vil naturligvis inkludere museklikk / swipes fordi du vil se hvordan innholdet beveger seg på tvers av siden.
Hvis du vil legg til markørbevegelser til din mockups så er denne opplæringen for deg. Det er en ganske kort guide, kun 15 minutter lang, men informasjonen er superverdig og relevant for både mobil og webdesignere.
5. iPhone App UI
Et annet godt eksempel på en brukerfokusert animasjon er denne følger en typisk iPhone-appinngang. Du lager en brukers sti gjennom en iPhone-app som fyller ut individuelle skjemafelter.
I seg selv kan dette ikke virke som mye siden folk vet hvordan denne prosessen ser ut.
Men hvis du designer en nettside eller et program som har en unik flyt, hjelper det å vise hele brukerens oppførsel fra å skrive inn informasjon for å logge inn, og kanskje mer.
6. App Page Swipes
Mobilappdesignere kan benytte side swipes for multi-paged grensesnitt. Disse fungerer bra for gallerier og for paginerte effekter.
I denne korte opplæringen Du lærer hvordan du lager sideveis animasjoner med After Effects ved hjelp av noen eksisterende mockups. Denne videoen kommer fra UX i bevegelse hvor de har massevis av lignende opplæringsprogrammer og private workshops.
Emnet for UX-bevegelse er ikke dekket mye på nettet, men disse gutta er en av de få gode som virkelig drar inn i detaljene. Sjekk ut hele YouTube-kanalen din hvis du vil lære mer.
7. Jelly UI Animasjoner
Du har sikkert sett merkelige flytende-gelémenyer i Android-apps eller til og med over hele nettet. Disse er ikke super vanlige fordi de er vanskelig å gjenskape i kode, men med denne Jelly UI opplæringen Du kan i det minste bygge animasjonene fra bunnen av.
Det er en annen freebie fra UX in Motion, og den utgjør bare omtrent 5 minutter.
Men du vil lære mye om After Effects og den generelle UX animasjonsprosessen. Spesifikt hvordan du importerer vektorer og jobber med disse filene over en tidslinje - egentlig bare det grunnleggende om grensesnitt animasjonsarbeid.
8. Utfolding Animasjon
Selv om jeg ikke kan si at denne animasjonen direkte påvirker grensesnittet, er det noe kult du kan legge inn i nettsidens logo. Utfolding av animasjoner brukes for det meste i videointroer for å skape et brandable visuelt.
Men nettsteder kan også ha lignende utfolde animasjoner ved å bruke SVG-grafikk og grunnleggende JS animasjoner.
Selv om du ikke vil lage logo animasjoner, kan denne opplæringen fortsatt lede deg gjennom et enkelt AE-grensesnitt arbeidsflyt. Perfekt for å lære tauene uten mye stress.
9. Grunnleggende UI Prototype Animasjoner
Mobile app menyer kommer i mange forskjellige stiler med forskjellige animasjonsteknikker. Denne brukerveiledningen lærer deg hvordan du animerer flyboble-ikonmenyen.
Dette ble først kreditert til Path-appen, men har siden vokst til en felles trend for Android og iOS-enheter.
I løpet av denne 20 minutters videoen henter du ideer for ikonanimasjon og menydesign. Det er ganske enkelt å jobbe med, og du kan bruke forhåndsdefinerte ikoner for arbeidsflyten for å spare tid.
10. 3D Layer Splits
Presentasjonsanimasjoner er verdifulle for klientarbeid eller for å dele ideene dine foran et lag. Det er hvor denne animasjonen 3D lag opplæringen kan hjelpe.
Det lærer deg å bryte opp forskjellige lagelementer og skille dem fra det fulle grensesnittet. Du kan til og med vise forskjellige sideelementer for å vise hvordan appen / nettstedet skal fungere.
Jeg kan ikke forestille meg at dette ville være verdifullt for personlig arbeid, men det er kult effekt å lære spesielt for kommersielle konserter.
11. IOS 8 Brytere
Animerte på / av-brytere oppstod først i tidlige versjoner av iOS og har siden spredt seg til Android og generelle nettsteder.
De beste UI-bryterne har egendefinerte animasjoner, og du kan bygge din egen ved å følge denne 25-minutters opplæringen . Det forutsetter at du allerede har brytergrafikken, men du kan også laste ned en freebie PSD og bruk det i stedet.
I tillegg kan du omarbeide denne animasjonen for enhver type bryter du designer i fremtiden. En flott opplæring for noen bare komme inn i Etter Effects for UI / UX.
12. Glatt ikon Animasjoner
Sist på listen min er Denne detaljerte ikonbevegelsen bruker noen forskjellige vektorformer. Det er en ganske detaljert guide som tar over 30 minutter, og dekker noen forskjellige teknikker.
Når du kjenner veien rundt After Effects kan du bruke disse ideene til andre ikonstiler. Det er derfor denne opplæringen er så flott for nybegynnere; den lærer deg hvordan du arbeider i AE-grensesnittet med spesifikke teknikker for UI / UX-designere.
Men noen av disse opplæringsprogrammene vil forbedre dine UX animasjonsferdigheter, så vær sikker på å bokmerke noen som tar øye med deg.
