5 viktiga animation mönster och hur man använder dem

– Animering kan vara ett mycket kraftfullt webbdesign verktyg. Men innan genomsyra varje del av våra mönster, vi måste lära sig när och hur man använder den nya funktionen. Med stor makt kommer stort ansvar, och så vidare. Och som animation måste tävla med många andra frågor för utveckling och konstruktion tid, är det vettigt att spendera våra resurser där de kommer att gå längst.

Denna artikel sätter du upp med några core animation mönster och visar dig hur animation gäller ett större system. Då du kommer att lära dig att upptäcka kognitiva flaskhalsar och lågt hängande frukt, att maximera effekterna av de animeringar du inte investera i att förbättra den användarupplevelse.

Om du har tittat på så många exempel på animation på webben och i-app-gränssnitt som jag har, vissa mönster börjar framträda. Dessa mönster är till hjälp för att identifiera och koncist verbalising syftet med en animation till andra.

Här är de kategorier som jag har hittat mig själv med det mesta: övergångar, kosttillskott, feedback, demonstrationer och dekorationer. Låt oss ta en titt på var och en av dem och se hur de påverkar användarens upplevelse.

01. Övergångar

Transitionstake användare från plats till plats i den information utrymme, eller övergången ut dem från en uppgift till en annan. Dessa tenderar att ha massiv påverkan på innehållet på den sidan, som ersätter stora delar av information.

webben var ursprungligen utformad som en serie av dokument. Klicka på en länk som orsakat webbläsaren för att torka av skärmen, orsakar ofta en kontrollampa blixt av vit, innan du målar på nästa sida från grunden. Även om detta är meningsfullt i samband med länkad text-baserade dokument, gör det mindre meningsfullt i en tid där sidor som delar många rika design element och tillhör samma domän. Inte bara är det slöseri av webbläsarens resurser för att återskapa samma layout om och om igen, men det ökar också användarnas kognitiva belastning när de har att orientera och omvärdera sidans innehåll.

Animering, specifikt motion, kan underlätta användarens orientering i rymden genom att lämpa över det arbetet till hjärnans syncentrum. Med hjälp av en övergång mellan förändringar i uppgift flöde eller platser i informationsarkitektur idealiskt förstärker där användaren har, var de går, och var de finns nu i ett svep.

Till exempel, om Nike SB Dunk sida (se bilden ovan), när en användare klickar på en navigering pil, den nuvarande sneaker flyttar ur vägen medan nästa sneaker rör sig i motsatt riktning. Dessa övergångar tydligt visa för användaren hur de navigerar längs en linjär kontinuum av gymnastikskor, och hjälper dem att hålla koll på sin plats och att stärka den rumsliga modellen av läsningen en verkliga raden av sneakers.

På en annan sko webbplats, John Fluevog, övergångar flytta användare från uppgift till uppgift (se ovan). Efter att en användare börjar skriva i sökfältet, resultaten är animerade på toppen av en mörkare bakgrund. Detta övergångar användaren från att surfa sammanhang för att förfina sina sökresultat, effektivisera deras fokus samtidigt och försäkrade dem om att de kan komma tillbaka till surfar utan större ansträngning.

02. Kosttillskott

Kosttillskott få information om eller från sidan, men inte ändra användarens plats eller uppgift. De i allmänhet lägga till eller uppdatera bitar av ytterligare innehåll på sidan.

Medan övergångar flytta användare från stat till stat, kompletterande animationer ge kompletterande information till användaren. Fundera över tillfällen då information som ett komplement till den huvudsakliga innehållet på sidan visas eller försvinner i utsikt: varningar, drop-downs, och verktygstips är alla goda kandidater för en kompletterande animation vid in-och utresa.

kom Ihåg att dessa animationer måste respektera användarens Kon Vision: de kommer att titta direkt på ett verktygstips visas bredvid markören, eller kommer deras uppmärksamhet måste riktas till en varning på sidan av deras surfplatta?

När en användare lägger till en produkt i sin kundvagn på glossier.com snarare än att ta dem till en helt ny kundvagn sidan, platsen bara uppdaterar användaren som till sin vagn innehåll som poppar det ut som en sidebar (ovan). Medan en övergång skulle knäppa användaren surfar läge, detta kompletterande animation låter användaren avfärda kundvagnen och fortsätt handla.

