Ещё одно очень важное правило вёрстки — это правило якорных объектов. Мы с вами поговорили о том, что вёрстка должна разрезаться на правильные прямоугольники, и посмотрели примеры, как это можно сделать с помощью выравнивания элементов, линеечек, плашек и всего такого.
Теперь поговорим о том, как можно эти прямоугольники задавать без линеек и плашек. Для этого я предлагаю сначала посмотреть на вот такую картинку:
Что такое якорные объекты — это самые заметные и самые важные объекты в вашем макете. Неважно, что это: сайт, страница в журнале, реклама, банер. В роли якорных объектов могут выступать фотографии, заголовки, блоки текста, значимые иконки, крупные цифры, фактоиды и так далее.
Правило гласит, что якорные объекты должны тяготеть к углам или сторонам своих модулей или стоять по центру. Если это соблюдается, композиция получается цельной и собранной, и прямоугольники тоже хорошо считываются. Если я возьму уберу фон и плашки не будет, мы всё равно будем считывать этот прямоугольник:
Чтобы якорный объект, его привязка хорошо считывалась, надо следить за тем, чтобы вокруг него, был воздух:
Кружок стоит в углу. Мы эту привязку к углу без проблем считываем, потому что сверху и слева у него плотно, а справа и снизу свободно. Этот воздух необходим, чтобы мы эту привязку считали.
А здесь мы это считывать перестанем. Будет казаться, что какой‑то овал в прямоугольнике болтается:
То же самое, если объект стоит по центру. Если вокруг него есть воздух, мы понимаем, что он стоит по центру, он держит формат:
То же самое, если стоит у любого края:
Надо понимать, что якорные объекты ещё могут нанизываться друг на друга. Редко бывает такое, что у нас в макете всего лишь один объект. Совершенно спокойно могут появиться какие‑то ещё.
Если добавить заголовок, то его можно поставить совершенно по‑разному. Например, в какой‑то угол по правилу якорных объектов. И всё стало хорошо работать. Объекты стали по углам, и у нас формат не разваливается:
Но если вдруг нам по какой‑то причине нужно поставить эти объекты близко друг к другу, например, это связанные штуки, то их надо ставить близко, чтобы они образовывали единый блок, который тоже стоит в углу. И эту привязку надо выдерживать:
А здесь что‑то пошло не так:
Активный красный круг перетягивает на себя внимание, композиция кажется неправильной и слегка развалившейся. Лучше круг передвинуть в угол, и тогда всё тоже станет на свои места:
Таким образом можно собирать какую бы то ни было композицию. Если всё аккуратно в соответствии с правилом якорных объектов расставлять по углам, то, как бы мы их ни расставили, у нас будет получаться хорошо:
Например, здесь красный круг тяготеет к правой стороне формата и тоже выглядит хорошо:
Можно сделать вот так, тогда заголовок и текст связываются друг с другом. То есть они как бы нанизались друг на друга и привязались к одному углу. Тоже хорошо:
Когда работаете с объектами, следите за тем, что иногда какой‑либо объект может внезапно перестать быть якорным. Если вы вдруг сделаете этот заголовок не чёрным, а серым, композиция опять окажется под угрозой. Заголовок стал настолько незаметным, что текст теперь болтается сам по себе:
Посмотрим, как это всё работает, на реальных примерах.
Вот подвал страницы электронных изданий «Актиона», который сделали в бюро. Здесь всё построено по правилу якорных объектов и в соответствии с модульностью. Есть этаж, который рекламирует журнал «Главбух». У него есть фирменный слоган — «Журнал № 1 для бухгалтера». Ещё мы добавили обозначение, что он теперь не печатный, а электронный. Обратите внимание: строчка стоит по центру своего блока, и он очень хорошо считывается. Благодаря тому, что сверху его прижимает какая‑то белая плашка, кусок интерфейса, то есть она задаёт ему верхний край. Снизу у него есть линейка, и после неё идёт уже следующий модуль. А заголовок — это якорный объект, который стоит ровно по центру. И в результате весь прямоугольник очень хорошо считывается:
Ниже без проблем считывается ещё один прямоугольник с тремя колонками. Почему? Сверху он прижат линейкой, снизу — какой‑то плашкой. А сам по себе нарезан ещё на три прямоугольника, внутри которых по центру стоят объекты с текстом, иконками и кнопками. При этом объекты сами по себе тоже сгруппированы. Это не три какие‑то случайные штуки, которые как‑то случайно встали. Они сгруппировались, нанизались друг на друга и встали по центру. В результате — цельная композиция.
Два прямоугольника, которые мы сейчас рассмотрели, организованы за счёт того, что якорные объекты поставлены по центру модулей. А нижний модуль, про подписку, устроен иначе. Здесь, наоборот, все якорные объекты стоят просто по углам. Благодаря этому всё выглядит очень цельно. Таким образом у нас получилось три модуля, которые очень хорошо считываются.
Вот плакат или обложка журнала, где тоже всё очень хорошо стоит. Якорные объекты в левом верхнем углу, большая иллюстрация в центре с воздухом вокруг. И маленький логотип «Брауна» снизу у края тоже хорошо привязан, вокруг него воздух явно хорошо стоит:
Ещё один разворот какого‑то журнала, очень дизайнерского. Посмотрите, как всё хорошо организовано:
Прямоугольник, в центре него якорный объект с воздухом вокруг. Снизу серия маленьких строчек, мини‑якорных объектов: два по углам и один по центру. А ниже большой прямоугольник с огромной тройкой по центру тоже считывается без проблем.
А про полосу справа даже говорить особо нечего: здесь просто прямоугольные блоки текста, которые сами по себе организовывают полосу.
Ещё пример. Какой‑то банер «Коуба» давней давности — 2012 год. Но посмотрите, как он хорошо организован: прямоугольник, якорный объект стоит в углу. Кстати, пример того, как они нанизались друг на друга. Есть большая цифра 5 и к ней подпись — вместе такой объект, который хорошо встал у верхнего края прямоугольника. А абзацы текста встали снизу:
Банка сидра из «Икеи». Тоже отлично свёрстана. Если смотреть на этот цилиндр как на прямоугольник, то видно, что заголовок с подписями встал сверху, яблоко по центру, а какие‑то маленькие штуки с литражом и логотипом «Икеи» — по углам. В результате аккуратная банка сидра всем на зависть. Все хотят дизайн как у «Икеи»:
Вот экстремальное применение якорных объектов, какая‑то навигационная табличка в Европе. Смотрите, как интеллигентно поставили по углам логотипы и маленькую подпись. Думаю, это какая‑то музейная история. Выглядит очень интеллигентно. Проблем с композицией не возникает, даже несмотря на то, что огромное количество воздуха, пустота посередине:
Ещё пример упаковки кабеля. Тоже посмотрите, как хорошо организован прямоугольник. Всё по углам, выглядит классно и современно:
Вопрос из зала: «Влияет ли форма якорного объекта на его отображение? В начале ты показывал картинку, где было пять точек, четыре по бокам, одна по центру. Но если мы возьмём одну точку и поставим её у одной из сторон, она не будет так красиво смотреться в силу своей формы. А если мы возьмём в качестве якорного объекта линию и поставим её к краю блока, она будет смотреться хорошо?»
Всё правильно рассуждаете. На самом деле за примерами далеко ходить не надо. Вот перед нами интерфейс «Макбука»:
Из‑за нижнего края вылезает якорный объект — панель с иконками. Она вытянутая и у неё явно точка привязки к нижнему краю. Наверху у нас точно так же идёт линия с меню. Линия отлично себя чувствует у верхнего края. В некоторых случаях и точка может себя относительно неплохо чувствовать, но линии там лучше.
А есть обратная история.
Если я возьму и эту штуку, условно, превращу в линию, ей станет не очень хорошо, потому что её распёрло от края до края, у неё привязка немножко теряется:
Если мы сделаем хотя бы вот так, то ей становится гораздо лучше. У неё есть воздух, она явно привязана к центру:
Комментарий из зала: «То есть форма якорных объектов и их расположение влияют».
Конечно. Попробую что‑то изобразить.
Если я ставлю галочку вот так, ей плохо здесь стоять, потому что непонятно, к чему она относится, потому что у неё и слева, и справа воздух:
Если я её начну явно куда‑то прижимать, ей уже становится гораздо лучше. Но в целом по ощущениям здесь тоже воздух бесит:
Галочку, может быть, лучше ставить как‑нибудь по центру, но с воздухом, и всё выглядит гораздо приятнее:
Мне нравится сравнивать правила вёрстки, особенно правило якорных объектов и правило внутреннего и внешнего, с физическими силами. Давайте представим себе металлический шарик, который мы берём и в природе. У нас есть гравитация и какая‑нибудь сила магнетизма. Давайте представим себе металлический шарик, который мы бросаем. И под действием силы гравитации он упадёт на землю. Но если мы возьмём и над шариком поставим очень мощный магнит, то в этот момент шарик в обход силы гравитации полетит наверх к магниту.
Вот то же самое и с правилами вёрстки. Очень часто бывает так, что одно правило побеждает другое. Просто нам подсказывает, что если здесь последовать, скажем, правилу якорных объектов, то станет лучше, чем если следовать правилу внутреннего и внешнего.
Далеко ходить не надо. Мы с вами видели вот эту картинку, когда нам правило модульной вёрстки позволило нарушить правило внутреннего и внешнего и тем не менее сохранить логику и связь между элементами. Хотя, казалось бы, здесь всё друг к другу как‑то прилипло:
Точно так же и с якорными объектами. В принципе, очень часто бывает так, что они нам подсказывают, что можно где‑то что‑то нарушить. Это особенно часто бывает, когда вы делаете какой‑то замкнутый формат, типа визитки или какого‑то банера, или есть пример икеевской батарейки:
Если присмотреться, она вся сделана по правилам якорных объектов. Блок слева, иконки справа по углам. И вот этот отступ от краёв существенно меньше, чем отступ между объектами, но проблемы не возникает. Для нас это выглядит вполне себе эстетично и понятно.
Понять, когда что использовать, как раз помогает оглядка на здравый смысл. Сначала берёте и делаете всё в максимальном соответствии с правилами, скажем, с правилом внутреннего и внешнего, а потом анализируете.