01 z 07
Čo je Visual Flow?
Vizuálny prietok nesie oko diváka dokumentom takým spôsobom, že dôležité sú všetky dôležité prvky a nič nezakladá videnie alebo spôsobí, že divák stratil zmysel tohto dielu. Použitie zrejmých prúdových prvkov, ako sú šípky alebo čísla, je najbežnejším spôsobom, ako používatelia používajú tok, ale existujú aj iné typy prvkov, ktoré môžu byť použité a nesprávne použité na nasmerovanie vašich čitateľov na pohyb po určitej ceste. Kroky v tomto návode vám ukážu príklady dobrého a zlého toku a pomôžu vám naučiť sa slovnú zásobu vizuálneho toku v dizajne.
Vizuálny tok môže byť dosiahnutý mnohými spôsobmi:
- arrows
- Sekvenčné obrázky alebo prvky textu
- perspektíva
- prechody
- Zmeny veľkosti
- krivky
- Pohyb v obraze
- Tváre - hlavne oči
Nasledujúce obrázky vám ukážu niektoré bežné chyby v toku na webových stránkach a ako ich opraviť.
02 z 07
Westernové toky textov zľava doprava
Ak ste vyrastali čítanie západného jazyka, ste zvyknutí si myslieť, že by text mal prechádzať zľava doprava. Takže, keď sa oko pohybuje cez riadok textu, pohybuje sa zľava doprava.
Vo vyššie uvedenom obrázku vodopád prúdi v smere z pravej strany doľava a text preteká k vodopádu. Keďže všetci vieme, že vodopády spadnú, dochádza k odpojeniu prúdu vody smerom k toku vody. Oko diváka sa pohybuje nesprávnym smerom a číta text.
03 z 07
Váš text by mal prúdiť so snímkami
V tomto prípade bol obraz obrátený tak, že text preteká rovnakým smerom ako voda. Všetky prvky vedú oko diváka nadol prietokom vody a tokom textu.
04 z 07
Zľava doprava sa rovná rýchlemu
Kôň na tejto fotografii beží sprava doľava, ale text je angličtina a tak zľava doprava. Vizuálny vplyv dostihového koňa v jednom smere spomaľuje tempo celého dokumentu, pretože ide o iný smer ako text.
V západných kultúrach, pretože sa naše jazyky pohybujú zľava doprava, sme sa priradiť k vizuálnemu smeru zľava doprava dopredu a rýchlo, zatiaľ čo zľava doprava je spätne a pomalšie. Keď vytvárate rozloženie s konotáciou rýchlosti, mali by ste si to pamätať - a nechať vaše obrázky v pohybe v rovnakom smere ako text.
05 z 07
Nenechávajte oko prehliadača spomaliť
Keď sa kôň aj text pohybujú v rovnakom smere, zvyšuje sa implikovaná rýchlosť.
06 z 07
Sledujte oči vo webových fotografiách
Mnoho webových stránok s fotografiami spôsobuje túto chybu - dajú na stránku fotografiu osoby a osoba sa pozerá od obsahu. To možno dokonca vidieť na stránkach webdesigner.info v starom dizajne.
Ako vidíte, moja fotka je umiestnená vedľa nejakého textu. Ale pozerám sa od toho textu, skoro som sa obrátil k nemu. Ak ste videli reč tela medzi dvoma ľuďmi v skupine, bolo by ľahké predpokladať, že sa mi nepáči osoba, ktorej som vedľa (v tomto prípade blok textu).
Mnohé štúdie sledovania očí ukázali, že ľudia vidia tváre na webových stránkach. A súvisiace štúdie ukázali, že pri pohľade na obrázky ľudia potom nevedome sledujú oči, aby zistili, na čo sa obraz pozerá. Ak sa fotografia na vašich stránkach pozerá z okraja prehliadača, tam budú vaši zákazníci vyzerať a potom sa dotknete tlačidla Späť.
07 z 07
Oči v každej fotografii by mali obsahovať
V novom dizajne pre About.com je fotografia o niečo lepšia. Teraz sa moje oči pozerajú viac dopredu a je mierny náznak, že sa pozerám doľava - kde je text.
Ešte lepšia fotografia pre túto pozíciu by bola taká, v ktorej by moje ramená boli tiež k textu. Ale je to oveľa lepšie riešenie ako prvá fotografia. A v situáciách, v ktorých bude obrázok na pravej strane obsahu aj ľavice, môže to byť dobrý kompromis.
Pamätajte tiež na to, že zatiaľ čo obrazy tvárí ľudí čerpajú najväčšiu pozornosť, to isté platí pre fotografie zvierat. Napríklad v tomto vzorovom usporiadaní mám svojich psíkov hľadá vľavo, ale obraz je zarovnaný vpravo. Takže sa pozerajú zo stránky. Toto rozloženie by sa zlepšilo, keby som zmenil orientáciu psov tak, aby hľadali do stredu obrazovky.