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

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

1. Близость - Proximity

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

2. Сходство - Similaruty

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

3. Точка фокуса - Focal point

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

4. Общая область - Common region

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

5. Непрерывность - Continuity

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

6. Закрытие - Closure

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

7. Основные и фоновые элементы - Figure-ground

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

8. Общая участь - Common fate

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