Принципы проектирования. Визуальные вес и направление

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

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

Визуальный вес

Физический вес является мерой силы тяжести, но двумерные объекты (например, элементы веб-страницы) не имеют массы, и следовательно, не имеют какого-либо физического веса. Визуальный вес является мерой силы, с которой он влияет на внимание пользователя: чем сильнее элемент притягивает взгляд, тем больше его визуальный вес.
Визуальный вес является производной от размера, цвета и формы. Управление комбинациями этих характеристик позволяет управлять весом. Красный сильнее бросается в глаза больше, чем синий; крупные элементы будут замечены с большей вероятностью, чем меньшие. Как следствие, большой красный элемент имеет больший визуальный вес, чем маленький синий.

Как измерить визуальный вес?

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

Ниже приведены некоторые из характеристик и описание того, как их изменение будет влиять на визуальный вес элемента:

• Размер. Большие элементы имеют больший визуальный вес, чем мелкие.
  
  • Цвет. Теплые цвета склонны весить больше, чем холодные, которые отступают на второй план. Красный считается тяжелым, а желтый относительно легким.
    
  • Насыщенность цвета. Темные элементы имеют больший вес, чем светлые.
    
  • Позиция. Элементы, расположенные в верхней части композиции, весят больше элементов, расположенных ниже. Элементы на переднем плане имеют больший вес, чем детали фона.
    
  • Текстура. Элементы, имеющие текстуру, визуально весят больше, чем объекты без нее. Текстура придает объемности, которая значительно увеличивает заметность объекта.
    
  • Форма. Объекты правильной формы имеют больший вес.
    
  • Ориентация. Вертикальные объекты тяжелее, чем горизонтальные. Диагональные элементы самые тяжелые.

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

• Плотность. Чем плотнее расположение элементов в определенной области, тем больший вес имеет группа.
  
  • Пустое пространство. Пустое пространство не имеет никакого визуального веса, поэтому любой объект, расположенный в окружении пустого пространства, имеет больший вес, чем аналогичный объект, размещенный среди других элементов.
    
  • Интерес. Некоторые вещи более интересны, чем другие. Чем сложнее и интереснее элемент, тем больше внимания он привлечет. Также огромное значение имеет личная заинтересованность пользователя. Если его увлекают машины, то автомобиль, расположенный на фоне города будет ему интереснее, чем здания на заднем плане, но если его страсть — архитектура, то авто отойдет на второй план.

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

ВИЗУАЛЬНЫЙ ВЕС И ГЕШТАЛЬТ

Давайте посмотрим, как визуальный вес может влиять на гештальт-группы.

• Фигура-фон. Визуальные веса могут быть использованы для разделения основной фигуры и фонового изображения. Используйте средства, увеличивающие вес элемента для центрального объекта и старайтесь облегчить фон.
  
  • Сходство и контраст. Вы можете использовать визуальный вес, чтобы подчеркнуть близость элементов. Объекты с одинаковым визуальным весом воспринимаются как схожие.
    
  • Центры тяжести. Элементы, расположенные в ключевых точках композиции, обычно имеют больший вес.
    
  • Прошлый опыт. От прошлого опыта пользователя зависит то, насколько ему будет интересен тот или иной элемент и, как следствие, определяет то, насколько визуально тяжел тот или иной объект для этого пользователя.

Визуальное направление

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

Визуальное направление выполняет функцию, аналогичную визуальному весу: оно пытается заставить вас заметить конкретную часть композиции, но если вес говорит «Посмотри сюда!», то направление твердит «Посмотри туда!».

Как и в случае с визуальным весом, вы можете изменить визуальное направление объекта, изменив его характеристики.

• Форма элемента. Форма каждого из группы элементов способна создавать направляющую ось, которая должна иметь общее направление для всей группы.
  
  • Расположение элементов. Вы можете использовать визуальный вес элементов для того, чтобы привлечь внимание к соседнему объекту.
    
  • Предмет. Стрелка, указывающий палец или направленный взгляд предлагают смотреть в определенном направлении.
    
  • Движение. Элемент может буквально пройти через всю вашу конструкцию, и его движение будет иметь направление.
    
  • Структурный скелет. Каждая композиция имеет структурный скелет, вдоль осей которого направлены основные визуальные силы. Этот пункт, вероятно, потребует подробного разъяснения.

СТРУКТУРНЫЕ СКЕЛЕТЫ

В своей книге Искусство и визуальное восприятие: Психология с точки зрения творчества, Рудольф Арнгейм предложил идею существования структурного скелета в каждой композиции.

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

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

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

ВИЗУАЛЬНОЕ НАПРАВЛЕНИЕ И ГЕШТАЛЬТ

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

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

• Общая участь. Элементы рассматриваются, как группа, если они перемещаются в одном направлении.

Общее руководство по композиции

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

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

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

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

Резюме

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

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