Kom godt i gang med UI-bevægelsesdesign

Hvordan arbejdsgang kan ændre den måde, du designer på

Vores arbejde på This Also falder for det meste i to kategorier: produktdesign og produktvision. Til vores produktdesignprojekter arbejder vi med eksisterende produkter eller platforme og design til længe lanceringer. Vi deler tidlige og ofte detaljerede design og uklare prototyper med vores klient for at få det bedste produkt til slutkunden.

Produktvisionsarbejde udforsker på den anden side, hvordan et produkt eller en platform kan se ud om to til fem år. Detaljerne er mindre vigtige end at præsentere en overbevisende vision for fremtiden. Det endelige publikum for denne type arbejde er ofte en udøvende med begrænset tid, men evnen til at tage strategiske beslutninger, der giver produktgrupper mulighed for at forfølge innovativt arbejde.

Når du tackle disse typer komplekse produkter, kan et bevægelsesdesign være et godt værktøj til at organisere store teams omkring kernekoncepter. Vi har fundet ud af, at det at være hurtigere og mere effektiv med vores værktøjer har frigivet os til at løse problemer holistisk. I denne tutorial vil jeg fortælle lidt om, hvordan vi har fremskyndet vores arbejdsgang for at gøre bevægelse til en integreret del af vores designproces. Over tid har jeg endda fundet ud af, at jeg vil bruge After Effects som det første værktøj i et projekt, da det kan være en af ​​de hurtigste måder at skitsere strukturen på et produkt.

Der er ingen mangel på stor bevægelsesdesign og After Effects-ressourcer derude, og jeg deler mine favoritter her (og i denne praktiske linkpakke). Dog fandt jeg, at en af ​​udfordringerne med at udvikle et UI-bevægelsesfærdighedsæt er at opbygge en arbejdsgang og værktøjssæt, der får dig til at arbejde og itereere hurtigere.

Dette er ikke en how-to, men snarere en plan for mine yndlings teknikker, værktøjer og tutorials for at hjælpe dig med at udvikle din egen praksis. Nogle fortroligheder med After Effects er nyttige, men jeg vil også henvise dig til ressourcer, der hjælper dig med at komme i gang fra bunden.

Opsætning af din Photoshop-fil

Organiser din fil, før du flytter til After Effects

Hvis jeg bare producerer hurtige bevægelseskoncepter, vil jeg tegne brugergrænsefladen ved hjælp af faste stoffer og former i After Effects. Men for mere poleret design begynder jeg altid i Photoshop. Det er den hurtigste, mest direkte måde at få et animeret design hurtigt på. Hvis du primært er en Sketch-bruger, er der en løsning, der involverer Illustrator, men jeg vil fokusere på Photoshop her.

Der er to enkle, men vigtige ting, du skal vide, når du opretter din Photoshop-fil:

  1. Et lag eller et smart objekt i Photoshop bliver et lag i After Effects
  2. En gruppe lag eller smarte objekter i Photoshop bliver en sammensætning af lag i After Effects

For at gøre din After Effects-tidslinje overskuelig, skal du have så få lag og kompositioner som muligt. For at gøre dette skal du begynde at forestille dig, hvilke elementer der kræver bevægelse. Overvej følgende, mens du organiserer:

  • Skal jeg animere denne komponent? For en statisk komponent som en telefons statuslinje, skal du overveje at flade alle UI-elementer i et enkelt lag.
  • Skal jeg animere elementer inden for denne komponent? Sig, at du har en liste over varer. Du ønsker måske ikke kun at animere den liste, men også animere hvert element på listen. I dette tilfælde vil jeg oprette en gruppe, hvor hver listeelement er et lag.
  • Kan jeg forenkle dette element? En almindelig teknik er at bruge klipmasker og formlag til at beskære billeder. Fordi dette ville skabe to lag i After Effects, skal du kombinere lagene til et enkelt smart objekt i Photoshop før import.
Øverst: panel i lag i Photoshop, bund: Tidslinje-panel i After Effects efter import. Ikonet ved siden af ​​[Meddelelsesliste] angiver, at laget er en komposition.

Dette er en kedelig proces uden konkrete regler, men med tilstrækkelig erfaring lærer du, hvordan du hurtigt og effektivt organiserer dine lag og grupper efter dine egne behov.

