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

No items found.
Аудио перевод статьи
0:00
0:00
·

Оптическая иллюзия, о которой должен знать каждый дизайнер.

Символ логотипа, который был разработан для рынка товаров локального производства

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

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

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

Замена цвета привела к тому, что один и тот же логотип выглядит так, будто он немного прибавил в весе! Странно, не правда ли? Эта иллюзия называется Иллюзией Иррадиации.

Иллюзия

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

Классический пример иллюзии иррадиации

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

Объяснение с научной точки зрения

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

Доктор Хосе-Мануэль Алонсо, ученый в области нейронауки из Колледжа оптометрии Государственного Нью-Йоркского университета, недавно провел более тщательное исследование и глубже изучил этот феномен.

У зрительной системы есть два основных канала: нейроны, чувствительные к свету, которые называются нейронами «ВКЛ», и нейроны, чувствительные к темным предметам, которые называются нейронами «ВЫКЛ». В исследовании были зафиксированы оба типа нейронов.

Ученые обнаружили, что нейроны «ВЫКЛ» предсказуемо и линейно реагируют на темные фигуры на светлом фоне: чем больше контраст между темным и светлым объектом, тем они активнее. Но нейроны «ВКЛ» несоразмерно больше реагировали на светлые фигуры, расположенные на темном фоне: при том же уровне контраста их ответ был намного сильнее.

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

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

Квадраты идентичны по размеру, но повторно излучают фотоны разной плотности. Маленький белый квадрат имеет более высокую плотность фотонов (они генерируются за счет более высокой интенсивности световой силы); таким образом, он может активировать большую область в первичной зрительной коре. Чем больше световой энергии отражает объект, тем большим по размеру он воспринимается.

Объяснение с позиции эволюции

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

Роль иллюзии иррадиации в дизайне

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

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

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

Если вы дизайнер логотипов, эти знания вам также будут невероятно полезны. Возможно, вы захотите настроить толщину обводки логотипа при его отображении на темном фоне. Например, в Illustrator, при разработке белой версии логотипа вы можете просто нанести тонкую черную обводку, расширить темную область по контуру и с помощью Инструмента создания фигур (англ. Shape builder tool) удалить обводку. Ее толщину вам придется определять на глаз, но цель заключается в том, чтобы в обеих версиях (белой и черной) визуально дизайн выглядел одинаковым.

Ниже показан процесс корректировки символа логотипа, о котором шла речь в начале этой статьи.

Источник:
uxdesign.cc
·
comments powered by HyperComments