Фигура фон: ФОН | это… Что такое ФИГУРА-ФОН?

Содержание

Отношение фигуры и фона — Pro-Psixology.ru

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

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

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

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

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

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

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

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

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

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

Саморегуляция организма зависит от степени осознания настоящего, от способности жить в полную меру «здесь и сейчас».

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

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

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

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

Предмет и фон в восприятии

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

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

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

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

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

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

Соотношение предмета и фона представляют собой динамическое соотношение. Это значит, что фон через определенное время может стать предметом и, наоборот.

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

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

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

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

Каждый предмет обладаем многими свойствами, и является сложным целым. Вместе с целым воспринимаются и отдельные его части. Стороны эти связаны между собой. В одно и то же время восприятие целого обуславливается восприятием его частей и свойств и само влияет на их восприятие. Если пропустить какую-то часть предмета восприятие его сильно меняется и предмет легко принять за то, чем он, возможно, и не является. Для примера возьмем слово, отдельные буквы в котором пропущены – «..ек..и. ест.о». Целое слово сразу узнать сложно, потому что пропущены буквы, которые являются опознавательными признаками. Введем условие и попробуем это слово прочитать – в слове будут отсутствовать несущественные детали, а опознавательные признаки будут присутствовать. Тогда получится – «эле…ич…во». Теперь, безусловно, слово легко читается – электричество.

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

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

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

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

Проиллюстрируем данную мысль на конкретном примере. На рисунке, который представлен ниже, изображен «Портрет молодой женщины».

Человек, глядя на рисунок, видит изящный профиль молодой девушки, а на самом деле в одном изображении на этом рисунке воплощены два «портрета» – молодая женщина и старуха. Убедиться в этом легко, если мысленно представить большой горбатый нос старухи, а вместо изящного ушка увидеть глаз старухи.

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

7. Фигура и фон (с. 40)

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

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

Чем же тональная перспектива отличается от других изобразительных признаков?

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

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

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

Почему именно в изображении зрительное восприятие таких фигур противоречит логическому и, более того, побеждает его? И почему же, в конце концов, на картине черное или красное пятно во всех случаях непременно близкое, а белое — далекое?

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

Таким образом, в реальном пространстве тональная (цветовая) перспектива вторична, избыточна. Она работает только в сочетании с другими признаками, но чаще им противоречит.

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

(Подробно о проблемах восприятия изображения можно будет прочесть в книге «Плоскость и пространство. Основы восприятия картины», которая готовится к печати.)

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

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

643

scan by Ne Quid Nimis

289

в пространстве, а фон — это среда позади фигуры, фон свободно продолжается под ней.

 

Контур принадлежит фигуре, а не фону.

 

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

 

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

 

На этом рисунке (илл. 643) мы видим попеременно то черную фигуру на белом фоне,

 

то, наоборот, белый профиль на фоне черного круга. Невозможно увидеть обе фигуры одно-

 

временно, они сменяют одна другую, картинка переворачивается.

 

При этом черная фигура объективно выступает из белого фона согласно закону то-

 

нальной перспективы. А белый профиль выступает, потому что он имеет узнаваемые очер-

644

тания: это достаточно условное, но все же лицо человека. Понятно, что восприятие профиля

 

как фигуры субъективное, логическое. Таким образом, здесь, как обычно бывает, не могут

 

договориться два восприятия — зрительное и логическое.

 

Довольно часто в самой картинке уже заложена двойственность восприятия. Это, на-

 

пример, ваза Е. Рубина (см. илл. 14). Вопрос, что считать фигурой, а что фоном и в этом слу-

 

чае не имеет однозначного ответа.

 

Когда черная фигура выступает вперед, она, как мы знаем, уменьшается в размерах.

 

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

 

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

 

ние вперед — работа сознания, которое или узнает в белой фигуре что-то знакомое, или же

645

пробует разные варианты.

 

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

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

Итак, при смене восприятия, при переворачивании картинки одна форма скачком

уменьшается, а другая — увеличивается.

646

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

Собственно, задержать внимание на какой-нибудь форме или контрформе — это значит назначить ее фигурой (позволить ей выйти вперед).

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

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

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

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

scan by Ne Quid Nimis

290

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

Теперь возьмем рисунок на белой бумаге, пусть это будет черный квадрат (илл 645). Если пристально смотреть на квадрат, он еще активнее выступает и заявляет о себе, как о полноценной фигуре. Но посмотрите теперь на белый фон — квадрат будет выглядеть как далекий (на самом деле он не прорывает бумагу, а лежит на ней). Теперь белая бумага, фон становится фигурой и выступает вперед, то есть черный квадрат и белый фон поменялись

местами.

648

На следующем рисунке два совершенно одинаковых черных квадрата (илл. 646). Со-

 

средоточимся на левом — он будет восприниматься меньшим, задержите внимание на пра-

 

вом — теперь уменьшится он.

 

Важно: смотреть нужно, не отрываясь, лучше всего смотреть как бы сквозь фигуру,

 

сфокусировав зрение за ней. Второй квадрат воспринимается только периферийным зрени-

 

ем, переводить взгляд на него нельзя! Когда вы пристально смотрите на один из квадратов,

 

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

 

му.

649

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

 

ные? А может неравные станут равными? Станут, и можно это показать. При восприятии

 

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