Tip: Føj et par tomme lag til din Photoshop-fil, før du importerer. Mens nogle ændringer i Photoshop-filer vises i After Effects, er der begrænsninger. Den bedste måde at tilføje et nyt element på er at tilføje det til et eksisterende, tomt lag i din Photoshop-fil.

Import til After Effects

Opbevar en organiseret mappe og projektstruktur

Når du importerer en Photoshop-fil til After Effects, ser du følgende:

Vælg altid Komposition - Behold lagstørrelser og redigerbare lagstilarter. Dette importerer din fil som en sammensætning og inkluderer adgang til alle lagformater, du har valgt i Photoshop.

Her er organisation nøglen. After Effects spiller ikke pænt med manglende filer, og du vil ikke bruge dyrebar tid på at linke sammen filer igen. Sådan sparer du en hovedpine:

  • Opret en enkelt mappe til hele dit projekt. Gem dine PSD'er i en dedikeret mappe, f.eks. _PSD. Når du opretter et After Effects-projekt, skal du også gemme dit projekt i den mappe. Du kan oprette andre mapper andre aktivtyper som _Audio. Jeg bruger en "_" før mine aktivmapper til at stødde dem øverst i mine findervinduer over min After Effects-projektfil (AEP), men følger enhver organisation og navnekonvention, du normalt gør.
  • Hold dit projektpanel organiseret i After Effects. Så snart jeg begynder at importere, begynder jeg at organisere. Opret en _Layers-mappe, og tilføj din mappe med Photoshop-lag - du har sjældent brug for at henvise til denne, hovedsageligt kun for at indlæse eller genlinke filer igen. Jeg flytter mine importerede kompositioner til en mappe _Comps.

Til sidst vil du justere dine sammensætningsindstillinger til dine formål. Når jeg arbejder udelukkende med digitale aktiver og uden video, indstiller jeg sammensætningen som følger:

Generelt leverer vi video ved 1080p. Indstilling af billedfrekvens til 60 FPS giver en jævn animation og valg af firkantede pixels sikrer, at vores Photoshop-filer vises 1: 1 i After Effects.

Organisering af dit arbejdsområde

De vigtigste paneler og plugins til UI-bevægelse

Fordi After Effects oprindeligt blev udviklet til postproduktion af video, er der hundredevis af flere tilgængelige funktioner, end du nogensinde har brug for. Her er standardvinduerne, jeg holder åbent. Når du har konfigureret dit arbejdsområde, skal du gemme det, så du altid kan vende tilbage til din standard.

plugins

Der er mange plugins og scripts derude for at fremskynde dit bevægelsesdesign, og AEscripts.com er en stor ressource. Her er et par plugins, som jeg har fundet vigtige for min proces:

  • Brugervenlighed og Wizz: For tilpassede animationskurver, ønsker du at grave i grafeditoren. Men når du groft tegner bevægelse for bevis på koncept, kan du stole på aktiekurver. Dette plugin giver dig mulighed for at tilføje kurver til lag med et enkelt klik. Her er en kort video for at se alle kurverne i handling.
  • Bevægelse v2: Dette plugin er et kraftcenter. De funktioner, jeg ofte henvender mig til, er hastigheds- og ankerværktøjer. Skaberen har også leveret en omfattende tutorial til plugin.
  • pt_ShiftLayers: Dette giver hurtig måde at forskyde og skifte lag på din tidslinje.
  • pt_CropPrecomps: Dette er et mere avanceret koncept, men når du importerer en Photoshop-fil med grupper, vises indholdet af lagene i gruppen i After Effects på et lærred på størrelse med den originale fil. Dette plugin beskærer de overskydende tomme pixels for bedre kontrol over dine lag. Her er en praktisk videoforklarer.
  • GifGun: Et klik for at oprette animerede GIF'er. Selvom du ikke får en god gengivelse, har jeg fundet det meget nyttigt at dele hurtige bevægelseskoncepter med mit team på Slack.

Tip: For at være sikker på, at dine plugins fungerer, skal du åbne Indstillinger> Generelt og sørge for, at afkrydsningsfeltet ud for Tillad scripts at skrive filer og adgangsnetværk er markeret.

Genveje

