Принципи візуальної ієрархії дизайнерів.

Спочатку були кам'яні таблички, сувої папірусу та папір. Потім з'явилися комп'ютерні екрани та електронні планшети. Оскільки технологія відображення сторінки розвивається, дизайнерам залишається чітко організувати контент. Але як краще? Коротше , візуальна ієрархія.

Ось визначення візуальної ієрархії: Візуальна ієрархія – це розташування графічних елементів у дизайні як важливості кожного елемента. Візуальна вага визначає важливість елемента в ієрархії дизайну, повідомляючи глядачеві, на чому зосередитись і в якому порядку.

Теми WordPress

Це стає все більш важливим питанням, оскільки адаптивні фреймворки змушують дизайнерів думати відразу про безліч різних сторінок. Зіткнувшись із щільним текстом та короткими проміжками уваги, дизайнери розробили 6 принципів, щоб направити погляд читача на найважливішу інформацію.

Ці 6 принципів візуальної ієрархії допоможуть вам спроектувати все - від брошур до додатків, гарантуючи кінцевому користувачеві позитивний досвід читання для дизайнерів.

Принципи візуальної ієрархії

1. Читання шаблонів. Для дизайнерів


_

Усі культури читаються зверху вниз, а більшість культур читається зліва направо. Але хоча ці знання важливі для дизайну сторінки, дизайнери знають, що завдання набагато складніше.

Нещодавні дослідження показали, що люди спочатку переглядають сторінку, щоб зрозуміти, чи зацікавлені вони в ній, перш ніж її читати. Шаблони сканування мають тенденцію приймати одну з двох форм, F і Z, і ви можете скористатися цим у своєму дизайні.

F-Patterns. Принципи візуальної ієрархії

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

шаблони сканування сторінок візуальної ієрархії

Як ви можете використати це? Вирівняйте важливу інформацію ліворуч та використовуйте короткі жирні заголовки, маркери та інші подібні елементи, які привертають увагу, щоб розбити блоки абзацу.

Z-модель. Принципи візуальної ієрархії

Z-шаблони застосовуються до інших видів сторінок, таких як реклама або веб-сайти, де інформація не обов'язково представлена ​​в абзацах блоку. Спочатку читач сканує верхню частину сторінки, де, ймовірно, буде знайдено важливу інформацію, потім переходить у протилежний кут по діагоналі і робить те саме в нижній частині сторінки.

Читайте також:  Що таке WebP?

Z-шаблон Принципи візуальної ієрархії


 

Веб-дизайнери зазвичай конструюють свої сторінки, щоб явно відповідати цій поведінці, розміщуючи найбільш важливу інформацію в кутах та орієнтуючи іншу важливу інформацію вздовж верхньої та нижньої смуг та з'єднуючи діагональ.

У наведеному нижче дизайні конференції 2010 року складання важливими елементами є логотип (зверху зліва), кнопка «зареєструватися зараз» (зверху праворуч) та список ораторів (знизу), які стратегічно розташовані в приємних місцях Z-зразок.

2. Розмір має значення. Принципи візуальної ієрархії
_

Це досить просто: люди спершу читають великі речі. Якщо ваш погляд прагне «подати» перед тим, як «розколотися» у наведеній нижче рекламі для театру «Молодий Вік», вам слід негайно зв'язатися з психологом-перцептивом: ви, ймовірно, зможете заробити хороші гроші, проходячи тестування як рідкісна аномалія.

використовуючи розмір шрифту для візуальної ієрархії

Що цікаво, ця тенденція насправді є досить сильною, щоб відкинути правило зверху вниз. На наведеному вище зображенні "злом" перевизначає "час діяти", тому що воно більше і зліва (тому правило зліва направо допомагає).