В чем причина такого странного явления? Она проста: когда мы концентрируем внимание на левом квадрате, правый (которого обидели вниманием) теперь уже не квадрат вовсе, он становится частью фона. И, возвращаясь в фон, он увеличивается на 3% ( на те самые 3%, на которые уменьшается черный квадрат, выходя из фона). В результате левый квадрат кажется нам меньшим.

Феномен фигура-фон, оборачивание картинки можно наблюдать на илл. 647, 648.

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

Теперь, однако, ситуация другая, соседнему квадрату отступать некуда, и он не может увеличиться. Зато выделенный вниманием контурный квадрат становится фигурой, выступает вперед, а потому умень-

шается в соответствии с нашей теорией. 650

scan by Ne Quid Nimis

291

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

Скачок размера приводит к своеобразным растяжениям и сжатиям фигур, то есть к изменению их размера. Психологи обнаружили это явление при изучении рисунка Рубина с вазой (см. илл. 14). При переворачивании картинки черная ваза и белые профили попеременно становятся то фигурами, то фоном, и потому периодически увеличиваются и уменьшаются. Профили раздвигаются, или клюют друг друга носами. А ваза сужается или расширяется.

Мы можем реально наблюдать эти растяжения и сжатия фигур, потому что «скачок» размера осуществляется не мгновенно, это время порядка полсекунды.

Увидеть это интересное явление проще всего на следующем рисунке (илл. 650). Если бесцельно блуждать глазами по этой картинке, периодически вам будет казаться, что профили как-то странно вздрагивают или дергаются.

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

Если пристально смотреть на контурный профиль, он будет выступать вперед 651. Андрей Рублев «Троица» и уменьшаться, черный профиль сдвинется вправо.

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

гаются.

Вместе с тем существует и другой вариант феномена фигура-фон — сознательный. Усилием сознания можно представить себе контурный квадрат выступающим (близким), черный — отступающим (далеким). Можно вообразить все черные фигуры на белом фоне отступающими, а все белые на черном фоне — выступающими. Избирательность здесь не работает.

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

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

И вот пример. В «Троице» А. Рублева есть выделенная художником контрформа, образованная горизонтальным обрезом белого стола и контурами фигур сидящих ангелов (илл. 651). Контрформа эта светлее самих фигур, своими очертаниями она напоминает жертвенную чашу на столе. На самом деле, у контрформы этой есть и другая, гораздо более важная роль в картине. Но это тема отдельного исследования.

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

Конечно, явление феномена фигура-фон наблюдается в данном случае не только как

scan by Ne Quid Nimis

292

Принцип фигуры и фона в веб-дизайне

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

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

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

Соотношение фигуры и фона

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

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

«Пустое пространство следует рассматривать в качестве активного элемента, а не пассивного фона».

— Ян Чихольд

Соотношение фигуры и фона. (Графический материал позаимствован из учебника Алекса Уайта «Элементы графического дизайна»)

  1. Равномерно размещенные черные линии, создают серое поле. Фигура и фон находятся в устойчивом соотношении.
  2. Пространство устранено. Фигура доминирует и мы видим сплошное черное поле.
  3. Устранены две черные линии. Пространство стало активным и проявилось.

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

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

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

Стабильное, обратимое и неоднозначное соотношение фигуры и фона.

Есть три типа соотношения фигуры и фона:

  • Стабильное (вверху слева)
    Понятно, где фигура, а где фон. Одно или другое обычно доминирует в композиции.
  • Реверсивное (вверху в центре)
    И фигура, и фон привлекают внимание зрителя в равной степени. Это создает напряжение, в результате чего любое из двух может обойти другого, что приводит к динамичности дизайна.
  • Неоднозначное (вверху справа)
    Элементы могут оказаться одновременно как фигурой, так и фоном. Они образуют не менее интересные формы, а зритель сам ищет свою точку входа в композицию.

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

Принцип фигуры и фона являются не единственным принципом «гештальта», в котором пространство играет важную роль. Два других таковы:

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

Замыкание.

Роль пространства в соотношении пространства и формы

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

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

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

Пространство может сделать следующее:

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

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

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

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

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

Пространство также может передавать такие признаки, помимо качества, как:

  • степень детализации,
  • простота,
  • роскошь,
  • чистота,
  • уединенность,
  • открытость.

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

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

Примеры соотношения пространства и формы на веб-сайтах

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

Принцип пространства и формы на сайте Old Guard

Дизайн Old Guard Тома Джонсона использует много белого пространства, давая тексту и другим элементам место. Там легко понять, где фигура, а где фон.

Old Guard использует много белого пространства, давая тексту и другим элементам место. (Полная версия)

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

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

Соотношение пространства и формы на странице состояния heroku

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

Часть страницы состояния Heroku. (Полная версия)

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

Соотношение пространства и формы Introducing the novel

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

Пространство в верхней части страницы Introducing the Novel асимметричное и активное. (Полная версия)

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

Elliot Jay Stoks

Сайт Elliot Jay Stocks должен быть вам знаком, так как он стоит за дизайном этого сайта. Асимметричность пространства на сайте Elliot приводит к его активности.

Асимметричность пространства на сайте Elliot приводит к его активности. (Полная версия)

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

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

Phil Coffman

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

Содержание веб-сайта Phil Coffman образует единую форму, которая размещена в практически пустом пространстве.

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

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

New adventures in web design

Как и многие из приведенных здесь веб-сайтов, сайт для конференции 2013 года New Adventures in Web Design (Новые приключения в веб-дизайне) оставляет щедрые пробелы вокруг элементов. Отдельные группы информации содержатся в пространстве, а пространство активно во всем дизайне.

