Правило якорных объектов

Любой макет должен быть поделён на прямоугольники. Возникает вопрос: как разделить макет на прямоугольники, не прибегая к линейкам, плашкам или ровным краям элементов? В этом может помочь принцип якорных объектов.

Якорные объекты — это самые важные и заметные элементы в макете. Якорными объектами могут быть иллюстрации, заголовки, текст, кнопки, иконки, логотипы и так далее. Даже абзац может выступать в роли якорного объекта, если он окружён пустотой или контрпространством.

Принцип гласит:

Например, если нужно расположить на листе бумаги картинку, эта картинка должна стремиться встать в один из углов или по центру листа.

Когда вы работаете с якорными объектами, помните, что они образуют иерархию. Первым делом зрители замечают иллюстрации, потом крупные заголовки, потом логотипы, цифры и знаки. Текст — это самый нейтральный объект из всех.

Красные точки показывают предпочтительные места для размещения якорных объектов в прямоугольном модуле:

Предположим, что вместо красных точек появятся реальные объекты, например заголовок. В соответствии с принципом якорных объектов мы поставим его в один из углов:

Следом появится ещё один элемент — текст. В соответствии с принципом якорных объектов поставим его в один из углов:

Можно присоседить его к уже существующему и массивному якорному объекту:

При расположении якорных объектов не следует забывать о том, что у них должны быть явные точки привязки. Зрители должны хорошо видеть, к какому углу или центру они тяготеют. Если мы попробуем искусственно растянуть заголовок и текст, они будут работать хуже:

Непонятно, к чему тяготеет текст. Изначально он стремился к левому верхнему углу, но теперь ещё и прицепился к правому краю.

Если убрать текст и увеличить заголовок, возникнет та же проблема:

Мы перестали понимать, к чему привязан заголовок, к какому углу он тяготеет, потому что он растянулся от края до края. Нужно добавить воздух у одного края, чтобы привязка начала считываться:

Если вернуть вместо заголовка текст и растянуть его на всю ширину модуля, проблема повторится:

Мы не понимаем, к чему привязан текст, к какому углу или краю он тяготеет. Из‑за этого вёрстка выглядит слабее, чем могла бы. Стоит добавить немного воздуха справа:

Вернёмся к теме нанизывания якорных объектов друг на друга. Предположим, в дополнение к этим заголовку и тексту, которые уже нанизались друг на друга и встали в левый нижний угол модуля, добавится что‑то ещё, например иконка.

С точки зрения правила якорных объектов, её можно поставить в правый верхний угол:

А можно нанизать на крупный заголовок, присоседить к нему:

Мы не оглядываемся на смысл. Мы не знаем, что это за иконка и к чему она относится, но предположим, что она связана со словом «Привет». Поэтому можем поставить её рядом с заголовком.

Однако из‑за того, что иконка чёрная и массивная, ей лучше стоять ближе к краю:

При желании можно задвинуть весь блок наверх, чтобы все массивные объекты — иконка и заголовок — прижались к верхнему краю:

Рассмотрим ситуацию, когда вместо одной большой иконки появляется несколько маленьких:

Более массивный заголовок оказался отодвинут от угла и края, а иконки угол не держат.

Чтобы макет выглядел крепче, поменяем заголовок и иконки местами:

На ощущение якорности и понимание, что объект главный, влияет его контрастность по отношению к фону. Если инвертировать цвет модуля, покрасить текст в белый, а иконку оставить тёмной, она перестанет быть самой массивной:

Переставим заголовок налево, чтобы более массивный и заметный объект встал в угол:

Якорные объекты могут быть привязаны не только к углам, они могут располагаться вдоль сторон своего модуля. Если вернуться к схеме, такая привязка будет показана линиями вместо кружков:

Размещённые таким образом якорные объекты мы встречаем постоянно. Возможно, вы даже не отдаёте себе в этом отчёт. Даже если посмотреть на мой экран, мы увидим, что в интерфейсе Фигмы и Мака есть куча объектов, расположенных вдоль краёв экрана: верхнее меню, нижняя панель с иконками. В самой Фигме — шапка с инструментами, список слоёв, панель с настройками выбранного элемента:

Хочу привести пример макета, который в своё время сделали в бюро. На нём я впервые познакомился с правилом якорных объектов и теперь люблю его цитировать. Это подвал в интерфейсе электронного издания компании «Актион»:

Сам макет делится на прямоугольники (модули): один наверху с заголовком и тремя колонками под ним, второй — внизу с контактами и кнопками. Необходимо придумать, как организовать эти несвязанные друг с другом по смыслу этажи. В этом помогает разный фон модулей. А чтобы ещё сильнее разделить модули, мы отличили их по ритму. В этом нам помог принцип якорных объектов.

Верхний заголовок располагается по центру своего прямоугольника. Следующий прямоугольный этаж с иконками делится на три прямоугольника: каждый с картинкой и текстом посередине.

Если бы иконок было больше, возник бы вопрос в целесообразности и удобстве чтения. Но три модуля выглядят достаточно хорошо. Их интересно изучать и достаточно легко понять.

В нижнем этаже вёрстка радикально отличается — все объекты расставлены по углам, а не по центру модуля.

В плакате компании «Браун» небольшие текстовые колонки встали в углу, логотип — внизу по центру, а иллюстрация заняла всю середину модуля плаката:

В журнальном развороте левая полоса разделена на три прямоугольника:

