Цією статтею ми покажемо деякі можливі візуальні хитрощі. Ми ретельно розберемо та визначимо, яка таємниця за ними криється. Більшість людей не здогадуються, але пристойна кількість технік, якими всі користуються під час роботи з інтерфейсами, емблемами чи зображеннями, насправді є оптичними ілюзіями.
А тепер докладно про кожну з ілюзій, з якими рано чи пізно кожен із дизайнерів стикається.
Ілюзія перерізу трикутника
Коли ярлик непростий у побудові і має нестандартні пропорції, то такий ярлик виглядає для нас дуже оманливо. І таких більшість. Іноді хочеться навіть самостійно взяти та виправити.
Виберіть точку, будь-яку точку. Ну ж! ![]()
Якщо перенести трикутник у контейнер, і зовсім неважливо, заокруглені кути або гострі, то складається враження, що він розташований не там, де потрібно. Підстава — ілюзія перерізу трикутника. Центр мас обчислюється на основі його прямокутника, що обумовлює уявні границі. Проведемо експеримент: беремо висоту запропонованого рівностороннього трикутника і зробимо відмітку чітко в центрі цієї риси, то оптично утвориться враження, що позначка розташована над центром.
У якій версії трикутник відцентрований з математичної точки зору? 1 картинка: оригінальний логотип — оптично відцентрований; 2 картинка: центр мас і мінімальний прямокутник-обмеження; 3 картинка: обчислюємо центроїд — ідеальний баланс.
Розглянемо дві теорії, що стосуються цієї складної ілюзії:
Неправильне використання «ефекту сталості розміру»
Концепція його в тому, що наш мозок сам мимоволі робить великими віддалені об'єкти, щоб уявити їх справжню величину. Коли хтось бачить трикутник, то мозок розпізнає у фігурі можливі елементи. У результаті, неправильно спрацьовує ефект сталості розміру.
Сенс цієї помилки у цьому, що оптична середина трикутника розташована нижче дійсного. А під час роботи ефекту сталості розміру, оптичний центр, навпаки, поміщений вище.
Центр тяжкості
Попросимо слухача показати центр трикутника. Слід вважати, що вкаже він на центр мас, тому що тут площа нижньої частини трикутника дорівнює площі верхньої. У рівносторонньому трикутнику центр мас розташований на порядок нижче за середину висоти, тому зазвичай слухачі визначають точку орієнтовно між центром мас і серединою висоти.
Для оптично центрованого зображення трикутника всередині прямокутника потрібно знайти його центроїд. Він, у свою чергу, розташований у місці перетинів центральних прямих трикутників. Щоб визначити центроїд, потрібно відміряти 1/3 частину середньої лінії від початку. Такий спосіб діятиме і з іншими фігурами/
Вертикально-горизонтальна ілюзія
Це прямокутник? Це квадрат? Це... супермен?
Квадрати — це основа, з якої складається кожна дизайн-система. Зображуючи у Скетчі квадрат, при утриманні шифту, складається враження, що порушується співвідношення. Здається, що вертикальні сторони вийшли довші за горизонтальні. Начебто це не квадрат, а прямокутник. Але реально бачимо звичайний квадрат 1:1. Тут включається горизонтально-вертикальна ілюзія.
Картинка у постах на Фейсбуці – квадрат 1:1
Але, як свідчить практика, на представників різних верств суспільства, це ілюзія діє по-різному. Так, населення великих міст, на порядок краще сприймає цю ілюзію, ніж мешканці сіл, оскільки їхні будинки мають круглу форму.
Смуги маху
Коли хибна тінь падає на поверхню, то це ілюзія?
У той час, коли був поширений плоский дизайн, використовували такий прийом: розставляти тони одного і того ж кольору дуже близько один до одного. Якщо придивитись, то на дотику відтінків помітні несправжні тіні. Ці помилки звуться «Смуги Маха». Такий принцип нашого сприйняття, адже на цій ілюстрації немає жодних тіней.
На межі відтінків з'являються хибні тіні
Літеральне гальмування — саме так можна назвати цей ефект, якщо підійти до нього з технічного боку. У результаті, виходить, що темні частини ми сприймаємо трохи темнішими, а світлі — більш світлішими.
У сфері дизайну це явище мало для кого має велике значення, на відміну від зубного лікаря. Адже, переглядаючи рентгенівський знімок, лікар звертає особливу увагу як на світліші, так і на темніші області. І якщо не володіти інформацією про смуги Маха, можна поставити пацієнтові некоректний діагноз.
Ілюзія Герінга
Воно живе!
Всім знайомі такі логотипи, при прокручуванні які здаються пульсуючими або рухомими. Ще один приклад, це мерехтливий екран монітора під час відео. Усі ці явища можна назвати муаровими візерунками. Як виходить муаровий візерунок? Шляхом накладання двох сітчастих зображень, які у дії здаються пульсуючими. У наших прикладах сітчастими ілюстраціями є зображення та екран монітора, які мають властивості оновлюватися — і як результат — з'являється ілюзія.
Покрутіть скролл вгору-вниз та побачите ефект пульсації.
Сітка Германа
З'являтися чи не з'являтися, ось у чому питання.
Ефект сітки Германа досить поширений. Його використовують у такому відображенні інформації, де є квадрати, розташовані по сітці, а також діаметрально протилежне тло. Дивлячись на квадрат, поруч із ним на з'єднанні помаранчевих ліній, ми, зазвичай, помічаємо темні точки, яких, за фактом, немає. І помітимо ми це, якщо відведемо погляд на те саме місце з'єднання. Підставою до появи цього явища – латеральне гальмування. Це означає, що підйом одного нейрона в оці впливає на гальмування активності нейронів, розташованих навколо.
На перетинах білих ліній утворюються сірі крапки.