Выравнивание и отступы

Выравнивание и отступы — это визуальный клей, который соединяет элементы в структуру. Интерфейс без чёткой системы отступов
 и выравнивания выглядит хаотично, «прыгает» и теряет ощущение аккуратности. Это одна из главных причин того, почему экраны выглядят «по-любительски».

Основные принципы

Сетка

Рекомендуется использовать 4pt или 8pt-сетку. Все отступы, размеры и элементы должны соответствовать ей. Например: 4, 8, 12, 16, 20, 24, 28, 32
и т.д.

Единая логика

Если в карточке между заголовком и текстом 8pt, не делай в другой карточке 10pt. Система должна быть предсказуемой.

Выравнивание по краю

Левый край — основной якорь. Элементы, выровненные по левому краю, считываются быстрее.

Центровка — только по делу

Центровка по центру уместна для заглушек, сообщений или пустых экранов. Для списков и текста — только левое выравнивание.

Невидимые линии

Представляй себе, что между блоками и текстами проходят невидимые линии — они должны совпадать. Чем больше выравниваний —
тем аккуратнее интерфейс.

Внутренние и внешние отступы

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