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

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

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

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

Ресурси за дизајнери. 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. Насока за дизајнери.

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

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