Але на наступній сторінці «Річного звіту: кампанія за права людини 2012» (розроблено у п'ятій колонці ЗМІ) ми читаємо великим шрифтом «Боротьба за рівність на сліді кампанії» перед текстом прямо над ним «Вибори 2012». Принципи візуальної ієрархії

Принципи візуальної ієрархії


 

«Вибори 2012» – це порядок інформації найвищого рівня: він розповідає нам загальну тему, до якої належить інформація, наведена нижче. Але дизайнер вирішив, що заголовок статті був цікавішим для читачів, і тому оцінив його так, щоб його читали першими.

3. Простір та текстура. Принципи візуальної ієрархії
_

Ще один спосіб привернути увагу дати контенту достатньо місця для дихання . Якщо навколо кнопки залишається значне негативне місце або рядки в текстовому блоці широко відстежуються, ці елементи будуть легко видно читачам.

Як ви бачите на зображенні нижче (частина DrawtoClick сайту s), інтервал може бути елегантною альтернативою або доповненням до використання розміру. Тут, точка продажу, "Notre agence vouscompagne ...", написана дуже дрібним шрифтом, але вона оточена надлишком порожнього простору, що свідчить про її важливість. Нижче фрази Le Compendre, Le Réaliser і Le Partager отримують додатковий акцент, будучи відірваними від навколишнього простору.

Читайте також:  Бізнес-модель Google – як Google заробляє гроші?

приклад візуальної ієрархії

Коли люди говорять про «текстуру» щодо візуальної ієрархії, вони мають на увазі графічні ефекти текстури. Швидше, цей вид "тектури" відноситься до загального розташування або структури простору, тексту та інших деталей на сторінці. Цей приклад від Bright Pink добре ілюструє концепцію:

Принципи візуальної ієрархії 2

На першому зображенні слово "Спорт" вище в ієрархії, ніж "бадмінтон", тому що воно вище, більше і сміливіше. На другому зображенні два слова приблизно еквівалентні завдяки чорному прямокутнику, який виділяє «бадмінтон» і поміщає його у свій власний простір.

На третьому зображенні фонова каракулі перериває простір "Спорт", але не "бадмінтон", і, отже, призводить до розвороту, де "бадмінтон" є найвищим в ієрархії. Такий розвиток важко передбачити, тому дизайнери часто пов'язують його з цілісним відчуттям текстури.

4. Вага шрифту та сполучення. Принципи візуальної ієрархії
_

Вибір шрифту має вирішальне значення для встановлення візуальної ієрархії. Серед найважливіших атрибутів шрифту – вага, ширина штрихів, що становлять його літери, і стиль, наприклад, із засічками та без засічок. Інші модифікації, такі як курсив також можуть зіграти свою роль.

Зверніть увагу, як гарнітура впливає на порядок ієрархії слів у наведеному нижче веб-дизайні для The Tea Factory: «ідеальні чаї, які допоможуть вам зігрітися» – це головне, але відмінності у вазі шрифту та курсиві, на додаток до розміщення слів, створюють більше динамічний, менш лінійний, досвід читання. «Погляньте на наш вибір», заклик до дії виділено сильніше, ніж текст над ним через розміри та пробіли.

У деяких випадках мета полягає в тому, щоб подати різноманітну інформацію як таку ж термінову. Установка всіх однакових розмірів та ваги забезпечить еквівалентність, але також зробить її одноманітною. Диференціація шрифтів – це один із способів уникнути цього, як на наведеній нижче обкладинці журналу Trendi. Принципи візуальної ієрархії

Підготовка брошури для друку.

Тут п'ять тизерів по периферії сторінки однакові за ієрархією, але досягають різноманітності, змінюючи два добре спарені шрифти – один із засічками середньої ваги, а інший – з легким, але високим без засічок.

Принципи візуальної ієрархії

5. Колір та відтінок. Принципи візуальної ієрархії


_

Ось ще одне легке завдання: яскраві кольори виділяються з приглушених кольорів або відтінків сірого, тоді як світліші відтінки здаються «віддаленішими» і, таким чином, падають нижче в ієрархії, ніж багатші, темніші. Веб-сайт «Де вони» протиставляє яскраве світло та кольорове підсвічування чорно-білій сітці ефекту яскравості:

Читайте також:  Cinemagraphs - чудовий спосіб створення зображення.

колір, що використовується для візуальної ієрархії


Веб-сайт Гуггенхайма використовує колір для акцентування важливої інформації, такої як вибір розташування, список виставок, які зараз переглядаються, та посилання на спеціальні виставки. Принципи візуальної ієрархії

Найкращий шрифт для нестандартної упаковки

Музей Гуггенхайма

Веб-сайт Музею Вітні, з іншого боку, встановлює ієрархію в рамках одного шрифту, ваги та тону (чорного) з використанням відтінку (що означає додавання білого до базового тону, роблячи його світлішим). «Корі Архангел про поп-культуру» явно знаходиться під «Новим про оповідання Вітні» у візуальній ієрархії не тільки тому, що він розташований нижче, але й тому, що його відтінок світліший, що робить його менш кидним у вічі на білому тлі. Принципи візуальної ієрархії

Музей американського мистецтва Вітні


 

Колір має особливе значення у дизайні мобільних додатків, де невеликий розмір екрану обмежує вашу здатність використовувати інші стратегії, такі як різниця у розмірах та широкий інтервал. У програмі Grainger Industrial Supply кнопка «Перейти до замовлення» пофарбована в червоний колір, виділяючи її на будь-якій сторінці, де вона з'являється. Панель «Звузити результати пошуку», навпаки, є сірою, що робить її приблизно еквівалентною в ієрархії з іншими елементами, такими як панель пошуку та посилання на товари.

Дизайн програми для Grainger Принципи візуальної ієрархії

Дизайн програми для Grainger


 

6. Напрямок для дизайнерів. Принципи візуальної ієрархії
_

Макети сторінок зазвичай розробляються відповідно до сітки вертикальних і горизонтальних ліній як за угодою, так і тому, що це найбільш розбірливий формат. У такій системі з'являється новий спосіб встановлення ієрархії: зламати сітку.

Текст, що розташований по кривій або діагоналі, автоматично виділяється на тлі оточеного тексту, заблокованого сіткою, займаючи центральне місце. Довгий час це була ефективна стратегія реклами, наприклад, постер на автобусній зупинці від Frost Design .