Som ethvert softwareprogram vil mestring af genveje forbedre din hastighed og arbejdsgang. After Effects er et meget kedeligt program, der skal bruges med en mus - du vrider konstant egenskaber ned, flytter playhead, tilføjer nøglerammer og så videre. Her er et udvalg af nyttige genveje til at komme i gang.

Animering af brugergrænsefladen

Tutorials, ressourcer og tip

Som jeg nævnte før, er der ingen mangel på store tutorials og ressourcer derude. Her er bare et par af mine favoritter til at komme i gang:

  • UX in Motion: Issara Willenskomer har skrevet og produceret det mest indhold og tutorials specifikt fokuseret på UI-animation i After Effects. Fra bedste praksis til det sorte, animerede, han har dækket det hele og er en uundværlig ressource for samfundet. Ud over hans kurser har hans blog en række gratis tutorials. Hvis du aldrig har åbnet After Effects, er hans startserie et godt sted at starte.
  • Materiel bevægelse: UI-bevægelsesdesign handler ikke kun om værktøjerne, men også de principper og regler, der styrer dit bevægelsessystem. Mens den er specifik for materialedesign, giver materialebevægelsesguiden en interessant ramme for at begynde at tænke på, hvordan man nærmer sig dit bevægelsesdesign.
  • Bevægelse og mening: En podcast om bevægelse for digitale designere bragt til dig af Val Head og Cennydd Bowles. Tjek denne om Animation og tilgængelighed.
  • Overgangsgrænseflader: Pasquale D’Silva er en animator at kende, og dette er en fantastisk oversigt over den funktionelle brug af animation. Senere udvidede han det til denne essentielle tale.
  • At komme fra A til B: En grundig diskussion om interpolering fra Marcus Eckert.
  • Mt. Mograf: Matt Jylkka, skaberen af ​​Motion v2, har en stor samling af After Effects-ressourcer. Mens selvstudierne ikke er specifikke for grænseflader, har jeg hentet mange teknikker og anvendt dem på mit eget arbejde.
  • ECAbrams: Tilsvarende tilbyder Evan Abrams et stort udvalg af After Effects-tutorials, herunder nogle mere avancerede koncepter.
  • Top 5 After Effects-udtryk: Jeg har ikke rørt meget til udtryk her, men når du udvikler dine evner, er de en vigtig måde at fremskynde din arbejdsgang. Her er min egen hurtige reference til udtryk, som jeg ofte vender tilbage til.

Start med navigation

Gå hen til UI-animation, ligesom du nærmer dig UI-design: tænk på produktets struktur og strøm, før du dykker ned i detaljerne. Mens de specifikke animationsteknikker, jeg bruger, varierer meget fra projekt til projekt, starter jeg altid med nogenlunde at strenge kerneskærmene sammen.

Nøglen her er at reducere afhængigheder. Lad os sige, at du animerer en mobilapp, hvor du stryger fra skærm til skærm. Det kan være nødvendigt at ændre timingen eller rækkefølgen af ​​dine skærme senere uden at påvirke UI-animationen på hver skærm.

For at gøre dette skal du gøre hver skærm til en separat komposition. Der er tre måder at gøre dette på: 1) importere hver skærm som en separat Photoshop-fil, 2) oprette en gruppe for hver skærm i din Photoshop-fil, eller 3) forudkomponere dine lag direkte i After Effects.

Derefter kan du animere skærmbillederne ved kun at tilføje to nøglerammer ved at arrangere skærmene side om side og forældre hver til den første skærm.

Animer derefter detaljerne

Når jeg har fået et godt greb om flowet, begynder jeg at animere detaljerne. Her er et par forslag og ressourcer til at tackle denne del af processen:

  • Fejl på siden af ​​mindre er mere. Husk, at dit UI ikke er en Disney-film. Dribe, selvom det er en stor kilde til inspiration, kræver også et kritisk øje, da mange af gif'erne er overudformet og overanalyseret. Se 5 fejl, der skal undgås, når du designer mikrointeraktioner for at få flere oplysninger om dette.
  • Hold ting langsomt og stabilt. Jo længere dit arbejde med et stykke animation er, jo langsommere vil animationen føles for dig - men det er bare din hjerne, der narrer dig. Jeg har ofte fundet mig selv fremskynde en animation, kun for at vise den nogen, der siger, at det føles alt for hurtigt. Det er bedst at holde det lidt langsommere, især for UI-gennemgang, der vil blive præsenteret for et publikum, der ikke er bekendt med værket.
  • Tænk uden for tidslinjen. Ikke alt behøver at være nøglerammer og kurver, og der er ofte flere måder at nærme sig en animation på. Da jeg animerede et desktop-instrumentbord, der krævede snesevis af konstant opdaterede aktivitetslinjer, vidste jeg, at jeg ikke ønskede at animere hver bjælke manuelt i løbet af 30 sekunder. Jeg prøvede et par ting, som udtryk og skyderkontrol, men den hurtigste måde at oprette alle disse søjler var at bruge Audio Spectrum-effekten og spille med indstillingerne, indtil jeg fik en ønsket effekt.

