Visuellt flöde bär betraktarens öga genom dokumentet på så sätt att alla viktiga element får framträdande, och ingenting försvinner visionen eller får betraktaren att förlora känslan av stycket. Att använda tydliga flödeselement som pilar eller siffror är det vanligaste sättet Webdesigners använder flöde, men det finns andra typer av element som kan användas och missbrukas för att rikta dina läsare att flytta längs en viss väg. Stegen i denna handledning visar dig exempel på bra och dåligt flöde och hjälper dig att lära sig ordförrådet för visuellt flöde i design.
Vad är Visual Flow?
Visuellt flöde kan uppnås på många sätt:
- pilar
- Sekventiella bilder eller textelement
- Perspektiv
- gradienter
- Storleken ändras
- kurvor
- Rörelse i bilder
- Ansikten - särskilt ögonen
Följande bilder visar dig några vanliga misstag i flödet på webbsidor och hur du korrigerar dem.
02 av 07Västra textflöden från vänster till höger
Om du växte upp med att läsa ett västerländsk språk, är du van att tänka på att texten ska gå från vänster till höger. Så, när ögat rör sig över en textlinje, flyttas det från vänster till höger.
I bilden ovan strömmar vattenfallet åt höger mot vänster, och texten strömmar upp i vattenfallet. Eftersom vi alla vet att vattenfall faller ner, finns det en koppling i riktning mot flödet av vatten med textflödet. Visarens öga rör sig i fel riktning för att läsa texten.
03 av 07Din text ska flöda med bilderna
I detta fall har bilden blivit omvänd så texten flyter i samma riktning som vattnet. Alla delar leder betraktarens öga med vattenflödet och flödet av text.
04 av 07Vänster till höger är lika snabbt
Hästen i detta foto går från höger till vänster, men texten är engelska och så vänster till höger. Den visuella effekten av hästkapplöpning en riktning saktar ner hela dokumentets takt eftersom det går en annan riktning än texten.
I västkulturer, eftersom våra språk flyttar från vänster till höger, har vi kommit att koppla en visuell riktning från vänster till höger som framåt och snabbt, medan höger till vänster är mer bakåt och långsamt. När du skapar en layout med en konnotation av hastighet, bör du komma ihåg detta - och behåll dina bilder i samma riktning som texten.
05 av 07Tvinga inte tittarens öga att sakta ner
När hästen och texten båda går i samma riktning, ökar den underförstådda hastigheten.
06 av 07Titta på ögonen i webbfoton
Många webbplatser med foton gör detta misstag - de lägger ett foto på en person på sidan, och personen ser ut bort från innehållet. Detta kan till och med ses på webbsidan About.com Web Design i den gamla designen.
Som du kan se är mitt foto placerat bredvid lite text. Men jag tittar bort från den texten, jag har nästan min rygg på den. Om du såg kroppsspråket mellan två personer i en grupp, skulle det vara lätt att anta att jag inte gillar den person jag är bredvid (i detta fall textblocket).
Många ögonspårningsstudier har visat att människor ser ansikten på webbsidor. Och relaterade studier har visat att när man tittar på bilder kommer människor sedan medvetet att följa ögonen för att se vad bilden ser på. Om ett foto på din webbplats tittar utanför kanten av webbläsaren, så kommer dina kunder att se ut och sedan på bakåtknappen.
07 av 07Ögonen i vilket foto som helst ska möta innehållet
I den nya designen för About.com är fotot lite bättre. Nu ser mina ögon framåt, och det finns en liten aning som jag ser till vänster - där texten är.
Ett ännu bättre foto för den positionen skulle vara en där mina axlar vinklade mot texten. Men det här är en mycket bättre lösning än det första fotot. Och för situationer där bilden kommer att vara både innehållsrätt och vänster kan detta vara en bra kompromiss.
Kom också ihåg att medan bilder av människors ansikten uppmärksammar mest, det samma gäller djurbilder. Till exempel, i den här urvalet har jag mina hundar som tittar till vänster, men bilden är flush rätt. Så de ser på sidan. Denna layout skulle förbättras om jag ändrade hundens orientering så att de tittade in i mitten av skärmen.
