Принципы гештальта в UI-дизайне с примерами
Основы3 минРедакция Innovialabs
Коротко
Принципы гештальта описывают, как мозг автоматически группирует элементы: по расстоянию, похожести, общей рамке и направлению. В UI их используют, чтобы пользователь без подсказок понимал, что с чем связано и куда смотреть.
Что такое гештальт простыми словами
Гештальт-принципы — наблюдения психологии восприятия о том, как человек собирает отдельные элементы в целое. Мы не разглядываем каждую кнопку по отдельности, а сразу видим группы, блоки и связи. Интерфейс либо помогает этому, либо мешает.
В UI-дизайне шесть принципов встречаются постоянно:
| Принцип | Суть | Где встречается |
|---|---|---|
| Близость | Что рядом — то связано | Формы, карточки, меню |
| Сходство | Что похоже — то одного типа | Ссылки, кнопки, теги |
| Замыкание | Мозг достраивает недостающее | Иконки, карусели |
| Непрерывность | Взгляд следует по линии | Таблицы, степперы, списки |
| Фигура и фон | Мы отделяем объект от подложки | Модальные окна, меню |
| Общая область | Общая рамка или фон объединяет | Карточки, секции настроек |
Близость
Элементы, расположенные ближе друг к другу, воспринимаются как группа. Это самый сильный и самый часто нарушаемый принцип.
Пример ошибки: в форме подпись поля стоит на одинаковом расстоянии от своего поля и от поля выше. Пользователь не понимает, к чему относится «Телефон».
Исправление: отступ между подписью и полем делайте заметно меньше, чем между парами «подпись + поле». Простое правило — внутренний отступ группы меньше внешнего.
Сходство
Элементы с одинаковым цветом, формой или размером считаются одного типа и одного поведения.
Пример ошибки: ссылки и обычный выделенный текст покрашены в один фиолетовый цвет. Пользователь кликает по тексту и ничего не происходит.
Исправление: закрепите за интерактивными элементами отдельный визуальный признак и не используйте его для декора. Все основные кнопки должны выглядеть одинаково, все второстепенные — тоже.
Замыкание
Мозг дорисовывает незавершенные фигуры. Благодаря этому работают минималистичные иконки из пары линий.
Пример в UI: в горизонтальной карусели последняя карточка обрезана краем экрана. Пользователь понимает, что список продолжается, и свайпает.
Ошибка: карточки ровно помещаются в экран, и непонятно, что есть продолжение. Исправление — оставить видимой часть следующей карточки.
Непрерывность
Взгляд движется по линиям и выравниваниям и ожидает, что элементы на одной линии связаны.
Пример ошибки: в таблице числа выровнены по центру, поэтому разряды «прыгают» и сравнивать значения тяжело.
Исправление: выравнивайте числа по правому краю, текст по левому, держите единую сетку. В степперах соединяйте шаги линией, чтобы показать последовательность.
Фигура и фон
Мы всегда отделяем главный объект от подложки. Если граница неясна, интерфейс кажется плоским и запутанным.
Пример ошибки: выпадающее меню того же цвета, что и страница, без тени и обводки. Оно сливается с контентом под ним.
Исправление: добавьте тень, обводку или затемнение фона. У модальных окон затемненная подложка показывает, что сейчас важно только окно.
Общая область
Элементы внутри одной рамки или на одном фоне воспринимаются как группа, даже если они разного типа.
Пример в UI: в настройках каждый раздел — отдельная карточка: «Профиль», «Уведомления», «Безопасность».
Ошибка: рамки вокруг всего подряд. Когда каждый элемент в своей коробке, группировка теряет смысл, а экран становится шумным. Часто достаточно близости и отступов, без лишних обводок.
Как применять на практике
- Начинайте с отступов: заведите шкалу (например, 4, 8, 16, 24, 32) и используйте маленькие значения внутри групп, большие — между ними.
- Проверяйте макет размытием: прищурьтесь или размойте скриншот. Группы и главные элементы должны читаться и без текста.
- Один визуальный признак — одно значение: цвет ссылки, форма кнопки, стиль тега.
- Используйте рамки и фоны только там, где близости недостаточно.