сетка не делает композицию хорошей
Золотое сечение, правило третей и F-паттерн помогают задавать вопросы композиции. Но сетка организует отношения между элементами, а не выдаёт сертификат красоты.
я долго хотел, чтобы композицию можно было посчитать. Разложить лист на трети, найти золотую спираль, поставить объект в правильную точку — и дальше уже не сомневаться. В таком подходе есть приятная ясность: будто у любой удачной работы спрятан пароль.
Проблема в том, что сетку легко нарисовать после того, как работа уже получилась. Тогда она объясняет всё и ничего одновременно. Вот здесь проходит треть, вот здесь почти золотое сечение, а вот эта линия якобы ведёт взгляд. Но из этого ещё не следует, что автор так думал, что зритель увидит именно это или что другая работа без такой линии будет хуже.
Сетка может помочь собрать композицию. Она не может вместо меня решить, что здесь главное.
золотое сечение не проиграло, но и не выиграло всё
Золотое сечение часто рассказывают как универсальный закон красоты. Пропорция примерно 1:1,618 появляется в архитектуре, живописи, природе, логотипах и даже в форме человеческого тела. В этой истории слишком много уверенности и слишком мало проверки: разные изображения можно подогнать под одну и ту же спираль, если достаточно долго двигать её центр.
Эксперименты дают более интересную картину. В исследовании П. А. Рассела из пяти категорий живописи не нашли свидетельства особой роли золотого сечения. Пропорции портретов менялись в зависимости от того, что именно изображено. В отдельной задаче, где участники подбирали приятный прямоугольник, результат зависел от инструкции: абстрактный прямоугольник мог приближаться к золотому сечению, а «прямоугольник для картины» или «для плитки» сдвигал предпочтение в другую сторону (Russell, 2000; context experiment, 2000).
Это не доказывает, что пропорция всегда бесполезна. Это показывает другое: предпочтение зависит от того, что мы видим, зачем это нужно и как сформулирован вопрос. Прямоугольник для фотографии, экран телефона и окно в комнате решают разные задачи. У них не обязана быть одна «правильная» ширина.
Поэтому я бы оставил золотому сечению скромное место. Оно может быть одним из ограничений, с которого удобно начать. Оно может дать ритм или помочь сравнить варианты. Но совпадение с 1,618 не является причиной, по которой работа хороша.
что именно делает сетка
Сетка — это не рисунок поверх макета. Это договорённость: какие края считаются общими, какие расстояния повторяются, где проходит колонка, сколько воздуха оставить между группами.
Если я ставлю заголовок, подпись и кнопку на одну вертикаль, читателю проще сравнить их и понять, что они относятся друг к другу. Если отступ между карточками меньше, чем отступ между секциями, группы становятся различимыми. Если одна линия повторяется в нескольких местах, страница перестаёт выглядеть случайным набором объектов.
Здесь сетка работает вместе с тем, что в психологии восприятия называют группированием. Близкие элементы мы склонны видеть как группу, похожие — как связанные, незавершённые контуры — как целые. Это описывают принципы Gestalt; учебные материалы MIT по графическому дизайну прямо связывают пустое пространство, близость, сходство и выравнивание со сканируемостью интерфейса (MIT 6.831 notes, OpenStax).
Сетка в этом смысле похожа на разметку дороги. Она помогает не выехать на встречную полосу, но не говорит, куда мне ехать и зачем. Иногда дорога должна быть прямой, иногда — сделать петлю вокруг здания.
один макет, четыре решения
Представим афишу лекции. На ней есть имя лектора, название «как смотреть на дизайн», короткое описание, дата и кнопка регистрации. Больше ничего не меняем — только расположение.
центр. Всё собирается вокруг вертикальной оси. Вариант спокойный, почти торжественный. Он подходит, если событие само является героем и человеку нужно быстро считать название. Но центрирование всех элементов может стереть разницу между заголовком, пояснением и действием.
пополам. Левая часть получает текст, правая — фотографию или крупное пятно. Возникает ясный баланс двух половин. Такой вариант удобен, если нужно одновременно представить тему и образ. Но ровное деление может стать слишком предсказуемым: взгляд будет метаться между половинами, не находя первого шага.
треть. Изображение или имя лектора занимает примерно две трети, текст и кнопка — оставшуюся. Это даёт асимметричный акцент. Важное оказывается чуть сбоку и получает воздух. Но если заголовок длинный или фотография уже очень контрастная, «точка трети» не спасёт и может создать тесноту.
свободная расстановка. Заголовок уходит ближе к краю, дата становится маленькой меткой, кнопка появляется там, где заканчивается направление взгляда лектора. Здесь нет одной направляющей линии, зато появляется напряжение и характер. Такой вариант требует проверки: можно потерять связь между датой и кнопкой, если расстояния не объясняют структуру.
Ни один из четырёх вариантов не выигрывает автоматически. Для лекции в музее я могу выбрать центр, чтобы создать тишину. Для фестиваля — треть, чтобы дать энергию. Для инструкции — пополам, чтобы не заставлять искать действие. Для авторского плаката — свободную расстановку, если риск оправдан задачей.
Полезный вопрос звучит не «попал ли я в треть?», а «что человек должен заметить первым, что связать вторым и какое действие сделать потом?» Сетка помогает ответить, когда превращается в отношения: этот край совпадает с тем, этот отступ отделяет группу, этот контраст разрешает остановиться здесь.
линия взгляда — не рельса
В дизайне часто говорят, что диагональ ведёт взгляд, треугольник создаёт движение, а линия горизонта на определённой высоте делает изображение устойчивым. Такие описания полезны как язык наблюдения. Они становятся проблемой, когда превращаются в обещание: поставь объект сюда — и зритель пойдёт по маршруту, который ты начертил.
Взгляд не ездит по макету как шарик по лабиринту. На него влияют размер и контраст, знакомость предмета, подписи, направление лица, ожидание задачи и предыдущий опыт. Один человек ищет цену, другой рассматривает фотографию, третий читает заголовок. У одного и того же человека режим меняется через секунду.
Наложенная после факта спираль не доказывает, что она организовала изображение. Она может быть хорошим способом задать вопрос: какие отношения здесь уже работают? Но ответ нужно проверить, убрав спираль и посмотрев, остаётся ли иерархия.
F — про сканирование, а не про чтение
F-паттерн часто пересказывают как закон: человек якобы всегда читает страницу сверху вниз по букве F. В исходном eye-tracking-исследовании NN/g наблюдали другой, более скромный результат: на множестве веб-страниц пользователи часто делали длинное движение по верхней части, более короткое ниже и затем сканировали левый край. Само исследование подчёркивает, что это грубый силуэт. Встречались E, перевёрнутый L и заметные остановки в других областях (Nielsen, 2006).
Сканирование — это поиск сигналов: цены, названия, нужного пункта, слова «купить». Чтение — последовательное извлечение смысла из предложений. Когда я пролистываю список услуг, мне важны первые слова заголовков и край, по которому удобно прыгать. Когда читаю эссе, я могу вернуться к началу абзаца, дочитать длинную строку и задержаться на схеме в центре.
Поэтому F-паттерн полезен как предупреждение: не прячьте главное в конце длинного абзаца и не рассчитывайте, что посетитель сначала прочитает всё. Но он не запрещает длинные тексты и не диктует композицию каждой страницы. Хорошая статья может начать с короткого вывода, а затем дать место внимательному чтению.
как пользоваться правилами без культа
Я бы оставил себе пять шагов.
1. Сначала назвать задачу: что человек должен понять, почувствовать или сделать. 2. Выбрать ограничение — центр, колонки, треть, повторяющийся отступ — и применить его как гипотезу. 3. Сделать минимум два варианта, которые решают ту же задачу другим расположением. 4. Убрать направляющие и проверить, видны ли иерархия, группы и следующий шаг. 5. Если есть сомнения, показать макет человеку с конкретным вопросом: что вы заметили первым, что связали, где остановились?
Сетка особенно полезна, когда работу нужно продолжать: в серии экранов, в каталоге, в журнале. Она сохраняет отношения между страницами и снижает количество мелких решений. Но в одном плакате или обложке иногда важнее нарушить ритм, чтобы появился голос.
Композиция начинается не с золотой спирали. Она начинается с выбора, которому можно дать причину. Сетка помогает эту причину увидеть, повторить и проверить. А иногда — понять, где её пора нарушить.