New Adventures оставляет щедрые пробелы вокруг элементов. (Полная версия)

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

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

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

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

Соотношение пространства и формы в логотипах

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

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

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

Различные логотипы, хорошо использующие пустое пространство.

— Cloud Bed
— Black Cat Lounge
— Shift
— Dolphin & Seal Logo Designer
— Dental Implants Guide
— Wineforest

Выводы

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

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

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

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

Фигура-фон

Обратимся вновь к рис. 5.7, к фону, который существует отдельно от объекта и находится позади него. Иными словами, уделим теперь больше внимания не феномену объемности, а явлению наложения. Когда точка наблюдения движется, образующая зрительного телесного угла скользит по поверхности. Ведущий край постепенно закрывает текстуру поверхности, тогда как ведомый край постепенно открывает ее. Выражаясь метафорически, можно сказать, что текстура у боковых границ фигуры «стирается» и «проступает» (Gibson, 1966b, с. 199 и далее). Эта терминология навеяна метафорами, которые использовал А. Мишотт при описании экспериментов, посвященных тому, что он называл «тоннель-эффектом» (Michotte, Thines, Crabbe, 1964). Ниже будет дано более четкое описание этих оптических изменений.[ …]

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

Более сложными по исполнению видами является рельефная и скульптурная резьба. Первая подразделяется в зависимости от степени высоты фигур, выступающих над поверхностью, на барельеф и более высокий — горельеф. Этими способами чаще всего изображаются фигуры животных, птиц и др. Скульптурная (круглая) резьба отличается от рельефной еще большей выпуклостью изображаемых предметов и фигур. На подлокотниках старинных кресел и других изделий именно так вырезают головы львов, оленей, коней, птиц. В этом случае фигуры почти-полностью отделяются от фона и становятся скульптурой.[ …]

Выберите площадку, покрытую травой, на бедной почве с возможно чахлым травяным покровом (с бледно-зеленой растительностью) или поле с бедной почвой. Наметьте крупные очертания какой-нибудь фигуры или букв и посыпьте эти места селитрой или аммиачной солью (из расчета около 50 граммов на квадратный метр). При отсутствии дождей удобренные места обильно полейте, следя, чтобы вода не растекалась за очерченные границы этих мест. Через 2—3 недели удобренные места ярко выделятся на бледном фоне темной зеленью и вырисуют вашу фигуру или надпись, которая сохранится все лето, не исчезая, а иногда даже усиливаясь после подкашивания травы.[ …]

Давно было известно, что на картинах можно создать видимость наложения. Этого же эффекта можно добиться и с помощью других средств показа застывшего строя. Широкую известность получило открытие Рубина, показавшего, что изображение замкнутого контура или фигуры влечет за собой появление фона, который воспринимается как нечто целостное, простирающееся за фигурой. Но все такого рода демонстрации связывались с восприятием формы, с видением контуров и линий, а не с восприятием заслоняющих краев поверхностей в загроможденном земном окружении. Из этих демонстраций следовало, что так называемую глубину можно воссоздать с помощью наложения на картине, но из них никак нельзя было вывести то, что заслоненная поверхность выглядит постоянной.[ …]

Отличительной особенностью эрозии является ее распространенность. Любое сооружение подвержено действию сил воды и ветра и рано или поздно будет стерто ими с лица земли. Наверное, самыми известными и впечатляющими примерами действия эрозии являются Гранд-Каньон и фигуры выветривания в пустынных районах шт. Вайоминг и Южная Дакота. Несомненно, у каждого из нас есть свой любимый уголок, где разрушительная эрозия и живая растительность общими усилиями создали живописный идиллический фон для размышлений.[ …]

Возникает соблазн представить себе окружающий мир в виде пространства, заполненного объектами, и считать, что объемлющий строй состоит из форм, образованных замкнутыми кон турами в пустом поле, из «фигур и фона». В этом случае каждому объекту в пространстве соответствовала бы форма в оптическом строе. Но это далеко не лучшее предположение, и от него также следует отказаться. Не каждому объекту в пространстве соответствует форма в строе, потому что некоторые объекты скрыты за другими. Итак, чтобы окончательно закрыть этот вопрос, скажем: окружающий мир не состоит из объектов. Он состоит из земли и неба, из объектов на земле и в небе, из холмов и облаков, огней и закатов, булыжников и звезд. Не все из перечисленного можно отнести к отдельным объектам — кое-что встроено друг в друга, что-то является движущимся, а кое-что — одушевленным. Все эти разнообразные вещи — местоположения, поверхности, компоновки, движения, события, животные, люди, а также те артефакты, которые структурируют свет в точке наблюдения, — составляют окружающий мир. Строй в точке не состоит из форм в поле. Феномен «фигура-фон» вообще не применим к реальному миру. Понятие замкнутого контура, очертания, пришло из изобразительного искусства, а сам феномен — из эксперимента, в котором наблюдателю показывали рисунок с целью выяснить, что он при этом воспринимает. Но это не единственный и далеко не лучший способ изучать восприятие.[ …]

ФИГУРА И ФОН. В изображении меня всегда занимала тема… | by Anton Belov

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

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

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

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

Brett Amory, Uwe Wittwer, Viola Niccolai, Bernie Fuchs, Lisa Brice.

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

Robert Heindel, Daniel Pitin, Jeff Simpson.

