Принципи візуальної ієрархії для дизайнерів - це концепція дизайну, яка використовується для управління тим, як очі глядача рухаються дизайном, і визначає, які елементи є найбільш важливими або візуально привабливими.
Спочатку були кам'яні таблички, сувої папірусу та папір. Потім з'явилися комп'ютерні екрани та електронні планшети. Оскільки технологія відображення сторінки розвивається, дизайнерам залишається чітко організувати контент. Але як краще? коротше , візуальна ієрархія.
Ось визначення візуальної ієрархії: Візуальна ієрархія – це розташування графічних елементів у дизайні у порядку важливості кожного елемента. Візуальна вага визначає важливість елемента в ієрархії дизайну, повідомляючи глядачеві, на чому зосередитись і в якому порядку.
Ресурси для дизайнерів. 50 безкоштовних
Це стає все більш важливим питанням, оскільки адаптивні фреймворки змушують дизайнерів думати відразу про безліч різних сторінок. Зіткнувшись із щільним текстом та короткими проміжками уваги, дизайнери розробили 6 принципів, щоб направити погляд читача на найважливішу інформацію.
Ці 6 принципів візуальної ієрархії допоможуть вам спроектувати все - від брошур до додатків, гарантуючи кінцевому користувачеві позитивний досвід читання для дизайнерів.
Усі культури читаються згори донизу, а більшість культур читається зліва направо. Але хоча ці знання важливі для дизайну сторінки, дизайнери знають, що завдання набагато складніше.
Нещодавні дослідження показали, що люди спочатку переглядають сторінку, щоб зрозуміти, чи зацікавлені вони в ній, перш ніж її читати. Шаблони сканування мають тенденцію приймати одну з двох форм, F і Z, і ви можете скористатися цим у своєму дизайні.
F-Patterns. Принципи візуальної ієрархії
F-шаблони застосовуються до традиційних текстових сторінок, таких як статті чи повідомлення у блозі. Читач переглядає ліву частину сторінки у пошуках цікавих ключових слів у вирівняних по лівому краю заголовках або вихідних тематичних реченнях, потім зупиняється та читає (праворуч), коли він чи вона стикається з чимось цікавим. Результат виглядає як F (або E, або щось із ще більшою кількістю горизонтальних смуг; але термін «F» застряг).
Як ви можете використати це? Вирівняйте важливу інформацію зліва та використовуйте короткі жирні заголовки, маркери та інші подібні елементи, що привертають увагу, щоб розбити блоки абзацу.
Z-модель. Принципи візуальної ієрархії
Z-шаблони застосовуються до інших видів сторінок, таких як реклама або веб-сайти, де інформація не обов'язково представлена в абзацах блоку. Спочатку читач сканує верхню частину сторінки, де, ймовірно, буде знайдено важливу інформацію, потім переходить у протилежний кут по діагоналі і робить те саме в нижній частині сторінки.
Веб-дизайнери зазвичай конструюють свої сторінки, щоб явно відповідати цій поведінці, розміщуючи найбільш важливу інформацію в кутах і орієнтуючи іншу важливу інформацію уздовж верхньої та нижньої смуг і з'єднуючи діагональ.
У наведеному нижче дизайн конференції 2010 року складання важливими елементами є логотип (вгорі зліва), кнопка «зареєструватися зараз» (вгорі праворуч) та список ораторів (внизу), які стратегічно розташовані у приємних місцях Z-зразок.
2. Розмір має значення. Принципи візуальної ієрархії
_
Це досить просто: люди спочатку читають великі речі. Якщо ваш погляд спрямовується до «поданням» перед тим, як «розколотися» в наведеній нижче рекламі для театру «Молодий Вік», вам слід негайно зв'язатися з психологом-перцептівом: ви, ймовірно, зможете заробити хороші гроші, проходячи тестування як рідкісна аномалія.
Що цікаво, ця тенденція насправді є досить сильною, щоб відкинути правило зверху вниз. На наведеному вище зображенні "злом" перевизначає "час діяти", тому що воно більше і зліва (тому правило зліва направо допомагає).
Але на наступній сторінці «Річного звіту: кампанія за права людини 2012» (розроблено у п'ятій колонці ЗМІ) ми читаємо великим шрифтом «Боротьба за рівність на сліді кампанії» перед текстом над ним «Вибори 2012». Принципи візуальної ієрархії
«Вибори 2012» — це порядок інформації найвищого рівня: він розповідає нам загальну тему, до якої належить інформація, наведена нижче. Але дизайнер вирішив, що заголовок статті був цікавішим для читачів, і тому оцінив його так, щоб його читали першими.
3. Простір і текстура. Принципи візуальної ієрархії
Ще один спосіб привернути увагу дати контенту достатньо місця для дихання . Якщо навколо кнопки залишається значний негативний простір або рядки в текстовому блоці широко відстежуються, ці елементи будуть легко видно читачам.
Як ви бачите на зображенні нижче (частина DrawtoClick сайту «s), інтервал може бути елегантною альтернативою або доповненням до використання розміру. Тут, точка продажу, «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. Колір та відтінок.
Ось ще одне легке завдання: яскраві кольори виділяються з приглушених кольорів або відтінків сірого, тоді як світліші відтінки здаються «віддаленішими» і, таким чином, падають нижче в ієрархії, ніж багатші, темніші. Веб-сайт «Де вони» протиставляє яскраве світло та кольорове підсвічування чорно-білій сітці ефекту яскравості:
Веб-сайт Гуггенхайма використовує колір для акцентування важливої інформації, такої як вибір розташування, список виставок, які зараз переглядаються, та посилання на спеціальні виставки. Принципи візуальної ієрархії
Кращий шрифт для нестандартної упаковки
Веб-сайт Музею Уїтні, з іншого боку, встановлює ієрархію в рамках одного шрифту, ваги і тону (чорного) з використанням відтінку (що означає додавання білого до базового тону, роблячи його світліше). «Корі Архангел про поп-культурі» явно перебуває під «Новим про оповідання Уїтні» в візуальної ієрархії не тільки тому, що він розташований нижче, але і тому, що його відтінок світліше, що робить його менш кидається в очі на білому тлі. Принципи візуальної ієрархії
Колір має особливе значення в дизайн мобільних додатків, де невеликий розмір екрану обмежує вашу здатність використовувати інші стратегії, такі як різниця у розмірах та широкий інтервал. У програмі Grainger Industrial Supply кнопка «Перейти до оформлення замовлення» пофарбована в червоний колір, виділяючи її на будь-якій сторінці, де вона з'являється. Панель "Звузити результати пошуку", навпаки, є сірою, що робить її приблизно еквівалентною в ієрархії з іншими елементами, такими як панель пошуку та посилання на товари.
Дизайн додатка для Grainger
6. Напрямок для дизайнерів.
Макети сторінок зазвичай розробляються відповідно до сітки вертикальних та горизонтальних ліній, як за згодою, так і тому, що це найбільш розбірливий формат. У такій системі з'являється новий спосіб встановлення ієрархії: зламати сітку.
Текст, розташований кривою чи діагоналі, автоматично виділяється і натомість оточеного тексту, заблокованого сіткою, займаючи центральне місце. Довгий час це була ефективна стратегія реклами, наприклад, постер на автобусній зупинці від Frost Design .
Залишити коментар