Visuaalinen virtaus vie katsojan silmän läpi asiakirjan siten, että kaikki tärkeät elementit saavat näkyvyyttä, eikä mikään horjuta näkemystä tai aiheuta katsojan menettää osan tunnetta. Selkeät virtauselementit, kuten nuolet tai numerot, ovat tavallisimpia tapoja, joilla web-suunnittelijat käyttävät virtausta, mutta on olemassa muita elementtejä, joita voidaan käyttää ja väärinkäyttää ohjaamaan lukijaasi tietyn polun suuntaan. Tämän opetusohjelman vaiheet näyttävät esimerkkejä hyvistä ja huonoista virtauksista ja auttavat sinua oppimaan kuvamateriaalin sanastosta.
Mikä on Visual Flow?
Visuaalinen virtaus voidaan saavuttaa monin tavoin:
- nuolet
- Seuraavat kuvat tai tekstit
- näkökulma
- liukuvärit
- Koko muutokset
- käyrät
- Liiku kuvissa
- Kasvot - varsinkin silmät
Seuraavissa kuvissa näkyy joitain yleisiä virheitä verkkosivuilla ja niiden korjaamiseksi.
02/07Läntinen tekstivirta vasemmalta oikealle
Jos olet kasvanut lukemalla länsimaista kieltä, olet tottunut ajattelemaan, että tekstin pitäisi liikkua vasemmalta oikealle. Joten, kun silmä liikkuu tekstin viereen, se liikkuu vasemmalta oikealle.
Yllä olevassa kuvassa vesiputous kulkee oikealta vasemmalle ja teksti vesittää vesiputouksen. Koska me kaikki tiedämme, että vesiputoukset putoavat alas, virtauksen virtaussuunta on katkaistu tekstin virralla. Katsojan silmä liikkuu väärään suuntaan tekstin lukemiseen.
03/07Teksti tulee virtaamaan kuvia
Tässä tapauksessa kuva on päinvastainen niin, että teksti virtaa samaan suuntaan kuin vesi. Kaikki elementit johtavat katsojan silmiin alas veden virtauksen ja tekstivirtauksen kanssa.
04/07Vasemmalta oikealle yhtä nopea
Kuvassa oleva hevonen kulkee oikealta vasemmalle, mutta teksti on englanti ja vasemmalta oikealle. Yhden suuntaisen hevosen visuaalinen vaikutus hidastaa koko asiakirjan tahtia, koska se menee eri suuntaan kuin teksti.
Länsimaisissa kulttuureissa, koska kielet siirtyvät vasemmalta oikealle, olemme tulleet yhdistämään visuaalisen suunnan vasemmalta oikealle eteenpäin ja nopeasti, kun taas oikealta vasemmalle on taaksepäin ja hidas. Kun luot suunnitelmaa, jolla on nopeusmerkki, sinun kannattaa muistaa tämä - ja pitää kuvat liikuttaessa tekstiä samaan suuntaan.
05/07Älä pakota katsojan silmää hidastamaan
Kun hevonen ja teksti molemmat menevät samaan suuntaan, implisiittinen nopeus kasvaa.
06/07Katso Silmät Web-valokuvissa
Monet verkkosivustot, joissa on valokuvia, tekevät tämän virheen - he laittavat henkilön kuvan sivulle ja henkilö etsii pois sisällöstä. Tämä voi jopa nähdä ns. Banner.info Web Design sivuston vanha muotoilu.
Kuten näette, kuvani on sijoitettu jonkin tekstin vieressä. Mutta katson poispäin tästä tekstistä, olen melkein kääntänyt selkääni siihen. Jos näet tämän kehonkielen kahden ihmisen välillä ryhmässä, olisi helppo olettaa, että en pidä henkilöä, jonka vieressäni (tässä tapauksessa tekstin lohkossa).
Monet silmätutkimustutkimukset ovat osoittaneet, että ihmiset näkevät kasvot Web-sivuilla. Ja siihen liittyvät tutkimukset ovat osoittaneet, että kun katsot kuvia, ihmiset tulevat tietoisesti seuraamaan silmiä ja näkemään, mitä kuvaa tarkastellaan. Jos sivustossasi oleva kuva etsii selaimen reunaa, niin asiakkaasi näyttävät, ja paina sitten takaisin-painiketta.
07/07Silmät kaikissa kuvissa tulisi kohdata sisältöön
Uuden design for.com, kuva on hieman parempi. Nyt silmäni etsivät eteenpäin, ja on hieman vihje, että katson vasemmistani - missä teksti on.
Tällöin vielä parempi kuva kyseiselle paikalle olisi yksi, jossa olkapäät olisivat myös kulmassa kohti tekstiä. Mutta tämä on paljon parempi ratkaisu kuin ensimmäinen kuva. Ja tilanteissa, joissa kuva on sisällön oikealla puolella ja vasemmalla, tämä voi olla hyvä kompromissi.
Muista myös, että vaikka ihmisten kasvojen kuvat kiinnittävät eniten huomiota, sama pätee eläinkuvia. Esimerkiksi tässä mallissa koirat ovat vasemmalla, mutta kuva on oikeassa. He katsovat sivulta. Tämä asettelua parannettaisiin, jos muutin koiran suuntaa, jotta he katselisivat näytön keskustaa.
