Визуалният поток пренася окото на зрителя в документа по такъв начин, че всички важни елементи получават известност, а нищо не пречи на визията или кара зрителя да загуби усещането за парчето. Използването на очевидни елементи на потока като стрелки или цифри е най-често срещаният начин, по който уеб дизайнерите използват поток, но има и други видове елементи, които могат да се използват и злоупотребяват, за да насочат читателите ви да се движат по определен път. Стъпките в този урок ще ви покажат примери за добър и лош поток и ще ви помогнат да научите речника на визуалния поток в дизайна.
Какво представлява Visual Flow?
Визуалният поток може да се постигне по много начини:
- стрелките
- Последователни изображения или текстови елементи
- перспектива
- Наклоните
- Промените в размерите
- криви
- Предложение в изображения
- Лицата - особено очите
Следващите изображения ще ви покажат някои често срещани грешки в потока от уеб страници и как да ги коригирате.
02 от 07Западните текстови потоци отляво надясно
Ако сте израснали да четете западен език, вие сте свикнали да мислите, че текстът трябва да се премести отляво надясно. Така че, когато окото се движи по линия на текст, то се движи от ляво на дясно.
В горната картинка водопадът тече от дясно на ляво и текстът се издига над водопада. Тъй като всички знаем, че водопадът пада, има поток от разклонение в посоката на потока на водата с потока на текста. Зрителното поле на зрителя се движи в грешната посока, за да прочете текста.
03 от 07Вашият текст трябва да тече със снимките
В този случай изображението е обърнато, така че текстът тече в същата посока като водата. Всички елементи водят до погледа на зрителя с потока на водата и потока от текст.
04 от 07От ляво на дясно се равнява бързо
Конят в тази снимка се движи от дясно на ляво, но текстът е английски и така отляво надясно. Визуалното въздействие на конни надбягвания в една посока забавя темпото на целия документ, защото е в различна посока от текста.
В западните култури, тъй като нашите езици се движат отляво надясно, ние дойдохме да свържем визуално направление от ляво на дясно, като напред и бързо, а отляво надясно е по-назад и бавно. Когато създавате оформление с конотация на скоростта, трябва да запомните това - и да запазите вашите изображения да се движат в същата посока като текста.
05 от 07Не принуждавайте зрителя да се забави
Когато конят и текстът се движат в една и съща посока, предполагаемата скорост се увеличава.
06 от 07Гледайте очите в уеб снимки
Много уеб сайтове с снимки правят тази грешка - те слагат снимка на човек на страницата и лицето търси далеч от съдържанието. Това дори може да се види на сайт за дизайн в Уеб дизайн в стария дизайн.
Както можете да видите, снимката ми е поставена до някой текст. Но аз гледам настрана от този текст, почти обръщам гръб към него. Ако сте видели езика на тялото между двама души в група, лесно бихте предположили, че не ми харесва човекът, когото съм в непосредствена близост (в този случай блокът на текста).
Много проучвания за проследяване на очите показват, че хората виждат лица на уеб страници. Съответните проучвания показват, че когато гледате снимките, хората след това несъзнателно следват очите, за да видят какво гледа картината. Ако дадена снимка на сайта Ви гледа от ръба на браузъра, то точно там ще видят вашите клиенти, а след това натиснете бутона за връщане назад.
07 от 07Очите във всяка снимка трябва да се съсредоточат върху съдържанието
В новия дизайн за About.com, снимката е малко по-добре. Сега очите ми изглеждат по-напред и има лек намек, че гледам вляво - къде е текстът.
Още по-добра снимка за тази позиция би била тази, в която раменете ми също бяха подредени към текста. Но това е много по-добро решение от първата снимка. И за ситуации, в които изображението ще бъде отдясно на съдържанието, както и на лявата, това може да бъде добър компромис.
Не забравяйте също, че докато изображенията на лицата на хората привличат най-голямо внимание, същото важи и за животните. Например, в това примерно оформление, моите кучета изглеждат наляво, но изображението е изравнено право. Така че те гледат от страницата. Това оформление би било подобрено, ако променя ориентацията на кучетата, така че да гледат в центъра на екрана.
