Visuell strømning bærer betrakterens øye gjennom dokumentet på en måte som alle viktige elementene mottar fremtredende, og ingenting synker visjonen eller får betrakteren til å miste følelsen av stykket. Bruke åpenbare strømningselementer som piler eller tall er den vanligste måten Webdesignere bruker flyt, men det finnes andre typer elementer som kan brukes og misbrukes for å lede leserne dine til å bevege seg langs en bestemt bane. Trinnene i denne opplæringen vil vise deg eksempler på god og dårlig flyt og hjelpe deg å lære vokabularet av visuell flyt i design.
Hva er Visual Flow?
Visuell strømning kan oppnås på mange måter:
- piler
- Sekventielle bilder eller tekstelementer
- Perspektiv
- gradienter
- Størrelsen endres
- Curves
- Bevegelse i bilder
- Ansikter - spesielt øynene
Følgende bilder viser deg noen vanlige feil i strømmen på nettsider og hvordan du retter dem.
02 av 07Western Text Flows fra venstre til høyre
Hvis du vokste opp med å lese et vestlig språk, er du vant til å tenke at teksten skal bevege seg fra venstre til høyre. Så, som øyet beveger seg over en tekstlinje, beveger den seg fra venstre til høyre.
I bildet ovenfor strømmer fossen i høyre til venstre retning, og teksten flyter oppover fossen. Siden vi alle vet at fosser faller ned, er det en frakobling i retning av strømmen av vann med strømmen av teksten. Seerens øye beveger seg i feil retning for å lese teksten.
03 av 07Din tekst burde flyte med bildene
I dette tilfellet har bildet blitt reversert, slik at teksten flyter i samme retning som vannet. Alle elementer fører seerens øye ned med vannstrømmen og strømmen av tekst.
04 av 07Venstre til høyre er like rask
Hesten i dette bildet løper fra høyre til venstre, men teksten er engelsk og så til venstre til høyre. Den visuelle effekten av hesteveddeløp én retning reduserer tempoet i hele dokumentet fordi det går en annen retning enn teksten.
I vestlige kulturer, fordi våre språk beveger seg fra venstre til høyre, har vi kommet for å knytte en visuell retning fra venstre til høyre som fremover og fort, mens høyre til venstre er mer bakover og sakte. Når du lager et layout med en konnotasjon av fart, bør du huske dette - og hold bildene dine i bevegelse i samme retning som teksten.
05 av 07Ikke tvinge seerens øye til å senkes
Når hesten og teksten begge går i samme retning, øker den underforståtte hastigheten.
06 av 07Se på øynene i webfotografier
Mange nettsteder med bilder gjør denne feilen - de legger et bilde av en person på siden, og personen ser på borte fra innholdet. Dette kan til og med ses på nettstedet About.com Web Design i den gamle designen.
Som du kan se, er bildet mitt plassert ved siden av noen tekst. Men jeg ser bort fra den teksten, jeg har nesten ryggen min til det. Hvis du så det kroppsspråket mellom to personer i en gruppe, ville det være lett å anta at jeg ikke liker personen jeg er ved siden av (i dette tilfellet tekstblokken).
Mange øye sporing studier har vist at folk ser ansikter på websider. Og relaterte studier har vist at når man ser på bilder, vil folk deretter ubevisst følge øynene for å se hva bildet ser på. Hvis et bilde på nettstedet ditt ser ut av kanten av nettleseren, så kommer kundene dine til å se, og deretter trykker du på tilbakeknappen.
07 av 07Øynene i et hvilket som helst bilde burde møte innholdet
I det nye designet til About.com er bildet litt bedre. Nå ser øynene mine fremover, og det er et lite snev som jeg ser til venstre, hvor teksten er.
Et enda bedre bilde for den posisjonen ville være en hvor skuldrene mine også var vinklet mot teksten. Men dette er en mye bedre løsning enn det første bildet. Og for situasjoner der bildet vil være både innholdsrett og venstre, kan dette være et godt kompromiss.
Husk også at mens bilder av folks ansikter trekker mest oppmerksomhet, det samme gjelder dyrs bilder. For eksempel, i denne utvalgsoppsettet har jeg hundene mine til venstre, men bildet er flush riktig. Så de ser på siden. Dette oppsettet ville bli bedre hvis jeg endret hundens orientering slik at de så inn på midten av skjermen.