«Призрачные» фигуры
Приём, при котором фигура будто остаётся на месте, но становится частично прозрачной, «исчезающей». Она не дорисовывается или буквально изображается на просвет лёгкими медиа.

Francis Bacon, Eric Bischoff, Kim Dorland, Artem Krepkiy.

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

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

Dominique Goblet, Ruprecht von Kaufmann, Pilar Lopez Baez.

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

Uwe Wittwer, Viola Niccolai, Wilhelm Sasnal, Rosanna Jones.

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

Paul Housley, Peter Doig, Armin Rohr, Edvard Munch

Резка по-живому
По сути, это механическая деформация фигуры (как правило, коллаж или снос частей по смыслу или в пределах тональных пятен),
при котором фон активно вмешивается в фигуру, деконструируя
её, «ампутируя» её части. Уместно выглядит для создания динамики, агрессии, фрагментарности, ирреальности происходящего.

Daniel Richter, Lars Elling, Razvan Boar, Alina Maksimenko, Nicolas Uribe, Phil Hale.

Пост-фотография
Так я называю характерные для фотографии и фоторедактирования приёмы смешивания фигуры и фона, связанные с намеренным гашением/выравниванием тонового диапазона изображения. Усреднение и потеря контраста, смена местами тоновых пятен, двойная экспозиция, «засветки» и прочие случайности от материала, «выбитый свет» и пр. Сюда можно отнести разные подвиды, целиком построенные на спецэффектах (глитч и т.д.) где происходит
как правило, одновременная деформация и фигуры, и фона.

Kaye Donachie, Jenny Wildfang, Tor-Arne Moen, Alex Kanevsky, Gerhard Richter, Adrian Ghenie, Andy Danzler, Doron Langberg.

«Пост-фотографическая» живопись — самостоятельный
и довольно интересный жанр, предмет моего исследования.
Если вам интересна тема современной живописи, рекомендую ознакомиться с этим текстом в трех частях:
первая, вторая, третья.

АБ — 16.09/2018
В поисках настоящего/дневник художника.
Заметки о красоте и стратегиях эстетизации.
https://t.me/teleportjam

Восприятие рисунка-фона правым и левым полушариями человека, перенесшего комиссуротомию

. 1986;15(2):95-109.

дои: 10.1068/p150095.

А Кронин-Голомб

  • PMID: 3774494
  • DOI: 10.1068/p150095

Кронин-Голомб. Восприятие. 1986.

. 1986;15(2):95-109.

дои: 10.1068/p150095.

Автор

А Кронин-Голомб

  • PMID: 3774494
  • DOI: 10. 1068/p150095

Абстрактный

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

