Animering är inte bara för teckningar längre. Från helskärmsflyttande bilder till små svängareffekter dyker pekar av animering upp överallt. Animering är trendig, rolig och användarvänlig.
Och hindren för att använda animering har börjat falla. Med de flesta användare på höghastighetsanslutningar och lätt att skapa allt från enkla rörelser eller en dumt gif till flera minuters åtgärd har animeringar blivit praktiska och användbara webbdesignverktyg.
Animation Basics
Animation händer när något skapat i stillbild eller tvådimensionell form är? Bringas till liv? och verkar flytta på ett sätt som följer fysikens lagar. Det är hur en tecknadskaraktär går över skärmen eller hur en appikon springer ut som en boll medan den laddas på skrivbordet på din Mac.
Ett av orden som är nästan synonymt med animering är Disney. I början av 1980-talet skrev två av företagets bästa animatörer en bok som beskriver de 12 principerna om animering. The? Illusion of Life: Disney Animation? av Frank Thomas och Ollie Johnston tillhandahåller fortfarande ramverket för animering idag.
- Squash och stretch
- Förväntan
- Iscensättning
- Strax framåt och att posera
- Följ genom och överlappande åtgärd
- Långsamt in och långsamt
- Båge
- Sekundär åtgärd
- timing
- Överdrift
- Solid Ritning
- Överklagande
Webanimationer sparas ofta som GIF, CSS, SVG, WebGL eller video. De kan vara allt från en enkel understrykning som visas när du svävar över ett ord till en helskärms-video eller bakgrundsbild. Som med någon annan designteknik kan animationer vara subtila eller de kan vara i ditt ansikte och svårt att undvika.
Emerging Trend of 2017
Animering i webbdesign är något som vi börjar se mer av varje dag. Nyckeln till animering som en design trend är måttlig. Små, enkla animationer är engagerande och intressanta; användaren kanske inte ens tänker på att de är en animering alls. Storskaliga animationer kan vara en intressant bild som drar dig in i designen. Men om du börjar blanda upp för många olika rörliga effekter kan det orsaka fullständigt kaos.
Det som gör animationen trendig är realism. I dagens designlandskap med så många platta och minsta stildesign behöver användarna fler signaler att berätta för dem vad de ska göra. Enkla bitar av animering kan styra användaren utan att ändra estetiken. Det hjälper till att lägga till instruktioner och order att utforma system som kan vara för enkla visuellt för att ge tillräckligt med riktning för användarna. I detta fall skapar animering ett glatt medium mellan avskalad enkelhet och användbarhet.
Den andra bidragande faktorn till denna trend är tillgång till verktyg på bak- och användarändamålen av designen. Du behöver inte Flash för mer komplicerade animeringar längre. (Och om du fortfarande bygger i Flash, är det dags att sluta.) Det kan åstadkommas på ett antal andra sätt. Dagens animationer dämpar inte ner webbplatser eller webbservrar, vilket gör effekterna snabba att ladda för användare och med höghastighetsinternetåtkomst animationer hoppar inte över fastna mitt i händelsecykeln.
Stor vs Små Animationer
När det gäller att animera på webben, faller det i två lika lättförståeliga kategorier: stora och små. (Du kan noga gissa hur dessa ser ut.)
Stora animationer är de som har en skala till dem. Ofta i form av en video med en körtid fyller storskaliga animationer en betydande del av skärmen och är karakteristiska för en kort film. Dessa animationer fungerar som en kontaktpunkt i den övergripande designen. Användare behöver ofta inte göra några åtgärder för att se animationen på gång. Om du tittar noga på Studio Meta-webbplatsen zoomar alla de stora bilderna när du läser kopian.
Små animationer är de små bitar och bitar som du upptäcker när du börjar interagera med en webbplats. Dessa delningar kan vara i form av svävartillstånd, små bitar av ornament eller användbarhetsguider eller verktyg. Små animationer är en accent som bidrar till det övergripande estetiska, men det är osannolikt att det ligger i designens fokus. På webbplatsen för Henry Brown är den enkla animationen att om du tittar noga blinkar ögonen på illustrationen faktiskt.
När ska du använda animering
Problemet med varje trend, inklusive den här, är att veta när man ska använda den. Animering kan vara ett bra litet knep för ditt designverktygssats, men det är inte för varje projekt. Animering ska vara jämn och sömlös, inte hoppig eller mekanisk. Det måste tjäna ett syfte för användaren och inte komma i vägen för innehållet.
Den främsta orsaken att använda animering är att öka användbarheten. Enkla animeringar kan vara bra ledningsverktyg för att hjälpa människor att förstå vilka knappar som ska klicka eller vart ska gå nästa i kartan på en webbplats. Många designers som använder komplexa rullningseffekter parar en enkel animering med ett användarverktyg för att bläddra eller klicka. (Detta inkluderar allt från en enkel studsningsymbol eller ord som dyker upp ett ord? Rulla ner.?)
Användbarhet finns i några olika former:
- Kommunikationsfunktion eller hur man använder en webbplats
- Visa ändring, till exempel att fylla i ett formulär korrekt eller markera att ett element är klickbart
- Skapa flöde eller direktanvändare till en uppmaning
Den andra anledningen till att använda animering är en estetisk. Animering kan vara en bra? Dekoration.? Ibland är målet med ett animerat element rent visuellt och det är en godtagbar användning. Denna dekorativa animering kan hjälpa till att berätta en historia eller skapa en känslomässig koppling mellan gränssnittet och användaren. Syftet med en animering kan vara att gnista visuellt intresse och hålla en användare förlovad med din sida under en längre tid.
När du skapar en rent visuell animation överväga vad den ska göra. Tänk på den anslutning du vill ha en användare att ha.Ska det vara roligt eller överraskande? Är det lite unikt innehåll som är utformat för delning? Även en ren syn ska ha ett mål.
Medel
Klar för att börja animera? Här är några resurser för vidare läsning och verktyg för att hjälpa dig att komma igång.
- Illusion of Life-videon visar var och en av de 12 principerna på ett sätt som är lätt att förstå.
- ? Webb animation på jobbet? från en lista är en stor resurs om vad som gör animationsarbete.
- The? Nybörjarens Introduktion till CSS Animation? visar hur du gör en kvadrat i en cirkel med hjälp av CSS-egenskaper.
- Elastiska animerade SVG-element är en handledning om hur man integrerar och animerar en SVG-komponent.
- Art of UI Animation presentation av Mark Geyer använder animering för att förklara koncepten.
- ? 15 Top HTML5-verktyg för att skapa avancerad animering med? är ett bra steg på nästa nivå och lista över verktyg om du redan förstår grunderna.
- Animatorens Survival Kit beskriver grundläggande principer som gäller för alla former av animering.
Slutsats
När det gäller animering är tumregeln här: Bra animering kommer att göra användarens upplevelse bättre. Detta kan vara i form av en känslomässig anslutning - som en rolig, positiv upplevelse - eller genom att göra en webbplats lättare att använda.
Animering är en rolig teknik som har blivit mycket mer standard för en mängd olika applikationer. Om du letar efter inspiration, se till att du går tillbaka genom den här artikeln och klickar på länkarna till de visuella exemplen i hela, besöker webbplatser och spelar med de animerade funktionerna däri. Ha så kul!