01 z 07
Co je Visual Flow?
Vizuální tok přenáší oko diváka skrze dokument tak, aby všechny důležité prvky získaly význam a nic nezakrývá vidění nebo způsobuje, že divák ztratí smysl tohoto dílu. Použití průkazných prvků průtoku, jako jsou šipky nebo čísla, je nejběžnějším způsobem, jakým weboví návrháři používají tok, ale existují i jiné typy prvků, které mohou být použity a nesprávně použity k tomu, aby nasměrovali čtenáře k pohybu po určité cestě. Kroky v tomto tutoriálu vám ukáží příklady dobrého a špatného toku a pomohou vám naučit se slovní zásobu vizuálního toku v designu.
Vizuální tok může být dosaženo mnoha způsoby:
- Šipky
- Sekvenční obrázky nebo textové prvky
- Perspektivní
- Přechody
- Změny velikosti
- Křivky
- Pohyb v obrazech
- Tváře - zejména oči
Následující obrázky vám ukáží některé časté chyby v toku na webových stránkách a jejich opravu.
02 z 07
Westernové toky textů zleva doprava
Pokud jste vyrůstali v čtení západního jazyka, jste si zvyklí myslet na to, že text by se měl pohybovat zleva doprava. Takže, jak se oko pohybuje po řádku textu, pohybuje se zleva doprava.
Ve výše uvedeném obrázku vodopád proudí doleva vpravo doleva a text proudí po vodopádu. Vzhledem k tomu, že všichni víme, že vodopády spadnou, dochází k odpojení proudění textu směrem k toku vody. Oko diváka se pohybuje špatným směrem, aby si přečetl text.
03 ze dne 07
Váš text by měl proudit se snímky
V takovém případě byl obraz obrácen tak, že text proudí ve stejném směru jako voda. Všechny prvky vedou oko diváka dolů proudem vody a tokem textu.
04 z 07
Zleva doprava se rovná rychlosti
Kůň na této fotografii běží zprava doleva, ale text je anglicky a tak zleva doprava. Vizuální dopad koní závodů v jednom směru zpomaluje tempo celého dokumentu, protože jde o jiný směr než text.
V západních kulturách, protože naše jazyky se pohybují zleva doprava, jsme se přiřadili vizuálnímu směru zleva doprava jako dopředu a rychle, zatímco zprava doleva je spíše zpomalený a pomalý. Když vytváříte rozložení s konotací rychlosti, měli byste si to pamatovat - a aby se vaše snímky pohybovaly ve stejném směru jako text.
05 z 07
Nenechávejte oko diváka zpomalit
Když koně a text oba směřují stejným směrem, zvyšuje se implicitní rychlost.
06 z 07
Sledujte oči ve webových fotografiích
Mnoho webových stránek s fotografiemi dělá tuto chybu - položí fotografii osoby na stránku a osoba se dívá pryč od obsahu. To může být dokonce vidět na webu designu webdesigner.com v starém designu.
Jak vidíte, je moje fotografie umístěna vedle nějakého textu. Ale dívám se pryč od tohoto textu, skoro jsem se k němu obrátil. Pokud jste viděli jazyk těla mezi dvěma lidmi ve skupině, bylo by snadné předpokládat, že se mi nelíbí osoba, kterou jsem vedle (v tomto případě blok textu).
Mnoho studií sledování oka ukázalo, že lidé vidí tváře na webových stránkách. A související studie ukázaly, že při pohledu na obrázky budou lidé nevědomky sledovat oči, aby viděli, na co se obraz nahlíží. Pokud se na vašem webu fotografuje na okraji prohlížeče, vypadají tam, kde se budou vaši zákazníci, a pak stisknete tlačítko Zpět.
07 z 07
Oči v libovolné fotografii by měly čelit obsahu
V novém designu pro About.com, foto je trochu lepší. Nyní se mé oči dívají dopředu a je tu lehký náznak, že se dívám doleva - kde je text.
Dokonce lepší fotka pro tuto pozici by byla ta, kde mé ramena byly také skloněny k textu. Ale je to mnohem lepší řešení než první fotografie. A v situacích, kdy bude obrázek vpravo od obsahu, stejně jako z levé strany, může to být dobrý kompromis.
Nezapomeňte, že i když obraz lidských tváří přitahuje nejvíce pozornosti, totéž platí pro fotografie zvířat. Například v tomto ukázkovém rozložení mám své psy hledí doleva, ale obraz je zarovnán vpravo. Takže se dívají ze stránky. Toto uspořádání by se zlepšilo, kdybych změnila orientaci psů tak, aby se dívali do středu obrazovky.