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 legáltalánosabb módja a webes tervezők számára, de más típusú elemek is használhatók és visszaélnek, hogy az olvasókat egy meghatározott útvonalon tudják irányítani. 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.
Mi a Visual Flow?
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áskor, és hogyan javíthatja azokat.
02, 07Nyugat-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. szA 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, 07Balró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/07Ne 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, 07Tekintse 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 látja el a tartalomtól. Ezt még meg lehet nézni az About.com Web Design oldalon a régi design.
Amint láthatja, a fotóm 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, 07A 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.
