Kan webbanimering spara plattdesign?
Som webbdesigners måste vi se till att vi håller våra färdigheter fräscha och aktuella. Vi behöver inte följa varje trend som följer med (som långa skuggor) men vi behöver fortsätta att lära och förbättra våra färdigheter när webben växer och mognar.
En spännande ny utveckling som börjar samla ånga i webbdesignindustrin är animering. Fler och fler företag letar efter animering för sina appar eller webbplatser som ett sätt att glädja sina användare, stå ut från konkurrenterna och förbättra användbarheten hos sina produkter.
En annan anledning animering är i hög efterfrågan är på grund av webbens senaste fokus på platt design. Platt design, överlag en mycket positiv sak, har några problem som driver människor att leta efter sätt att förbättra sig på det.
Plattformen har några problem
Idag antar fler och fler företag den minimala "platta designen" estetiska. Webbplatser börjar se väldigt lika ut med inte så mycket att skilja mellan varumärken. Detta öppnar möjligheten för designers att utforska andra sätt att göra deras hemsida engagerande och spännande för sina användare.
Det är här animationen kommer in. Animation är som salt på dina pommes frites; utan det är de lite blöta och saknar smak. Genom att animera olika delar av din design kan du lägga till lite spänning och glädja dina användare med kreativa och hjälpsamma animationer.
Ett annat problem med platt design är att användarna kan förlora kontext av vad som händer när de interagerar med en webbplats / app. När knapparna slutar se ut som knappar eller andra saker som märken börjar se likadana, är människor förvirrade om vad som händer när de klickar på dem.
Vi kan lösa detta problem genom att utforma olika animeringar som uppstår när elementen svävar eller klickas på, Colin Garven s skickaknapp till exempel:
Slutligen, ett sista problem som jag vill ta kontakt med är att informera användaren när en förändring sker. Idag använder många moderna webbapplikationer kraftfulla verktyg som AngularJs och Node.js för att skapa "pageless, live-updating" -appar. Tänk på Gmail: För att få ett nytt e-postmeddelande behöver du aldrig uppdatera sidan. det dyker upp helt enkelt när någon skickar dig ett nytt e-postmeddelande.
Det här kan vara lite av ett problem om användarna inte får någon anmälan eller ett klart tecken på att sidan har ändrats eller laddat nytt innehåll. Om sidan sparas måste vi se något som låter oss veta att appen fungerar och har sparat vårt arbete i bakgrunden.
Animering är ett bra sätt att informera användare när olika händelser inträffar.
Låt oss säga att du har en lista över registrerade personer för din nästa möte eller konferens. När nya personer registrerar, lägger du till dem i listan i realtid med node.js så att de aldrig behöver uppdatera sidan. Bra, det kommer att vara väldigt användbart för våra användare. Men hur ska folk veta när en ny person registrerar sig?
Vad vi behöver är en liten animering för att låta folk visa att en person har registrerat sig. Vad sägs om att släppa in en liten varning till toppen av sidan med ett meddelande som låter dig veta att de just registrerade? Eller hur är det med att blekna den nya personen till listan och ge dem en liten blå höjdpunkt så att vi kan berätta att de är nya?
Alla dessa saker är subtila effekter som verkligen kan göra skillnaden mellan en okej produkt och något som verkligen glädjer dina användare.
Webben mognar
Kom ihåg dagarna i IE6 och Netscape? Dagen när vi var tvungna att oroa oss om alla hade JavaScript aktiverat och vi byggde våra webbplatser med HTML-tabeller?
Vi har kommit långt sedan dess med bra HTML5-support, CSS3 och responsiv design, och de har alla kombinerat för att ge oss fantastiska alternativ när det gäller att animera på webben.
CSS3-animering
Idag stöder alla större webbläsare de flesta eller alla vanliga CSS3-funktioner som rekommenderas av W3C. Detta ger oss, som designers, stor potential att skapa enkla men tvingande animationer som andas liv i andra statiska webbplatser.
Övergångar: CSS Övergångar ger dig möjlighet att utföra en enkel övergång mellan två olika tillstånd. Säg att du har en enkel knapp som du vill byta färger och tryck lätt på svävaren, en övergång skulle vara perfekt för detta användningsfall.
Keyframe Animations: keyframes är en kraftfull CSS3-funktion som låter dig skapa anpassade animationssekvenser. De låter dig styra tid och lätta, varaktigheten, eventuell fördröjning, hur många gånger varaktigheten upprepas, vilken riktning den animerar och mer. Du kan även deklarera flera animeringar på ett HTML-element.
SVG-grafik
En av de fantastiska nya funktionerna i den "mogna webben" är SVG-support. Vi kan äntligen börja använda bilder som skala bra för olika storlekar och upplösningsskärmar. Inte bara det, men SVG: er är kraftfullare än png-bilder eftersom du kan interagera med dem i CSS och JS. Detta ger oss möjlighet att skapa imponerande animeringar som tidigare endast kunde med animerade gifs eller Flash.
Ta en titt på den här animerade giften som har gjorts i CSS och SVG:
En sak SVG-animering kan verkligen vara användbar för att skapa animerade grafer och diagram som kan skala till vilken storlek som helst. Checka ut det här enkla exemplet på JSFiddle:
Möjligheterna till SVG är nästan oändliga!
HTML5-kanfas
En annan spännande teknik som har haft fullt webbläsarsupport ett tag är HTML5 Canvas. Dukelementet används för att rita grafik på webben.
Det liknar SVG men skiljer sig på flera sätt. Först och främst är det ett rasterformat snarare än vektor. Det betyder att det fungerar bättre för mer komplexa teckningar och animationer, men det går inte att skala bra för högupplösta skärmar.
En stor nackdel av duk är att den inte har manipulerbara DOM-element. Det betyder att varje gång du vill ändra ritningen eller animera den, måste du ombilda bilden.
Trots dessa nackdelar är duk fortfarande ett bra verktyg som kan användas för mer komplexa animationer och ritningar.
Javascript animering bibliotek
Även om CSS3-animationer blir allt kraftigare finns det fortfarande några fall för att använda Javascript-animeringar.
Fler och fler bibliotek visas hela tiden som ger oss fantastisk animering till en bråkdel av resurskostnaden vi brukade betala för Javascript-animering.
Snap.svg: snap.svg är utformad för att göra arbetet med dina SVG-tillgångar lika enkelt som jQuery gör arbetet med DOM. Den har ett superrikt animationsbibliotek med enkel händelsehantering som hjälper dig att få din SVG till liv.
Greensock GSAP: gsap.js är en serie professionella verktyg för skript, högpresterande HTML5-animeringar som fungerar i alla större webbläsare. Den är 20x snabbare än jQuery och ännu snabbare än CSS3-animationer i vissa fall. Super-buttery 60fps här kommer vi!
Genomresa: transit.js är ett jQuery-bibliotek som ersätter jQuery-animeringsmodulen med superlätta CSS-övergångar och transformer. Den stora delen är att den använder samma syntax som jQuery's $ ('...'). Animera.
Hastighet: velocity.js liknar Transit genom att den använder samma syntax som jQuery så allt du behöver göra är att inkludera biblioteket och ersätt jQuery's animera med .velocity ().
scrollReveal: scrollReveal är ett open-source js-bibliotek som hjälper dig att skapa och behålla hur sidelementen blinkar ut, utlöses av när de anger visningsporten.
Bounce.js: bounce.js är ett nytt verktyg för att generera spännande CSS3-drivna keyframe-animeringar.
Förbättrad maskinvara i mobila enheter
En sista anledning animationen är verkligen ta bort är att dagens enheter blir allt starkare med varje ny release.
De iPhone 5s, till exempel har ett superdriven a7-chip i den.
Enligt Extreme Tech: "CPU är inte bara en gradvis utveckling av sin Swift föregångare - det är en helt annan beast som faktiskt är mer besläktad med en" stor kärna "Intel eller AMD CPU än en vanlig" liten kärna "CPU."
Även med iOS8 kommer Apple att släppa Metal, vilket är en mycket kraftfull 3d-rendningsmotor som ger dig möjligheten att skapa skrivbordsliknande spel som körs på mobila enheter.
Vissa Android-telefonföretag som LG har till och med byggt enheter med så mycket som 3gb av ram, LG G3 vara bara en. Jag har en bärbar dator från några år tillbaka som knappt har så mycket.
Allt detta för att säga att vi inte bara kan skapa animeringar som fungerar bra på stationära datorer, men samma animationer fungerar bra på telefoner, tabletter och andra mobila enheter.
Animationer är användbara för användarna
Animationer kan verkligen hjälpa till att göra din produkt, app eller webbplats mer användbar och accepterad av dina användare. Det här är för att:
- de ger sammanhang till vad som händer
- de håller människor engagerade
- De hjälper ditt företags standout;
- folk njuter av dem.
Tänk på Kickstarter - en bra video som förklarar din kampanj kan vara skillnaden mellan att vara väldigt framgångsrik och knappt märkt. De bästa kampanjerna använder kraftfulla videor med en välgjord historia för att skapa spänning och bygga fart för deras produkt eller kampanj. Animering kan göra samma för din webbplats eller app. Det kan betyda skillnaden mellan att människor är engagerade och raser om din app och en annan produkt som landar i appkyrkogården.
