Самая простая в использовании система отступов
У вас есть вопрос: как не запутаться в системе отступов самому и не дать в них запутаться фронтендеру? А если такого вопроса нет, то скорее всего вы уже запутались, просто не осознаете этого.
В этом тексте поделюсь тем как я пришел к системе отступов, которую использую на крупных проектах и на чем она основана. А в конце текста будет дизайнхак, который ускорит время работы над каждым проектом в разы.
Для чего нужны фиксированные размеры в макете интерфейса.
Мы задаем фиксированные размеры в макете, так как не хотим каждый раз придумывать новые числа. Нужно от чего-то отталкиваться. На данный момент идеальное число — это 4 пикселя. Оно лучше чем 5, ведь оно делится на 2 до получения отступа даже в 1 пиксель.
Мы не хотим, каждый раз думать какое число задать в отступе. И макет станет гораздо приятнее если все отступы кратны одному числу — получается некий ритм и повторяемость пропорций.
Второе требование приходит со стороны разработки. Если все отступы заранее заданы и есть система, то даже если дизайнер ошибется в макете и поставит вместо 16px 15.5 — фронтендер сверстает по гайдлайну 16 пикселей, так как он работает в заданной системе отступов.
Получается, что отступы в первую очередь вносят определенность в работу дизайнера и верстальщика. Но тут есть проблема — все числа кратные 4 это все равно очень много.
Делая гайдлайн с отступами важно не просто указать все имеющиеся, но и разбить их на категории. Так как в любом макете есть ограниченное количество ситуаций где они используются.
Первые 2 группы которые нам предстоит определить берутся опять из терминологии фронтенд разработки. Есть внутренние отступы — padding и внешние — margin.
Paddings. Отступы внутри контейнера.
С паддингами все достаточно просто. Это отступы внутри любого контейнера от его границ. Возможно вам потребуется несколько, так как контейнеры бывают разных размеров и с разным наполнением. На картинке выше я взял 4 числа, которые буду использовать для паддингов (4,8,16,24)
Не путайте паддинги с правилом внутреннего и внешнего отступа. Паддинги это именно отступы от границ контейнера, а не все отступы внутри группы.
Margins. Внешние отступы.
Вот с ними не всё так просто. В фигме марджинов просто нет. Вместо них есть просто отступы от одного объекта до другого.
В чем разница? Разница в том, что в фронтенде понятие внешнего отступа работает по принципу паддинга. Т.е. любой объект может иметь разный отступ в любую сторону. Отступ — это не отдельный элемент макета, а свойство контейнера. Тут то и возникает путаница.
По сути, чтобы сделать список как в макете каждый элемент должен находиться в контейнере с параметром «margin bottom:8px». При создании дизайна мы вообще об этом не думаем и просто задаем отступы.
Как же быть с этими внешними отступами? Просто помнить, что в итоге они будут не отдельными объектами в макете, а частью соседних контейнеров.
И так, у нас сейчас есть 2 группы отступов.
Паддинги — отступы внутри от границ контейнера
Марджины — отступы между элементами
Но этого не достаточно, так как марджины можно разделить на 2 группы. Одно дело отступы между блоками — они могут быть достаточно крупными, другое дело отступы внутри карточки или между пунктами меню.
Поэтому их стоит разбить на подгруппы и это снова поможет нам при разработке макета и верстке.
Теперь у нас есть:
- Паддинги
- Внешние марджины
- Внутренние марджины
Эта группировка помогает по типу объекта в макете сразу задать тип отступа. Например если нужно задать отступ от границы карточки — беру паддинг не думая. Если между секциями — беру внешний марджин.
Дизайнхак, который ускоряет работу.
Мы так заморачиваемся для того, чтобы помочь себе в выборе нужных отступов и в дальнейшем тратить меньше времени. Чтобы не думать каждый раз какой из отступов выбрать — можно задать в каждой категории название «base» или «default» который можно брать не думая.
Теперь работа над отступами в макете будет выглядеть следующим образом: понимаем какая требуется категория, ставим дефолтный отступ. Если это плохо работает — ставим значение выше или ниже. Всё — вы гений. Казалось бы. Но нет!
Мы забыли про один параметр. Это межколонник (Gutter). Когда нужно расставить элементы в ряд нам не обойтись без этого отступа. Его нужно выделить в отдельную категорию, чтобы не искать среди прочих.
Вот теперь точно все готово, можно наслаждаться тем как просто стало работать. Ещё проще будет, если забить эту систему отступов в переменные, которые добавили в фигму и не вспоминать каждый раз какой отступ у вас базовый.
Спасибо, что уделили время этому материалу! Если понравился этот текст, то присоединяйтесь к телеграм каналу «Прагматичный дизайнер», там будет много авторской информации от дизайнера, который старается упростить и автоматизировать как можно больше в своей работе.