В верхнем прямоугольнике заголовок разместился по центру и тяготеет к верхнему краю. Внизу по углам и середине встали мелкие строки текста. Можно даже сказать, что заголовок и строки снизу образовали ещё два прямоугольника.

В среднем прямоугольнике по центру тройка встала так, чтобы считывалась точка привязки. Мы видим, что объект тяготеет к центру, вокруг него есть охранные поля, поэтому он выглядит значимо и торжественно.

В нижнем модуле строчка встала по центру, а маленький номер страницы — у правого края.

В рекламном банере коуба объекты разместились по углам модуля:

Обратите внимание: у блочков текста внизу хорошо считывается точка привязки — левый нижний угол — благодаря тому, что справа от текста воздуха больше, чем слева. А наверху большая декоративная пятёрка хорошо встала в угол, и на неё нанизался текст — вместе они привязаны к левому верхнему углу.

Прямоугольная шапка сайта поделена на три прямоугольника с текстом и изображением по центру:

В другой шапке сайта заголовок разместился в левом нижнем углу, а год с подписью — в правом верхнем:

На концептуальных банках газировки каждый модуль очень просто организован по принципу якорных объектов — каждый объект просто стоит по центру своего модуля:

Не могу сказать, что всегда хорошо абсолютно всё ставить по центру (мы поговорим об этом в следующих лекциях), но в данном случае это работает и выглядит довольно неплохо.

На банке сидра самый главный объект — яблоко — встал по центру модуля, а остальные элементы разместились в углах и вдоль краёв:

На табличке итальянского музея объекты разместились по углам модуля. Вышло интеллигентно:

На банере в торговом центре подписи встали по углам модуля, а середину заняла типографическая композиция:

Городской банер талантливо организован и хорошо выглядит благодаря принципу якорных объектов:

Все элементы вписаны в общий прямоугольник, который в свою очередь делится на прямоугольники поменьше: с биркой в левом верхнему углу, крупным заголовком по центру, двумя колонками вдоль краёв и логотипом по центру снизу. В каждом прямоугольнике его якорные объекты расположены по центру, в углу или у края.

В упаковке кабеля объекты разместились по углам и в центре модуля наклейки:

Обратите внимание на то, что во многих макетах нет ни одной линейки или плашечки. Тем не менее всё выглядит упорядоченно, приятно и хорошо считывается. Дизайнеры разрезают макеты на виртуальные прямоугольники и расставляют внутри них нужные им элементы по принципу якорных объектов.

Возможно, у вас уже возник вопрос: «Получается, что принцип якорных объектов может противоречить правилу внутреннего и внешнего?»

Представим себе визитку, на которой есть заголовок с именем и должностью. Следуя правилу внутреннего и внешнего, мы расположим их так, чтобы расстояние между ними было меньше, чем поля вокруг них:

Принцип якорных объектов подсказывает, что получившийся блок должен стоять в углу или в центре модуля, — так мы его и поставили.

Теперь сверстаем ту же визитку, следуя только принципу якорных объектов, — поставим элементы по углам модуля:

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

Чтобы смириться с этим противоречием, я сравниваю правила вёрстки, о которых мы говорим, с природными силами. Например, в природе есть сила тяжести. Пусть она будет нашим правилом внутреннего и внешнего. А ещё в природе есть магнетизм — он будет принципом якорных объектов. В природе бывает так, что одна сила побеждает другую. Если я брошу металлический шарик, он упадёт на землю, потому что сила тяжести притянет его к земле. Но если я расположу над собой достаточно мощный магнит, то, когда я брошу этот шарик, он улетит вверх. Так же бывает и в вёрстке: одно правило побеждает другое, и вам решать, какое именно победит.

Если вы откроете книгу с более‑менее классической вёрсткой и дойдёте до начала новой главы, скорее всего, наверху будет заголовок, а под ним — отступ до текста (спуск), после — текст. Спуск от заголовка до текста будет существенно больше, чем внешние поля вокруг заголовка и текста. То есть формально внутреннее и внешнее нарушено, но с точки зрения якорных объектов всё прекрасно.

Делать выбор между тем или иным принципом приходится ради выразительности макета. Или чтобы правильно выстроить отношения между элементами: чтобы было понятно, что, например, заголовок относится ко всему ниже в целом, а не к ближайшему элементу.

Рекомендую не представлять себе наилучшее решение в голове. Если сомневаетесь как лучше, попробуйте и так, и так. Предположим, вам нужно сверстать экран приложения с несколькими элементами, и вы не знаете, как будет лучше: в соответствии с внутренним и внешним или в соответствии с якорными объектами. Попробуйте все варианты, которые придут в голову. Посмотрите, какие возникают проблемы в том или ином варианте, и выберите.

Если модуль независим от окружения или вовсе существует сам по себе, то, как правило, якорные объекты срабатывают лучше правила внутреннего и внешнего. Например, если вы верстаете визитку — маленький формат, который никак не связан с окружением вокруг, — можно смело нарушать внутреннее и внешнее в пользу якорных объектов.

В качестве примера уже виденные нами батарейки из Икеи:

Всё свёрстано в соответствии с принциом якорных объектов: текст, заголовок, иконки и логотип стоят по углам. Никто не умер, потому что батарейка — замкнутый на себе формат. Заголовок или другой элемент не свяжется внезапно с чем‑то за пределами своего модуля.

Не бойтесь экспериментировать.