Черная пятница в UPROCK!

Оптические иллюзии

Автор статьи:
,

Введение

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

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

Что такое оптическая иллюзия

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

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

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

Почему мы видим оптические иллюзии

То, что мы видим оптические иллюзии, можно объяснить влиянием нескольких факторов:

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

Немного истории

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

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

Гештальт принципы

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

Принцип сходства (подобия)

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

Принцип близости

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

Принцип завершения

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

Принцип непрерывности

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

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

Виды оптических иллюзий

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

Геометрические иллюзии

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

Иллюзия опрокинутого стола

На изображении вы видите стол, ножка и столешница которого расположены параллельно друг другу.

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

Спираль Фрейзера

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

Спираль Фрейзера

Иллюзии движения

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

Вращающиеся змеи

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

Иллюзия Пинна-Брелстаффа

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

Иллюзии цвета

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

Рождественские цвета

На изображении снизу представлены две елки, покрытые звездами. Вам кажется, что цвет левой елки светлее и ярче?

На самом деле елки абсолютно одинаковые, но звезды разного цвета влияют на наше восприятие.

Цвет контуров

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

На самом деле все линии одного цвета — темно-серого. Мы же видим различные оттенки из-за того, как сочетаются фон и белая обводка сетки.

Иллюзии контраста и яркости

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

Иллюзия Эренштейна

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

Сетка Германа

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

Невозможные фигуры

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

Спрятанные образы

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

Автор: Октавио Окампо

Полезные оптические иллюзии для дизайна

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

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

Использование оптических иллюзий

Прежде чем демонстрировать примеры, кратко обозначим, в чем заключается польза оптических иллюзий для дизайн-проектов.

Зачем использовать оптические иллюзии:

01
Использование декоративного элемента в виде оптической иллюзии может повысить узнаваемость бренда или компании.
02
Такое оригинальное решение поможет выделиться на фоне конкурентов.
03
Использование оптических иллюзий может повысить интерес к бренду.
04
Люди любят разгадывать загадки, поэтому использование оптических иллюзий в рекламе или на сайте поможет удержать внимание пользователей и повысить их лояльность.

Реклама и фирменный стиль

Оптические иллюзии можно использовать:

  • При разработке дизайна продукта и упаковки.
Упаковка средства для коррекции фигуры Le Santi
  • В рекламных объявлениях, листовках и билбордах.
Реклама Audi A6, изданная в 2006 году под слоганом "Whatever the road holds"
  • В логотипах компаний.
В логотипе логистической компании «спряталась» белая стрелка, символизирующая движение вперед

Графический дизайн

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

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

Театральная афиша, украшенная невозможными фигурами. 2019 г. Эрих Брехбюль

Веб-дизайн

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

Причина этого эффекта связана с латеральным торможением. Проще говоря, это когда тормозная клетка тормозит расположенные рядом нейроны.

Эффектное оформление карточек на сайте Optico — Bogdan Ostafiiv

Заключение

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

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

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

01
Подчеркнуть уникальность работы, бренда или компании.
02
Выделиться среди конкурентов.
03
Привлечь и удержать внимание зрителя или пользователя.

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды