Överallt du ser, det finns en cool ny animerad effekt. Om animationen var ett måste-designelement av 2016, är innovativa svepseffekter den kommande designutvecklingen 2017.
Tack delvis till populariteten hos Material Design och Apples animationsriktlinjer med fokus på små rörelser, gör sväng effekterna en återkommande. Men istället för de klibba, blinkande, studsande och spinnande effekterna från det förflutna, är animationerna enkla, skarpa och förtjusande. De bästa hovereffekterna hjälper användaren och förbättrar upplevelsen.
Högereffekter kan sträcka sig från rörelse som påverkar hela skärmen till något så liten som en riktningskälla eller navigationselement.
Hemsida rörelse
Höger effekter kan vara en viktig del av din inledande användarupplevelse. Med animering som fyller skärmen kan ytterligare svävareffekter vara ganska charmiga.
Haus, ovanför, gör ett fantastiskt jobb med detta med tecknade tecken som rör sig över skärmen. Du kanske inte tänker på något av animationen, men med en svängare exploderar karaktärer i en annan åtgärd. Utan svävar valsar varje tecken bara över skärmen.
När du arbetar med en helskärmshjälp-animation som denna, är tricket att glädja användare, inte överväldiga dem. Det är en ganska knepig mellanklass. Genom att hålla resten av designen enkel - mörk, platt bakgrund med en lättläst sans serif typsnitt i vitt - animeringen tillåts rum. Det är det enda tricket på skärmen som uppmuntrar användarna att interagera innan de bläddrar till efterföljande skärmar.
Knappeffekter
En enkel animering kan faktiskt uppmuntra en användare att klicka eller knacka på en knapp i designen. Verkar enkelt, eller hur?
Det är en del av anledningen till att denna typ av animation är så populär.
Skapa en knappeffekt som hjälper användarna att bättre förstå konstruktionen för maximal påverkan. Exemplet ovan från Luke Etheridge, visar ett tillstånd som ändrar färg och berättar användarna vad som händer med ett klick. Detta är en användbar och funktionell hoveranimering som är funktionell och ser bra ut.
Gallerier och bildspel
Webbsidor är förpackade med olika gallerier och bildspel. Nästan alla dessa inkluderar flera animerade effekter, från rörelsen mellan diabilder till pilar eller andra divotrar som berättar användarna hur man går framåt eller går tillbaka.
Nyckeln till att designa moderna rörelser kan dras direkt från Material Design specifikationer.
- Motion är snabb
- Motion är tydlig
- Motion är kohesiv
Rörelsen är skottet från Baptiste Dumas gör alla dessa saker. Förflyttningen händer på ett sätt som inte lämnar användaren frågar vad som händer nästa, det skapar och uppenbar linje mellan innehållselement och allt är knutet ihop med liknande och sömlösa rörelseflöden.
Navigering och menyer
Gilla det eller inte är dolda navigationsstilar ett populärt designelement. Bra bitar av animering eller svängningseffekter kan hjälpa användarna att bättre navigera innehåll och flytta runt designen.
Från hamburgerikoner som växer eller bleknar med information som dyker upp eller svänger ut på skärmen kan animerande menyalternativ fungera som ett starkt riktverktyg.
Oxen Made, ovan, använder hover animeringar på två sätt på hemsidan för att rikta användarna till vilka åtgärder de ska ta. ?Meny? ändrar färg på svävar för att låta användarna veta att det är ett klickbart element. Hela menyn svänger sedan från vänster på sidan. Vidare studsar en liten triangulär pil i det högra hörnet, med samma gula från den aktiva menyknappen, vilket signaliserar att det finns mer innehåll på rullningen.
Dessa subtila rörelser inträffar medan en relativt upptagen bakgrundsvideo spelas. De mjukare rörelserna kontrasterar tillräckligt med bakgrunden för att fånga användarnas uppmärksamhet och ge riklig platsriktning och navigering.
Blanketter och fält
Några av de bästa exemplen på svängverkan är att använda former och fält. Nästan varje webbplats du besöker ber om någon form av åtgärd eller information. Ju lättare det är för användarna att tillhandahålla denna information, desto mer sannolikt är det att du faktiskt samlar in den.
Det betyder inte att former måste vara tråkiga. Visuella signaler som verktygstips som hjälper användarna att komma ihåg vad de ska skriva in i ett fält (och i vilket format) samt bekräftelse på framgång är viktiga.
Exemplet ovan gör båda sakerna. Användare får veta vilken information som ska ingå, de kan se posten som det händer och med ett klick på? Login? knappen visas en snabb animerad bekräftelse på skärmen. Användare behöver inte gissa om deras information har skrivits in korrekt eller inte och vet med den snabba kontrollen på skärmen att de kan fortsätta med vad de vill göra nästa.
Om du inte är säker på var du ska börja med enkla svävar eller animeringar kan formulär vara en bra utgångspunkt. Användare förväntar sig redan denna del av webbplatsen att vara interaktiv. De kommer att göra något med formuläret; ge lämplig feedback med en enkel animering.
Resurser och kod för att försöka
Klar för att lägga till några animerade effekter på din design? Det finns massor av bra resurser som kan hjälpa dig att komma igång.
- Hover.css: En samling CSS3-drivna svepseffekter som ska tillämpas på länkar, knappar, logotyper, SVG, utvalda bilder och så vidare. Applicera på dina element, ändra eller använd som inspiration. Finns i CSS, Sass och LESS.
- Bildhuvudseffekter: En samling effekter som hjälper dig att få ut det mesta av svävar på bilder. Kopiera koden och använd i dina projekt.
- Ikonförflyttningseffekter: Enkel svävar för att lägga tonvikten på cirkulära ikoner.
- Fantastiska WordPress svep effekter: Effektsamlingen är utmärkt för WordPress-användare, och är gjord med ren CSS3 och inga beroenden. Samlingen innehåller dussintals alternativ och stilar.
- W3Schools - CSS3 Övergångar: Lär dig att använda CSS3-övergångar från grunden med denna handledning.
Slutsats
Hover animeringar är en av de design tekniker som ser trickiga och tunga ut. Men verkligheten är att med CSS-animering kan nästan alla enkelt lägga till en enkel animering. De är lätta och det finns gott om animatörer där ute som vill dela kodfragment med dig.
Tänk bara på den gyllene regeln att använda något knep i din design: Det måste vara meningsfullt. Använd bara svepseffekter eller animeringar när de läggs till i innehållet. var försiktig så att du inte distraherar användarna från de åtgärder de behöver ta. Ha kul och lycka till!