kundvagn sidebar använder en extra kompletterande animation för att snabbt och diskret locka användarens öga: en förloppsindikator som successivt fylls på att visa hur mycket användaren behöver spendera för att få fri frakt.

Detta kundvagn process har en tredje animation mönster kommer på: Lägg till Bag-knappen av en snurrande ikon när du klickar, som ger användaren feedback på sin lastning staten. På tal om feedback…

03. Återkoppling

Feedback visar orsakssamband mellan två eller flera händelser, som ofta används för att ansluta en användares interaktion med gränssnittet reaktion.

Animering kan ge användare direkt feedback om deras interaktioner. En deprimerad knappen, en svepande gest – både länk mänskligt agerande för att ett gränssnitt reaktion. Eller den andra sidan: en laddar spinner på en sida som visar att vi väntar på datorn. Utan visuell feedback, folk undrar om de faktiskt klickade att “betala nu” – knappen, eller om sidan är verkligen fylla på efter alla.

På Monterey Bay Aquarium s webbplats, föra muspekaren över en knapp gör färgen att blekna från rött till blått, vilket indikerar att elementet är interaktiv och redo att reagera på indata från användaren. Knappen svävar är klassiska exempel för denna typ av animation, delvis på grund av att vinsten av att ge användare visuell återkoppling på knapparna är så mätbara och viktiga för verksamheten.

Design studio Djur webbplats använder en bar i färg överst på sidan samt en animerad version av sin logotyp för att ange sida laddas och laddas stater samtidigt som den ger intresse och stärka dess “vilda” branding.

04. Demonstrationer

Demonstrationerna förklara hur något fungerar eller utsätta sina detaljer genom att visa istället för att berätta. Detta är min personliga favorit användning av animation. De kan vara både underhållande och insiktsfullt.

Dessa animationer sätta information i ett perspektiv, att visa vad som händer, eller hur någonting fungerar. Detta gör demonstrativa animationer perfekt partner för infographics. En sak som alla demonstrativa animationer göra är att berätta en historia, som du ser.

“Behandling…” sidor finns en möjlighet att förklara vad som händer för användarna medan de väntar. TurboTax gör bra användning av dessa bearbetning sidor. Efter användare inkomma med OSS skatteblanketter, det bannlyser alla återstående ångest genom att visa dem där deras information är på väg och vad de kan förvänta sig, allt medan stärka deras varumärke vänlighet och tillgänglighet. (Det hjälper också till att animeringen distraherar användarna från en ganska lång ladda sidan med något visuellt engagerande!).

Coin bekant använder demonstrativa animationer för att förklara deras konsolidering kort värde proposition till nyfikna besökare som de bläddrar igenom sajten – utan att behöva trycka på play och luta dig genom en video i annonsen eller vada genom punkterna av utredande innehåll. Den här sidan är själva kärnan i “show, don ‘t tell'.

05. Dekorationer

Det är inte svårt att misstag dekorativa animationer för demonstrativa animationer. Men det finns en viktig skillnad: där demonstrationer föra in ny information i systemet, dekorativa animationer gör det inte. De är de fetter och socker i animation matpyramiden: de gör bra smakförstärkare, men måttlighet är nyckeln.

Det bästa sättet att upptäcka en rent dekorativ animation är att fråga, “Vad kan en användare att lära sig från denna animation? Har denna guide dem eller visa dem något som de inte vet något annat?” Om svaret är nej, du kanske har en dekorativ animation på dina händer.

Även om de får en dålig rap, dekorativa animationer kan bidra till att vända den ordinära till det extraordinära. Revisionistiska Historia webbplats använder dekorativa animationer klokt att ta med platt illustrationer till liv. Animationerna lägg bara tillräckligt med intresse för att möjliggöra för det visuella innehållet på sidan för att vara mer robust, så att användarna har fokus på podcast.

Polygon.com epically används animerade illustrationer för att skapa hörnstenarna för en serie av konsolen recensioner. Dessa dekorativa animationer kanske inte har lagt till ny information, men de avgörande förstärkt Polygon varumärke. De hjälpte också till att varje konsol recension stå ut från konkurrensen, som på den tiden lekte omöjlig att skilja fotografier av samma enheter.

Denna artikel är ett utdrag från Rachel Nabors' Animation på Jobbet – En Bok Bortsett Korthet bok som guidar dig igenom anatomi webb animationer, mönster och kommunikation beslut över lag.

Läs mer: