Как создать эффективную визуальную иерархию (плюс советы)

14 октября 2021 г.

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

Что такое визуальная иерархия?

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

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

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

• Размер: дизайнеры изменяют размер различных элементов, чтобы пользователям было легче заметить более крупные элементы.

• Цвет и оттенок. Дизайнер может использовать яркие цвета, чтобы привлечь внимание пользователя.

• Близость: Когда вы размещаете элементы в дизайне рядом друг с другом, это предполагает, что они связаны.

• Пробелы: Пробелы относятся к дополнительному пространству вокруг элементов. Дизайнеры могут использовать это, чтобы привлечь внимание к конкретному рассматриваемому элементу, на котором они хотят, чтобы зрители сосредоточились.

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

• Контраст: контрастные цвета могут создать более привлекательные элементы.

• Выравнивание: дизайнеры выравнивают различные элементы вместе, чтобы они выглядели связанными в дизайне.

Как создать визуальную иерархию

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

1. Используйте размер, чтобы установить важность

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

2. Используйте цвет, чтобы привлечь внимание зрителя

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

3. Используйте интервал, чтобы направить взгляд зрителя

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

4. Стратегически выровняйте элементы

То, как вы выравниваете текст и другие элементы, может помочь вам установить порядок важности в вашем дизайне. Выравнивание также помогает направлять взгляд зрителя по дизайну. Когда вы выравниваете элементы по одному и тому же пути, вы подразумеваете, что они связаны. Это упрощает сканирование связанных элементов в дизайне.

5. Учитывайте близость разных элементов

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

6. Используйте контраст с умом

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

7. Используйте типографику стратегически

Типографика дает вам возможность добавить индивидуальности вашему дизайну. Это также помогает привлечь внимание к определенным элементам текста. Работая над своим дизайном, подумайте о шрифтах, которые вы хотите использовать, и представьте три уровня текста в своих проектах. Рассмотрим эти уровни:

• Основной: используйте основной тип, чтобы привлечь внимание пользователя к основной информации о дизайне. Начальный уровень часто включает заголовки в газете или журнале.

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

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

8. Подумайте о просмотре шаблонов

При создании дизайна важно учитывать как шаблоны F, так и Z. Оба эти шаблона просмотра относятся к тому, как взгляд зрителя перемещается по странице или дизайну. При F-шаблоне взгляд зрителя перемещается из верхнего левого угла в верхний правый, а затем к следующей строке слева направо. Дизайнеры часто используют шаблон F для проектов с большим объемом текста, таких как статьи. При использовании Z-образного шаблона взгляд зрителя перемещается из левого верхнего угла в правый верхний угол страницы, затем вниз в левый нижний угол, а затем в правый нижний угол.

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

Советы по созданию визуальной иерархии

Используйте эти советы, чтобы помочь вам создать визуальную иерархию в качестве дизайнера:

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

• Будьте внимательны к выбору типографики. Хотя более сложные шрифты могут привлечь внимание пользователя, убедитесь, что они не отвлекают и не уменьшают видимость других элементов.

• Помните о цели дизайна. Когда вы устанавливаете визуальную иерархию, напоминайте себе о причине проекта. Спросите себя, передает ли то, что вы разрабатываете и перестраиваете, сообщение, которое вы изначально хотели.