Принципи визуелне хијерархије за дизајнере су концепт дизајна који се користи да води како се очи гледаоца крећу кроз дизајн и одређују који елементи су најважнији или визуелно привлачни.
У почетку су биле камене плоче, папирусни свици и папир. Затим су дошли компјутерски екрани и електронски таблети. Како се технологија приказа страница развија, дизајнерима остаје јасан начин да организују садржај. Али шта је боље? Укратко , визуелна хијерархија.
Ево дефиниције визуелне хијерархије: Визуелна хијерархија је аранжман графички елементи у дизајну по редоследу важности сваког елемента. Визуелна тежина одређује важност елемента у хијерархији дизајна, говорећи гледаоцу на шта да се фокусира и којим редоследом.
Ресурси за дизајнере. 50 бесплатно
Ово постаје све важније питање јер прилагодљиви оквири присиљавају дизајнере да размишљају о више различитих страница одједном. Суочени са густим текстом и кратким распоном пажње, дизајнери су развили 6 принципа како би усмерили очи читаоца на најважније информације.
Ових 6 принципа визуелне хијерархије ће вам помоћи да дизајнирате све, од брошура до апликација, осигуравајући да крајњи корисник има позитивно искуство читања за дизајнере.
Све културе се читају од врха до дна, а већина култура се чита с лева на десно. Али иако је ово знање важно за дизајн странице, дизајнери знају да је задатак много тежи.
Недавне студије су показале да људи прво скенирају страницу да виде да ли их занима пре него што је прочитају. Узорци скенирања обично имају један од два облика, „Ф“ и „З“, и то можете искористити у свом дизајну.
Ф-обрасци. Принципи визуелне хијерархије
Ф-шаблони применити на традиционалне текстуалне странице као што су чланци или постови на блогу. Читач скенира леву страну странице тражи занимљиве кључне речи у лево поравнатим насловима или почетним реченицама теме, а затим стаје и чита (десно) када наиђе на нешто занимљиво. Резултат изгледа као Ф (или Е, или нешто са још више хоризонталних пруга; али термин "Ф" се задржао).
Како можете ово искористити? Поравнајте важне информације са леве стране и користите кратке, подебљане наслове, метке и друге сличне елементе који привлаче пажњу да бисте разбили блокове пасуса.
З-модел. Принципи визуелне хијерархије
З-обрасци примењују се на друге врсте страница, као што су рекламе или веб-сајтови, где информације нису нужно представљене у блок-параграфима. Читач прво скенира врх странице, где ће се вероватно наћи важне информације, затим се помера у супротни угао дијагонално и чини исто на дну странице.
Веб дизајнери обично дизајнирају своје странице тако да експлицитно одговарају овом понашању, постављајући најважније информације у углове и оријентишући друге важне информације дуж горње и доње траке и повезујући дијагоналу.
У наставку у дизајну скупштинске конференције 2010. важни елементи су лого (горе лево), дугме „региструј се сада“ (горе десно) и листа звучника (доле), који су стратешки постављени на лепим местима у облику З.
2. Величина је важна. Принципи визуелне хијерархије
_
Сасвим је једноставно: људи прво читају велике ствари. Ако вам поглед привуче "перформанс" пре него што се "поделите" у огласу испод за Иоунг Виц, требало би да се одмах обратите психологу за перцепцију: вероватно бисте могли добро зарадити ако будете тестирани као ретка аномалија.
Оно што је занимљиво је да је ова тенденција заправо довољно јака да одбаци правило одозго надоле. На горњој слици, "хацк" замењује "време за акцију" јер је веће и лево (тако да помаже правило с лева на десно).
Али на следећој страници Годишњег извештаја: Кампања за људска права 2012 (развијеног у петој медијској колони) читамо у великој мери фонт „Борба за равноправност на трагу кампање“ пре текста директно изнад „Избори 2012.“ Принципи визуелне хијерархије
„Избори 2012“ су највиши ниво информација: говори нам о општој теми на коју се односе доле наведене информације. Али дизајнер је одлучио да је наслов чланка интересантнији за читаоце и стога га је оценио тако да се први прочита.
3. Простор и текстура. Принципи визуелне хијерархије
Други начин да привучете пажњу је дати садржају довољно простора за дисање . Ако постоји значајан негативан простор око дугмета или су редови у блоку текста широко праћени, ови елементи ће бити лакше видљиви читаоцима.
Као што можете видети на слици испод (део ДравтоЦлицк-ове странице), размак може бити елегантна алтернатива или допуна коришћењу величине. Овде је продајно место „Нотре агенце воусцомпагне...“ написано веома ситним словима, али је окружено обиљем белог простора, што указује на његову важност. У наставку, фразе „Ле Цомпендре“, „Ле Реалисер“ и „Ле Партагер“ добијају додатни нагласак, одвојене од околног простора.
Када људи говоре о "текстури" у вези са визуелном хијерархијом, не мисле на графичке ефекте текстуре. Уместо тога, ова врста „текстуре“ се односи на укупан распоред или структуру простора, текста и других детаља на страници. Овај пример из Бригхт Пинк добро илуструје концепт:
На првој слици реч „Спорт” је виша у хијерархији од „бадминтона” јер је виша, већа и смелија. На слици 2, две речи су отприлике еквивалентне, захваљујући црном правоугаонику који издваја „бадминтон“ и ставља га у сопствени простор.
На трећој слици, шкработина у позадини прекида простор "Спорт", али не и простор "бадминтон", и стога доводи до преокрета где је "бадминтон" највиши у хијерархији. Овај развој је тешко предвидети, па га дизајнери често повезују са холистичким осећајем „текстуре“.
4. Тежина фонта и упаривање. Принципи визуелне хијерархије
Избор фонта је кључан за успостављање визуелне хијерархије. Међу најважнијим атрибутима фонта су тежина, ширина потеза који чине његова слова и стил, као што су сериф и санс сериф. Друге модификације, као што је курзив, такође могу играти улогу.
Приметите како слушалице утиче на редослед хијерархије речи у веб дизајну испод за Тхе Теа Фацтори: „савршени чајеви који ће вам помоћи да се загрејете“ је назив игре, али разлике у тежини фонта и курзиву, поред постављања речи, стварају више динамично, мање линеарно, искуство читања. "://азбика.цом.уа/фото/теа-фацтори.јпг" />
У неким случајевима, циљ је представити различите информације као подједнако хитне. Подешавање свих на исту величину и тежину ће обезбедити еквивалентност, али ће такође учинити да изгледа монотоно. Разликовање фонтова је један од начина да се ово избегне, попут насловнице часописа Тренди испод. Принципи визуелне хијерархије
Овде, пет тизера на периферији странице су исти у хијерархији, али постижу разноврсност променом два добро упарена фонта – један сериф средње тежине, а други лагани, али високи санс-сериф.
5. Боја и нијанса.
Ево још једног неразумног: светле боје се издвајају од пригушених боја или нијанси сиве, док светлије нијансе изгледају „удаљеније“ и тако падају ниже у хијерархији од богатијих, тамнијих нијанси. Веб локација Вхере Аре Тхеи контрастира јако светло и позадинско осветљење у боји са ефектом црно-беле мреже у односу на ефекат осветљености:
Веб страница Гугенхајм користи боју да нагласи важне информације као што су избор локације, списак изложби које се тренутно гледају и везе до специјалних изложби. Принципи визуелне хијерархије
Најбољи фонт за прилагођено паковање
С друге стране, веб страница Вхитнеи Мусеум успоставља хијерархију унутар једног фонта, тежине и тона (црног) користећи нијансу (што значи додавање беле боје основном тону, чинећи га светлијим). „Кори Арханђел о поп култури“ је јасно испод „Новог у причама Витни“ у визуелној хијерархији, не само зато што је нижа, већ и зато што је њена нијанса светлија, што је чини мање упадљивом на белој позадини. Принципи визуелне хијерархије
Боја има посебно значење у мобилни дизајн апликације у којима мала величина екрана ограничава вашу могућност коришћења других стратегија као што су варијације величине и широки размаци. У апликацији Граингер Индустриал Суппли, дугме „Процеед то Цхецкоут“ је обојено црвеном бојом, чиме се истиче на било којој страници на којој се појављује. Панел уских резултата претраге је, напротив, сив, што га чини отприлике еквивалентним у хијерархији другим елементима као што су трака за претрагу и везе производа.
Дизајн апликације за Граингер
6. Смер за дизајнере.
Распореди страница су обично дизајнирани да прате мрежу вертикалних и хоризонталних линија, како по конвенцији, тако и зато што је то најчитљивији формат. У таквом систему постоји нови начин успостављања хијерархије: разбијање мреже.
Текст који је позициониран дуж кривине или дијагонале аутоматски се истиче у односу на околни текст блокиран мрежом, заузимајући централно место. Ово је дуго била ефикасна стратегија у оглашавању, као што је плакат аутобуске станице Фрост Десигн-а.
Оставить комментарии