Визуални ток преноси гледаоцево око кроз документ тако да сви важни елементи добијају истакнутост, а ништа не пренесе визију или проузрокује гледаоцу да изгуби осећај дела. Коришћење очигледних елемената тока као што су стрелице или бројеви је најчешћи начин да веб дизајнери користе проток, али постоје и други типови елемената који се могу користити и злоупотребљавати како би усмерили читаоце да се крећу по одређеној путањи. Кораци у овом водичу ће вам показати примере добре и лоше протока и помоћи вам да научите вокабулар визуелног тока у дизајну.
Шта је визуелни ток?
Визуелни проток се може постићи на више начина:
- Стрелице
- Секвенцијалне слике или текстуални елементи
- Перспектива
- Градиенти
- Промене величине
- Криве
- Покретање слика
- Лице - посебно очи
Следеће слике ће вам показати неке уобичајене грешке у протоку на веб странама и како их исправити.
02 од 07Западни текстови из леве на десно
Ако сте одрасли читајући западни језик, навикли сте на размишљање да текст треба да се помера с лева на десно. Дакле, док се око помиче преко линије текста, креће се с лева на десно.
На горњој слици, водопад се креће у правцу према лијевом правцу, а текст прелази водопад. С обзиром да сви знамо да падају водопади, у правцу кретања воде постоји проток текста. Гледаоцко око се помера у погрешном смеру да прочита текст.
03 од 07Ваш текст треба да протиче са сликама
У овом случају, слика је обрнута тако да текст тече у истом правцу као и вода. Сви елементи воде посматрачево око са протоком воде и протоком текста.
04 од 07Лево на десно једнако брзо
Коњ на овој фотографији се одвија с десно на лево, али текст је енглески и тако је одозго на десно. Визуелни утицај трке коња у једном смеру успорава брзину читавог документа јер иде у другом правцу од текста.
У западним културама, јер се наши језици померају с лева на десно, дошли смо да повезујемо визуелни правац лево-десно као напред и брзо, а десно на лево је више заостало и споро. Када креирате изглед са конотацијом брзине, требало би да запамтите ово - и држите своје слике у правцу истог правца као и текст.
05 од 07Немојте сили гледаоцу око да успорите
Када коњ и текст иду у истом правцу, имплицитна брзина се повећава.
06 од 07Гледајте очи у веб фотографијама
Многе веб странице са фотографијама чине ову грешку - постављају фотографију особе на страници, а особа гледа далеко из садржаја. Ово се чак може видети и на веб локацији Абоут.цом Веб Десигн у старом дизајну.
Као што видите, моја фотографија се налази поред неког текста. Али ја гледам даље од тог текста, скоро ми је окренуо леђа. Ако сте видели тај језик тела између две особе у групи, било би лако претпоставити да ми се не свиђа особа којој сам (у овом случају текст).
Многе студије о праћењу очију показале су да људи виде лица на веб страницама. И сродне студије су показале да ће људи, када гледају слике, несвесно прате очи како би видели шта слика гледа. Ако се фотографија на вашој веб локацији скрене са ивице претраживача, ту ће изгледати ваши купци, а затим притиснути дугме за повратак.
07 од 07Очи на било којој фотографији би требало да се суоче са садржајем
У новом дизајну за Абоут.цом, фотографија је мало боље. Сада ми очи гледају више напред и мало је наговештаја да гледам на лево - где је текст.
Још боља фотографија за ту позицију била би место где су ми рамена била такође нагнута према тексту. Али ово је много боље решење од прве фотографије. А, за ситуације у којима ће слика бити на праву садржаја као и леве стране, ово би могло бити добар компромис.
Запамтите, такође, да док слике људи наглашавају највише пажње, исто важи и за фотографије животиња. На пример, у овом распореду узорка, моје псе гледају лево, али слика је у праву. Тако они гледају на страну. Овај изглед би се побољшао ако бих променио оријентацију паса тако да су гледали у центар екрана.
