Проток у дизајну - Лаиоут и уметничко дело које преноси покрет

01 од 07

Шта је визуелни ток?

Визуални ток преноси гледаоцево око кроз документ тако да сви важни елементи добијају истакнутост, а ништа не пренесе визију или проузрокује гледаоцу да изгуби осећај дела. Коришћење очигледних елемената протока, као што су стрелице или бројеви, најчешћи су начин да веб дизајнери користе проток, али постоје и други типови елемената који се могу користити и погрешно употребљавати како би усмерили читаоце на одређени пут. Кораци у овом водичу ће вам показати примере добре и лоше протока и помоћи вам да научите вокабулар визуелног тока у дизајну.

Визуелни проток се може постићи на више начина:

Следеће слике ће вам показати неке уобичајене грешке у току на Веб странама и како их исправити.

02 од 07

Западни текстови из леве на десно

Неправилан ток. Имаге цоуртеси М Кирнин

Ако сте одрасли читајући западни језик, навикли сте на размишљање да текст треба да се помера с лева на десно. Дакле, док се око помиче преко линије текста, креће се с лева на десно.

На горњој слици, водопад се креће у правцу према лијевом правцу, а текст прелази водопад. С обзиром да сви знамо да падају водопади, у правцу кретања воде постоји проток текста. Гледаоцко око се помера у погрешном смеру да прочита текст.

03 од 07

Ваш текст треба да протиче са сликама

Прави ток. Имаге цоуртеси М Кирнин

У овом случају, слика је обрнута тако да текст тече у истом правцу као и вода. Сви елементи воде посматрачево око са протоком воде и протоком текста.

04 од 07

Лево на десно једнако брзо

Неправилан ток. Имаге цоуртеси М Кирнин

Коњ на овој фотографији се одвија с десно на лево, али текст је енглески и тако је одозго на десно. Визуелни утицај трке коња у једном смеру успорава брзину читавог документа јер иде у другом правцу од текста.

У западним културама, јер се наши језици померају с лева на десно, дошли смо да повезујемо визуелни правац лево-десно као напред и брзо, а десно на лево је више заостало и споро. Када креирате изглед са конотацијом брзине, требало би да запамтите ово - и држите своје слике у правцу истог правца као и текст.

05 од 07

Немојте сили гледаоцу око да успорите

Прави ток. Имаге цоуртеси М Кирнин

Када коњ и текст иду у истом правцу, имплицитна брзина се повећава.

06 од 07

Гледајте очи у веб фотографијама

Неправилан ток. Имаге цоуртеси Ј Кирнин

Многе веб странице са фотографијама чине ову грешку - стављају фотографију особе на страници, а особа гледа даље од садржаја. Ово се чак може видети и на веб локацији Абоут.цом Веб Десигн у старом дизајну.

Као што видите, моја фотографија се налази поред неког текста. Али ја гледам даље од тог текста, скоро ми је окренуо леђа. Ако сте видели тај језик тела између две особе у групи, било би лако претпоставити да ми се не свиђа особа којој сам (у овом случају текст).

Многе студије о праћењу очију показале су да људи виде лица на веб страницама. И сродне студије су показале да ће људи, када гледају слике, несвесно прате очи како би видели шта слика гледа. Ако се фотографија на вашој веб локацији скрене са ивице претраживача, ту ће изгледати ваши купци, а затим притиснути дугме за повратак.

07 од 07

Очи на било којој фотографији би требало да се суоче са садржајем

Прави ток. Имаге цоуртеси Ј Кирнин

У новом дизајну за Абоут.цом, фотографија је мало боље. Сада ми очи гледају више напред и мало је наговештаја да гледам на лево - где је текст.

Још боља фотографија за ту позицију била би место где су ми рамена била такође нагнута према тексту. Али ово је много боље решење од прве фотографије. А, за ситуације у којима ће слика бити на праву садржаја као и леве стране, ово би могло бити добар компромис.

Запамтите, такође, да док слике људи наглашавају највише пажње, исто важи и за фотографије животиња. На пример, у овом распореду узорка, моје псе гледају лево, али слика је у праву. Тако они гледају на страну. Овај изглед би се побољшао ако бих променио оријентацију паса тако да су гледали у центар екрана.