Принципи на визуалната йерархия за дизайнери

Принципите на визуалната йерархия за дизайнерите са концепция за дизайн, която се използва за насочване на движението на очите на зрителя през дизайна и определяне кои елементи са най-важни или визуално привлекателни.

Отначало имаше каменни плочи, папирусни свитъци и хартия. След това се появиха компютърните екрани и електронните таблети. Тъй като технологията за показване на страници се развива, дизайнерите остават с ясен начин за организиране на съдържание. Но кое е по-добро? С една дума , визуална йерархия.

Ето определението за визуална йерархия: Визуалната йерархия е подредбата графични елементи в дизайна по ред на важност на всеки елемент. Визуалното тегло определя важност на елемента в йерархията на дизайна, казвайки на зрителя върху какво да се фокусира и в какъв ред.

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

Това става все по-важен въпрос, тъй като адаптивните рамки принуждават дизайнерите да мислят за много различни страници едновременно. Изправени пред гъст текст и кратко време за внимание, дизайнерите разработиха 6 принципа, за да насочат окото на читателя към най-важната информация.

Тези 6 принципа на визуална йерархия ще ви помогнат да проектирате всичко - от брошури до приложения, като гарантирате, че крайният потребител има положително четене за дизайнерите.

Всички култури се четат отгоре надолу, а повечето култури се четат отляво надясно. Но въпреки че това знание е важно за дизайн на страницата, дизайнерите знаят, че задачата е много по-трудна.

Скорошни проучвания показват, че хората първо сканират страница, за да видят дали се интересуват от нея, преди да я прочетат. Шаблоните за сканиране са склонни да приемат една от двете форми, "F" и "Z", и можете да се възползвате от това във вашия дизайн.

F-модели. Принципи на визуалната йерархия

F-шаблони приложете към традиционни текстови страници като статии или публикации в блогове. Четецът сканира лявата страна страница търси интересни ключови думи в подравнени вляво заглавия или начални тематични изречения, след което спира и чете (вдясно), когато той или тя попадне на нещо интересно. Резултатът изглежда като F (или E, или нещо с още повече хоризонтални ивици; но терминът „F“ остана).

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

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

Z-модели се прилагат към други типове страници, като реклами или уебсайтове, където информацията не е непременно представена в блокови параграфи. Четецът първо сканира горната част на страницата, където е вероятно да се намери важна информация, след това се премества в противоположния ъгъл по диагонал и прави същото в долната част на страницата.

Уеб дизайнерите обикновено проектират своите страници така, че изрично да съответстват на това поведение, като поставят най-важната информация в ъглите и ориентират друга важна информация по горната и долната лента и свързват диагонала.

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

2. Размерът има значение. Принципи на визуалната йерархия
_

Много е просто: хората първо четат големи неща. Ако очите ви са привлечени от „представянето“, преди да се „разделите“ в рекламата по-долу за Young Vic, трябва незабавно да се свържете с перцептивен психолог: вероятно бихте могли да спечелите добри пари, като бъдете тествани като рядка аномалия.

Интересното е, че тази тенденция всъщност е достатъчно силна, за да отхвърли правилото отгоре надолу. В изображението по-горе „хакване“ отменя „време за действие“, защото е по-голямо и отляво (така че правилото за ляво надясно помага).

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

„Избори 2012“ е информация от най-високо ниво: тя ни казва общата тема, към която се отнася информацията по-долу. Но дизайнерът реши, че заглавието на статията е по-интересно за читателите и затова я оцени така, че да бъде прочетена първа.

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

Друг начин за привличане на внимание е дайте на съдържанието достатъчно място за дишане . Ако около бутона има значително отрицателно пространство или редовете в текстовия блок са широко следвани, тези елементи ще бъдат по-лесно видими за читателите.

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

Когато хората говорят за „текстура“ във връзка с визуалната йерархия, те нямат предвид графичните ефекти на текстурата. По-скоро този тип "текстура" се отнася до цялостното подреждане или структура на пространство, текст и други детайли на страница. Този пример от Bright Pink добре илюстрира концепцията:

В първото изображение думата "Спорт" е по-високо в йерархията от "бадминтон", защото е по-висока, по-голяма и по-смела. В изображение 2 двете думи са приблизително еквивалентни, благодарение на черния правоъгълник, който изпъква „бадминтон“ и го поставя в собствено пространство.

В третото изображение фоновата драсканица прекъсва пространството „Спорт“, но не и пространството „бадминтон“ и следователно води до обръщане, където „бадминтон“ е най-високият в йерархията. Това развитие е трудно да се предвиди, така че дизайнерите често го свързват с цялостно усещане за "текстура".

4. Тегло на шрифта и сдвояване. Принципи на визуалната йерархия

Изборът на шрифт е от решаващо значение за установяване на визуална йерархия. Сред най-важните атрибути на шрифта са теглото, ширината на щрихите, които изграждат буквите му, и стилът, като сериф и без сериф. Други модификации, като курсив, също могат да играят роля.

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

В някои случаи целта е да се представи разнообразна информация като еднакво спешна. Задаването на всички с еднакъв размер и тегло ще гарантира еквивалентност, но също така ще изглежда монотонно. Разграничаването на шрифтове е един от начините да избегнете това, като корицата на списание Trendi по-долу. Принципи на визуалната йерархия

Подготовка на брошура за печат.

Тук петте тийзъра около периферията на страницата са едни и същи в йерархията, но постигат разнообразие чрез промяна на два добре съчетани шрифта - единият е средно тежък сериф, а другият е лек, но висок без сериф.

5. Цвят и нюанс. 

Ето още една идея: ярките цветове се открояват от приглушените цветове или нюансите на сивото, докато по-светлите нюанси изглеждат по-„далечни“ и по този начин попадат по-ниско в йерархията от по-наситените, по-тъмни нюанси. Уебсайтът Where Are They контрастира ярка светлина и цветно фоново осветление с черно-бял решетъчен ефект на ефекта на осветеност:

Уебсайтът на Guggenheim използва цвят, за да подчертае важна информация като избор на местоположение, списък с изложби, които се разглеждат в момента, и връзки към специални изложби. Принципи на визуалната йерархия

Най-добрият шрифт за персонализирана опаковка

Уебсайтът на музея Whitney, от друга страна, установява йерархия в рамките на един шрифт, тегло и тон (черно), като използва нюанс (което означава добавяне на бяло към основния тон, което го прави по-светъл). „Cory Archangel on Pop Culture“ е ясно под „Ново в Whitney Stories“ във визуалната йерархия, не само защото е по-нисък, но и защото нюансът му е по-светъл, което го прави по-малко забележим на белия фон. Принципи на визуалната йерархия

Цветът има специално значение в мобилен дизайн приложения, при които малкият размер на екрана ограничава способността ви да използвате други стратегии, като вариация на размера и голямо разстояние. В приложението Grainger Industrial Supply бутонът „Напред към плащане“ е оцветен в червено, което го прави изпъкващ на всяка страница, където се появява. Напротив, панелът с тесни резултати от търсенето е сив, което го прави приблизително еквивалентен в йерархията на други елементи като лентата за търсене и връзките към продуктите.

6. Направление за дизайнери.

Оформленията на страниците обикновено са проектирани да следват мрежа от вертикални и хоризонтални линии, както по конвенция, така и защото това е най-четливият формат. В такава система има нов начин за установяване на йерархия: разбиване на мрежата.

Текстът, който е разположен по протежение на крива или диагонал, автоматично се откроява на фона на околния блокиран в решетка текст, заемайки централно място. Това отдавна е ефективна стратегия в рекламата, като например плаката за автобусна спирка на Frost Design.