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

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

Оглавление

• принципы гештальта в дизайне | Близость
• принципы гештальта в дизайне | Преемственность
  • Бренды как примеры преемственности
  • Картины как примеры преемственности
• принципы гештальта в дизайне | Общая судьба
• принципы гештальта в дизайне | Закрытие
  • Применение закрытия в дизайне отчета
• Принципы рисунка и основания
• Unilever: отличный пример фигуры и фона
• Заключение

принципы гештальта в дизайне | Близость

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

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

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

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

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

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

На этом графике я показываю каждую гонку, выигранную Хэмилтоном, начиная с 2007 года и до сегодняшнего дня. Легко заметить, что плотность гонок, выигранных Хэмилтоном с 2015 по 2016 год, увеличивается. Мы можем видеть это, потому что наши глаза интерпретируют расстояние и группируют полосы высокой плотности. 

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

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

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

Принцип непрерывности показывает, как элементы, движущиеся или создающие иллюзию движения в одном направлении, воспринимаются как связанные.

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

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

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

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

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

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

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

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

Бренды как примеры преемственности

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

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

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

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

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

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

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

Картины как примеры преемственности

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

« Калидонская охота на кабана» — настоящее произведение искусства и знаменитая картина Питера Пауля Рубенса 1612 года. В дополнение к правилу третей Рубенс также использовал преемственность , общие принципы гештальта судьбы и атрибуты превнимания к совершенству одновременно.

Во-первых, давайте посмотрим на картину. Что мы смотрим в первую очередь? 

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

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

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

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

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

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

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

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

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

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

Наш разум заполняет точки. Мы можем видеть законченные формы в незавершенном контексте. 

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

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

Применение закрытия в дизайне отчета

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

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

Принципы рисунка и основания

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

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

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

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

Давайте посмотрим на несколько примеров, чтобы прояснить ситуацию. Плакат «Крестный отец» — лучший пример сочетания фигуры и фона, потому что мы видим отличный цветовой контраст.

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

Задний план не конкурирует с передним планом за внимание. Так что в данном случае легко определить фокус и фоновую простоту всего интерфейса, и важность деталей. Будьте проще и сосредоточьтесь на том, что действительно важно . 

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

Хорошо, давайте перейдем к другим примерам. Сможете ли вы легко определить, какая из них фигура, а какая фон? 

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

Unilever: отличный пример фигуры и фона

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

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

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

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

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

В наших отчетах мы должны учитывать разницу между фоном и передним планом.

LuckyTemplates Designs для визуальных эффектов и эффектных отчетов : LuckyTemplates Dashboard Designs
Dashboard In LuckyTemplates: Best Practices Design Practices

Заключение

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

Всего наилучшего,