Основы дизайна: визуальное восприятие и принцип гештальта

Принципы гештальта в дизайне

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

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

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

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

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

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

Ключевые понятия теории гештальта

«Сумма частей не то же самое, что целое»

– Курт Коффка (один из основателей гештальт-психологии)

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

Кстати, рекомендую посмотреть прямо сейчас:

Вот несколько ключевых понятий и принципов теории гештальта:

  1. Появление (целое распознается раньше, чем его составляющие)

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

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

2. Материализация (наш мозг заполняет пробелы)

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

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

3. Мультистабильность (сознание стремится избежать неопределенности)

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

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

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

4. Инвариантность (качественное распознавание схожестей и отличий)

Инвариантность – это свойство восприятия, которое помогает распознавать объекты вне зависимости от их вращения, перемещения и масштабирования.  Так как нам часто приходится видеть предметы с разных ракурсов, в нас развилась способность к узнаванию предметов с измененными данными.

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

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

Принципы гештальта в дизайне

Большинство принципов просты для понимания и объединены общей темой.

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

– Стивен Палмер

 Многие из принципов гештальта вытекают из этого утверждения.

  1. Закон содержательности (принцип хорошей формы, закон простоты) 

Люди будут воспринимать и интерпретировать составные или сложные изображения как простейшую форму или объединение простейших форм.

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

ЗАКОН СОДЕРЖАТЕЛЬНОСТИ (ПРИНЦИП ХОРОШЕЙ ФОРМЫ, ЗАКОН ПРОСТОТЫ)

 

Сталкиваясь со сложными формами, мы, как правило, преобразуем их в набор простых компонентов или упрощаем целое. Вам приятнее видеть левое изображение как сочетание простых форм (круга, квадрата и треугольника) – так, как изображено справа – чем воспринимать сложную и неоднозначную форму в целом.

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

2. Замкнутость

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

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

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

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

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

5. Симметрия и порядок

Люди склонны воспринимать объекты как симметричные формы с центром посередине.

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

Симметрия и порядок

На примере выше вы видите три пары открытых и закрытых скобок. Принцип близости, который мы рассмотрим позже, предполагает, что мы увидим что-то еще (недостающие скобки). Это доказывает превалирование принципа симметрии над принципом близости.

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

6. Фигура и фон

Элементы воспринимаются либо как фигура (объект в фокусе), либо как фон (бэкграунд, на котором и расположен объект).

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

Фигура и фон

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

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

7. Площадь

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

8. Выпуклость

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

9. Равномерная связянность

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

В примере показаны элементы, связанные линиями.

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

Равномерная связанность

Из всех принципов объединения элементов равномерная связанность – сильнейший. В примере выше мы видим два круга и два квадрата, но как пары воспринимаем визуально оформленную связь круг-квадрат.

Для справки: линии не обязательно касаться фигур, чтобы стать связующим звеном.

10. Общие области

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

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

Общие области

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

11. Близость

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

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

Близость

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

12. Продолжение

Элементы, расположенные на линии или кривой, воспринимаются как связанные, в отличие от элементов, находящихся вне линии или кривой.

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

Продолжение

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

13. Общее предназначение (синхронность)

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

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

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

Общее предназначение (синхронность)

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

14. Параллелизм

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

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

Параллелизм

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

15. Сходство

Элементы со сходными характеристиками воспринимаются как более подобные, в отличие от элементов с разными характеристиками.

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

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

Сходство

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

16. Точка фокусировки

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

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

Точка фокусировки

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

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

17. Прошлый опыт

Восприятие элементов, как правило, координируется в соответствии с опытом зрителя

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

Прошлый опыт

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

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

Вывод

Очень важно осознать принципы гештальт-теории, они являются базовыми для всего, что делают графические дизайнеры. С их помощью можно понять, как мы воспринимаем объекты.

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

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

Принципы гештальта в дизайне: 1 комментарий

Добавить комментарий