Tip: I har lyst til, at After Effects er en smule langsom, prøv dette: Gå til Præferencer> Media & Disk-cache, og vælg Empty Disk Cache ... Du kan også prøve at tildele mere plads til din cache, hvis du har ledig plads.

Eksport

Rendering og deling af dine kladder og sidste stykker

Ligesom at animere er der mange forskellige tilgange til gengivelse og eksport af dit arbejde, og en masse meninger om den "bedste" måde at gøre det på. Du skal overveje din ønskede kvalitet, output-filtype, den tid, du er nødt til at gengive, og så videre. Her er en oversigt på højt niveau af, hvordan det grundlæggende ved eksport.

Hurtige forhåndsvisninger

Når du arbejder i After Effects, kan du forhåndsvise din animation ved hjælp af den genvej, der er angivet i panelet Eksempel (ofte mellemrumstasten). Dog finder jeg mig som regel lyst til at komme ud af After Effects-programmet for at se mit arbejde og dele med mit team.

Som nævnt ovenfor kan jeg godt lide at bruge GifGun til hurtigt at dele uslebne koncepter og ideer. Nogle gange er bevægelsesdesign en tidlig del af vores proces - mens vi arbejdede med en tv-grænseflade, arbejdede en del af vores team i Photoshop for at udvikle visuel design, mens jeg arbejdede i After Effects for at udforske navigationskoncepter. Deling af gifs i Slack fremskyndede vores teams arbejdsgang og idéer.

Hvis jeg vil dele QuickTime-fil, men ikke bruger en masse tid på rendering, kan jeg gengive i en mindre kvalitet ved at tilføje min komposition til Render-køen, vælge Render-indstillinger og vælge en mindre opløsning.

Endelige gengivelser

Nu, hvis du nogensinde har spillet rundt i After Effects og eksporteret en QuickTime-fil, er du måske kommet i et problem, hvor QuickTime skal konvertere filen, en proces, der bruger dyrebar tid. For at løse dette problem skal du eksportere videoen ved hjælp af H.264-codec.

For at gøre det, tilføj din komposition til Render-køen, klik på det blå link ud for Output Module. Sørg for, at Quicktime er valgt i rullemenuen Format, og vælg derefter Formatindstillinger. Vælg H.264 i rullemenuen Video Codec. Når du har valgt OK to gange, vil du bemærke, at outputmodulet nu siger Custom: QuickTime. Dette vil dog kun gælde for denne gengivelse. Hvis du vil anvende til alle dine gengivelser i fremtiden, skal du oprette en tilpasset outputmodulskabelon. Dette er ikke en ligefrem proces, så her er en god oversigt-tutorial.

Når du først har fået et greb om at oprette dine egne skabeloner, kan du imidlertid strømline din eksportproces og bruge mindre tid på at kommunikere med indstillingerne.

Tip: Hvis du arbejder på meget komplicerede, lange eller 3D-tunge animationer og har adgang til flere maskiner, kan du overveje at gengive netværket.

Disse grundlæggende workflow-principper hjælper dig med at arbejde hurtigere og mere effektivt i After Effects. Med tilstrækkelig flyt i værktøjerne og metoderne kan bevægelsesdesign blive en vigtig del af din designproces. Ikke kun vil du være i stand til at fremstille polerede, glatte videoer, men du har også et andet værktøj til rådighed til at tackle udfordringerne ved UI-design.

Her er en linkpakke med alle de her nævnte ressourcer.

Har du en favorit AE-tutorial, ressource eller tip? Del det i kommentarerne!