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

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

А теперь подробно про каждую из иллюзий, с которыми рано или поздно каждый из дизайнеров сталкивается:

 

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

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

Выберите точку, любую точку. Ну же!

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

 

В какой версии треугольник отцентрован с математической точки зрения? 1 картинка: оригинальный логотип — оптически отцентрован; 2 картинка: центр масс и минимальный ограничивающий прямоугольник; 3 картинка: вычисляем центроид — идеальный баланс.

Рассмотрим две теории, касающиеся данной непростой иллюзии:

  • Неправильное использование «эффекта постоянства размера»

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

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

  • Центр тяжести.

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

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

 

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

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

Квадраты — это основа из которой состоит каждая дизайн-система. Изображая в Скетче квадрат, при удержании шифта, создаётся впечатление, что нарушается соотношение. Кажется, что вертикальные стороны вышли длиннее горизонтальных. Будто бы это не квадрат, а прямоугольник. Но реально мы видим обычный квадрат 1:1. Тут включается горизонтально-вертикальная иллюзия.

 

Картинка в постах на Фейсбуке — квадрат 1:1

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

 

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

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

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

 

На границе оттенков появляются ложные тени

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

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

 

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

 Оно живое!!!

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

 Покрутите скролл вверх-вниз и увидите эффект пульсации.

 

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

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

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

На пересечениях белых линий образуются серые точки.

следующая статья

Смотрите также

Заказать в один  клик
Логотип
Фирменный  стиль
Упаковка /  этикетка
Дизайн  полиграфии
Нейминг /  слоган
Спасибо за заявку!

Мы скоро с вами свяжемся!