Принципы визуальной иерархии для дизайнеров  — это концепция дизайна, которая используется для управления тем, как глаза зрителя движутся по дизайну, и определяет, какие элементы являются наиболее важными или визуально привлекательными.

Сначала были каменные таблички, свитки папируса и бумага. Затем появились компьютерные экраны и электронные планшеты. Поскольку технология отображения страницы развивается, дизайнерам остается четко организовать контент. Но как лучше? Короче , визуальная иерархия.

Вот определение визуальной иерархии: Визуальная иерархия — это расположение графических элементов в дизайне в порядке важности каждого элемента. Визуальный вес определяет важность элемента в иерархии дизайна, сообщая зрителю, на чем сосредоточиться и в каком порядке.

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

Это становится все более важным вопросом, так как адаптивные фреймворки заставляют дизайнеров думать сразу о множестве разных страниц. Столкнувшись с плотным текстом и короткими промежутками внимания, дизайнеры разработали 6 принципов, чтобы направить взгляд читателя на самую важную информацию.

Эти 6 принципов визуальной иерархии помогут вам спроектировать все — от брошюр до приложений , гарантируя конечному пользователю положительный опыт чтения для дизайнеров.

Принципы визуальной иерархии

Все культуры читаются сверху вниз, а большинство культур читается слева направо. Но хотя эти знания важны для дизайна страницы, дизайнеры знают, что задача намного сложнее.

Недавние исследования показали, что люди сначала просматривают страницу, чтобы понять, заинтересованы ли они в ней, прежде чем читать ее. Шаблоны сканирования имеют тенденцию принимать одну из двух форм, «F» и «Z», и вы можете воспользоваться этим в своем дизайне.

F-Patterns. Принципы визуальной иерархии

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

шаблоны сканирования страниц визуальной иерархии

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

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

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

Z-шаблон Принципы визуальной иерархии


 

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

В приведенном ниже дизайне конференции 2010 года сборки важными элементами являются логотип (вверху слева), кнопка «зарегистрироваться сейчас» (вверху справа) и список ораторов (внизу), которые стратегически расположены в приятных местах Z-образец.

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

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

используя размер шрифта для визуальной иерархии

Что интересно, эта тенденция на самом деле достаточно сильна, чтобы отвергнуть правило сверху вниз. На приведенном выше изображении «взлом» переопределяет «время действовать», потому что оно больше и слева (поэтому правило слева направо помогает).

Но на следующей странице « Годового отчета: кампания за права человека 2012» (разработано в пятой колонке СМИ ) мы читаем крупным шрифтом «Борьба за равенство на следе кампании» перед текстом прямо над ним «Выборы 2012». Принципы визуальной иерархии

Принципы визуальной иерархии


 

«Выборы 2012» — это порядок информации самого высокого уровня: он рассказывает нам общую тему, к которой относится информация, представленная ниже. Но дизайнер решил, что заголовок статьи был более интересным для читателей, и поэтому оценил его так, чтобы его читали первыми.

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

Еще один способ привлечь внимание — дать контенту достаточно места для дыхания . Если вокруг кнопки остается значительное отрицательное пространство или строки в текстовом блоке широко отслеживаются, эти элементы будут более легко видны читателям.

Как вы видите на изображении ниже (часть DrawtoClick сайта «s), интервал может быть элегантной альтернативой или дополнением к использованию размера. Здесь, точка продажи, «Notre agence vouscompagne…», написана очень мелким шрифтом, но она окружена избытком пустого пространства, что свидетельствует о ее важности. Ниже фразы «Le Compendre», «Le Réaliser» и «Le Partager» получают дополнительный акцент, будучи оторванными от окружающего пространства.

пример визуальной иерархии

Когда люди говорят о «текстуре» в отношении визуальной иерархии, они не имеют в виду графические эффекты текстуры. Скорее, этот вид «текстуры» относится к общему расположению или структуре пространства, текста и других деталей на странице. Этот пример от Bright Pink хорошо иллюстрирует концепцию:

Принципы визуальной иерархии 2

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

На третьем изображении фоновая каракули прерывает пространство «Спорт», но не «бадминтон», и, следовательно, приводит к развороту, где «бадминтон» является самым высоким в иерархии. Такое развитие трудно предсказать, поэтому дизайнеры часто связывают его с целостным ощущением «текстуры».

4. Вес шрифта и сопряжение. Принципы визуальной иерархии

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

Обратите внимание, как гарнитура влияет на порядок иерархии слов в приведенном ниже веб-дизайне для The Tea Factory : «идеальные чаи, которые помогут вам согреться» — это главное, но различия в весе шрифта и курсиве, в дополнение к размещению слов, создают более динамичный, менее линейный, опыт чтения. «://azbyka.com.ua/foto/tea-factory.jpg» />

В некоторых случаях цель состоит в том, чтобы представить разнообразную информацию как столь же срочную. Установка всех одинаковых размеров и веса обеспечит эквивалентность, но также сделает ее однообразной. Дифференциация шрифтов — это один из способов избежать этого, как на приведенной ниже обложке журнала Trendi . Принципы визуальной иерархии

Подготовка брошюры к печати.

Здесь пять тизеров по периферии страницы одинаковы по иерархии, но достигают разнообразия, меняя два хорошо спаренных шрифта — один с засечками среднего веса, а другой — с легким, но высоким без засечек.

Принципы визуальной иерархии

5. Цвет и оттенок. 

Вот еще одна легкая задача: яркие цвета выделяются из приглушенных цветов или оттенков серого , в то время как более светлые оттенки кажутся более «отдаленными» и, таким образом, падают ниже в иерархии, чем более богатые, более темные. Веб-сайт « Где они» противопоставляет яркий свет и цветную подсветку черно-белой сетке эффекту яркости:

цвет, используемый для визуальной иерархии


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

Лучший шрифт для нестандартной упаковки

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

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

Музей американского искусства Уитни


 

Цвет имеет особое значение в дизайне мобильных приложений, где небольшой размер экрана ограничивает вашу способность использовать другие стратегии, такие как различие в размерах и широкий интервал. В приложении Grainger Industrial Supply кнопка «Перейти к оформлению заказа» окрашена в красный цвет, выделяя ее на любой странице, где она появляется. Панель «Сузить результаты поиска», напротив, является серой, что делает ее примерно эквивалентной в иерархии с другими элементами, такими как панель поиска и ссылки на товары.

Дизайн приложения для Grainger Принципы визуальной иерархии

Дизайн приложения для Grainger


 

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

Макеты страниц обычно разрабатываются в соответствии с сеткой вертикальных и горизонтальных линий, как по соглашению, так и потому, что это наиболее разборчивый формат. В такой системе появляется новый способ установить иерархию: сломать сетку.

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