Принципи на визуелна хиерархија за дизајнери

Принципите за визуелна хиерархија за дизајнерите се концепт на дизајн кој се користи за да се води како очите на гледачот се движат низ дизајнот и да се одреди кои елементи се најважни или визуелно привлечни.

Отпрвин имало камени плочи, свитоци од папирус и хартија. Потоа се појавија компјутерските екрани и електронските таблети. Како што еволуира технологијата за прикажување страници, на дизајнерите им останува јасен начин да ја организираат содржината. Но, што е подобро? Накусо , визуелна хиерархија.

Еве ја дефиницијата за визуелна хиерархија: Визуелната хиерархија е распоредот графички елементи во дизајнот според важноста на секој елемент. Визуелната тежина одредува важност на елементот во хиерархијата на дизајнот, кажувајќи му на гледачот на што да се фокусира и по кој редослед.

Ресурси за дизајнери. 50 бесплатно

Ова станува сè поважно прашање бидејќи одговорните рамки ги принудуваат дизајнерите да размислуваат за многу различни страници одеднаш. Соочени со густ текст и краток опсег на внимание, дизајнерите развија 6 принципи за да го насочат окото на читателот кон најважните информации.

Овие 6 принципи на визуелна хиерархија ќе ви помогнат да дизајнирате сè, од брошури до апликации, осигурувајќи дека крајниот корисник има позитивно искуство за читање за дизајнерите.

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

Неодамнешните студии покажаа дека луѓето прво скенираат страница за да видат дали се заинтересирани за неа пред да ја прочитаат. Моделите за скенирање имаат тенденција да земаат една од двете форми, „F“ и „Z“, и можете да го искористите ова во вашиот дизајн.

F-шеми. Принципи на визуелна хиерархија

F-шаблони се однесуваат на традиционалните текстуални страници како што се статии или објави на блогови. Читателот ја скенира левата страна страници бара интересни клучни зборови во лево порамнети наслови или почетни реченици за тема, потоа застанува и чита (десно) кога ќе наиде на нешто интересно. Резултатот изгледа како F (или Е, или нешто со уште повеќе хоризонтални ленти; но терминот „F“ се залепи).

Како можете да го користите ова? Порамнете ги важните информации налево и користете кратки, задебелени наслови, куршуми и други слични елементи што привлекуваат внимание за да ги разделите блоковите на пасуси.

Z-модел. Принципи на визуелна хиерархија.

Z-шеми се однесуваат на други типови на страници како што се рекламирање или веб-локации каде што информациите не се нужно претставени во блок-пасусите. Читателот прво го скенира горниот дел од страницата, каде што најверојатно ќе се најдат важни информации, потоа се преместува во спротивниот агол дијагонално и го прави истото на дното на страницата.

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

Во подолу Во дизајнот на конференциското собрание во 2010 година, важни елементи се логото (горе лево), копче „регистрирај се сега“ (горе десно) и листа на звучници (долу), кои се стратешки поставени на убави точки со Z-шаблон.

2. Големината е важна. Принципи на визуелна хиерархија
_

Сосема е едноставно: луѓето прво читаат големи работи. Ако очите ви се привлечени кон „погледот“ пред да се „поделите“ на долу рекламирање за театарот Јанг Вик, треба веднаш да контактирате со перцептуален психолог: веројатно можете да заработите добри пари со тоа што ќе бидете тестирани како ретка аномалија.

Она што е интересно е дека оваа тенденција е всушност доволно силна за да се отфрли правилото од врвот надолу. На горната слика, „хакирањето“ го надминува „времето за дејствување“ бидејќи е поголемо и лево (така што правилото од лево кон десно помага).

Но, на следната страница од Годишниот извештај: Кампања за човекови права 2012 (развиена во петтата медиумска колона) читаме на големо фонт „Борбата за еднаквост на патеката на кампањата“ пред текстот директно над него „Избори 2012“. Принципи на визуелна хиерархија

„Избори 2012“ е редослед на информации од највисоко ниво: ни ја кажува општата тема на која се однесуваат информациите подолу. Но, дизајнерот одлучи дека насловот на статијата е поинтересен за читателите и затоа го оцени така што прво ќе се прочита.

3. Простор и текстура. Принципи на визуелна хиерархија

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

Како што можете да видите на сликата подолу (дел од страницата на DrawtoClick), растојанието може да биде елегантна алтернатива или дополнување на користењето на големината. Еве, точка продажба, „Notre agence vouscompagne...“, е напишано со многу ситно, но опкружено е со изобилство бел простор, што укажува на неговата важност. Подолу, фразите „Le Compendre“, „Le Réaliser“ и „Le Partager“ добиваат дополнителен акцент, кои се одвоени од околниот простор.

