11 оптических иллюзий в интерфейсах Статьи редакции

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полосы Маха

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет текста одинаковый с двух сторон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Причина, по которой требуется перерегулирование, связана с одной из самых популярных оптических иллюзий в мире — иллюзией Мюллера-Лайера.

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

0
16 комментариев
Написать комментарий...

Комментарий удален модератором

Развернуть ветку
Артём Свяжин

но очень интересно

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
S-ed
Ответить
Развернуть ветку
Ivan Braun

Ага. Шеврон надо наверное как "галочка" переводить или как? Вопрос непраздный: https://icons8.ru/icon/set/chevron/all

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Ivan Braun

Все так, на русском смысл уже.

Ответить
Развернуть ветку
Юра Пугачёв

Без перерегулирования

Ответить
Развернуть ветку
Cg Bear

*Шаверма

Ответить
Развернуть ветку
Ivan Chesnokov

Это с перерегулированием Шаверма, а без - шаурма

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Внимание к деталям

Львиная доля всех этих "откровений" десятки лет знакомы всем, кто хоть немного связан с типографским делом, вёрсткой и проч.

Ответить
Развернуть ветку
Владимир Романов

Что-то я на первом примере завис. Вначале показаны три варианта центрирования - все с разными отступами от края.
В конце же - "Чтобы треугольник внутри своего контейнера выглядел оптически центрированным, нужно найти центроид треугольника". Так оптически центрированный = математическому центроиду? Почему тогда на примере Ютюба они разные? А если нет - то как именно искать оптический центр? Если на глаз - то наверное так и стоит написать? Или это центральная мысль всех пунктов - что надо допиливать на глазок всё?

Ответить
Развернуть ветку
Евгений Черкасов

"часто зрители выбирают компромисс между ними"

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Дима Лесин

Очень крутая и полезная статья! Пилите еще!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Reb Rending

Я сначала не понял, откуда появилась красная точка на сетке Германа, думал что это что-то остаточное с прошлого изображения, и только с третьего скрола дошло)

Ответить
Развернуть ветку
Никита Андреевич

Все очень просто и постоянно юзаю

Ответить
Развернуть ветку
Александр Решетняк

Глазки кровоточат Т Т )

Ответить
Развернуть ветку
Оля Шатропа

очень интересная статья))) даже раньше и представить не могла

Ответить
Развернуть ветку
Оля Шатропа

Для подбора программ советую обратиться на платформу bookyourstudy. Большой выбор программ для обучения, помощь в оформлении документов и подборе программ

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
13 комментариев
Раскрывать всегда