<aside> ℹ️ Примерное время на прочтение: 10 минут. Не забывайте о полезных ссылках для самостоятельного изучения темы.

</aside>

Отступы (spacing, спейсинг) — это основа построения элементов продуктового дизайна и всего интерфейса в целом. С помощью отступов в продуктовом дизайне организуется пространство интерфейсов, создаётся упорядоченность, иерархия, соподчинённость.

Внешний отступ (margin, марджин) — это расстояние, на которое один объект толкает другой, то есть область за пределами элемента. Внутренний отступ (padding, паддинг) — это внутреннее расстояние от контура элемента до его внутренних составных частей.

Основным правилом применения отступов является правило близости (правило внутреннего и внешнего): внешние отступы от объекта должны быть больше отступов внутри этого объекта.

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

Система отступов нужна для визуальной иерархии контролов и иных элементов интерфейса. Все значения отступов должны делиться на 2. Минимальный стандартный шаг — 4px.

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

Отдельно следует отметить паддинги внутри элементов интерфейса (контролов). Существуют устоявшиеся размеры компонентов, который по той или иной причине были приняты за стандарт. Например, возьмём кнопку высотой 52px и текст в ней размером 16px с межстрочным интервалом 24px. При таких размерах верхний и нижний паддинги в кнопке будут равны 14px. То есть при использовании фиксированной ширины элемента, допускается отклонение от заданной системы отступов.

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