Принципы гештальта и другие особенности восприятия

Теория и 94 примера

Авторы: Женя Арутюнов, Аня Худякова, Света Светликова

Навигация по разделам: фигура и фон, близость, синхронность, подобие, непрерывность, замыкание, регулярность, камуфляж, опыт восприятия.

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

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

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

Эта публикация частично основана на статье «Принципы гештальта» профессора Деяна Тодоровича (Лаборатория экспериментальной психологии, факультет психологии Белградского университета, Белград, Сербия, 2008).

Фигура и фон

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

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

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

  • левая половина пикселей картинки это одна группа, а правая половина — другая;
  • чётные ряды пикселей это одна группа, нечётные — другая;
  • один единственный первый пиксель в уголке — это первая группа, а все остальные пиксели — вторая.

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

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

Anna Shvets. Pexels

Markus Spiske. Pexels

Всё жёлтое, но нюансы светотени отделяют фигуру от фона

Alex Andrews. Pexels

Six N. Five

Однотонный синий цвет хорошо отделяет фигуру от сложного фона

Ohne Titel (2015), Heimo Zobernig. Kunsthaus Bregenz

Maria von Hartz, British Vogue (July 1981). NIBS

Kenji Yoshida. Daji Studio

Фигура не видна полностью, фон неоднородный, но чёрная заливка и массивность фигуры позволяют увидеть её как отдельный объект

Brand Identity Bergen International Festival, ANTI. reddot

Сложный фон и объект с рисунком, похожим на текстуру фона, — и всё же фигура хорошо различима

1:1 Arkitekter, Scandinavian DesignLab. B/I/D

Фигура и фон постянно меняются местами — то читаем «1:1», то букву «А», и это такой хитрый дизайн

Близость

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

Если изменить расстояния, мы увидим три пары объектов:

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

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

Five Sculptures (1972), Mel Bochner

Видим не просто двадцать пять камешков, а пять групп по пять штук

Nordic Pavilion at Expo '70, Sverre Fehn.

Один, трое, один, двое

Are.na

То же самое, просто очень красивая картинка

Walk Tape vol.01

С первого взглядя понятно, кто тут вместе с кем (но признаков совместности на этой фотографии больше, близость лишь один из них)

Arzamas

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

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

  • строчка текста рядом с фотографией будет восприниматься как комментарий к этой фотографии, как её осмысленное продолжение;
  • кнопка рядом с текстовым полем создаст ожидание, что в команде, которую запускает кнопка, будет использоваться информация, которую ввели в
  • буквы легко группируются в слова, потому что разделены пробелами,

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

Intuition

Если приблизить заголовок к своему абзацу, получится более внятный дизайн (←), хотя читатель справился бы и с заголовком, застрявшим в середине (→); и не такое видели!

Saint Heron

Заголовки прижаты к своим текстам, подписи — к свои картинкам.

Только справа (↗) подпись оторвалась от объекта. Или это не подпись вообще? ¯\_(ツ)_/¯

Art in the System. The System in Art, Karl-Heinz Adler. Spector

Внутренние поля модульной сетки меньше, чем внешние (поля страницы), это выглядит естественно

А это — нет

Stitch

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

Синхронность

Перед нами однородная группа объектов, но некоторые движутся, причём синхронно. Совместное движение объединяет объекты в новую устойчивую группу.

Даже близость не группирует объекты так сильно, как совместное движение — в статичном состоянии близость работает, но как только объекты начинают двигаться, синхронная группа становится сильнее.

>

Этот принцип широко используется в интерфейсах, интерактивном и моушен-дизайне, видеосъёмке, монтаже и анимации.

I Won't Let You Down, YouTube

Синхронное движение делит композицию на устойчивые подгруппы

Are.na

И здесь

Take a Walk on the Wild Side, Gerrit Rietveld Academie

Композиция выглядит хаотично, но как только объекты начинают двигаться, проявляются визуальные слои, появляется структура

Archive, Ben Mingo. Dribbble

И здесь

Синхронное изменение масштаба шкалы и ширины полосок подчёркивает связь между ними и упрощает понимание

Bananain. C&X Brand Creative

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

The Otolith Group

Центральное расположение логотипа не мешает читать сайт, потому что синхронность разделяет его на визуальные слои

Подобие

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

Получится три группы. Вместо поворота можно изменить пропорции.

Или цвет.

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

А если признаки будут конкурировать, пытаться создавать альтернативные версии группировки — появится ощущение хаоса и незавершённости.

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

Are.na

Подобие и близость работают на одну идею: чёрный круг тут сам по себе

