11 оптических иллюзий в визуальном дизайне (часть 1)
В этой статье мы разберём возможные визуальные заблуждения, которые и по сей день заставляют нас задуматься, и выясним в чём же причина, на самом деле. Вероятно, Вы сами того не понимаете, но большинство техник, которыми Вы пользуетесь в работе с интерфейсами, логотипами или изображениями, в действительности они есть оптическими иллюзиями!
Итак, какие же, в действительности, эти 11 оптических иллюзий:
1. Иллюзия сечения треугольника.
Бывает такое, что ярлыки выглядят обманчиво, в особенности, это касается тех, у кого непростая геометрия и непростые соотношения. Далеко не все ярлыки одинаковы, не все идеальны в каждом пикселе и не у всех правильные пропорции. Часть из них, в прямом смысле слова, хочется поправить — в частности, такую кнопку как «плей».
Выберите точку, любую точку. Ну же!
В то время, когда мы переносим фигуру в контейнер и вовсе не имеет значение, округлённый он или ровный — создаётся впечатление, что местонахождение его немного не там, где нужно. Это всё происходит из-за эффекта, именуемого как иллюзия сечения треугольника. Середина масс треугольника вычисляется на основании его минимального ограничивающего прямоугольника. Если взять высоту нашего равностороннего треугольника и сделаем отметку чётко в центре этой линии, то оптически покажется, что отметка расположена выше середины.
В какой версии треугольник отцентрован с математической точки зрения? 1 картинка: оригинальный логотип — оптически отцентрован; 2 картинка: центр масс и минимальный ограничивающий прямоугольник; 3 картинка: вычисляем центроид — идеальный баланс.
Относительно этой необыкновенной иллюзии связаны две занятные теории:
- Неверное использование “эффекта постоянства размера”
Эффект постоянства размера состоит в том, наш мозг сам делает большими удалённые объекты, для того чтобы вообразить их настоящий размер.
В то время как, человек видит треугольник, мозг видит в треугольной форме фрагменты возможной перспективы. В итоге, неверно срабатывает эффект постоянства размера.
Оптическая середина треугольника, имеет положение ниже фактического. А при деятельности эффекта постоянства размера, оптический центр, напротив, появляется выше.
- Центр тяжести
Зритель, получив задание отыскать середину треугольника, вероятнее всего укажет на центр масс, так как именно в этой отметке площадь нижней части фигуры равна площади верхней. Если брать во внимание равносторонний треугольник, то середина масс ложится, на порядок, ниже середины высоты, потому зритель на отметку, приблизительно, между центром масс и центром высоты.
Для оптически центрирующего изображения треугольника в прямоугольнике центрирующим, необходимо выявить его центр масс, который расположен в месте скрещивания центральных линий треугольника. Можно отмерить 1/3 часть центральной линии от начала, вот это и получится центроид. Данный способ можно применить и с другими фигурами.
2. Вертикально-горизонтальная иллюзия
Это прямоугольник? Это квадрат? Это … супермен?
Квадраты — это фундаментальные блоки, на основе которых создаются различные дизайн-системы.
Как правил, во время рисования в Скетче квадрат с зажатым шифтом, и всё же создаётся впечатление, что соотношения параметров сбиты. Словно вертикальные стороны вышли длиннее горизонтальных. Сдаётся, будто бы это вообще не квадрат, а просто прямоугольник. Но в действительности пред нами совершенный квадрат 1:1. Это, всего-навсего, действует вертикально-горизонтальная иллюзия.
Картинка в постах на Фейсбуке — квадрат 1:1
Что самое интересное, жители различных культур и разных полов, улавливают эту иллюзию по-своему. Возьмём хотя бы население больших городов, они гораздо быстрее понимают эту иллюзию, нежели деревенские жители, которые живут на равнинах в круглых домах.
3. Полосы маха
Когда ложная тень падает на поверхность, это иллюзия?
Во времена эпохи плоского дизайна в моде был такой маневр: располагать оттенки одного и того цвета близко друг к другу. Если присматриваться, то на стыке между оттенками можно увидеть ненастоящие тени. Такое заблуждение зовётся «полосы маха». Ведь в действительности никаких теней там нет — это просто специфика нашего восприятия.
На границе оттенков появляются ложные тени
С технической стороны этот результат можно объяснить таким явлением, как латеральное торможение, в следствии чего тёмные части по ошибке создают впечатление, будто бы они темнее, а светлые, будто бы они светлее.
В мире визуального дизайна данное явление почти не имеет никакого значения. Другое дело, работа стоматологов. Их, полосы Маха, могут вызвать постановку неправильного диагноза. Ведь он обращает внимание как на самые тёмные, так и на самые светлые фрагменты рентгеновского снимка.
4. Иллюзия Геринга
Оно живое!!!
Все мы, хотя бы раз в жизни, видели такие логотипы, когда большое количество тонких линий или точек, создают впечатление, будто бы иллюстрация в движении либо пульсирует, во время её прокрутки. Или бывает, что мы смотрим на монитор, а он горит полосами. Именно этот эффект называется муаровым узором. Так выходит если наложить два сетчатых рисунка, которые в движении придают эффект пульсации. Исходя из нашего примера, сетчатыми рисунками выступают сами изображения и дисплей монитора, который всё время меняется, в ходе чего и появляется иллюзия.
Покрутите скролл вверх-вниз и увидите эффект пульсации.
5. Сетка Германа.
Появляться или не появляться, вот в чем вопрос.
Иллюзию сетки Германа мы видим довольно часто. Она заметна в тех лейаутах, где имеются квадраты, расположенные в сетке и противоположный по цвету фон. Если взглянуть на какую-то фигуру, то рядом с ней на пересечении оранжевых полос — можно заметить, на самом деле не существующие, тёмные пятна. Но если мы посмотрим прямо на них, но они тут же пропадают. Из-за чего образуется данный эффект? Из-за литерального торможения. Иными словами, поражение одного нейрона ведёт к замедлению активности охватывающих его нейронов.
На пересечениях белых линий образуются серые точки.
