01 07
Mis on visuaalne voog?
Visuaalne voog kannab vaatevälja silma läbi dokumendi nii, et kõik olulised elemendid on esiletõstetud, ja midagi ei jälgi nägemust ega põhjusta vaatajalt tükkide mõttes kaotust. Veelgi enam, kui veebi disainerid kasutavad voogu, on kasutatav selgete voogude elementidega nagu nooled või numbrid, kuid on olemas ka teisi elemente, mida saab kasutada ja mida kasutatakse valesti, et lugejad saaksid liikuda kindla tee suunas. Selle õpetuse sammud näitavad teile näiteid hea ja halva voolu kohta ning aitavad teil disainis visuaalse voo sõnavara õppida.
Visuaalset voogu on võimalik saavutada mitmel viisil:
- Nooled
- Järjestikused pildid või tekstielemendid
- Perspektiiv
- Gradiendid
- Suuruse muutused
- Kõverad
- Liikumine piltides
- Näod - eriti silmad
Järgmised pildid näitavad teile mõnda levinumat viga veebisaitidel ja kuidas neid parandada.
02 of 07
Lääne tekstivoog vasakult paremale
Kui sa kasvasid Lääne keele lugemisega, siis hakati mõtlema, et tekst peaks liikuma vasakult paremale. Nii et kui silm liigub teksti rida, liigub see vasakult paremale.
Eespool toodud pildil jookseb juga otse vasakpoolsesse suunas, ja tekst jookseb juga. Kuna me kõik teame, et vesipüssid langevad, on vee voolu suunas liikumine lahti teksti sisestamisega. Vaataja silm liigub teksti lugemiseks vales suunas.
03 07
Teie tekst peaks piltidega voolama
Sellisel juhul on pilt pööratud nii, et tekst voolab samas suunas veega. Kõik elemendid viivad vaataja silma maha vee voogu ja tekstivoogu.
04 07
Vasakult paremale võrdne kiire
Selle pildi hobune töötab paremale vasakule, kuid tekst on ingliskeelne ja seega vasakule paremale. Hobuste võidusõidu visuaalne mõju ühe suuna aeglustab kogu dokumendi tempot, sest see läheb teksti erinevas suunas.
Lääne kultuurides, sest meie keeled liiguvad vasakult paremale, oleme seostanud visuaalse suuna vasakult paremale, kui edasi ja kiire, kuid paremalt vasakule on rohkem tagasi ja aeglane. Kui loote kiiruse konnotatsiooniga paigutuse, peate seda meeles pidama - ja hoidke oma pilte liikuma tekstiga samas suunas.
05 07
Ärge laske vaataja silmal aeglustada
Kui hobune ja tekst lähevad mõlemad samale suundumusele, suureneb eeldatav kiirus.
06 07
Vaadake silte Web-fotodes
Paljud fotodega veebisaidid teevad selle vea - nad panid lehe inimesele foto ja inimene vaatab sisu eemale . Seda võib isegi näha vanas disainis About.com Web Designi saidil.
Nagu näete, on minu foto paigutatud mõne teksti kõrval. Kuid ma vaatan sellest tekstist eemale, peaaegu pöördesin selle poole tagasi. Kui näete seda keha keelt kahe inimese vahel ühes rühmas, oleks lihtne eeldada, et mulle ei meeldi see isik, kellega ma olen (siinkohal tekstblokk).
Paljud silma jälgimise uuringud on näidanud, et inimesed näevad nägusid veebisaitides. Seotud uuringud on näidanud, et piltide vaatamisel jälgivad inimesed teadmatult silmi, et näha, mida pilt vaadeldes on. Kui teie saidil olev foto vaatab brauseri serva, on see teie klientide otsimine ja seejärel tagurpidi nupp.
07 07
Iga pildi silmad peaksid sisu nägema
Uues värvides About.com jaoks on foto veidi parem. Nüüd mu silmad otsivad edasi edasi ja on väike vihje, et ma otsin mu vasakule - kus see tekst on.
Selle positsiooni veelgi parem foto oleks see, kus minu õlad olid ka teksti suhtes suunatud. Kuid see on palju parem lahendus kui esimene foto. Ja olukorras, kus pilt on nii sisult kui ka vasakult paremal, võib see olla hea kompromiss.
Pidage meeles ka seda, et kuigi inimeste nägude kujutised tõmbavad kõige rohkem tähelepanu, on loomade fotodel sama. Näiteks selles proovi kujunduses on minu koerad jälle jäetud, kuid pilt on paremale. Nii et nad vaatavad lehte. See paigutus paraneks, kui muutsin koerte orientatsiooni nii, et nad vaatasid ekraani keskele.