Гештальт: глаз сам собирает группы

Урок 9.1 · Интерфейсы и сайты с нуля · Модуль 9. Законы восприятия: почему это работает · Бесплатно

Цель урока: Увидеть, что группировка — работа зрения, а не украшение, и научиться собирать группы расстоянием, подобием и замыканием.

Нужно знать заранее: Уроки 8.1–8.2

Объяснение

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

Как это работает: Гештальт — набор законов, по которым мозг достраивает целое из частей. В интерфейсе работают пять. Близость. То, что стоит рядом, читается как одно. Самый сильный и самый дешёвый закон: расстояние работает без рамок, линий и цвета. Подобие. Похожие по цвету, размеру и форме элементы читаются как родственные. Одинаковые кнопки — одна группа действий, а одна красная среди серых — исключение. Замыкание. Мозг дорисовывает недостающее. Карточка без рамки всё равно читается карточкой, если у неё есть фон, отступы и тень: глаз «закрывает» прямоугольник сам. Фигура и фон. Более контрастное и близкое становится фигурой, остальное — фоном. Поэтому подложка не должна спорить с содержимым: яркий фон «съедает» текст. Общая судьба. То, что движется или меняется вместе, воспринимается как одно. Отсюда правило анимаций: несвязанные элементы не должны появляться одним движением.

Психология: почему глаз видит одно: Мозг экономит. Разбирать экран на двести отдельных объектов слишком дорого, поэтому зрение собирает их в несколько фигур — и дальше работает с фигурами, а не с пикселями. Законы описали гештальт-психологи в 1910–1920-х годах (Вертгеймер, Кёлер, Коффка), и с тех пор они подтверждены множеством экспериментов. Практическое следствие: человек не «читает» вашу сетку, он видит группы. Если группы сложились не там, где вы задумали, он поймёт страницу иначе — и никакая подпись это не исправит.

Разбор по шагам: 1. Выпишите, на какие смысловые группы делится содержимое. Обычно их две-четыре. 2. Разведите группы расстоянием: между группами в три-четыре раза больше, чем внутри. 3. Внутри группы сделайте элементы одинаковыми — по размеру, цвету и форме. 4. Уберите рамки, которые заменяются фоном, отступом и тенью: прямоугольник дорисует замыкание. 5. Проверьте фигуру и фон: прищурьтесь. Содержимое должно оставаться фигурой, подложка — фоном. 6. Проверьте подобие: если два элемента выглядят по-разному, они должны и вести себя по-разному.

Частая ошибка: Первая — разделять группы линиями и рамками вместо расстояния: получается таблица, в которой всё одинаково важно. Вторая — делать элементы «чуть разными»: разница в 2 px и в один оттенок не читается, мозг всё равно объединяет их в группу. Третья — спорить с фигурой и фоном: яркая подложка под текстом, из-за которой текст перестаёт быть главным.

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

Итог: Зрение собирает группы само — по расстоянию, подобию и замкнутости. Дизайнер не рисует группы, а задаёт, из чего зрение их соберёт.

Что дальше: Общая судьба — самый громкий закон гештальта: элементы, которые движутся вместе, читаются как одно. Ему посвящён урок 9.6.

<div class="feed">
  <div class="group">
    <p class="group-title">Интерфейс</p>
    <div class="item">Иерархия: что главное</div>
    <div class="item">Контраст по цифрам</div>
  </div>
  <div class="group">
    <p class="group-title">Код</p>
    <div class="item">Циклы в Python</div>
    <div class="item">Списки и словари</div>
  </div>
</div>

<style>
  .feed { display: grid; gap: 36px; }
  .group { display: grid; gap: 8px; }
  .group-title { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .item { padding: 14px 16px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
</style>

Уроки модуля 9

• 9.1 Гештальт: глаз сам собирает группы — вы здесь (бесплатно)
• 9.2 Закон Фиттса: до кнопки должно быть легко дотянуться (по подписке)
• 9.3 Закон Хика: меньше выбора — быстрее решение (по подписке)
• 9.4 Закон Якоба: человек ищет там, где привык (по подписке)
• 9.5 Закон Миллера: почему «семь пунктов» — миф (по подписке)
• 9.6 Общая судьба: движение, которое читается как одно (по подписке)
• 9.7 Проект: экран, который ведёт за руку (по подписке)
• 9.8 Разбор экрана по законам восприятия (по подписке)