Похожие статьи

  • Понимание абстрактных понятий в правом и левом полушариях субъектов полной комиссуротомии.

    Кронин-Голомб А. Кронин-Голомб А. Нейропсихология. 1986; 24(6):881-7. doi: 10.1016/0028-3932(86)

  • -6. Нейропсихология. 1986 год. PMID: 3808296

  • Два типа генерации изображений: свидетельство процессов левого и правого полушария.

    Косслин С.М., Малькович В., Гамильтон С.Е., Хорвиц Г., Томпсон В.Л. Кослин С.М. и соавт. Нейропсихология. 1995 ноябрь; 33 (11): 1485-510. doi: 10.1016/0028-3932(95)00077-г. Нейропсихология. 1995. PMID: 8584182 Клиническое испытание.

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

    Зайдель Э. Зайдель Э. Нейропсихология. 1998 октября; 36 (10): 1033-47. doi: 10.1016/s0028-3932(98)00057-8. Нейропсихология. 1998. PMID: 9845050

  • Отношения между морфологией мозга и поведенческими показателями полушарной асимметрии и межполушарного взаимодействия.

    Хеллидж Д.Б., Тейлор К.Б., Лесмес Л., Петерсон С. Хеллидж Дж. Б. и соавт. Познание мозга 1998 март; 36(2):158-92. doi: 10.1006/brcg.1997.0951. Познание мозга 1998. PMID: 9520312 Обзор.

  • [Роль правого и левого полушарий головного мозга в восприятии пространства. I. Предметное восприятие и отражение во фронтальной плоскости.

    Николаенко Н.Н., Егоров А.И. Николаенко Н.Н., и соавт. Физиол человека. 1998 сен-октябрь; 24(5):54-64. Физиол человека. 1998. PMID: 9798319 Обзор. Русский. Аннотация недоступна.

Посмотреть все похожие статьи

Цитируется

  • Смешанное преимущество в эпизодической памяти: возможная роль межполушарного взаимодействия.

    Проппер Р.Э., Кристман С.Д., Фанеф К.А. Проппер Р.Э. и соавт. Мем Когнит. 2005 г., июнь; 33 (4): 751-7. дои: 10.3758/bf03195341. Мем Когнит. 2005. PMID: 16248339

  • Различия полей зрения в величине иллюзии Оппеля-Кундта меняются в зависимости от времени обработки.

    Ротвелл Б., Зайдель Э. Ротвелл Б. и др. Перцепт Психофиз. 1990 г., февраль; 47 (2): 180–90. дои: 10.3758/bf03205982. Перцепт Психофиз. 1990. PMID: 2304816

Типы публикаций

термины MeSH

Грантовая поддержка

  • 5 T32 GM07737/GM/NIGMS NIH HHS/США
  • RR07003/RR/NCRR NIH HHS/США

7 гештальт-принципов визуального восприятия: когнитивная психология для UX

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

Например, что вы видите, когда смотрите на это изображение?


Источник: The Inspired Eye

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

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

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

Источник: Gizmodo

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

Что такое гештальт-принципы?

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

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

Великие дизайнеры понимают огромную роль психологии в визуальном восприятии. Что происходит, когда чей-то взгляд встречается с вашими дизайнерскими творениями? Как их разум реагирует на сообщение, которым делится ваша статья? — Лаура Буше, специалист по бренд-контенту Autodesk

.

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

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

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

Гештальт-принципы и примеры

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

  • Фигурка-фон
  • Подобие
  • Близость
  • Общая область
  • Непрерывность
  • Закрытие
  • Координатор

Принцип № 1: фигура-фон

Принцип фигура-фон гласит, что люди инстинктивно воспринимают объекты как находящиеся на переднем или заднем плане. Они либо заметно выделяются спереди (рисунок), либо отступают на задний план (фон).

Источник: гном по имени Уоррен

Например, на изображении выше ваш глаз мгновенно видит белое яблоко на черном фоне.

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

.

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

Примеры принципа фигура-фон

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

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

Принцип № 2: сходство

Принцип сходства гласит, что когда вещи кажутся похожими друг на друга, мы группируем их вместе. И мы также склонны думать, что у них одна и та же функция.

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

Источник: Creative Beacon

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

Источник: Энди Рутледж

Примеры принципа подобия

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

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

Принцип №3: близость

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

Источник: Энди Рутледж

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

Источник: Стивен Брэдли

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

Примеры принципа близости

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

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

Принцип № 4: общая область

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

Источник: Smashing Magazine

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

Примеры принцип общей области

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

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

Принцип № 5: непрерывность

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

Источник: Smashing Magazine

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

Примеры принципа непрерывности

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

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

И Credit Karma использует его, чтобы проиллюстрировать преимущества, которые предоставляют их услуги.

Принцип № 6: замыкание

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

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

Источник: Эдуард Волянский

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

Примеры принципа закрытия

Принцип замыкания часто используется в логотипах различных компаний, включая IBM, NBC, Zendesk и Funding Circle.

 

Принцип № 7: фокус

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

Источник: Smashing Magazine

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

Примеры принципа фокуса

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

А в приведенном ниже примере Instacart сочетает принцип фокуса с принципом фигуры-фона, чтобы привлечь внимание к белому переднему плану, а затем к зеленой кнопке «Найти магазины».

Как UserTesting может помочь вам протестировать дизайн пользовательского интерфейса

Разработчики пользовательского интерфейса и UX одинаково полагаются на UserTesting для тестирования прототипов, веб-сайтов или приложений.

Вот краткий обзор того, что вы можете сделать:

  1. UserTesting поддерживает несколько инструментов прототипирования, включая плагин Adobe XD, Figma, Marvel и другие. Важно отметить, что технические проблемы могут возникать и даже ожидаются, о чем следует сообщать участникам. Некоторых волнует первое знакомство с дизайном, и их отзывы используются для формирования конечного результата. Не бойтесь показывать участникам грубый набросок ранних идей — это гарантирует, что вы на правильном пути, прежде чем вкладывать больше времени, денег и усилий. Кроме того, попросите участников оценить определенные элементы или то, насколько хорошо они понимают, что вы продвигаете.
  2. Независимо от того, запущен ли ваш веб-сайт недавно или он давно нуждается в обновлении, UserTesting предлагает несколько вариантов тестирования, от сортировки карточек, древовидных тестов до тестов предпочтений. Веб-хостинговая компания GoDaddy использовала UserTesting для оценки того, как пользователи себя чувствовали после посещения их веб-сайта. Повторив свои первоначальные тесты для второго раунда тестирования, команда GoDaddy обнаружила повышенную привлекательность продукта среди клиентов и дополнительные сведения о следующих шагах.
  3. Наши клиенты протестировали как существующие приложения, так и еще не выпущенные приложения для iOS. Возможности безграничны: участники могут использовать фронтальную и заднюю камеры для записи себя или своего окружения (в зависимости от теста и его задач).

Заключительные мысли

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

Хотите узнать больше?

Получите копию книги «Проверено пользователями: как ведущие мировые компании используют человеческий опыт для создания отличного опыта», написанной в соавторстве с директором по информационным технологиям UserTesting Джанель Эстес и генеральным директором Энди Макмилланом.

Заказать сейчас

Изображение

Занятия по восприятию фигуры и фона для детей

  1. Дом
  2. Активность визуального восприятия
  3. Восприятие фигуры и фона

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

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

  • Что такое восприятие фигуры-фона? И зачем нам это нужно?
  • Как этот навык влияет на ребенка в школе?
  • Упражнения для малышей «Фигура-земля»
  • Упражнения «Активные глаза»
  • Использование игр и головоломок
  • Использование книг «Найти и найти»
  • Использование рабочих тетрадей  
  • Использование рабочих листов Эти упражнения предназначены для поощрения визуального восприятия
  • нормальное развитие зрительного восприятия вашего ребенка.
    Если вы подозреваете, что у вашего ребенка задержка зрительного восприятия, обратитесь за профессиональным мнением.

    Что такое восприятие фигуры-фона?


    (А зачем нам это нужно?)

    Восприятие фигуры-фона — это способность фокусироваться на одном конкретном фрагменте информации в загруженном фоне.

    Зрительная фигура-фон — способность видеть объект на занятом фоне; в то время как слуховая фигура-фон помогает нам выделить голос или звук в шумной обстановке.

    Дома, имея хорошие навыки зрительного восприятия фигуры и земли , вы можете…

    • найти свои любимые носки в грязном ящике
    • найти бутылку кетчупа в кладовой
    • найти определенную игрушку в toy-box
    • найти любимую футболку в шкафу
    • найти выпавший предмет, если он упал на фон такого же цвета (например, зеленую пуговицу на траве)

    (Кто-нибудь еще думает, что у мам супер -способности героя в этой области?! LOL)

    Вернуться к началу


    В школе ребенок с плохим восприятием фигуры и фона Май:


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

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

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

    Вернуться к началу


    Упражнения для малышей «Фигурка-фон»


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

    Найдите свою прачечную

    Дайте ребенку стопку носков и попросите его найти себе носки.

    Или бросьте корзину с бельем на пол и попросите их найти свою одежду в куче!

    Это поможет вашему ребенку заметить что-то важное на оживленном фоне.

    Найди себе носки!

    Сортировать хлопья или макаронные изделия

    Дайте ребенку миску смешанных макаронных изделий форм или миску разноцветных хлопьев, таких как Cheerios или Froot Loops .

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

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

    Наверх

    Занятия «Активные глаза»


    Обучение обращать внимание на детали и искать информацию — это навык, которому дети должны научиться.

    Когда все представлено нам визуально на экране, мы можем лениться искать вещи в «реальном мире», поэтому мне нравится поощрять родителей играть в то, что я называю «Активные глаза» со своими детьми.

    Когда вы в дороге, играйте на Я шпионю своим маленьким глазом” игра. Дети всех возрастов могут играть в нее (мои подростки до сих пор любят перехитрить друг друга с действительно странными предметами!). Для детей младшего возраста, которые еще не знают своих буквенных названий, используйте фонетический звук , например  «мм» вместо «эм» для «М».

    Вот еще два мероприятия «Активные глаза», которые вы можете попробовать:

    Совершите прогулку «Активные глаза»

    Если у вас есть возможность прогуляться в своем районе или на природе, воспользуйтесь возможностью l ook для конкретных предметов .

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

    Дети старшего возраста могут искать определенные цифры и буквы по соседству.

    Ищите цифру «5» на прогулке по соседству

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

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

    Дети, которые знают свои числа, могут указать конкретные числа, например, 4 или 49. 

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

    Используйте свои активные глаза, чтобы «покупать»

    Вернуться к началу

    Использование игр и головоломок


    1) Подходящие карточки

    Смешайте различные карточки с картинками и попросите ребенка найти определенную картинку.

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

    Найдите определенную картинку среди карточек

    2) Пазлы

    Собирая пазлы, поощряйте ребенка l обращать внимание на мелкие детали .

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

    Очевидно, начните с пазлов с меньшим количеством деталей!

    Попросите ребенка собрать вместе с вами пазл

    Если вашему ребенку сложно разобраться в пазлах, прочитайте мою статью об обучении пазлам.


    3) Играйте в такие игры, как «Найди!»

    Европейская версия Spot It! называется Доббл .

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

    BusyTown и бренд игр «I Spy Eagle Eye» также являются отличными играми для развития навыков восприятия фигуры и фона.

    Они легко доступны во многих отделах игрушек, но для вашего удобства я поискал их на Amazon. Это мои партнерские ссылки к этим продуктам — я получу небольшую комиссию, если вы купите что-то через мои ссылки, что помогает поддерживать мой бесплатный сайт. Однако вы не обязаны ничего покупать!

    Найди это! Детский
    Классический Найди его!
    Оживленный город Ричарда Скарри
    I SPY Eagle Eye Find-It Game

    Вернуться к началу

    Использование книг типа «Найди и найди»


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

    Как помочь ребенку пользоваться книгой-искателем:

    Обычно я даю ребенку сначала просмотреть страницу , и если он не находит предмет, я работаю с ним систематически.

    Вы можете попросить своего ребенка посмотреть в определенных местах на картинке – «Ты заглянул в дом?», «Как насчет дерева?»

    Таким образом, вы можете систематически охватить все основные области страницы.

    Поиск в определенных областях

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

    Работать слева направо, постепенно продвигаясь по странице .

    Систематическое сканирование страницы

    Во многих библиотеках и букинистических магазинах имеется серия «Где Уолдо?» , «Я шпион» и «Книги-головоломки Усборна» .

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

    Поиск и поиск книг для детей младшего возраста

    Где Нарвал?
    I Spy Animals
    SEECH & FID Books для детей старшего возраста

    SEEK & FIND — Вокруг мира
    200000 Leagues под море: Apzla128
    9000.

    666667 9066 7066 7066 7066 7066 7066 7066 7066 7066 7066 7066 7066 7066 7066 7066 7000 7000. 70628 9000.. Книги

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

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

    Перекрывающиеся линии

    Лабиринты

    Найди отличия

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

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

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

    Вернуться к началу


    Использование рабочих листов


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

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

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

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

    Спасибо, что посетили мой сайт! Почему бы не подписаться на мой бесплатный информационный бюллетень, чтобы быть в курсе новых страниц и действий на моем сайте?

    Наверх

    1. Главная
    2. Активность визуального восприятия
    3. Фигура-фон Восприятие

    Если эта страница была вам полезна, поделитесь ею с друзьями!

    Не нашли то, что искали? Попробуйте поискать на моем сайте!

    Эта функция требует, чтобы JavaScript был включен с на .

    Пространство и взаимосвязь между фигурой и фоном — Smashing Magazine

    • Чтение: 11 мин. Дизайн, Креативность, Принципы дизайна, Графический дизайн
    • Поделиться в Twitter, LinkedIn
    Об авторе

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

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

    Дизайн – это сочетание форм и пространства. Чтобы более эффективно работать с пространством, вы должны сначала осознать его и научиться его видеть — научиться видеть формы, которые образует пространство, и то, как пространство взаимодействует. Это вторая часть серии о принципах дизайна для начинающих. Первая часть посвящена введению в гештальт; остальная часть серии (включая этот пост) будет основываться на этих гештальт-принципах и покажет, сколько фундаментальных принципов, с которыми мы работаем как дизайнеры, берут свое начало именно там.

    Отношения фигуры и фона

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

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

    «Пробел следует рассматривать как активный элемент, а не как пассивный фон».

    — Ян Чихольд

    Отношения между фигурой и фоном (Изображение предоставлено «Элементами графического дизайна», Алекс Уайт) Больше после прыжка! Продолжить чтение ниже ↓

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

    Стабильные, обратимые и неоднозначные отношения фигура-фон.

    Существует три типа соотношений фигура-фон:

    • Стабильный (вверху слева)
      Понятно, что фигура, а что фон. То одно, то другое обычно доминирует в композиции.
    • Двусторонний (вверху в центре)
      Фигура и фон в равной степени привлекают внимание зрителя. Это создает напряжение, в результате чего одно может догнать другое, что приводит к динамичному дизайну.
    • Неоднозначный (вверху справа)
      Элементы могут одновременно выглядеть как фигура и фон. Они образуют одинаково интересные формы, а зрителю остается самому найти точку входа в композицию.

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

    Фигура-фон — не единственный гештальт-принцип, в котором пространство играет заметную роль. Два других:

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

    Задумайтесь на минутку о музыке. Если бы каждая нота или аккорд игрались одновременно, у вас не было бы музыки. У вас будет шум. Музыка возникает, когда звуки противопоставляются тишине. Изменяя структуру звука и тишины, можно создать ритм и мелодию. Без тишины нет музыки.

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

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

    Пробел может делать следующее :

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

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

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

    • Микропространство
      Это пространство внутри элементов в группе. Это пространство между буквами, словами и абзацами.
    • Макропространство
      Это пространство между основными элементами. Он разделяет элементы или группы элементов и предоставляет глазам возможности для слежения и места для отдыха между элементами.

    Пространство соответствует качеству. Больше места влечет за собой меньшее количество элементов или редкость элементов. Сравните элитные и дисконтные розничные магазины. Какой из них обычно имеет больше места внутри, а какой упаковывает продукты в каждый сантиметр доступного пространства? Что вам сообщает пространство?

    Пространство также может передавать атрибуты, отличные от качества, такие как:

    • изысканность,
    • простота,
    • роскошь,
    • чистота,
    • уединение,
    • открытость.

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

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

    Несколько примеров пространства на веб-сайтах

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

    Old Guard

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

    Old Guard использует много пустого пространства, давая тексту и другим элементам возможность «дышать». (крупная версия)

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

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

    Страница состояния Heroku

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

    Часть страницы состояния Heroku. (Большая версия)

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

    Знакомство с романом

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

    Пространство вверху страницы «Введение в роман» асимметрично и активно. (Большая версия)

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

    Elliot Jay Stocks

    Веб-сайт Elliot Jay Stocks должен быть знаком всем вам, так как он разработал дизайн этого сайта. Асимметричное пространство на сайте Эллиота снова ведет к активному пространству.

    Асимметричное пространство на веб-сайте Эллиота Джея Стока ведет к активному пространству. (Большая версия)

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

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

    Фил Коффман

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

    Контент на веб-сайте Фила Коффмана представляет собой единую фигуру, расположенную в основном на пустом месте.

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

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

    Новые приключения в веб-дизайне

    Как и многие из представленных здесь веб-сайтов, веб-сайт конференции «Новые приключения в веб-дизайне» 2013 года оставляет достаточно места для элементов. Отдельные группы информации содержатся в пространстве, и пространство активно во всем дизайне.

    New Adventures оставляет достаточно места для элементов. (Большая версия)

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

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

    Светло-серый цвет помогает. Это мешает стрелкам доминировать, и нетрудно представить, как пространство перетекает по линиям.

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

    Несколько примеров логотипов

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

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

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

    Различные логотипы, которые эффективно используют пустое пространство.
    • Кровать Cloud
    • Black Cat Lounge
    • Shift
    • Дизайнер логотипов Dolphin & Seal
    • Руководство по имплантации зубов
    • Wineforest

    Я надеюсь, что вы уберете из этого поста две основные вещи.

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

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

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

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

    • Следите за штрихами: типографский этикет
    • Принципы дизайна: визуальный вес и направление
    • Влияние геометрии на дизайн логотипа

       

      Объяснения > Восприятие > Теория гештальта > Фигура/фон

      Описание | Пример | Обсуждение | И что?

       

      Описание

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

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

      • Глаз более чувствителен к цвету (красный, оранжевый)
      • Есть насыщенные, яркие цвета
      • Высокий контраст между передним планом и фоном (например, Черное на белом).
      • Низкий контраст между участками переднего плана.
      • Вокруг него контрастный контур, отделяющий его от фон
      • Передний план меньше фона, который его окружает.

      Области, которые отступают, скорее всего, будут фоном,

      • Цвета, менее чувствительные для глаза (синий, фиолетовый)
      • Ненасыщенные, бледные или пастельные цвета
      • Большая область вокруг вероятного переднего плана

      Пример

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

      • Красный является преобладающим цветом
      • Красный сильно контрастирует с бледно-голубым, окружающим
      • .
      • Черный контур дополнительно помогает отделить красный прямоугольник от фона
      • Он находится «внутри» большей области синего фона.

       

       

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

      Обсуждение

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

      Часто выбрать фигурку несложно, но не всегда. Изменение выбор «фигуры» переднего плана и «земли» фона изменяет то, что вы видите. На картинке ниже, если фигурки белые, то вы видите вазу. Но если фигура черная, то вы видите две головы, обращенные друг к другу. Ряд оптических иллюзии основаны на этой иллюзии. где фигура и фон «переворачиваются» назад и вперед.

       

       

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

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

       

       

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

      При обнаружении фигуры, если поблизости есть похожие фигуры, они также будут рассматриваться как цифры. Это свойство известно как «окружение». Это происходит потому, что идентификация фигуры обязательно включает в себя идентификацию земля. Затем земля выбрасывает любые другие формы в виде фигур на передний план. На приведенной ниже диаграмме, когда буква А обозначена как фигура, буква Е становится фоном. Б, Следовательно, C и D отображаются как цифры (в чем-то похожие на A помогают это).

       

       

      Этот принцип можно применить и к другим чувствам. Например, когда звук выделяется на фоне «шума», то это фактически ‘фигура’.

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

      См. также

       

       

      Сохранить фигуру с прозрачным цветом фона в Plots.jl — общее использование

      Джулия Язык программирования

      Сюнсуке-Хори

      #1

      Есть ли способ сохранить фигуру с прозрачным цветом фона в Plots.jl? pyplot может сделать это к прозрачный=Истина .

      1 Нравится

      сватсон

      #2

      Да: background_color = :transparent . Вам также может понадобиться установить для foreground_color значение :black , потому что в противном случае оси и линии сетки по какой-то причине кажутся белыми.

      4 лайков

      Сюнсуке-Хори

      #3

      @sswatson Спасибо за помощь.

      Кажется, это работает для .png , но не для .pdf .

      Я попробовал следующий код и получил красивый png и pdf с черным фоном.

       с использованием графиков
      p=plot([1,2,3], background_color=:прозрачный, foreground_color=:черный)
      savefig(p, "test.png") # работает нормально
      savefig(p, "test.pdf") # не работает
       

      1 Нравится

      сватсон

      #4

      Похоже на проблему с GR. И PDF, и PNG работают для меня с серверной частью PyPlot.

      1 Нравится

      Сюнсуке-Хори

      #5

      @sswatson О, верно. Спасибо!!

      джейнен

      #6

      Работает в простом GR:

       julia> с использованием GR
      юлия> сюжет([1,2,3])
      юлия> savefig("test.png")
      юлия> savefig("test.pdf")
       

      Оба файла прозрачны.

      Итак, проблема в бэкэнд-коде Plots gr .

      сватсон

      #7

      Да — я должен был сказать о проблеме с серверной частью GR, а не обязательно с GR как таковой.

      Предположительно происходит следующее: цвет :transparent — черный цвет RGBA с нулевым альфа-значением — передается в GR таким образом, что альфа-значение теряется. Я предполагаю, что это означает, что Plots.jl не придерживается интерфейса GR для непрозрачности цвета заливки, по крайней мере, когда речь идет о цвете фона.

      рой.хольцман

      #8

      Есть ли способ сохранить график с прозрачным фоном в файл pdf?

      Рафаэль Гуэрра

      #9

      Пробовали ли вы pgfplotsx() бэкэнд?

      рой.хольцман

      #10

      нет. Я не знал об этом бэкэнде… Этот бэкэнд новый? Я на юлии 1.6.1, и я ее там не вижу. Должен ли я обновить?

      Рафаэль Гуэрра

      #11

      Старше 1 года, точно.

      рой.хольцман

      #12

      Так почему я получаю это?

       pgfplotsx()
      ArgumentError: Пакет PGFPlotsX не найден по текущему пути:
      - Запустите `import Pkg; Pkg.add("PGFPlotsX") для установки пакета PGFPlotsX.
       

      Рафаэль Гуэрра

      №13

      используя Plots сначала пожалуйста, а какая версия?

      рой. хольцман

      №14

      Конечно, я сделал , используя Plots
      и версию [91a5bcdd] Plots v1.25.0 .

      Рафаэль Гуэрра

      №15

      Конечно. Чтобы использовать бэкэнд pgfplotsx() , кажется, что сначала нужно установить пакет PGFPlotsX.jl и установить LaTeX (MikTeX или другой).

      рой.хольцман

      №16

      У меня установлен латекс.
      Пробовал этот пакет, но все равно черный фон.
      Это мой график:

       pgfplotsx()
      сюжет (х, грех. (х), background_color =: прозрачный)
       

      Рафаэль Гуэрра

      # 17

      При этом создается PDF-файл без черного фона:

       с использованием графиков; pgfplotsx()
      сюжет (грех)
       

      Как в таком PDF отличить прозрачный фон от белого?

      Вы также можете попробовать:

       plot(sin, background_color=RGBA(1,1,1,0))
       

      рой.хольцман

      # 18

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

  • alexxlab

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *