Bevægelig grafik og Motion design viser sig igen og igen at have stor indflydelse og effekt på brugeroplevelsen af digitale produkter og platforme.
Bevægelig grafik og animerede elementer er dog ikke blot visuel “pynt” – det er et stærkt værktøj, der skaber engagement hos brugeren og kan give dine budskaber et langt større reach.
For at bevægelig grafik skal fungere bedst muligt, kræver det en god grundforståelse for de visuelle principper inden for bevægelig grafik.
I dette blogindlæg bliver du derfor klogere på 9 vigtige Motion Graphics design principper, der er gode at tage med i overvejelserne, når du skal til at producere spændende visuel grafik.
1. Easing
“Easing” efterligner måden ægte objekter og elementer accelerer og sænker farten over tid.
De to teknikker, der oftest bruges vedrørende easing, er henholdsvis “ease in” og “ease out”. Nogle gange kombineres de to, hvilket kaldes “ease in out”.
UI-kortene og de tilsvarende stole bevæger sig hurtigt, men de kommer til jævne og kontrollerede stop takket være easing (Grafik: Saptarshi Prakash)
Skal du i gang med After Effects? Læs mere om et After Effects Basis kursus >>
2. Forskydning (offset) og forsinkelse (delay)
Når flere UI-elementer bevæger sig på samme tid og med samme hastighed, har brugerne en tendens til at gruppere dem sammen og overse muligheden for, at hvert element kan have sin egen funktionalitet.
I stedet for at være helt synkroniseret er timingen, hastigheden og afstanden mellem elementer forskudt en lille smule, hvilket resulterer i en meget subtil “én-efter-én”-effekt.
Mens brugerne bevæger sig mellem skærme, signalerer forskydning og forsinkelse, at der findes flere interaktionsmuligheder.
Denne cryptocurrency-app introducerer flere UI-elementer på én gang. Deres ankomst er lidt forskudt for at informere brugerne om, at elementerne er relaterede, men alligevel forskellige. (Gapsy Studio)
3. Transformation
Transformation opstår, når et UI-element bliver til et andet. For eksempel forvandles en downloadknap til en statuslinje, som forvandles til et “fuldført”-ikon.
Fra et UX-perspektiv er transformation en effektiv måde at vise brugeren dens status i forhold til et endeligt mål. Dette er især nyttigt, når progressionen mellem UI-elementer er knyttet til en proces med en start og en slut (f.eks. download af en fil).
Transformation signalerer starten, midten og afslutningen af f.eks.download af en fil (Grafik: Aaron Iker)
4. Ændring af værdier og tal
Repræsentationer af værdi (numerisk, tekstbaseret eller grafisk) ses brugt i en række digitale brugerflader for digitale produkter lige fra bankapps til personlige kalendere og til onlinebutikker.
Fordi disse repræsentationer er knyttet til datasæt, der eksisterer i virkeligheden, kan de ændres.
Værdiændringer kommunikerer den dynamiske karakter af datarepræsentationer og informerer brugerne om, at data er interaktive og kan blive påvirket til en vis grad. Når værdier introduceres uden bevægelse, falder brugernes vilje til at engagere sig i dataene.
Dette er også en stor del af grunden til, at animerede infografikker fungerer så godt både på sociale medier men også i f.eks. præsentationer af ellers tørre tal og data.
Værdier introduceres med bevægelse for at vise brugerne, at de har evnen til at påvirke dataene. (Grafik: Taras Migulko)
5. Kloning
Kloning er en form for bevægelsesadfærd, hvor ét grafisk element opdeles i flere bider. Det er en smart måde at fremhæve vigtig information eller udvidede interaktionsmuligheder.
Når et grafisk element materialiserer sig i en grænseflade, har de brug for et klart oprindelsespunkt, der linker til et element, der allerede er på skærmen. Hvis elementer simpelthen brister eller forsvinder ud af ingenting, mangler brugerne den nødvendige kontekst til sikre interaktioner.
Brugere kan klikke på de farvede cirkler med tillid, fordi de tydeligvis stammer fra ikonet “Tilføj noter”. (Ariuka)
6. Tilsløring (Obscuration)
Forestil dig en dør med matteret glas. Det kræver interaktion at åbne, men det er muligt at gennemskue (til en vis grad), hvad der venter på den anden side.
Tilsløring – eller obscuration – fungerer på samme måde. Det præsenterer brugerne for en grænseflade, der kalder på interaktion, samtidig med at den afslører en antydning af indholdet, der vises bagved. Navigationsmenuer, adgangskodeskærme og mappe-/filvinduer er almindelige eksempler på brug af tilsløring.
Tilsløring præsenterer brugerne for vigtige interaktioner, samtidig med at de tillader dem at forblive orienteret inden for produktfortællinger. (Kyle Abarquez)
7. Parallax
En Parallax-effekt er, når to (eller flere) grafiske elementer bevæger sig på samme tid, men med forskellige hastigheder. Her er hensigten at etablere et logisk hierarki over vigtige og mindre vigtige elementer.
Interaktive elementer bevæger sig hurtigere og vises i forgrunden. Ikke-interaktive elementer bevæger sig langsommere og trækker sig tilbage til baggrunden.
Parallax styrer brugerne mod interaktive grafiske elementer, mens de tillader ikke-interaktive elementer at forblive på skærmen.
Med Parallax-effekt bevæger de vigtigste interaktive elementer sig hurtigst, mens ikke-interaktive elementer bevæger sig langsommere og trækker sig tilbage til baggrunden. (Tubik)
8. Dimensionalitet
Dimensionalitet handler om at få det til at virke som om, UI-elementer har flere interaktive sider, ligesom objekter i den fysiske verden. Effekten opnås ved at få elementer til at se ud, som om de f.eks. er foldbare, vendbare, svævende eller har realistiske dybdeegenskaber.
Dimensionalitet indebærer, at 2D UI-elementer har flere interaktive sider – ligesom objekter i den fysiske verden. (Sang Nguyen)
9. Dolly og Zoom – kamerabevægelses effekter
Dolly og zoom er to typer effekter, der simulerer to særlige kamerabevægelser, der giver brugerne mulighed for at “rejse” gennem UI-elementer på en rum-agtig måde, hvor flere detaljer afsløres, jo længere man kommer “ind” i animationen.
Dolly: Dolly opstår, når brugerens synspunkt kommer tættere på (eller længere fra) et UI-element. Forestil dig en person med et kamera, der går hen til en blomst for at få et tættere billede.
Zoom: Med zoom forbliver brugerens synsvinkel og UI-elementet fast, men elementet øges (eller mindskes) i størrelse på brugerens skærm. Forestil dig, at personen bliver siddende og bruger kameraets zoomfunktion til at få blomsten til at se større ud.
 |
 |
| Dolly: Brugerens synspunkt ser ud til at komme tættere på baggrundsbilledet. (Yanosh) | Zoom: Brugerens synsvinkel kommer ikke tættere på billedet. I stedet for øges billedets skala. (Victor Aldabalde) |
Bevægelse bruges som et stærkt visuelt virkemiddel
Interaktive oplevelser kræver bevægelse i alle dens sprudlende og subtile former. Når principperne for Motion Design opretholdes, bliver selv de mest simple UI-elementer sofistikerede agenter for menneskelig kommunikation.
For at Motion Design skal gøres troværdigt og brugervenligt kræver det, at elementerne er realistiske og simulerer bevægelser vi kender fra den virkelige verden. Det sikrer du med en grundforståelse for Motion Graphics designgrundprincipper.
Dette blogindlæg er skrevet af designer og skribent Micah Bowers, hos Toptal, og oversat til dansk.
Skal du i gang med Motion Graphics Design?
Deltag på et 3-dages Adobe After Effects kursus og bliv undervist af Danmarks førende grafiske Adobe eksperter.
