01/07
Mi a Visual Flow?
A vizuális áramlás a dokumentumon keresztül viszi a néző szemét oly módon, hogy az összes fontos elem kiemelkedő szerepet kapjon, és semmi sem ragadja meg a látást, vagy a néző elveszíti a darab érzését. Nyilvánvaló áramlási elemek, például nyilak vagy számok használata a leggyakoribb módja a webes tervezőknek az áramláshoz, de léteznek olyan egyéb típusú elemek is, amelyek felhasználhatók és helytelenül használhatók arra, hogy az olvasókat egy meghatározott útvonal mentén irányítsák. Az útmutatóban bemutatott lépések példákat mutatnak a jó és rossz áramlatokra, és segítenek a vizuális áramlás szókincsének megismerésében.
A vizuális áramlást sokféleképpen lehet elérni:
- nyilak
- Sorozatos képek vagy szövegelemek
- távlati
- színátmenetek
- Méret változtatás
- Curves
- Mozgás a képeken
- Arcok - különösen a szemek
Az alábbi képek megmutatják Önnek a gyakori hibákat a weblapokon történő áramlásról és annak helyesbítéséről.
02, 07
Nyugat-szöveges áramlások balról jobbra
Ha egy nyugati nyelv olvasásával nőtt fel, arra gondolsz, hogy a szövegnek balról jobbra kell haladnia. Tehát, ahogy a szem egy szövegsoron mozog, balról jobbra halad.
A fenti képen a vízesés jobbra-balra halad, és a víz folyik a vízen. Mivel mindannyian tudjuk, hogy a vízesések leesnek, a vízáramlás irányába való leválasztás a szöveg áramlásával megszakad. A néző szeme rossz irányba mozdul el a szöveg elolvasásához.
03. 07. sz
A szövegnek át kell térnie a képekhez
Ebben az esetben a kép megfordult, hogy a szöveg ugyanolyan irányban haladjon, mint a víz. Minden elem vezet a néző szemét a víz áramlását és a szöveg áramlását.
04, 07
Balról jobbra egyenlő gyors
A képen lévő ló jobbról balra fut, de a szöveg angol, és így balról jobbra. A ló egy irányba ható vizuális hatása lelassítja az egész dokumentum ütemét, mert más irányba halad, mint a szöveg.
A nyugati kultúrákban, mivel a nyelvünk balról jobbra mozog, eljöttünk, hogy a bal és a jobb oldali vizuális irányt előremozgassuk és gyorsan haladjunk, míg a balról jobbra visszafordulók és lassúak. Ha egy gyorsasággal kapcsolatos elrendezést hoz létre, emlékezzetek erre - és tartsd meg a képeket a szöveggel megegyező irányban.
05/07
Ne kényszerítse a néző szemét lassulni
Amikor a ló és a szöveg mindkettő ugyanazon irányba halad, az implicit sebesség növekszik.
06, 07
Tekintse meg a szemeket webes fotókban
Sok fotós weboldalak ezt a hibát követték el - egy személy fényképét helyezik el az oldalra, és a személy távol tartja a tartalmat. Ezt még meg lehet nézni az About.com Web Design oldalon a régi design.
Amint láthatja, a fotóam egy szöveg mellé kerül. De távol tartom a szöveget, szinte a hátam fordult hozzá. Ha megláttad ezt a testbeszédet egy csoportban lévő két ember között, könnyű lenne feltételezni, hogy nem szeretem a legközelebb álló személyt (ebben az esetben a szövegblokkot).
Számos szem-nyomon követési tanulmány kimutatta, hogy az emberek arcokat látnak a weboldalakon. És a kapcsolódó tanulmányok azt mutatták, hogy a képek megtekintésekor az emberek öntudatlanul követik a szemét, hogy meglássák, mi a kép. Ha egy webhelyen lévő fotó a böngésző szélén néz, akkor az ügyfelek meg fogják nézni, majd nyomja meg a Vissza gombot.
07, 07
A Szemek bármelyik fotó esetében a tartalomra kell vonatkoznia
Az új design az About.com, a fotó egy kicsit jobb. Most a szemem előretekintőbb, és van egy kis utalás, hogy balra nézek - ahol a szöveg.
Egy még jobb fotó a helyzetért, ha a vállam is a szöveg felé fordult. De ez sokkal jobb megoldás, mint az első fotó. És olyan esetekben, amikor a kép a tartalom jobb oldalán és a bal oldalon van, ez jó kompromisszum lehet.
Ne felejtsük el, hogy míg az emberek arcainak képei a legnagyobb figyelmet szentelik, ugyanez igaz az állatfotókra is. Például ebben a mintaelrendezésben a kutyáim balra néznek, de a kép rendben van. Szóval az oldalról nézik. Ez az elrendezés javulna, ha megváltoztattam a kutyák orientációját, hogy a képernyő közepére nézzenek.