Введение
Современный интерфейс — это не набор элементов, а среда принятия решений. Несмотря на использование сеток и дизайн-систем, многие интерфейсы остаются визуально хаотичными. Возникает разрыв между тем, как интерфейс построен, и тем, как он воспринимается.
Данное исследование рассматривает композицию как систему управления вниманием. Его ключевая проблема — подмена перцептивной логики математической: дизайнеры следуют сетке, игнорируя то, как глаз реально группирует и интерпретирует элементы. В результате интерфейс может быть технически корректным, но визуально ошибочным.
Актуальность связана с ростом сложности цифровых продуктов. Композиция становится инструментом снижения когнитивной нагрузки: её ошибки увеличивают время поиска, снижают точность действий и ухудшают пользовательский опыт.
В исследовании выдвигаются три гипотезы:
- Оптическое выравнивание важнее математического
- Ритм и потенциальное движение сильнее статики в управлении вниманием
- Смысловые связи приоритетнее формальной композиционной «чистоты».
Цель исследования — переосмыслить композицию через восприятие и сформулировать критерии оценки интерфейса не только по структуре, но и по тому, как он читается пользователем
Законы гештальта в интерфейсах
Композиция начинается не с сетки, а с восприятия. Пользователь мгновенно интерпретирует его по законам Гештальт-психология. Ошибки возникают не на уровне пикселей, а на уровне связей. Это подтверждает первую гипотезу: глаз объединяет элементы перцептивно, а не математически.
(*)
Базовые механизмы — близость и общее поле. Близость формирует структуру через иерархию расстояний: чем ближе элементы, тем сильнее связь. В Яндекс Музыка это проявляется в трёх уровнях отступов: внутри строки, между строками и между альбомами — структура считывается мгновенно.
Яндекс Музыка
Тот же принцип в Apple Settings: плотные группы внутри секций и увеличенные интервалы между ними снижают когнитивную нагрузку. Близость здесь — не визуальный приём, а способ сжатия смысла.
Apple Settings
(*)
Общее поле работает вторично. В системах вроде Material Design карточки объединяют элементы, но уступают близости. Если расстояния внутри карточки противоречат логике группировки, пользователь игнорирует границу. При равных отступах структура исчезает, интерфейс превращается в «плоский» набор элементов.
Material Design
В интерфейсе Drinkit напитки визуально разделены по блокам, что ускоряет считывание информации
Drinkit
В приложении «Дом РФ» информация также разбита на блоки, что позволяет воспринимать каждую группу как отдельную сущность
Дом РФ
Таким образом, законы гештальта подтверждают третью гипотезу: смысловые связи формируются через восприятие, а не через контейнеры. Их нарушение ради формальной аккуратности снижает читаемость интерфейса.
Границы объектов: конфликт математического и визуального
(*)
Любой элемент интерфейса существует в двух системах: технической (bounding box) и перцептивной (визуальный вес и форма). Глаз считывает силуэт, поэтому круг кажется меньше квадрата, а треугольник — смещённым. В интерфейсах это становится критичным: даже идеально выровненный макет может выглядеть «неровным».
(*)
(*)
В Apple Human Interface Guidelines прямо указывается: иконки выравниваются оптически, а не геометрически. То же видно в Airbnb — текст в карточках ориентируется на скруглённую форму изображения, а не на его bounding box. Причина в том, что глаз учитывает пустоту как часть формы. Скругления, острые углы и асимметрия меняют визуальные границы, требуя компенсации. Поэтому в Material Icons иконки внутри одной сетки имеют разный фактический размер и положение.
Иконки от Apple Human Interface Guidelines
Airbnb
Вывод: равные размеры не дают визуального равенства. Дизайнер работает не с геометрией, а с весом и восприятием. Игнорирование этого создаёт эффект «почти ровно» — интерфейс технически корректен, но визуально нестабилен. Композиция здесь становится перцептивной задачей: важно не выровнять элементы, а добиться ощущения их выравнивания.
Способы выравнивания элементов
Выравнивание в интерфейсе — это не просто приведение элементов к одной линии, а инструмент организации восприятия. Оно определяет, по каким осям глаз будет считывать интерфейс и какие связи считать значимыми.
Здесь возникает ключевое противоречие: инструменты вроде Figma работают с техническими границами (bounding box), тогда как пользователь воспринимает элементы через оптические контуры, внутренние линии и визуальный вес. Это напрямую подтверждает первую гипотезу: математическое выравнивание не гарантирует перцептивного.
(*)
Выравнивание по оптическим границам. Базовый способ, применимый к большинству элементов. Выравнивание происходит по видимому силуэту, а не по техническому контейнеру.
Это особенно заметно в иконках. В Material Icons все иконки размещены в сетке 24×24 px, но их фактический размер и положение варьируются. Круглые формы визуально уменьшаются, острые — вытягиваются, поэтому их смещают для компенсации. Без этого ряд иконок выглядит «плавающим», несмотря на идеальные координаты.
Google Material Icons
Выравнивание по внутренним линиям. Глаз часто ориентируется не на границы, а на структуру внутри объекта.
Текст выравнивается по базовой линии, а не по bounding box. В связке «иконка + текст» иконка должна ориентироваться на x-height (высоту строчных букв), а не на общий контейнер.
В Telegram это видно в списке чатов: аватар выровнен по верхней линии имени, а не по центру строки. Это создаёт устойчивую горизонталь. При выравнивании по центру строка начинает «распадаться».
Telegram иконка
Telegram интерфейс
Выравнивание по оптическому весу Применяется для сложных и асимметричных форм. Здесь важен не центр, а баланс визуальной массы.
Оптический вес зависит от размера, плотности, контраста и положения элементов. Тёмное и крупное воспринимается тяжелее, верх — «тяжелее» низа.
Это видно в айдентике: логотип Pepsi не симметричен геометрически, но сбалансирован визуально. Логотип Applетакже не подчиняется строгой математике, но воспринимается устойчивым. Глаз оценивает не точность, а равновесие.
Выравнивание — это многоуровневая система, где геометрия лишь отправная точка. Задача дизайнера — синхронизировать координаты с восприятием. Игнорирование этого приводит к эффекту «почти ровно»: интерфейс выглядит аккуратным, но ощущается нестабильным. Пользователь не осознаёт причину, но тратит больше усилий на чтение. Следовательно, корректное выравнивание — это всегда оптическая компенсация, а не математическое совпадение координат.
Устойчивые композиции в интерфейсах
Композиция в интерфейсе должна быть устойчивой — глаз пользователя опирается на видимые опоры, чтобы не «падать» в пустоту и не искать смысловые центры самостоятельно. Устойчивость определяется расположением элементов относительно границ формата, углов и центральных осей.
(*)
Композиция «4 угла»
Композиция «4 угла» (рамка) предполагает расположение элементов по всем четырем углам экрана или блока. Такая композиция создает замкнутую рамку — глаз движется по периметру, фиксируя границы пространства. Используется в дашбордах, навигационных панелях, рабочих областях с большим количеством независимых блоков.
Композиция «верх/низ»
Композиция «верх/низ» группирует элементы либо в верхней, либо в нижней части экрана. Верхняя композиция традиционна для заголовков, навигации, поиска. Нижняя — для мобильных интерфейсов (tab bar) и панелей действий. В iOS Tab Bar основные навигационные элементы закреплены в нижней части экрана — это устойчивая композиция для управления одной рукой.
Композиция «флаг»
Композиция «флаг» занимает три угла из четырёх. Один угол остаётся пустым, создавая направленное напряжение — взгляд тянется в пустоту. Используется для привлечения внимания к четвёртому углу или для создания динамики.
Композиция по левому краю
Композиция по левому краю использует один сильный элемент, расположенный в углу (чаще в левом верхнем). Остальные элементы выстраиваются вдоль краёв относительно этого якоря.
Центральная композиция
Центральная композиция располагает главный элемент в центре экрана. Все остальные элементы симметричны относительно центральной оси, создавая максимальную статику и устойчивость. Используется для лендингов, страниц входа, медиаконтента.
Композиция — это не расположение, а управление траекторией взгляда. Если траектории нет — интерфейс «разваливается». Если она нарушена — возникает напряжение. Это подтверждает вторую гипотезу: внимание определяется движением, а не структурой.
Метр и ритм: управление вниманием
(*)
Метр и ритм определяют не структуру интерфейса, а траекторию взгляда. Это уровень времени: как быстро пользователь считывает экран и где останавливается.
Метр — это повторение без изменений. Равные отступы, одинаковые размеры, регулярные интервалы. Он снижает когнитивную нагрузку: глаз перестаёт анализировать и начинает сканировать.
Но метр не создаёт акцентов. В равномерной системе нет точки притяжения — взгляд не управляется.
Ростикс
Ритм возникает из различий. Изменение размера, расстояния или цвета создаёт визуальное событие — глаз фиксирует его как движение. Это напрямую подтверждает вторую гипотезу: внимание притягивается к изменению, а не к стабильности.
Flowwow
Отдельно работает потенциальное движение — напряжение. Прижатый к краю элемент или касание границ создаёт ощущение нестабильности. Такой объект воспринимается как «движущийся», даже если он статичен. Это делает его сильным акцентом без изменения цвета или размера.
Ошибка возникает, когда изменения случайны. Несистемные отступы и размеры не формируют ритм — они создают шум. Глаз теряет предсказуемость и вынужден анализировать интерфейс вручную.
Баланс ритма и метра определяет, будет ли интерфейс читаться автоматически или требовать усилий.
Заключение: верификация гипотез
Исследование показало, что композиция в интерфейсах — это не про сетки и выравнивание, а про управление вниманием. Интерфейс читается не по координатам, а по тому, как глаз объединяет и интерпретирует элементы.
Первая гипотеза подтвердилась: математическое выравнивание не равно визуальному. Глаз ориентируется на оптические границы и вес, что подтверждается практиками Apple Human Interface Guidelines и Material Design. Игнорирование этого создаёт ощущение «неправильности» даже при технической точности.
Вторая гипотеза: внимание определяется не статикой, а изменением. Ритм, контраст и напряжение направляют взгляд сильнее, чем равномерная структура. Интерфейс работает через различия, а не через повторение.
Третья гипотеза: смысловые связи важнее формы. Согласно Гештальт-психология, пользователь сначала видит группы, а не контейнеры. Нарушение этих связей ради «аккуратности» снижает читаемость.
Главный вывод: проблема интерфейсов не в отсутствии правил, а в их буквальном применении. Система задаёт каркас, но качество возникает в отклонениях под восприятие.
Хороший интерфейс — не тот, который идеально выровнен, а тот, который читается без усилий
Gestalt psychology [Электронный ресурс] // Wikipedia. — Режим доступа: https://en.wikipedia.org/wiki/Gestalt_psychology (дата обращения: 18.04.2026).
Law of common region [Электронный ресурс] // User Experience Stack Exchange. — Режим доступа: https://ux.stackexchange.com/ (дата обращения: 18.04.2026). — В источнике приводится анализ применения законов общего поля и сходства в интерфейсах Google и Pinterest.
Apple Human Interface Guidelines: Icons [Электронный ресурс] // Apple Developer. — Режим доступа: https://developer.apple.com/design/human-interface-guidelines/icons (дата обращения: 18.04.2026). — Содержит принципы оптического выравнивания иконок в iOS.
Icons & Symbols Guidelines [Электронный ресурс] // Uxcel. — 2025. — 4 Mar. — Режим доступа: https://uxcel.com/lessons/icons-symbols-guidelines-647 (дата обращения: 18.04.2026). — Описывает принципы выравнивания SF Symbols по базовой линии текста.
Material Design: Icon design principles [Электронный ресурс] // Google Material Design. — Режим доступа: https://m3.material.io/styles/icons/designing-icons (дата обращения: 18.04.2026).
В исследовании также используются:
Теория графического напряжения Игоря Штанга — материал основан на лекции «Симулятор» (рекомендуется обращение к первоисточнику: лекции Школы дизайна НИУ ВШЭ или профильные публикации автора).
Швейцарский стиль и сетки Мюллера-Брокмана — источник: Müller-Brockmann J. «Grid Systems in Graphic Design» (Raster Systeme für die Visuelle Gestaltung). — Niggli Verlag, 1981 (и последующие переиздания).
Яндекс Музыка. Мобильное приложение. Скриншоты интерфейса [Электронный ресурс]. — Режим доступа: https://screenbook.ru/app/yandex-music-android/?tab=screens&os=Android (дата обращения: 01.05.2026).
Ростикс. Мобильное приложение. Скриншоты интерфейса [Электронный ресурс]. — Режим доступа: https://screenbook.ru/screens/?screen_type=68&os=iOS (дата обращения: 01.05.2026).
Lamoda. Мобильное приложение. Скриншоты интерфейса [Электронный ресурс]. — Режим доступа: https://screenbook.ru/screens/?screen_type=68&os=iOS (дата обращения: 01.05.2026).
Pinterest. Интерфейс приложения. Скриншоты [Электронный ресурс]. — Режим доступа: https://mobbin.com/screens/af1703d7-33cd-458c-9eb0-5c7c050bcfb4?section=key_screens (дата обращения: 01.05.2026).
Flowwow. Мобильное приложение. Скриншоты интерфейса [Электронный ресурс]. — Режим доступа: https://screenbook.ru/app/flowwow-ios/?tab=screens&os=iOS (дата обращения: 01.05.2026).
Material Design. Иллюстрация принципов интерфейса [Электронный ресурс]. — Режим доступа: https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmeqrab5f-03.png?alt=media&token=0729930f-cd91-430a-ad7a-3c74997f4771 (дата обращения: 01.05.2026).
Apple Settings. Руководство пользователя iPhone [Электронный ресурс]. — Режим доступа: https://support.apple.com/en-gb/guide/iphone/iph079e1fe9d/ios (дата обращения: 01.05.2026).
Drinkit. Интерфейс мобильного приложения [Электронный ресурс]. — Режим доступа: https://benchmarkee.ru/mobile/grocery/drinkit (дата обращения: 01.05.2026).
Дом РФ. Мобильное приложение. Скриншоты интерфейса [Электронный ресурс]. — Режим доступа: https://screenbook.ru/app/dom-rf-ios/?tab=screens&os=iOS (дата обращения: 01.05.2026).
Apple Human Interface Guidelines. Icons [Электронный ресурс]. — Режим доступа: https://developer.apple.com/design/human-interface-guidelines/icons (дата обращения: 01.05.2026).
Airbnb. Интерфейс приложения. Скриншоты [Электронный ресурс]. — Режим доступа: https://mobbin.com/screens/d71700a0-2e5e-4274-9d02-75b399408802 (дата обращения: 01.05.2026).
Google Material Icons. Обзор и система иконок [Электронный ресурс]. — Режим доступа: https://9to5google.com/2022/04/21/google-fonts-material-symbols/ (дата обращения: 01.05.2026).
Telegram. Мобильное приложение. Скриншоты интерфейса [Электронный ресурс]. — Режим доступа: https://screenbook.ru/app/telegram-ios/?tab=screens&os=iOS (дата обращения: 01.05.2026).
Концепты интерфейсов (Pinterest) — источник вдохновения, переработка автора.
Некоторые иллюстрации с пометкой (*) — разработаны автором исследования.
Gmail. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/gmail-ios-983aa256-e07d-48d1-8cdc-32b964f383b0/205b17bf-bfbf-484a-a80d-8fbbe50d535c/ui-elements (дата обращения: 01.05.2026).
Headspace. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/headspace-ios-28986bf8-81b2-4af0-84df-b5654a8c98f9/f2c7edab-00b5-460c-9663-1cf64517f7db/ui-elements (дата обращения: 01.05.2026).
Zoom. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/zoom-ios-c631da7e-a1fb-4984-a1fc-040d793404ed/0be27310-a375-4675-b78d-f530ebf73e28/ui-elements (дата обращения: 01.05.2026).
Airbnb. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/screens/d71700a0-2e5e-4274-9d02-75b399408802 (дата обращения: 01.05.2026).
Reddit. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/reddit-ios-bbbf2851-8c20-4dc4-99b7-63bf56890ca6/c3644f0a-09fb-434a-b9ad-555c306ac6ac/ui-elements (дата обращения: 01.05.2026).
Artifact. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/artifact-ios-8aae2cc9-799d-4d93-8c81-7520e4791274/187c9893-46a5-480a-becf-1efec2ca576b/ui-elements (дата обращения: 01.05.2026).
Lime. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/lime-ios-69ccf881-5052-4f6e-8f4b-8d6d3e94669c/bb89ac66-0ea9-4688-bfa6-6e9106ef8d33/ui-elements (дата обращения: 01.05.2026).
Zero: Fasting & Health Tracker. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/browse/ios/apps/zero-fasting-health-tracker (дата обращения: 01.05.2026).
Notion. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/notion-ios-265a7a8a-0006-441c-8c17-ae6fc822c366/3e7f5bab-7eb0-4610-ace5-faa6788991a7/screens (дата обращения: 01.05.2026).
Robinhood. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/browse/ios/apps/robinhood (дата обращения: 01.05.2026).
Nike Run Club. Мобильное приложение. Интерфейс [Электронный ресурс]. — Режим доступа: https://mobbin.com/apps/nike-run-club-ios-449de884-1da3-4133-a57e-5106be737046/feeb6a15-da6e-4251-9d10-9abbc7eba89d/screens (дата обращения: 01.05.2026).
