Что такое визуальная иерархия и почему она важна?
Если посмотреть на приведенное ниже изображение между экранами A и B, то какой из них привлекает больше внимания, чем другой? Какой экран дает более прямое определение заголовка, подзаголовка и содержания?
Динь-динь! Да, это экран B!
Почему? Да просто потому, что экран В реализует в своем дизайне принципы визуальной иерархии. Экран B увеличивает размер элементов и плотно обводит значки вокруг текста, привлекая внимание зрителя к центру изображения, где находится сообщение.
Что такое визуальная иерархия и почему она важна в графическом дизайне?
Продолжайте читать, чтобы узнать больше.
UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.
Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.
Что такое визуальная иерархия?
Визуальная иерархия – это расположение графических элементов в дизайне относительно их важности. Например, визитная карточка может содержать такие элементы, как имя, организация, контактный телефон, адрес электронной почты и другую контактную информацию.
Какой из этих элементов является наиболее важным?
На что человек должен обратить внимание в первую очередь?
Чаще всего это название организации, затем имя человека, его должность и, наконец, контактная информация.
Именно такая иерархия позволяет направить внимание пользователя именно на те элементы, которые задуманы дизайнером. Внедрение визуальной иерархии не только помогает читателю легче обрабатывать информацию (поскольку содержание разбито для него на части), но и делает содержание более привлекательным с визуальной точки зрения.
В наши дни, когда средняя продолжительность внимания человека составляет всего 8 секунд, для успешного создания интересного контента дизайнерам крайне важно придерживаться правильной визуальной иерархии.
Это касается и веб-сайтов, и приложений, и даже контента в социальных сетях. Учитывая это, в данной статье мы рассмотрим золотые принципы, которые помогут создать эстетически привлекательный дизайн с помощью визуальной иерархии.
No 1: Композиция
Каждый фрагмент контента должен быть хорошо встроен.
Всегда помните, что главное – провести читателя через весь контент – сверху вниз.
Для начала необходимо ответить на два основных вопроса:
- Куда обычно в первую очередь устремляется взгляд зрителя, когда он попадает на сайт?
- Какие элементы помогут направить внимание на следующую точку?
Здесь на помощь приходит композиция.
Композиция состоит из всех отдельных элементов дизайна, таких как текст, изображения, цвет и графика. Принцип композиции помогает расположить компоненты на основе двух правил: схемы чтения и правила третей.
Схема чтения
Большинство людей читают слева направо.
При оформлении страницы существуют две основные схемы, которые помогают расположить информацию так, чтобы она лучше читалась. Для компонентов с большим объемом текста вся важная информация может быть расположена в виде буквы “F“. На рисунке ниже показана тепловая карта того, как типичный читатель воспринимает тяжелый текст.
Такая композиционная схема поможет дизайнеру правильно расположить важную информацию, чтобы пользователи могли более эффективно перемещаться по экрану.
С другой стороны, на целевых страницах с минимальным количеством текста следует размещать информацию, направляя взгляд по схеме “Z“. Ориентация на простоту делает Z–образную схему уникальной для дизайна целевых страниц – там, где необходимо сконцентрировать внимание на одном объекте, чтобы привлечь людей и побудить их к действию.
Для этого достаточно разместить призыв к действию вдоль Z-образной траектории, чтобы убедиться, что зритель его видит. Таким образом, читатель получает четкое представление о том, какую информацию он получит и какие действия необходимо предпринять после этого. Это потенциально может привести к увеличению конверсий на сайте.
Правило третей
Правило третей помогает определить, где в дизайне должна быть размещена важная информация.
Опять же, оно служит для зрителя ориентиром, на что он должен обратить внимание в первую очередь. Правило третей состоит из двух направляющих по горизонтали и двух направляющих по вертикали.
Пересечение этих линий является точкой, на которой фокусируется взгляд большинства пользователей. Воспользуйтесь этим, разместив основной компонент (например, текст, тему) в этой области.
Большинство хороших макетов, даже фото, используют это правило для получения привлекательных результатов.
No 2: Типографика
Типографика встречается повсюду: в книгах, которые мы читаем, на веб-сайтах, которые мы посещаем, даже на рекламных щитах, уличных указателях, упаковках и многом другом. Проще говоря, типографика – это стиль и внешний вид текста.
Под типографикой также понимается сочетание шрифтов, которые могут быть одинаковыми или разными по размерам, элементам, семейству шрифтов и атрибутам для передачи сообщения на экране.
При создании иерархии с помощью типографики лучше всего иметь в виду 3 набора компонентов для организации дизайна.
Три основных компонента – это заголовок, подзаголовок и основная часть.
Давайте посмотрим на изображение ниже.
Оба текста написаны одним и тем же шрифтом. Заметили разницу между ними? Это просто визуальная иерархия, использующая контрастные размеры шрифтов для привлечения внимания. Хотя пользователь может прочитать абзац слева, он не сможет передать важность того, что выделено.
В то время как в тексте справа правильно реализован принцип визуальной иерархии: он четко показывает, на чем сосредоточено внимание, и при этом ведет пользователя по всему абзацу с меньшим трением.
Кроме того, он лучше читается, так как выглядит гораздо четче.
No 3: Размер и масштаб
Когда речь идет о дизайне, размер имеет значение.
Более крупный текст или фигуры создают впечатление, что они важны, поскольку требуют большего внимания. Однако очень важно выбрать правильный элемент для выделения, иначе он будет отвлекать внимание, а этого следует избегать.
Один из приемов заключается в том, чтобы определить, на каком именно сообщении вы хотите сконцентрировать внимание аудитории, и затем сделать его большим.
Таким образом, сообщение передается более эффективно.
В качестве примера можно привести визуальный образ, представленный выше: огромный текст находится прямо в центре изображения. Но поскольку слово “Integrated” вызывает любопытство, зрители склонны искать “ответы“. Они будут сканировать текст, расположенный в правой верхней части изображения, в левую нижнюю. Это пример правильной реализации принципа визуальной иерархии.
Что касается форм, то при правильном расположении различные размеры могут создавать перспективу и глубину резкости. Это также помогает определить, на чем следует сосредоточить внимание читателя при просмотре.
Журнал “Time” и журнал “The New Yorker” своими иллюстрированными обложками дают хорошие рекомендации. Например, на этой обложке журнала Times за 1954 год изображен Уолт Дисней. Легко заметить, что в центре внимания находится сам Уолт Дисней, а персонажи мультфильмов нарисованы в гораздо меньшем масштабе за его спиной. Эта обложка дает читателю понять, что основная тема номера посвящена именно ему.
Или взгляните на The New Yorker (апрельский номер 2020 года), где в центре внимания – медсестра, разговаривающая по видеосвязи со своей семьей на родине.
No 4: Цвет и контраст
Выбор цвета и контрастность очень важны для визуальной иерархии, поскольку помогают пользователям различать основные элементы.
Общеизвестно, что цвета способны влиять на эмоции пользователя. Например, когда пользователь видит теплые цвета, такие как желтый и оранжевый, это вызывает у него чувство радости и бодрости.
В то же время холодные цвета, такие как синий и фиолетовый, вызывают у пользователя чувство спокойствия и расслабленности. Это называется психологией цвета. Теперь атрибуты цвета можно разделить на две части:
- Сильный/жирный цвет: красный, желтый и синий.
- Слабый цвет: пастельный цвет, который обычно используется в качестве дополнения к жирному цвету.
Смелые цвета легко заметить, их можно использовать для выделения объектов или создания контраста в дизайне.
Взгляните на пример ниже. То же самое можно реализовать с одним и тем же цветом, сочетая как более смелый, так и более слабый цвет, чтобы показать связность, или, наоборот, можно соединить два контрастных цвета, чтобы действительно подчеркнуть разницу.
Вот еще один пример. Видите, что основные кнопки CTA, такие как “Sign Up Free“(Зарегистрироваться бесплатно) и “Sign Up“(Регистрация), выполнены в другом цвете по сравнению с кнопкой “Log In“(Вход)?
Это потому, что большинство людей, попадающих на эту страницу, скорее всего, не имеют учетной записи. Поэтому, чтобы склонить их завести аккаунт, Mailchimp четко указывает, где новые пользователи могут зарегистрироваться, используя контрастные цвета, чтобы кнопки CTA выделялись больше.
No 5: Белое или негативное пространство
Загроможденный сайт может отвлекать и быть неприятным для глаз.
Поэтому использование белого пространства позволяет сбалансировать общий дизайн. Оно дает возможность глазам расслабиться и улучшает восприятие экрана, возвращая внимание пользователя в фокус.
Правильное использование белого пространства помогает читателям оставаться на экране и непосредственно воспринимать важную информацию.
Кроме того, хорошее количество белого пространства помогает глазам пользователя расслабиться – особенно после прокрутки страницы с большим количеством текста.
Посмотрите на пример ниже:
Вывод из статьи Визуальная иерархия: 5 золотых принципов дизайна
Главный приоритет или цель дизайнера (особенно UI/UX-дизайнера) – создать пространство, в котором информация легко усваивается.
Речь не идет о том, чтобы постоянно внедрять всякие причудливые штучки, поскольку вы не хотите еще больше отвлекать читателя. Учитывая это, дизайнеры должны всегда помнить о важнейшей роли 5 принципов, рассмотренных выше, при проектировании экранов. С помощью визуальной иерархии и хорошего дизайнерского чутья каждый может систематически решать задачи дизайна.
Изображения, где не указан источник, за источник считать сайт: admiral.digital
Статья переведена на русский язык компанией UniwexSoft.
UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.
Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.