Если перекрасить, появится конфликт: цвет подсказывает, что чёрный круг сам по себе, а близость — что красный

Are.na

Объекты рассортированы по сходству, и так же сгруппированы

One Hundred Ninety Pieces of Color: For Ellsworth Kelly #2 (2016), Jack Whitten. Art Basel

И здесь

My lighters, Danila Tolstosheev. Behance

Цвет подсказывает, какая зажигалка связана с каким эллипсом (а близость нет)

Anna Shvets. Pexels

Подобие позволяет легко распознать группы одинаковых объектов, хоть они и перемешаны

Rhythm: Rules and Sense of Movement, Seoul Museum of Art. Work Services

Красные эллипсы связываются друг с другом сильнее, чем с остальными объектами, подобие оказывается сильнее близости

How long do animals live? Compton’s pictured encyclopedia. Are.na

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

RAYGUN 1997/5, David Carson. KOMIYAMA TOKYO

Близость подсказывает разбивку на RA, YG и UN, а подобие — на RAY и GUN

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

Непрерывность

Объекты, расположенные в виде непрерывной цепочки, словно вдоль невидимой линии, образуют устойчивую целостность.

Целостность сохранится, даже если присоединить ещё одну похожую фигуру. Мы всё ещё видим верхнюю часть как что-то одно, а нижнюю — как другое.

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

Если просто нарисовать линию и буквально воткнуть в неё ещё одну, эффект сохранится.

Непрерывность позволяет проследить за объектом глазами, задаёт направление. Этот эффект помогает делать довольно хитрый дизайн.

James Brunt. Moss and fog

Не просто камни, а спираль из камней

Accident(s), poster design (2022). Atelier Choque Le Goff

Не хаотично раскиданные точки, а две стрелки, одна поверх другой

Kazumasa Nagai (1962)

Непрерывность создаёт эффект движения, поворот поддерживает этот эффект, а красные акценты не ломают целостность

Discipline No. 4.5, Robert Milne & Fabian Harb. Discipline

Непрерывность позволяет проследить за последней строкой, близость к первым строчкам не ломает целостность последней

Tim Lahan. Tumblr

Разделённость на фрагменты не мешает считывать радугу как один объект

A Gigantikus Lopakodó (The Gigantic Stealth), Szabolcs Bozó. Carl Kostyál

И крысу тоже

Paul Marcus Fuog. DOMO-A

Непрерывность позволяет буквально нарисовать линии, чтобы задать последовательность

1xUno, Felipe Bedoya. Behance

И взаимосвязь

Are.na

Камни выровнены по вертикальным полоскам, это создаёт новый объект, линию, и так появляется визуальная игра

Typographie: A Manual of Design, Emil Ruder.

То же самое, но с буквами

Инверсия не мешает увидеть три круга — из-за непрерывности они не распадаются на четвертинки, а остаются собой

Onça

По этой же причине инверсия здесь не мешает увидеть и прочитать буквы

Matilda Finn.

Непрерывность позволяет собрать из отдельных кусочков цельную композицию

App Store

И здесь

Замыкание

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

Если фигура простая, искажения и разрывы не помешают восприятию — разрывы будут мысленно восполняться, целостность восстанавливаться. Всё ещё круг!

Замкнутая структура отделяет фигуру от фона, делает её сильнее, чем сам фон или разрозненные части, из которых она состоит.

Les encastrés (2005). Agnès Geoffray

Контуры фигур сложились так, что форма замкнулась и отдельные люди стали неразличимы

National pride, Anthony Blasko. Victory Journal

И здесь. Отдельные люди видны, но квадраты из ног видны сильнее

Affiche Jouer aux Halles (1970), Jean Widmer. Galerie 1881

Разобранность квадрата не мешает понять, что перед нами квадрат

I.K. Bonset. HAO rotativo de letras

Не дуга, а круг, просто как бы не весь

66.86, John Wood and Paul Harrison. @woodandharrison

Как только концы чёрных отрезков «подключаются» друг к другу, образуется замкнутая (и легко узнаваемая) форма

Регулярность

Перед нами две линии. Скорее всего, вы видите прямую горизонтальную линию как один объект, а волнообразную диагональную — как другой.

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

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

Можно возразить, что на разделение влияет направление линий — одна горизонтальная, другая диагональная. Но вот ещё один пример.

Теперь ровная линия в центре поворачивает наверх, а волнистая в этом же месте загибается . Это следует именно из собственной регулярной структуры каждого объекта.

Ещё пример.

