01 od 07
Kaj je vizualni tok?
Vizualni tok prenaša gledalčevo oko skozi dokument tako, da so vsi pomembni elementi vidni in nič ne prenaša vizije ali povzroči, da bi gledalec izgubil občutek kosa. Uporaba očitnih tokovnih elementov, kot so puščice ali številke, je najpogostejši način, da spletni oblikovalci uporabljajo tok, vendar obstajajo druge vrste elementov, ki jih je mogoče uporabiti in jih nepravilno uporabiti, da bi vaše bralce usmerili na določeno pot. Koraki v tem vajah vam bodo pokazali primere dobrega in slabega pretoka in vam pomagali učiti besedišče vizualnega toka v oblikovanju.
Vizualni tok je mogoče doseči na različne načine:
- Puščice
- Zaporedne slike ali elementi besedila
- Perspektiva
- Gradienti
- Sprememba velikosti
- Curves
- Premikanje slik
- Lice - še posebej oči
Naslednje slike vam bodo pokazale nekaj pogostih napak v toku na spletnih straneh in kako jih popraviti.
02 od 07
Zahodni tokovi besedila od leve proti desni
Če ste odraščali branje zahodnega jezika, ste navajeni, da bi se besedilo moralo premikati z leve proti desni. Torej, ko se oko pomika po vrstici besedila, se premika z leve proti desni.
Na zgornji sliki slap poteka v desno proti levi smeri, besedilo pa teče po slapu. Ker vsi vemo, da se slapovi padejo, je v smeri pretoka vode s tokom besedila odmaknjen. Gledalčevo oko se premika v napačno smer, da bi prebral besedilo.
03 od 07
Vaše besedilo mora pretočiti s slikami
V tem primeru je bila slika obrnjena, tako da se besedilo giblje v isti smeri kot voda. Vsi elementi vodijo pogled gledalca s tokom vode in pretoka besedila.
04 od 07
Levo proti desni je enako hitro
Konj na tej fotografiji poteka od desne proti levi, besedilo pa je angleško in je tako od leve proti desni. Vizualni učinek konjske dirke v eni smeri upočasni tempo celotnega dokumenta, ker gre za drugačno smer kot besedilo.
V zahodnih kulturah, ker se naši jeziki premikajo od leve proti desni, smo prišli po povezavi vizualne smeri od leve proti desni kot naprej in naprej, desno proti levi pa bolj nazaj in počasi. Ko ustvarjate postavitev s konotacijo hitrosti, se morate tega spomniti - in ohranite, da se vaše slike gibljejo v isti smeri kot besedilo.
05 od 07
Ne zaužijte pogleda gledalca, da se počasi ustavi
Ko konj in besedilo gredo v isto smer, se implicitna hitrost poveča.
06 od 07
Oglejte si oči v spletnih fotografijah
Mnoge spletne strani s fotografijami naredijo to napako - na strani postavijo fotografijo osebe in oseba gleda stran od vsebine. To je mogoče videti tudi na spletnem mestu About.com Web Design v starem dizajnu.
Kot lahko vidite, se moja fotografija nahaja poleg nekaterih besedil. Ampak gledam stran od tega besedila, skoraj sem se obrnil nazaj k njemu. Če si videl ta jezik telesa med dvema osebama v skupini, bi bilo enostavno domnevati, da mi ni všeč oseba, ki sem na njej (v tem primeru blok besedila).
Številne raziskave o sledenju očesa so pokazale, da ljudje vidijo obraze na spletnih straneh. Povezane študije so pokazale, da bodo ljudje, ko gledajo slike, nezavedno spremljali oči, da bi videli, kaj sliko gleda. Če fotografijo na vašem spletnem mestu iščejo ob robu brskalnika, bodo tja pogledali vaše stranke in nato pritisnili gumb za nazaj.
07 od 07
Oči v katerikoli fotografiji bi morale imeti dostop do vsebine
V novem dizajnu za About.com je fotografija malo boljša. Zdaj so moje oči bolj usmerjene naprej in rahlo nakazuje, da gledam na levo - kjer je besedilo.
Še boljša fotografija za ta položaj bi bila tista, kjer so bila moja ramena prav tako nagnjena proti tekstu. Toda to je veliko boljša rešitev kot prva fotografija. In v primerih, ko bo slika na desni strani vsebine in leve, bi to lahko bil dober kompromis.
Tudi pri tem se spomnite, da čeprav najbolj privlačijo slike osebnih obrazov, enako velja za fotografije na živalih. Na primer, na tej postavitvi vzorca, imam svoje pse, ki iščejo levo, vendar je slika prazna v desno. Zato iščejo stran. Ta postavitev bi bila izboljšana, če bi spremenila usmerjenost psa, da bi gledali v sredino zaslona.