Kan Web Animation Gem Flat Design?
Som webdesignere skal vi sørge for, at vi holder vores færdigheder friske og opdaterede. Vi behøver ikke at følge enhver tendens, der følger med (som lange skygger), men vi behøver fortsat at lære og forbedre vores færdigheder, da nettet vokser og modnes.
En spændende ny udvikling, der begynder at samle damp i webdesignindustrien, er animation. Flere og flere virksomheder søger at animere til deres apps eller hjemmesider som en måde at glæde deres brugere på, standse fra konkurrenter og forbedre brugbarheden af deres produkter.
En anden grund til animation er i høj efterspørgsel er på grund af webens seneste fokus på fladt design. Flade design, mens det generelt er en meget positiv ting, har nogle få problemer, der kører folk til at lede efter måder at forbedre sig på.
Flade design har nogle få problemer
I dag vedtager flere og flere virksomheder den minimale "flade design" æstetik. Websites begynder at se meget ens ud med ikke meget at skelne mellem mærker. Dette åbner mulighed for designere til at udforske andre midler til at gøre deres hjemmeside engagerende og spændende for deres brugere.
Det er her, hvor animationen kommer ind. Animation er som salt på dine fries; uden det er de lidt blide og mangler smag. Ved at animere forskellige elementer i dit design kan du tilføje lidt spænding og glæde dine brugere med kreative og hjælpsomme animationer.
Et andet problem med fladt design er, at brugerne kan miste sammenhængen med, hvad der vil ske, når de interagerer med et websted / app. Når knapper holder op med at se ud som knapper eller andre ting som mærker begynder at se ud, er folk forvirret med hvad der vil ske, når de klikker på dem.
Vi kan løse dette problem ved at designe forskellige animationer, der opstår, når elementer svæves eller klikkes på, Colin Garven s indsende knap for eksempel:
Endelig er et sidste problem, jeg ønsker at røre ved, at informere brugeren, når en ændring finder sted. I dag bruger mange moderne webapps kraftfulde værktøjer som AngularJs og Node.js til at opbygge "pageless, live-updating" apps. Tænk på Gmail: For at få en ny e-mail behøver du aldrig at opdatere siden; det kommer bare ind, når nogen sender dig en ny email.
Dette kan være lidt af et problem, hvis brugerne ikke får nogen underretning eller slette tegn på, at siden er ændret eller indlæst nyt indhold. Hvis siden er gemt, skal vi se noget, som vil fortælle os, at appen virker og har gemt vores arbejde i baggrunden.
Animation er en fantastisk måde at informere brugere om, når der sker forskellige begivenheder.
Lad os sige, at du har en liste over registrerede personer til din næste møde eller konference. Når nye mennesker registrerer, føjer du dem til listen i realtid med node.js, så de behøver aldrig at opdatere siden. Great, det vil være meget nyttigt for vores brugere. Men nu hvordan skal folk vide, hvornår en ny person registrerer?
Det, vi har brug for, er en lille animation for at lade folk se, at en person har registreret. Hvad med at droppe ind i en lille advarsel til toppen af siden med en besked, der fortæller dig, at de lige har registreret? Eller hvad med at falde ind i den nye person på listen og give dem en lille blå højdepunkt, så vi kan fortælle de er nye?
Alle disse ting er subtile effekter, der virkelig kan gøre forskellen mellem et okay produkt og noget, der virkelig lækker dine brugere.
Weben modnes
Husk dagen for IE6 og Netscape? De dage, hvor vi måtte bekymre os, hvis alle havde JavaScript aktiveret, og vi byggede vores websteder med HTML-tabeller?
Vi er kommet langt siden da med stor HTML5-support, CSS3 og lydhør design, og de har alle kombineret for at give os fantastiske muligheder, når det kommer til at animere internettet.
CSS3 animation
I dag understøtter hver større browser de fleste eller alle de standard CSS3-funktioner, der anbefales af W3C. Dette giver os som designere et stort potentiale for at skabe enkle, men overbevisende animationer, der adderer liv i ellers statiske hjemmesider.
Overgange: CSS Overgange giver dig mulighed for at udføre en simpel overgang mellem to forskellige tilstande. Sig, at du har en simpel knap, som du vil ændre farver og skubbe lidt på sværgeren, en overgang ville være perfekt til denne brugs sag.
Keyframe Animationer: Keyframes er en kraftfuld CSS3-funktion, der giver dig mulighed for at oprette brugerdefinerede animationssekvenser. De giver dig mulighed for at kontrollere timingen og lempelsen, varigheden, enhver forsinkelse, hvor mange gange varigheden gentager, hvilken retning den animerer og mere. Du kan endda erklære flere animationer på et HTML-element.
SVG-grafik
En af de fantastiske nye funktioner i den "modne web" er SVG-support. Vi kan endelig begynde at bruge billeder, der skaler godt for forskellige størrelses- og opløsningsskærme. Ikke kun det, men SVG er meget kraftigere end png-billeder, fordi du kan interagere med dem i CSS og JS. Dette giver os mulighed for at oprette imponerende animationer, der tidligere kun kunne bruges med animerede gifs eller Flash.
Se på dette animerede gif der er blevet genskabt i CSS og SVG:
En ting SVG-animation kan virkelig være nyttigt for at skabe animerede grafer og diagrammer, der kan skaleres til enhver størrelse. bestilling dette enkle eksempel på JSFiddle:
Mulighederne for SVG'er er næsten uendelige!
HTML5 lærred
En anden spændende teknologi, der har haft fuld browser support i et stykke tid, er HTML5 Canvas. Lærredelementet bruges til at tegne grafik på nettet.
Det ligner SVG, men adskiller sig på flere måder. Først er det et rasterformat snarere end vektor. Det betyder, at det fungerer bedre for mere komplekse tegninger og animationer, men det skal ikke skales godt for skærme med høj opløsning.
En stor ulempe ved lærred er, at den ikke har manipulerbare DOM elementer. Dette betyder, at hver gang du vil ændre tegningen eller animere den, skal du omdanne billedet.
På trods af disse ulemper er lærred stadig et godt redskab, der kan bruges til mere komplekse animationer og tegninger.
Javascript animation biblioteker
Selvom CSS3-animationer bliver mere og mere kraftfulde, er der stadig nogle tilfælde til at bruge Javascript-animationer.
Flere og flere biblioteker vises hele tiden, der giver os fantastisk animation til en brøkdel af ressourceomkostningerne, som vi plejede at betale for Javascript-animation.
Snap.svg: snap.svg er designet til at gøre arbejdet med dine SVG-aktiver lige så nemme som jQuery gør arbejde med DOM. Den har et superdiget animationsbibliotek med nem begivenhedshåndtering, der hjælper dig med at bringe dine SVG'er til livs.
Greensock GSAP: gsap.js er en række professionelle værktøjer til scripted, højtydende HTML5 animationer, der fungerer i alle større browsere. Det er i nogle tilfælde 20x hurtigere end jQuery og endda hurtigere end CSS3 animationer. Super-buttery 60fps her kommer vi!
Transit: transit.js er et jQuery-bibliotek, der erstatter jQuery-animationsmodulet med superlette CSS-overgange og transformer. Den store del er, der bruger den samme syntaks som jQuery's $ ('...'). Animere.
Hastighed: velocity.js ligner Transit, fordi den bruger den samme syntaks som jQuery, så alt du skal gøre er at inkludere biblioteket og erstatte jQuery's animere med .velocity ().
scrollReveal: scrollReveal er et open-source js-bibliotek, der hjælper dig med at oprette og vedligeholde, hvordan sideelementer falder ind, udløst af, når de kommer ind i visningsporten.
Bounce.js: bounce.js er et nyt værktøj til generering af spændende CSS3-powered keyframe-animationer.
Forbedret hardware i mobile enheder
En sidste årsag animation er virkelig at tage af, er at dagens enheder bliver mere og mere magtfulde med hver ny udgivelse.
Det Iphone 5s, for eksempel har en super powered a7 chip i den.
Ifølge Extreme Tech: "CPU'en er ikke bare en gradvis udvikling af sin swift forgænger - det er et helt andet dyr, der faktisk er mere beslægtet med en" stor kerne "Intel eller AMD CPU end en konventionel" lille kerne "CPU."
Også med iOS8 frigiver Apple Metal, som er en meget kraftfuld 3d-rendemotor, der giver dig mulighed for at oprette desktop-lignende spil, der kører på mobile enheder.
Nogle Android-telefonvirksomheder som LG har endda bygget enheder med så meget som 3gb af ram, LG G3 være bare en. Jeg har en bærbar computer fra et par år tilbage, der næsten ikke har så meget.
Alt dette for at sige, at vi ikke kun kan skabe animationer, der fungerer godt på stationære computere, men de samme animationer fungerer fint på telefoner, tablets og andre mobile enheder.
Animationer er nyttige for brugerne
Animationer kan virkelig hjælpe med at gøre dit produkt, din app eller din hjemmeside mere brugbar og accepteret af dine brugere. Dette er fordi:
- de giver sammenhæng til hvad der sker
- de holder folk engageret
- de hjælper din virksomheds standout;
- folk nyder dem.
Tænk på Kickstarter - en fantastisk video, der forklarer din kampagne, kan være forskellen mellem at være vildt succesfuld og næppe bliver bemærket. De bedste kampagner bruger kraftfulde videoer med en veloparbejdet historie for at skabe spænding og skabe momentum for deres produkt eller kampagne. Animation kan gøre det samme for dit websted eller din app. Det kan betyde forskellen mellem, at folk er engagerede og raser om din app, og en anden produkt lander i app kirkegården.