Кога луѓето зборуваат за „текстура“ во однос на визуелната хиерархија, тие не мислат на графичките ефекти на текстурата. Наместо тоа, овој тип на „текстура“ се однесува на целокупниот распоред или структура на просторот, текстот и другите детали на страницата. Ова Пример од Bright Pink добро го илустрира концептот:

На првата слика, зборот „Спорт“ е повисок во хиерархијата од „бадминтон“ бидејќи е повисок, поголем и похрабро. На сликата 2, двата збора се приближно еквивалентни, благодарение на црниот правоаголник што го издвојува „бадминтонот“ и го става во свој простор.

На третата слика, чкртаницата во заднина го прекинува просторот „Спорт“, но не и „бадминтон“ просторот, и затоа резултира со пресврт каде што „бадминтон“ е највисок во хиерархијата. Овој развој е тешко да се предвиди, па дизајнерите често го поврзуваат со сеопфатно чувство за „текстура“.

4. Тежина на фонтот и спарување. Принципи на визуелна хиерархија

Изборот на фонт е клучен за воспоставување визуелна хиерархија. Меѓу најважните атрибути на фонтот се тежината, ширината на потезите што ги сочинуваат неговите букви и стилот, како што се serif и sans serif. Други модификации, како што се закосени букви, исто така може да играат улога.

Забележете како слушалки влијае на редоследот на хиерархијата на зборовите во веб-дизајнот подолу за The Tea Factory: „совршени чаеви што ќе ви помогнат да се загреете“ е името на играта, но разликите во тежината на фонтот и курзивот, покрај поставеноста на зборовите, создаваат повеќе динамично, помалку линеарно, читачко искуство. "://azbyka.com.ua/foto/tea-factory.jpg" />

Во некои случаи, целта е да се прикажат различни информации како подеднакво итни. Поставувањето на сите на иста големина и тежина ќе обезбеди еквивалентност, но и ќе направи да изгледа монотоно. Диференцијацијата на фонтот е еден начин да се избегне ова, како што е насловната страница на списанието Тренди подолу. Принципи на визуелна хиерархија

Овде, петте тизери околу периферијата на страницата се исти во хиерархија, но постигнуваат разновидност со менување на два добро спарени фонтови - едниот сериф со средна тежина, а другиот лесен, но висок sans-serif.

5. Боја и сенка. 

Еве уште една бесмислена: светлите бои се издвојуваат од пригушените бои или нијанси на сива боја, додека посветлите нијанси изгледаат „подалечни“ и на тој начин паѓаат пониско во хиерархијата од побогатите, потемни нијанси. Веб-страницата Where Are They контрастира силна светлина и обоено позадинско осветлување со црно-бел ефект на мрежа за ефектот на сјајност:

Веб-страницата Гугенхајм користи боја за да нагласи важни информации како што се изборот на локација, список на изложби кои моментално се гледаат и линкови до специјални изложби. Принципи на визуелна хиерархија

Веб-страницата на музејот Витни, од друга страна, воспоставува хиерархија во рамките на еден фонт, тежина и тон (црна) користејќи нијанса (што значи додавање бело на основниот тон, што го прави полесен). „Кори Архангел на поп културата“ е јасно под „Ново за Витни приказни“ во визуелната хиерархија, не само затоа што е пониско, туку и затоа што неговата нијанса е посветла, што го прави помалку забележлив на белата позадина. Принципи на визуелна хиерархија

Бојата има посебно значење во мобилен дизајн апликации каде што големината на малиот екран ја ограничува вашата способност да користите други стратегии како што се варијации на големината и широк простор. Во апликацијата Grainger Industrial Supply, копчето „Proceed to Checkout“ е обоено со црвена боја, што го прави да се истакнува на која било страница каде што се појавува. Панелот за тесни резултати од пребарување, напротив, е сив, што го прави приближно еквивалентен во хиерархијата на другите елементи како што се лентата за пребарување и врските со производите.

6. Насока за дизајнери.

Распоредот на страниците обично е дизајниран да следи мрежа од вертикални и хоризонтални линии, и според конвенцијата и затоа што е најчитлив формат. Во таков систем, постои нов начин за воспоставување хиерархија: кршење на мрежата.

Текстот што е позициониран по крива или дијагонала автоматски се издвојува наспроти околниот текст блокиран со мрежа, заземајќи централно место. Ова долго време беше ефикасна стратегија во рекламирањето, како што е постерот на автобуската постојка на Фрост Дизајн.

