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

В закладки

Иллюзия бисекции треугольника

Выравнивание треугольника на основе центроида

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

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

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

Какая версия математически центрирована?

Есть две теории возникновения этой иллюзии:

• Неправильное масштабирование

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

• Центр тяжести или центр площади

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

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

Формула вычисления центроида треугольника

Центроид может располагаться на расстоянии одной третьей от каждой стороны до противоположной вершины. Этот метод также применим к другим фигурам.

Вертикально-горизонтальная иллюзия

Какого цвета прямоугольник, а какого – квадрат?

Квадраты - это фундаментальные строительные блоки любой системы дизайна. Их можно увидеть в карточках Material Design, публикациях на Facebook, пинах на Pinterest и шотах на Dribbble.

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

Изображение в сообщении Facebook - это квадрат с равными сторонами

Представители разного пола и даже разных культур воспринимают эту иллюзию по-разному.

Полосы Маха

Ложная тень падает на поверхность - это иллюзия?

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

Между краями каждой строки появляются тени

Этот эффект возникает из-за того, что более тёмная область ложно кажется темнее, а более светлая - светлее. В физиологии это называется латеральным или боковым торможением.

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

Иллюзия Геринга

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

Прокрутите вверх и вниз, чтобы увидеть эффект вибрации

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

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

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

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

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

1. Иллюзия деления треугольника пополам

Выравнивание треугольника по центру тяжести

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

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

Которая версия математически центрирована?

Существует две теории этой занимательной иллюзии:

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

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

Шучу, эта статья не посвящена геометрии (но формула все равно верна). Центр тяжести может быть расположен на 1/3 расстояния от каждой стороны до противоположной вершины. Этот метод можно применить и к другим формам.

2. Вертикальная горизонтальная иллюзия

Это прямоугольник? Это самолет? Нет… это квадрат?!

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

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

Изображение в этом посте Facebook имеет соотношение сторон 1:1

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

3. Полосы Маха

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

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

4. Иллюзия Геринга

Оно живое!

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

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

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

Появляться или не появляться, вот в чем вопрос.

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

На пересечении линий появляются серые точки

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

6. Иллюзия одновременного контраста

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

Текст на разных сторонах имеет одинаковый цвет

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

7. Иллюзия Манкера-Уайта

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

Причина иллюзии Манкера-Уайта… вы догадались, латеральное торможение.

8. Акварельная иллюзия

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

Это визуальное явление, известное как акварельная иллюзия, зависит от сочетания яркости и контрастности контура, которое приводит к эффекту распространения цвета.

Белый цвет внутри кнопки словно приобретает легкий оттенок цвета границы.

Я признаю, что эта иллюзия вводила меня в ступор несколько раз, и мне приходилось проверять цвет при помощи палитры.

9. Иллюзия Ястрова

Размер имеет значение?

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

Благодаря этой иллюзии мы воспринимаем одинаково изогнутые края разными

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

10. Иллюзия Корнсвита

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

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

Иллюзия с тенью на шахматной доске

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

Сиреневая погоня

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

Исчезающий свет

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

Иллюзия Геринга

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

Иллюзия градации

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

Иллюзорное движение

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

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

Восприятие размера

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

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

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

Зрительные искажения

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

Иллюзия Геринга (иллюзия веера)

Прямые, на самом деле, параллельны.

Иллюзия Вундта (1896)

Линии в центре, в действительности, параллельны.

Иллюзия кафе "Wall"

Параллельны ли горизонтальные линии?

Красные линии - прямые, хотя и кажутся изогнутыми.

Иллюзия Перельмана

Буквы на самом деле параллельны друг другу

Иллюзия У. Эренштейна (W. Ehrenstein, 1921)

Синие квадраты кажутся нарисованными неровно

Узор как бы изгибается во внутрь?

Все квадраты не самом деле не искажены.

Иллюзия Дж. Фрейзера (Fraser, 1908)

Круги или спирали?

Смотрите в центр на чёрную точку - цветные пятна должны исчезнуть:

Смотрите не отрываясь на крестик. Увидели зелёные пятна? А ведь ничего зелёного тут нет.

Обман зрения!

Иллюзии с черно-белыми негативами

Череп

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

Горящая лампа

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

Английская королева Елизавета II

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

Иллюзии с цветными негативами

Американский флаг

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

Флаг Бразилии

Флаг Малайзии

Флаг Франции

Флаг Канады

Флаг Индии

Флаг Италии

Флаг Великобритании

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

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

Фрактальная иллюзия

Возникает иллюзия, что рисунок пульсирует

Круги вращаются?

Иллюзия кофейных зёрен

Восприятие размера

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

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

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

Каковы эти принципы? Существуют ли они? Специалист по когнитивным моделям Марк Чангизи (Mark Changizi) из Политехнического института Ренсселера (Rensselaer Polytechnic Institute) попытался прояснить этот вопрос, обратившись к оптическим иллюзиям.

Как оказалось, проще всего увидеть эффект «реконструкции реальности» можно на примере оптического обмана.

Если вы сфокусируетесь на центре картинки, то линии, находящиеся ближе к точке схождения лучей, покажутся изогнутыми (иллюстрация Mark Changizi, RPI).

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

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

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

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

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

Американец решил, что тот же самый принцип лежит в основе всех оптических иллюзий. Для проверки своей гипотезы он изучил 50 видов «обманок» и распределил их по 28 категориям.

Полученные результаты свидетельствуют о том, что существуют четыре основных типа «подгоночных» переменных: размер наблюдаемого предмета, его скорость, яркость (контрастность) и расстояние до него.

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

При приближении головы к центру круга последний как бы становится светлее. Что помогает мозгу определять, как «скорректировать» объект? Например, работа, которую проделывают глазные мышцы, чтобы его увидеть (иллюстрация Mark Changizi, RPI).

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

По его словам, эффекты «дорисовки» реальности могут возникать и в статичном положении, и при кручении – но они так или иначе могут быть объяснены корректировками, необходимыми при движении вперёд.

Кстати, более подробно ознакомиться со всей концепций «предсказательного восприятия» вы можете в препринте работы, размещённой на личной странице учёного (PDF-документ).