August 8, 2023

Самая простая в использовании система отступов

У вас есть вопрос: как не запутаться в системе отступов самому и не дать в них запутаться фронтендеру? А если такого вопроса нет, то скорее всего вы уже запутались, просто не осознаете этого.

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

Для чего нужны фиксированные размеры в макете интерфейса.

Мы задаем фиксированные размеры в макете, так как не хотим каждый раз придумывать новые числа. Нужно от чего-то отталкиваться. На данный момент идеальное число — это 4 пикселя. Оно лучше чем 5, ведь оно делится на 2 до получения отступа даже в 1 пиксель.

4х4 делится на 2 до 1 пикселя, а 5 на 5 — нет

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

Второе требование приходит со стороны разработки. Если все отступы заранее заданы и есть система, то даже если дизайнер ошибется в макете и поставит вместо 16px 15.5 — фронтендер сверстает по гайдлайну 16 пикселей, так как он работает в заданной системе отступов.

Получается, что отступы в первую очередь вносят определенность в работу дизайнера и верстальщика. Но тут есть проблема — все числа кратные 4 это все равно очень много.

Ряд отступов кратный 4. И это ещё мало, отступов может быть гораздо больше.

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

Первые 2 группы которые нам предстоит определить берутся опять из терминологии фронтенд разработки. Есть внутренние отступы — padding и внешние — margin.

Paddings. Отступы внутри контейнера.

Для паддингов я обычно выбираю нижние значения

С паддингами все достаточно просто. Это отступы внутри любого контейнера от его границ. Возможно вам потребуется несколько, так как контейнеры бывают разных размеров и с разным наполнением. На картинке выше я взял 4 числа, которые буду использовать для паддингов (4,8,16,24)

Не путайте паддинги с правилом внутреннего и внешнего отступа. Паддинги это именно отступы от границ контейнера, а не все отступы внутри группы.

Margins. Внешние отступы.

Для марджинов можно выбрать все значения, так как отступы между блоками могут быть любыми

Вот с ними не всё так просто. В фигме марджинов просто нет. Вместо них есть просто отступы от одного объекта до другого.

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

По сути, чтобы сделать список как в макете каждый элемент должен находиться в контейнере с параметром «margin bottom:8px». При создании дизайна мы вообще об этом не думаем и просто задаем отступы.

Для разработчика отступы в списке задаются марджинами — свойствами объекта. Дизайнер видит отступы скорее как пустое пространство между объектами.

Как же быть с этими внешними отступами? Просто помнить, что в итоге они будут не отдельными объектами в макете, а частью соседних контейнеров.

И так, у нас сейчас есть 2 группы отступов.

Паддинги — отступы внутри от границ контейнера

Марджины — отступы между элементами

Но этого не достаточно, так как марджины можно разделить на 2 группы. Одно дело отступы между блоками — они могут быть достаточно крупными, другое дело отступы внутри карточки или между пунктами меню.

Поэтому их стоит разбить на подгруппы и это снова поможет нам при разработке макета и верстке.

Теперь у нас есть:

  1. Паддинги
  2. Внешние марджины
  3. Внутренние марджины

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

Дизайнхак, который ускоряет работу.

Мы так заморачиваемся для того, чтобы помочь себе в выборе нужных отступов и в дальнейшем тратить меньше времени. Чтобы не думать каждый раз какой из отступов выбрать — можно задать в каждой категории название «base» или «default» который можно брать не думая.

В каждой категории задано значение «Base», это отступ который я буду брать по умолчанию. Также для удобства называю остальные значения, так как в названиях ориентируюсь проще, чем в цифрах

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

Мы забыли про один параметр. Это межколонник (Gutter). Когда нужно расставить элементы в ряд нам не обойтись без этого отступа. Его нужно выделить в отдельную категорию, чтобы не искать среди прочих.

Размер межколонника зависит от колонок, которыми вы пользуетесь в макете

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

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement — подписывайтесь!

Автор – Прагматичный дизайнер