Бывает, смотришь на свой макет — шрифты дорогие, цвета модные, а в целом ощущение, что кто‑то уронил интерфейс с девятого этажа. Пользователь тыкается взглядом, не понимает, что к чему, и тихо закрывает вкладку. Психологи называют это нарушением гештальта, мы с тобой — «что‑то не так с композицией». Давай без скучных лекций разберёмся, как ленивый мозг сканирует экран и почему отступы важнее, чем «красиво».
Гештальт — это не про то, как забыть бывшую
Гештальт‑принципы — это набор законов восприятия, которые описывают, как мозг группирует элементы, распознаёт паттерны и упрощает сложные картинки. В нормальной жизни это значит: он не смотрит на каждый пиксель, он ищет знакомые пятна и группы.
Представь ночное небо: просто куча звёзд. Но мозг дорисовывает между ними линии и видит медведицу, пояс Ориона и прочие созвездия. Ты же понимаешь, там нет настоящего «рисунка», это мозг так удобно себе всё упаковал. В интерфейсе он делает то же самое: видит элементы рядом — решает, что это одна семья; видит рамку — считает, что всё внутри про одно и то же; видит линию — хочет продолжить её взглядом дальше.
Твоя задача как дизайнера — расставить кнопки, тексты и поля так, чтобы мозг сам сделал правильные выводы за доли секунды, а не гадал, где здесь заголовок, а где подпись к чужому полю.
Закон №1. Близость: кто рядом, тот и семья
Закон близости говорит: элементы, которые стоят близко друг к другу, мозг воспринимает как связанную группу, даже если они отличаются цветом и формой. То, что стоит вплотную — это одна банда. Если кнопка далеко от текста — они не знакомы.
Пример из жизни. Стоят на остановке люди:
- два человека вплотную друг к другу,
- ещё трое в двух метрах от них.
Кого твой мозг запишет в «компанию»? Конечно, ту парочку, что жмётся друг к другу. Трое сбоку — это уже другая история. С кнопками и текстом всё ровно так же.
Теперь переносим это в макет. Ты делаешь экран с заголовком, текстом и кнопкой. Если:
- от заголовка до текста — 20 пикселей,
- и от заголовка до предыдущего блока — тоже 20,
мозг пользователя такой: «Слушай, а этот заголовок вообще к чему? К верхнему блоку или к нижнему? Может, подбросим монетку?»
Классика жанра — формы регистрации. Подпись «Ваше имя» висит ровно посередине между двумя полями. Ты как арт‑директор смотришь и задаёшься вопросом: «Это имя к какому именно полю относится, к верхнему или к нижнему, или это загадка для особо внимательных?»
А теперь самое обидное. Даже если шрифт дорогой, цвет кнопки — из модной подборки, фон — с идеальным градиентом, всё равно будет ощущение хаоса. Потому что главный закон: внутренние отступы всегда меньше внешних. Точка. Элементы внутри блока должны быть ближе друг к другу, чем к соседним блокам.
Если заголовок, текст и кнопка — одна семья, они должны «стоять на остановке» вплотную. А уже от следующего экрана ты делаешь честную дистанцию — чтобы мозг не путался, где какая компания.
Закон №2. Сходство: униформа для кнопок
Сходство говорит: одинаковые по цвету, форме или размеру элементы мозг считает похожими по смыслу и функции. В быту это выглядит просто: трое людей в красных жилетках в магазине — это консультанты, даже если таблички «продавец» ты не разглядел.
В интерфейсе сходство — это униформа для UI‑элементов:
- все основные действия — одна форма и цвет;
- второстепенные — другая;
- ссылки — третий, но тоже стабильный паттерн.
Если у тебя все главные кнопки на сайте большие и синие, а второстепенные — прозрачные с контуром, пользователь привыкает к этому за пару экранов. Мозг радуется: «Ага, вот опять наша синяя “главная кнопка”, можно не думать, просто жать».
Теперь представь экран, где ради «креатива»:
- одна кнопка «Купить» — круглая зелёная,
- вторая «Оформить» — квадратная красная,
- третья «Подробнее» — вообще подчёркнутая ссылка.
Серьёзно, ты думаешь, что красная квадратная и зелёная круглая — это один и тот же уровень важности? Пользователь смотрит и думает: «Эти ребята точно что‑то от меня скрывают». Мозг не понимает, что из этого главное, а что так, «погулять вышло».
Рабочее правило:
- одна роль — один визуальный стиль;
- не мешай в одном блоке четыре разных стиля кнопок, если они делают примерно одно и то же;
- если хочешь выделить «главное действие» — сделай ему свою чёткую униформу и придерживайся её везде.
Закон №3. Общая зона: зачем мы всё пихаем в карточки
Принцип общей зоны (common region) говорит: всё, что лежит внутри одной рамки или на общем фоне, воспринимается как группа — даже если элементы стоят далеко друг от друга.
Пример из жизни — забор. Всё, что внутри забора, «моё». Даже если дерево растёт в одном углу участка, а сарай в другом, мозг не сомневается: это одно владение.
Теперь посмотри на любой маркетплейс. Почему товары лежат на белых плашках‑карточках? Дизайнерам лень рисовать линии? Нет.
- Картинка кроссовок.
- Название.
- Цена.
- Рейтинг.
- Кнопка «В корзину».
Все они живут на одной аккуратной плашке с лёгкой тенью. Даже если между картинкой и кнопкой приличная дистанция, мозг читает это как «одна сущность — одни кроссовки».
Когда карточек нет и всё валяется на белом фоне, начинается цирк. Цена визуально убегает к соседнему товару, кнопка «Купить» прилипает к чужой фотке, а пользователь сидит и думает: «А я сейчас вот эти кроссы куплю или соседние?»
Вот почему «макет разваливается на части, стоит только убрать с него текст». Если без рамок и плашек всё превращается в салат из элементов — значит, у тебя проблемы с общей зоной. Нужны контейнеры: карточки, панели, блоки с фоном.
Карточка — это не декоративная фигня. Это честный способ сказать мозгу: «Смотри, вот тут один объект, вот тут — другой. Не путай их, пожалуйста».
Закон №4. Непрерывность и незавершённость: как заставить скроллить
Принцип непрерывности говорит: глаз любит следовать по линиям и плавным траекториям и воспринимает элементы на одной линии или кривой как связанные. Плюс мозг обожает «закрывать гештальт» — достраивать недосказанное, завершать незавершённое.
Представь карусель с товарами. Ты делаешь её так, что:
- ровно три карточки помещаются на экран,
- третья обрезается идеально по краю,
- справа пусто, гладко, чисто, будто так и задумано.
Результат: карусель выглядит настолько законченной, что никто в жизни не догадается её свайпнуть. Всё, гештальт закрыт, до свидания остальные 27 товаров.
Как надо?
Сделать так, чтобы четвёртая карточка нахально выглядывала из‑за правого края:
- наполовину обрезана,
- слегка наезжает,
- прям кричит: «Эй, тут есть продолжение, дёрни меня».
Глаз цепляется за оборванную форму, мозг такой: «Подожди, картинка не закончена, надо досмотреть». И палец сам тянется свайпнуть, чтобы достроить линию карточек до конца.
То же самое со скроллом по вертикали. Если ты обрезаешь нижний блок так, что его хвост виден наполовину, пользователь понимает: «Дальше что‑то есть, скроль ещё». А если каждый экран выглядит как законченный плакат, без единого намёка на продолжение — не удивляйся, что люди не доходят до футера.
Практика: тест с прищуром
Теперь давай без теории, берём твой макет и устраиваем жёсткий, но честный тест.
- Открой свой дизайн или любимый сайт.
- Откинься на спинку стула.
- Сильно прищурь глаза, чтобы текст превратился в размытые полоски, а кнопки — в кляксы.
- Смотри не на буквы, а на пятна.
Что ты должен увидеть:
- группки элементов, которые явно держатся вместе;
- отдельные кляксы‑кнопки, которые логично примагничены к своим блокам;
- понятные «острова» — карточки, панели, секции.
Если прищурился — и:
- заголовок слипся с чужой картинкой;
- подзаголовок висит ровно посередине между двумя блоками;
- кнопка сиротливо висит в пустоте, не привязана ни к какому тексту;
значит, у тебя проблемы с законом близости и общей зоной. Чини отступы:
- внутри группы — ближе;
- между группами — дальше;
- всё, что про один объект — в карточку или на общий фон.
Если все кнопки прищуре выглядят как зоопарк форм и цветов, без намёка на систему — выравнивай сходство. Пусть «главные» кнопки будут одного стиля и явно отличаются от второстепенных.
Чек-лист: 4 закона гештальта, которые должны работать в каждом интерфейсе
Близкие элементы сгруппированы: внутренние отступы меньше внешних
Одинаковые элементы выглядят одинаково: кнопки, ссылки, иконки с единой системой
Связанные элементы объединены общей рамкой или фоном (карточки, панели, блоки)
Карусели и списки не завершены: видно, что есть продолжение
Дизайн прошёл тест с прищуром: видны группы, иерархия и структура
Если хочешь копнуть глубже и разобраться, как применять законы гештальта в реальных проектах, смотри примеры и разборы на dizko.ru — там практика без теории.
Один вывод и один вопрос
Законы гештальта в интерфейсе — это не философия для умных статей, а банальная физика нашего зрения. Дизайн — это управление вниманием ленивого мозга, который не хочет тратить калории на разгадывание головоломок. Если твой макет сопротивляется мозгу, мозг просто закрывает вкладку и тратит деньги в другом месте.
А по твоему опыту, какой закон чаще всего ломают на сайтах? Замечал, как кнопка «Купить» визуально уезжает к соседнему товару или форма регистрации разваливается, потому что подписи живут своей жизнью? Пиши в комменты — разберём на чужих и своих примерах.
Что дальше почитать и поделать
Если хочешь глубже понять, почему перегруженные сайты бесят и как не перегреть мозг пользователя, читай статью про когнитивную нагрузку — там продолжение банкета про ленивый мозг и его ограничения [ссылка].
А про то, как с помощью размеров, жирности и цвета акцентов выстроить понятную визуальную иерархию и не превращать первый экран в рекламную листовку 90‑х, загляни в статью про визуальную иерархию [ссылка]. Там