Scrolling är en nyckelkomponent i någon webbdesign som sträcker sig bortom en enda målsida. Den som tror att scrollen är död behöver hoppas ut 2005!
Bläddraåtgärder flyttar användare genom innehåll vertikalt eller horisontellt och är ett allmänt accepterat användarmönster. Rullningen är levande och bra tack vare massor av intressanta designtekniker och ett skifte mot att få tillgång till hela webbplatser på mindre skärmar. Låt oss ta en titt!
6 sätt att använda rullningsåtgärder
En rullningsåtgärd är inte bara ett smutsigt knep för din webbdesign. Det måste göra någonting, och leda användarna att engagera sig med specifikt innehåll eller utföra en viss åtgärd. Om inte dessa kriterier är uppfyllda, är rullningsåtgärder bara dumma knep.
Det finns några olika sätt att engagera användare med rullning:
- Bläddra vertikalt: Detta är det mest intuitiva mönstret där användarna flyttar upp och ner på sidan. Även utan mycket annan information, kommer användarna att försöka rulla ner om de har något intresse för designen eller innehållet.
- Bläddra horisontellt: Medan det här mönstret blir vanligare tack vare en spridning av bildreglage, behöver de flesta användare fortfarande en horisontell rullningsljus, till exempel en pil eller instruktion. Då måste du bestämma om horisontell rullning är en en- eller dubbelriktad åtgärd.
- Använd lager: Layering av objekt hjälper användare att se mönster och rörelse (tänk på Material Design Principles). Genom att stapla element på bakgrund och förgrund kan du uppmuntra att rulla.
- Berätta för användare att bläddra: Det finns inget fel med en ikon eller bit av mikroskopi som berättar användarna var och hur man rullar. Inkludera elementet precis ovanför där skärmen bryter? och användarna skulle behöva bläddra för att se mer.
- Använd klicka för att bläddra: Om du använder en ikon eller ett element för att uppmuntra att bläddra, aktivera det med ett klick också. (Användare kan nästan inte hjälpa men klicka på element som ser ut som knappar.) Med ett klick för att rulla åtgärden kommer en trevlig överraskning att zippa användarna till nästa bit på innehåll.
- Bläddra överallt: Det finns ingen regel som säger att scroll måste vara upp och ner eller vänster och höger. Det kan röra sig på alla sätt. Betrakta runda, diagonala eller andra mönster så länge de är enkla för användarna att förstå i förhållande till innehållet och uppmuntra engagemang.
10 Killer-exempel för inspiration
Nu när du har en uppfattning om hur man designar rullningsåtgärder, inspireras av några exempel på bra design. För att få ut mesta möjliga av alla exemplen nedan, se till att klicka till webbplatserna och spela om för att få ut det mesta av varje interaktiv upplevelse.
Du noterar att varje projekt närmar sig att rulla lite annorlunda. Vissa är mer intuitiva än andra, men alla ger en intressant baslinje för att komma igång. Njut av!
IMS Productions
IMS Productions använder vertikal rullning för att effektivt presentera historier en? Skärm? vid en tid. Varje rullning tar användarna till en ny profil som fyller skärmen och erbjuder en egen mini-upplevelse. Notera de subtila vertikala linjerna och pilen som alla direkta användare ska bläddra i hela webbdesignen.
Instant Love
Instant Love-par rullar in handlingar och ljud för ett musikexperiment som är mycket roligt. Varje skrollåtgärd presenterar en ny låt för användaren att lyssna på, komplett med spår och artistinformation. Scroll-åtgärder används som ett spel för att uppmuntra engagemang och interaktion under en längre tid.
Smart USA
Smart USA använder många coola rullningstekniker, inklusive en 360 graders vy, för att hjälpa till att sälja bilar. Denna typ av rullningsfunktion kan vara värdefull för e-handel och produktförsäljning eftersom användare kan utforska produkterna mer i detalj än med bilder ensamma.
Havaianas
Havaianas använder horisontell rullning för att visa produkter. Vad som är trevligt med detta mönster är att varje bild i rullningen innehåller ett anrop till åtgärd och framdriftsfältet längst ner. Medan panelen automatiskt bläddrar kan användarna ta kontroll när som helst för att se bara de innehåll de letar efter.
Spela upp
Uppspelning är ett animerat äventyr av rörliga delar som förändras och skiftas med varje musklick. Det går mycket med scroll-åtgärder, men rörelserna är snabba och lockande, speciellt med de djupare färgvalen. Dessutom kan användarna bläddra upp eller ner och det finns alltid en visuell signal till höger som låter dig veta vilka åtgärder som finns tillgängliga.
Pharrell Williams
Pharrell Williams har en av de roligaste scrollande webbplatser du hittar. Den rör sig i alla riktningar, studsar, skiftar och ändrar form före ögonen. Och varje bit av designen styrs av bläddringsåtgärder. När användarna klickar på kort från hemsidan, gör interiörsidorna också det mesta av fortsatt rullning med parallaxrörelse för att bibehålla samma känsla.
Tubelectric
Tubelektrisk ser inte ut som en design som kommer att ha många rullningseffekter, men den använder enkel lager och animering för att markera produkten. Det finns oväntade designglädje med varje flick av musen för en webbplats som kunde ha haft en platt övergripande design.
Världens högsta webbplats
Världens högsta webbplats är ett dumt exempel på att rulla till det yttersta. Det fortsätter bara att rulla i mer än 11 miles. Ha så kul!
Rocket Lab
Rocket Lab använder en mer traditionell vertikal rullning under hela sidan video för att presentera information. Vad är speciellt trevligt är mikrokopi -? Låt oss rulla? - för att berätta för användarna att fortsätta att bläddra för mer.
sliders
Slider använder en parallax-rullningsåtgärd för att visa upp restaurang och menyalternativ. Den övergripande designen är ganska enkel och rullningshandlingarna är inte komplicerade, men allt kommer ihop med lätthet. Det här är ett bra exempel på hur man blandar coola användargränssnittsåtgärder med stjärnbilder.
Slutsats
Rullning kommer i många olika former.Förhoppningsvis kommer dessa exempel att inspirera dig att skapa något med ett intressant eller nytt rullningsmönster som hjälper till att engagera en ny användarebas.
Kom bara ihåg, som med något nytt. Testa det. Titta på analyserna. Gör ändringar som behövs för att försäkra dig om att dina experimentella rullnings- och designmönster är framgångsrika och tjänar användarna bra.