Удивительные оптические иллюзии: как они работают. Учёный объяснил механизм всех оптических иллюзий

22.09.2019
  • Графический дизайн ,
  • Интерфейсы ,
  • Типографика
    • Перевод

    Глубока ли кроличья нора?

    Сколько минут вам потребуется, чтобы понять в чем фишка?

    Фрэнсис Бэкон в 1620 году разделил источники человеческих ошибок, стоящих на пути познания, на четыре группы, которые он назвал «призраками» или «идолами» (лат. idola).

    • «Призраки рода» проистекают из самой человеческой природы, они не зависят ни от культуры, ни от индивидуальности человека. «Ум человека уподобляется неровному зеркалу, которое, примешивая к природе вещей свою природу, отражает вещи в искривлённом и обезображенном виде».
    • «Призраки пещеры» - это индивидуальные ошибки восприятия, как врождённые, так и приобретённые. «Ведь у каждого, помимо ошибок, свойственных роду человеческому, есть своя особая пещера, которая ослабляет и искажает свет природы».
    • «Призраки площади (рынка)» - следствие общественной природы человека, - общения и использования в общении языка. «Люди объединяются речью. Слова же устанавливаются сообразно разумению толпы. Поэтому плохое и нелепое установление слов удивительным образом осаждает разум».
    • «Призраки театра» - это усваиваемые человеком от других людей ложные представления об устройстве действительности. «При этом мы разумеем здесь не только общие философские учения, но и многочисленные начала и аксиомы наук, которые получили силу вследствие предания, веры и беззаботности». [Wikipedia ]
    Под катом - наглядная демонстрация уязвимости нашего мозга к атакам через визуальный ввод. Представляю вам перевод статьи продуктового дизайнера и фронтэнд-разработчика Balraj Chana, про то как можно использовать/нейтрализовать эффект оптических иллюзий.

    1. Иллюзия Сечения Треугольника


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

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

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

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

    Существуют две теории для этой захватывающей иллюзии:

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

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

    Формула для нахождения центроида треугольника.

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

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


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

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

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

    Изображение поста на Facebook - это квадрат 1:1.

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

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


    Полосы Маха.

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

    Тени появляются между гранями каждого ряда.

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

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

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


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

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

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

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

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


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

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

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

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


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

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

    Цвет текста совершенно одинаковый на обоих сторонах, однако таковым не кажется.

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

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


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

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

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

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


    Иллюзия Акварели.

    Бывали случаи, когда я добавлял границу к объекту, а затем задавался вопросом: «Когда я также изменил цвет фона?». Если присмотреться, то можно заметить, что бледная область приобретает гораздо более светлый оттенок из-за цвета границы. Сильно удивитесь, если я скажу, что та светлая область на самом деле белая?

    Это визуальное явление, известное как иллюзия акварели , зависит от сочетания яркости и цветового контраста контурных линий.

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

    9. Иллюзия Джастроу


    Иллюзия Джастроу.

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

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

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

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

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

    Помимо иллюзии контраста и иллюзии Полос Маха,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Невозможный трезубец


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

    Другой яркий пример – невозможный треугольник Пенроуза.


    Он же в виде так называемой «бесконечной лестницы».


    А также «невозможный слон» Роджера Шепарда.


    Комната Эймса

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


    Как работает комната Эймса

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


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

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

    Плывущая звезда

    Сложно поверить, что эта картинка – не анимированный gif-формат, а обыкновенная оптическая иллюзия. Рисунок был создан японским художником Кая Нао в 2012 году. Ярко выраженная иллюзия движения достигается благодаря противоположенной направленности узоров в центре и по краям.


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


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


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


    Честное слово, это обычная картинка, а не гифка! Психоделические спирали словно затягивают куда-то в полную странностей и чудес вселенную.


    Иллюзии-перевертыши

    Самый многочисленный и веселый жанр рисунков-иллюзий строится на перемене направления взгляда на графический объект. Самые простые рисунки-перевертыши нужно просто развернуть на 180 или 90 градусов.


    Две классические иллюзии-перевертыша: медсестра/старуха и красавица/уродина.


    Более высокохудожественная картинка с подвохом – при повороте на 90 градусов лягушка превращается в лошадь.


    Другие «двойные иллюзии» имеют более тонкую подоплеку.

    Девушка / старуха

    Одно из самых популярных двойственных изображений было опубликовано в 1915 году в карикатурном журнале «Puck». Подпись к рисунку гласила: «Моя жена и теща».


    Старики / мексиканцы

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


    Влюбленные /дельфины

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


    Список таких двойственных картинок можно продолжать бесконечно:


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


    Очень простая картинка-перевертыш – что-то подобное можно без труда сделать своими руками.


    Иллюзии цвета и контраста

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

    Серые квадраты

    Оптические иллюзии цветов – одни из самых популярных видов обмана зрения. Да-да, квадраты A и B окрашены в один и тот же цвет.


    Такая уловка возможна благодаря особенностям работы нашего мозга. На квадрат B падает тень без резких границ. Благодаря более темному «окружению» и плавному градиенту тени кажется, что он значительно светлее квадрата A.


    Зеленая спираль

    На этой фотографии всего три цвета: розовый, оранжевый и зеленый. Не верите? Вот что получится, если заменить розовый и оранжевый на черный.


    Платье бело-золотое или сине-черное?

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

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

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


    В действительности платье было синее с черными кружевами.


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


    За много лет работы продакт-дизайнером при работе с визуальными эффектами я сталкивался со множеством сюрпризов, которые вызывали у меня следующие эмоции 😲😕😳😡😱.

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

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

    1. Иллюзия бисекции треугольника (Triangle-bisection Illusion)

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

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


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

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

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

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


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

    Шучу, это не статья о математике и физике 💥 (но формула все равно правильная).

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

    2. Вертикально-горизонтальная иллюзия (Vertical Horizontal Illusion)

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


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

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

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



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

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

    3. Полосы Маха (Mach Bands )

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



    Полосы Маха

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



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

    Техническое объяснение возникновения этого эффекта связано с латеральным (боковым) торможением , что означает, что более темная область ложно кажется еще более темной, а более светлая область еще светлее.

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

    4. Иллюзия Геринга (Hering Illusion)

    Оно живое !!!



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

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



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

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

    5. Сетка Германа (Hermann Grid)

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



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

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

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

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

    Оба обособленных квадрата отражают одинаковое количество света? Хм …


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

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


    Цвет текста абсолютно одинаковый с обеих сторон, но вам так не кажется

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

    7. Иллюзия Манкера-Уайта (Munker-White Illusion)

    Мои глаза просто обманули меня? 👀



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

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

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

    8. Акварельная иллюзия (Water Colour Illusion)


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

    Бывает, что я добавлю границу к объекту, а затем задаюсь вопросом: «Когда я успел изменить цвет фона?». Если вы посмотрите внимательно, вы можете заметить, что бледная область приобретает гораздо более светлый оттенок цвета, окружающего границу. Вы возможно удивитесь, узнав, что более светлая область на самом деле белая!

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


    Белая область внутри кнопки, кажется, немного принимает оттенок цвета границы

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

    9. Иллюзия Ястрова (Jastrow Illusion)

    Действительно ли размер имеет значение?


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

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


    Некоторые одинаково изогнутые края могут казаться меньшими, чем другие

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

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


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

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

    Но на самом деле обе секции одинаковые! Вы можете обнаружить, что обе секции на самом деле идентичны, когда они расположены параллельно.


    Каждый ромб имеет одинаковый градиент, но, кажется, что они становятся темнее (сверху вниз)

    Эта иллюзия создает аналогичный эффект, что и две вышеупомянутые иллюзии, но на самом деле она отличается двумя особенностями:

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

    11. Иллюзия Мюллера-Лайера (Müller-Lyer Illusion)


    Перерегулирование для оптимального визуального восприятия

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

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


    Без перерегулирования, буква «e» в логотипе LinkedIn и буква «z» в Amazon не являются оптически сбалансированными

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

    Но зачем нужно перерегулирование в типографике?

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

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

    В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Полосы Маха

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

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

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

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

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

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

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

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

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

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

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



    Похожие статьи