Зрительное восприятие

• осмотр плоскости по дуге, проходящей через точки 1, 2, 3, 4, если нет каких-то других четких акцентов на сюжетно важном композиционном центре.
Это упрощенная схема. Осмотр плоскости изображения - процесс необычайно сложный, потому что существуют такие элементы зрения, как саккады (быстрое перемещение глаз), периферическое зрение, ассоциативный выбор СВКЦ в кадре, определяемый индивидуальным образным мышлением отдельного человека.

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

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

Свойствами нашего зрения обусловлено желание видеть уравновешенное изображение. Уравновешенность - изобразительное средство, играющее в процессе восприятия важную роль. При неподвижном глазном яблоке человека телесный угол зрения составляет всего 2-7 градусов, этим телесным углом и образуется конус зрения. Если перед глазом поместить плоскость перпендикулярную оси конуса зрения, то каждый глаз видит круг на этой плоскости. Каждый глаз видит свой круг на плоскости, при этом, чем дальше от глаз располагается плоскость, тем больше эти круги пересекаются. На некотором расстоянии объединение кругов зрения (от каждого из глаз) представляет собой овал, называемый полем зрения. Центр этого объединения называется центром поля зрения. Для того, чтобы картинная плоскость полностью попадала в поле зрения, необходимо находиться от нее на определенном расстоянии. Кроме объектов в поле зрения, человек частично видит и другие детали изображения за счет периферического зрения и микроскопических колебаний глазного яблока.
Если перед взором человека находится ограниченная краями плоскость изображения, полностью попадающая в поле зрения, и если при этом в левой, например, части изображено какое-то пятно, то правая часть плоскости изображения кажется лишней или возникает ощущение, что в этой части недостает другого пятна. При этом пятно в правой части нам хочется видеть приблизительно такого же размера и той же тональной плотности, т.е. для зрителя комфортно видеть уравновешенное изображение. Если одно пятно темнее другого, то оно кажется более тяжелыми по отношению к более светлому. Если пятна одинаковой тональной плоскости, но одно из них больше по размеру, то большее воспринимается более тяжелым.
Рассматривать любое изображение необходимо с рекомендуемого расстояния. Когда мы хотим рассмотреть какую-то часть изображения, выходящую за рамки нашего поля зрения, то центр зрения подсознательно смещаем и располагаем так, чтобы видимую в данный момент часть плоскости воспринимать уравновешенно.

Уравновешенность на изображении может быть получена не только с использованием четного количества изображенных пятен (объектов). Если на плоскости изображения расположены два пятна, например, одно под другим в левой половине изображения, то правая часть кажется лишней. Но достаточно расположить всего одно пятно в середине правой части листа, как изображение обретет уравновешенный вид. Три пятна на плоскости изображения называют классической трехточечной композицией. Если в треугольнике, вершины которого - объекты трехточечной композиции, одна из сторон параллельна нижнему краю плоскости изображения и расположена ближе к нему, то такая композиция называется устойчивой. Если же одна из сторон такого треугольника расположена ближе к верхнему краю и параллельна ему, то такую композицию называют неустойчивой. Для передачи устойчивого или шаткого положения изображаемого объекта часто используют принцип трехточечной композиции.

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

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

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

К особенностям восприятия относится также то, что предметы на заднем плане (в глубине кадра) воспринимаются менее значительными, чем на переднем.

Создание оптимального информационного изображения.

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

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

3.Цветное  воспринимается лучше, но стоит правильно подобрать цвет шрифта, например, очень хорошо смотрятся буквы зеленые или красные на белом, а вот сочетание черного и белого - не лучший вариант:  оно хуже привлекает внимание. С другой стороны, популярен прием, когда на черно-белом изображении цветом выделена одна ключевая деталь. Если эту деталь правильно вписать в информационное поле, руководствуясь хотя бы тем же правилом "золотого сечения" и принимая во внимание другие объекты, расположенные на изображении, то психологический эффект будет в разы выше, чем от яркой многоцветной картинки

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

5.Не следует усложнять без необходимости, перегружая изображение обилием цветов и форм.

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

Как мы видим: визуальные отношения.

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

Этот процесс ускоряется еще больше благодаря нашей способности визуально группировать объекты.

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

Рис.1: Принципы восприятия: близость, схожесть, протяженность, законченность

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

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

Рис. 2: Визуальные различия между объектами

Изложение сюжета: Визуальная иерархия

"Дизайнеры призваны привнести порядок в хаос; они позволяют яснее передавать идеи путем организации и манипуляции словами и изображениями" - Джеффри Вин (Jeffery Veen), The Art and Science of Web Design

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

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

Рис.3: Три объекта с различными визуальным весом, созданным вариациями цвета, формы и фактуры.

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

Рис.4: Самыми тяжелыми (визуально доминирующими) элементами в рекламном плакате цирка являются изображения артистов и заголовок. Они создают общую картину: в город приехал цирк. Более легкие элементы (менее доминирующие) - это цена билета и список участников представления. Если бы иерархия была иной, мало кто понял бы, что в город приехал цирк. Вместо этого люди бы увидели странный плакат, рекламирующий что-то за $5.50.

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

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

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

Содержание.

 Заголовок страницы

 Заголовок подраздела

 Ссылки в тексте

 Дополнительная информация (подписи под картинками и т.д.)

Навигация

 Текущее местоположение

 Верхний уровень навигации

 Второй уровень навигации

 Путь от начала к текущей странице (ссылки-цепочки)

Сопутствующая информация

 Отличительные элементы

 Инструменты работы с сайтом (корзинка, карта сайта и т.д.)

 "Подвальная" информация (контактная информация, политика сайта и т.д.)

Рис.7: Визуальная иерархия общей веб-страницы

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

 Соответствовать функции данного элемента

 Быть одинаковым на всем сайте

 Занимать положенное место в визуальной иерархии страницы