11 оптических иллюзий в визуальном дизайне

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

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

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

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

Выберите точку, любую точку. Осмелюсь бросить двойной вызов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот эффект связан с латеральным ограничением. То есть, более темная область ложно выглядит еще темнее, а более светлая — еще светлее.

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

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

Она жива!

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

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

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

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

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

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

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

Одинакового ли цвета квадраты? Хмм…

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

К сожалению, нет единой теории, объясняющей эту иллюзию. Зато существует много предположений. Латеральное ограничение, которое объясняет эффект решетки Германа и Маха, — одно из них.

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

Мои глаза только что обманули меня? ?

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

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

Круто, но заблуждающе.

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

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

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

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

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

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

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

Это опасный путь.

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

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

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

11. Иллюзия Мюллера-Лайера

Типографический ляп!

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

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

Но зачем завышение в типографике?

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

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

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

Также среди почетных рекомендаций:

• Kanizsa’s Triangle Треугольник Канижа
• Ebbinghaus illusion Иллюзия Эббинхауза
• Ehrenstein illusion Иллюзия Эренштайна
• Neon colour spreading Распространение неонового цвета
• Checker shadow illusion Иллюзия тени на шахматной доске
• Illusory Motion 1 Иллюзия движения 1
• Illusory Motion 2 Иллюзия движения 2

Источник: m.vk.com

Комментарии: