Visuel strøm bærer betragterens øje gennem dokumentet på en måde, at alle vigtige elementer får fremtrædende karakter, og intet slynger visionen eller får seeren til at miste følelsen af stykket. Brug af indlysende strømningselementer som pile eller tal er den mest almindelige måde, hvorpå webdesignere bruger flow, men der er andre typer elementer, der kan bruges og misbruges til at lede dine læsere til at bevæge sig langs en bestemt sti. Trinnene i denne tutorial vil vise dig eksempler på god og dårlig flow og hjælpe dig med at lære ordforrådet af visuel strømning i design.
Hvad er Visual Flow?
Visuel strømning kan opnås på mange måder:
- pile
- Sekventielle billeder eller tekstelementer
- Perspektiv
- farveforløb
- Størrelsesændringer
- Kurver
- Bevægelse i billeder
- Ansigter - især øjnene
Følgende billeder viser dig nogle almindelige fejl i strømmen på websider og hvordan du retter dem.
02 af 07Western tekststrømme fra venstre til højre
Hvis du voksede op med at læse et vestligt sprog, er du vant til at tro, at teksten skal flytte fra venstre mod højre. Så som øjet bevæger sig på tværs af en tekstlinje, bevæger den sig fra venstre mod højre.
I ovenstående billede strømmer vandfaldet i højre til venstre retning, og teksten flyder op i vandfaldet. Da vi alle ved, at vandfald falder ned, er der en afbrydelse i retning af strømmen af vand med strømmen af teksten. Seernes øjne bevæger sig i den forkerte retning for at læse teksten.
03 af 07Din tekst skal flyde med billederne
I dette tilfælde er billedet vendt, så teksten flyder i samme retning som vandet. Alle elementer fører seerens øje ned med vandets strømning og strømmen af tekst.
04 af 07Venstre til højre svarer til hurtig
Hesten i dette billede løber fra højre til venstre, men teksten er engelsk og så til venstre mod højre. Den visuelle virkning af hestevæddeløb en retning nedsætter tempoet i hele dokumentet, fordi det går en anden retning end teksten.
I vestlige kulturer, fordi vores sprog bevæger sig fra venstre mod højre, er vi kommet for at forbinde en visuel retning fra venstre mod højre som fremad og hurtig, mens højre til venstre er mere bagud og langsom. Når du opretter et layout med en konnotation af hastighed, skal du huske dette - og holde dine billeder bevæger sig i samme retning som teksten.
05 af 07Undgå at tvinge seerens øje til at sænke
Når hesten og teksten begge går i samme retning, øges den underforståede hastighed.
06 af 07Se øjnene i webfotografier
Mange websider med fotos gør denne fejl - de sætter et billede af en person på siden, og personen ser ud væk fra indholdet. Dette kan endda ses på webstedet About.com Web Design i det gamle design.
Som du kan se, er mit foto placeret ved siden af nogle tekst. Men jeg ser væk fra den tekst, jeg har næsten min ryg vendt til den. Hvis du så kroppssproget mellem to personer i en gruppe, ville det være let at antage, at jeg ikke kan lide den person, jeg er ved siden af (i dette tilfælde tekstblokken).
Mange eye tracking undersøgelser har vist, at folk ser ansigter på websider. Og relaterede studier har vist, at når man kigger på billeder, følger folk ubevidst øjnene for at se, hvad billedet ser på. Hvis et billede på dit websted ser ud af kanten af browseren, er det her, dine kunder vil se, og derefter trykke på tilbage-knappen.
07 af 07Øjnene på et hvilket som helst foto skal stå over for indholdet
I det nye design til About.com er billedet lidt bedre. Nu ser mine øjne mere fremad, og der er et lille tip, som jeg ser til min venstre - hvor teksten er.
Et endnu bedre billede til den position ville være en, hvor mine skuldre også var vinklet mod teksten. Men det er en meget bedre løsning end det første billede. Og for situationer, hvor billedet vil være til højre for indhold såvel som venstre, kan dette være et godt kompromis.
Husk også, at mens billeder af folks ansigter trækker mest opmærksomhed, det samme gælder for dyrs billeder. I eksempeleksemplet har jeg mine hunde kigget til venstre, men billedet er flush rigtigt. Så de ser ud af siden. Dette layout ville blive forbedret, hvis jeg ændrede hundernes orientering, så de kiggede ind i midten af skærmen.
