Линейка + линейка
Если встретились две линейки, они должны превратиться в одну, это понятно:
![](https://awdee.ru/wp-content/uploads/2020/11/01.png)
У «Победы» плохо:
![](https://awdee.ru/wp-content/uploads/2020/11/Snimok-ekrana-2019-05-14-v-23.54.08-1024x996.png)
У «Озон-тревела» лучше. На самом деле здесь можно обойтись совсем без линеек, потому что элементы стоят компактно и выбранная дата подсвечена.
![](https://awdee.ru/wp-content/uploads/2020/11/ozon-travel-1024x672.png)
Даже если линейки — это часть стиля, стоит подумать о том, как сократить их число. Тарифы разделены двойной границей:
![](https://awdee.ru/wp-content/uploads/2020/11/814-1024x692.png)
Одинарная будет меньше рябить:
![](https://awdee.ru/wp-content/uploads/2020/11/816-2-1024x612.png)
В прошлых версиях «Хрома» каждый документ на панели загрузок был обведен отдельной рамочкой:
![](https://awdee.ru/wp-content/uploads/2020/11/chrome1-2-1024x129.png)
Сейчас остался только разделитель между документами:
![](https://awdee.ru/wp-content/uploads/2020/11/chrome2-1024x126.png)
Очень запущенный случай:
![](https://awdee.ru/wp-content/uploads/2020/11/s7-2-1024x506.png)
Линейка + плашка
Если встретились линейка и плашка, линейка должна исчезнуть, ведь у плашки есть своя граница:
![](https://awdee.ru/wp-content/uploads/2020/11/02.png)
Грязные стыковки часто встречаются в макетах, собранных из готовых блоков, например, в почтовых рассылках. Серая линейка не нужна, достаточно увеличенного отступа перед фотографией:
![](https://awdee.ru/wp-content/uploads/2020/11/airbnb2_outline-845x1024.png)
Последняя линейка лишняя, потому что под ней ничего нет:
![](https://awdee.ru/wp-content/uploads/2020/11/zen2.png)
Красивый ховер на «Гуглдоке». Плашка появляется — линейки исчезают:
![](https://awdee.ru/wp-content/uploads/2020/11/Snimok-ekrana-2020-03-31-v-11.59.21-1024x460.png)
Некрасивый ховер на «Пинтересте»:
![](https://awdee.ru/wp-content/uploads/2020/11/Snimok-ekrana-2020-04-19-v-17.58.08-1024x546.png)
Плашка + плашка
Стыковать плашки можно по-разному. Выбирайте способ, который больше подходит для вашей ситуации.
1. Плашки превращаются в линейку. Этот вариант самый чистый: линейка занимает намного меньше пикселей, чем плашка.
![](https://awdee.ru/wp-content/uploads/2020/11/05.png)
Так делают, когда плашки нужны только для разделения блоков, а не для их выделения. На следующем примере желтая плашка работает на выделение, она подсвечивает требования к загружаемым документам. Серые — разделяют документы между собой:
![](https://awdee.ru/wp-content/uploads/2020/11/skb1-1024x505.png)
Раз серые плашки выглядят одинаково, их функцию можно перенести на линейки:
![](https://awdee.ru/wp-content/uploads/2020/11/skb2-1024x505.png)
Великий переход от шестой к седьмой АйОС состоял в замене массивных плашек тоненькими линейками. Было и стало:
![](https://awdee.ru/wp-content/uploads/2020/11/720_ios7.jpg)
2. Плашки разного цвета или фактуры стыкуются вплотную. Дополнительный отступ необязателен:
![](https://awdee.ru/wp-content/uploads/2020/11/04.png)
Вариант неуниверсальный, но иногда подходит:
![](https://awdee.ru/wp-content/uploads/2020/11/www.behance.net2_-1024x724.png)
3. Плашки ставятся максимально близко друг к другу. Близко, конечно, понятие растяжимое. Конкретного значения нет, ориентируйтесь на отступы, принятые в вашей дизайн-системе.
![](https://awdee.ru/wp-content/uploads/2020/11/03.png)
Проблема больших отступов в том, что они создают эффект чересполосицы. Когда размер отступа сопоставим с размером элемента, макет превращается в зебру:
![](https://awdee.ru/wp-content/uploads/2020/11/faq1-1024x747.png)
С меньшими отступами верстка будет спокойнее:
![](https://awdee.ru/wp-content/uploads/2020/11/faq2-1024x596.png)
И конечно, плашки здесь можно заменить линейками:
![](https://awdee.ru/wp-content/uploads/2020/11/faq3-1024x596.png)
Пара красивых примеров с плотной стыковкой:
![](https://awdee.ru/wp-content/uploads/2020/11/megafon-1024x228.png)
![](https://awdee.ru/wp-content/uploads/2020/11/Rocket-mail-649x1024.png)
Прослойка
Бывает, что блоки должны выглядеть самостоятельными и не хочется ставить их слишком близко, но тогда появляется пустой этаж. У меня такая ситуация сложилась при проектировании сайта «Веб-стандартов». Анонсы статей, разделенные линейками, встретились с подвалом на серой плашке:
![](https://awdee.ru/wp-content/uploads/2020/11/web-standarts1-2-1024x756.png)
Возможное решение — добавить между этажами дополнительный элемент, так называемую прослойку. Это может быть полноценный блок или заголовок нижнего этажа над плашкой. Я добавил строчку с анонсом ближайшего мероприятия:
![](https://awdee.ru/wp-content/uploads/2020/11/web-standarts2-2-1024x881.png)
Ограничение ответственности
Это не золотые правила. Я рассказал о том, как делать аккуратно и не плодить лишних элементов. Иногда чистыми стыковками приходится жертвовать ради гайдлайнов или автоматизации верстки. К тому же, чисто не всегда значит хорошо (хотя обычно всё-таки значит). Если макет должен попасть в определенную стилистику, то и действовать нужно по правилам этой стилистики.
Обсуждение
Похожее
Как оформить иконку приложения и его скриншоты в сторе
Дизайн концертных билетов
Авиакомпания Вёржин Америка забацала новый интерфейс бронирования билетов. Очень трендово и удобно.