Најчесто поставувани прашања. Принципи на визуелна хиерархија за дизајнери.

1. Што е визуелна хиерархија?

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

2. Зошто е важна визуелната хиерархија во дизајнот?

Важноста на визуелната хиерархија лежи во:

• Подобрена употребливост: Им помага на корисниците побрзо да ги најдат потребните информации.
• Подобрена перцепција: Ја прави содржината поразбирлива и попривлечна.
• Стимулирање на интеракција: Го привлекува вниманието на клучните елементи и поттикнува акција.
• Поедноставете ја навигацијата: Го олеснува навигацијата и навигацијата на страницата.

3. Кои се основните принципи на визуелната хиерархија?

Основните принципи вклучуваат:

• Големина и размер: Поголемите елементи привлекуваат поголемо внимание и се сметаат за поважни.
• Боја и контраст: Светли и контрастни елементи се истакнуваат и привлекуваат внимание.
• Локација и сместување: Елементите повисоки на страницата или поблиску до центарот се сметаат за позначајни.
• Простор и празнина: Оставањето простор околу елементите им помага да се истакнат.
• Типографија: Користење на различни фонтови, големини и стилови на текст за да се нагласи важноста на информациите.
• Форми и линии: Користење форми и линии за креирање насоки и акценти.

4. Како ги користите големината и скалата за да креирате визуелна хиерархија?

Примена на големина и скала:

• Наслови и поднаслови: Користете поголеми големини за наслови и помали големини за поднаслови за да создадете јасна структура.
• Клучни елементи: Зголемете ја големината на важните копчиња или врски за да се издвојат од другите елементи.
• Слики и графики: Користете големи слики за да привлечете внимание на клучните делови од содржината.

5. Како бојата и контрастот влијаат на визуелната хиерархија?

Ефект на боја и контраст:

• Боја акценти: Користете светли или заситени бои за да ги нагласите клучните елементи.
• Контрастни комбинации: Користете контрастни бои за текстот и заднината за да ја подобрите читливоста.
• Хармонија на бои: Погрижете се боите што ќе ги изберете да бидат во хармонија една со друга и да не го одвлекуваат вниманието од главните информации.

6. Како правилно да се користи распоредот и поставеноста на елементите?

Принципи на поставување:

• Важни елементи на врвот: Ставете ги клучните информации на врвот на страницата каде што веднаш се видливи.
• Централна локација: Елементите поставени поблиску до центарот имаат тенденција да привлечат поголемо внимание.
• Редоследот на поставување: Подредувањето на ставките по логичен редослед може да го подобри разбирањето на информациите.

7. Како белиот простор помага да се создаде визуелна хиерархија?

Улогата на празниот простор:

• Одделни елементи: Создавањето празен простор помеѓу елементите помага јасно да се разделат и ја подобрува перцепцијата.
• Фокусирање на вниманието: Оставањето простор околу важен елемент го прави да се истакнува и привлекува внимание.
• Чиста и чиста: Користењето бел простор го прави дизајнот да изгледа поуреден и поорганизиран.

8. Како да се користи типографијата за да се создаде визуелна хиерархија?

Примена на типографија:

• Фонтови и стилови: Користете различни фонтови и стилови за наслови, поднаслови и текст на телото.
• Големина и тежина на текстот: Зголемете ја големината и тежината на текстот за важни информации.
• Избор: Користете курзив, задебелен или подвлечен за да ги нагласите клучните зборови или фрази.

9. Како формите и линиите можат да влијаат на визуелната хиерархија?

Влијание на форми и линии:

• Водички линии: Користете линии за да креирате водичи кои ќе му помогнат на корисникот да ги следи страница.
• Форми како акценти: Геометриските форми можат да истакнат важни елементи или да создадат акценти.
• Одвојување на содржината: Линиите може да се користат за одвојување на различни делови од содржината, создавајќи јасна структура.

10. Кои алатки и техники може да се користат за тестирање на визуелната хиерархија?

Тест методи:

• Тестирање со корисници: Спроведете тестирање со вистински корисници за да добиете повратни информации.
• Анализа на однесување: Употреба на аналитички инструменти да го проучи однесувањето на корисникот на страницата.
• Повратни информации од колегите: Побарајте дизајнот да биде прегледан од колеги за дополнителни мислења и препораки.
• Топлински карти: Анализирајте ги топлинските карти за да одредите кои елементи привлекуваат најмногу внимание.
• А/Б тестирање: Споредување на различни верзии на дизајн за да се одреди најдобрата опција.

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