Здесь непрерывность явно указывает, что линия, рисующая зубчатое колесо, перетекает в квадратную волну, а другая — наоборот, из волны в колесо. Но всё-таки мы видим зубчатое колесо как что-то одно, а квадратную волну как другое. Так диктует принцип регулярности.

Pinterest

Регулярность может создавать сильную целостность сама по себе, без эффектов группировки, непрерывности или замкнутости

Sequences of meaning, Jan Tarasin. MOLSKI gallery

Благодаря структуре паттерна пятнистую собаку отлично видно на пятнистом фоне

The Community

Строчка «The Community» нагло нарушает принцип близости, врезаясь в соседей. Но собственная внутренняя консистентность выносит её на отдельный визуальный слой, и вёрстка отлично считывается. Очень красиво!

Unsplash

В пространство слова Africa вторгается буквально всё: границы, названия рек, городов и стран. Но это не мешает его прочитать, потому что у него регулярная структура

Raptor: A Journey through Birds. MarketFair

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

Камуфляж

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

Слева показана исходная форма, справа на неё накладывается ещё три объекта, и они не мешают её увидеть.

Но если добавить объекты не случайно, а в определённых точках — в местах излома формы — можно замаскировать, «закамуфлировать» исходную форму (слева). Ещё можно создать новую регулярность, и тогда исходная форма тоже в ней растворится (справа). Это «эффект камуфляжа».

Balenciaga 2022 Campaign. Pablo Rochat

Из-за «подключения» контуров фигур к определённым точкам, непонятно, чья голова

Plans for other days. Jan Family

Взлом восприятия: сдвинутая одежда настаивает на альтернативной группировке фигур

Modern Design Review, Muller van Severen (2013). Scheltens & Abbenes

Совпадение граней плитки и деталей стульев разламывает форму, мешает считывать объём (особенно в верхней половине, если закрыть нижнюю)

Большая часть изображения скрыта, но ключевые узлы видны, поэтому объект считывается без проблем

Moscow Metro map, Ilya Birman, 2023

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

Опыт восприятия

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

Видим зелёную ёлку, потому что светло-голубая форма слева не похожа ни на что нормальное

Untitled #058, Anthony Gerace. Open Doors Gallery

Птица

NN Noire, Dafi Kühne. Nouvelle Noire

Шабака

Are.na

Нога, хотя сверху и не нога

Мяч. Круглый!

Collage by Naro Pinosa. Moon Man Studios

Кто же не узнает тираннозавра

Pinterest

Видим не только руки-ноги, но и не нарисованные части тела — потому что знаем, какими они должны быть

Sunsets at Overhoeks, Filmmuseum Amsterdam

В разноцветных прямоугольниках узнаётся закат

Jeep Parking Space, Bates Y&R. The Marketing Birds

Видим сложные многоугольники, но понимаем, что это простые прямоугольники, упавшие на сложные поверхности

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

Ну

вы

поняли.

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

Strelka summer 2021, Anna Kulachek. Typo/graphic posters

Видим не странный шестиугольник, а обычный параллелепипед, просто под углом. Без светотени, без перспективного искажения

Aakash Nihalani. Cultura Inquieta

Не бессмысленное нагромождение линий, а простая «объёмная» штучка

Blueberry cookbook, Cynthia & Jerome Rubin. Open library

Не разные объекты, а одинаковые, просто по-разному повёрнутые

Onward, Urban Design Forum. Partner & Partners

Видим не странный хаос, а многослойную композицию из плоских букв и стрелок

Tech Conference Myriad. Pinterest

Перспектива и направление текста подсказывают, что это кольцо, светотень не нужна. (Ок, медуза помогает)

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

Open Learn. Ordinary people

Надпись на 90% выполнена из раскиданных по листу полосочек, но читается легко, потому что важные детали не искажены и потому что мы умеем читать

Magic, Ollie Caldwell. PRINT

Частично закрытые буквы читаются без проблем

Swim, George Tscherny. RIT Library

Некоторые буквы и слова надёжно читаются, даже если видна половина

Made On Earth (1988), Early Rave flyers. Phatmedia

Сомнительно, но окей

Buck

Шедевр

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

Это ещё одна причина знать своего клиента и аудиторию, пытаться увидеть дизайн их глазами. И понимать, что они могут иначе его — нет, не оценивать! — а буквально видеть.

* * *

Это были принципы гештальта. Теперь вы их знаете, ура. Что с этим делать?

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

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

:—)

Чтобы узнать, когда мы выпустим что-то новое, подпишитесь.

2014 → 2025