Дневники дизайн-системы. Выпуск 3. Система отступов
Предыдущие выпуски:
Фундамент системы размеров — модуль, минимальная единица измерения, которой должны быть кратны высоты строк, отступы и поля. Обычно я использую в своих работах четырёхпиксельный модуль, не стал исключением и этот проект.
Базовый модуль — 4 пикселя.
Первым делом я разработал общую шкалу, которая содержит полный набор доступных для использования размеров. После поделил её на три подраздела: контент, секции и компоненты. В первых двух секциях сразу написал первую версию подсистемы размеров, для компонентов ограничился обозначением общих принципов.
Основная шкала
Я сделал несколько подходов к расчётам и в итоге остановился на следующем алгоритме.
В качестве стартовой линии взял высоту строки простого текста — 24 пикселя. Это число стало первым в растущем ряду. Каждое следующее посчитал по формуле: Xₙ = Xₙ₋₁ + 4 × fₙ , где x — размер, n — номер в ряду, f — число из ряда Фибонначи.
Получился следующий набор: 24, 28, 32, 40, 52, 72, 104, 156...
В ряд на убывание, относительно стартовых 24 пикселей, добавил все числа кратные четырём: 20, 16, 12, 8, 4.
Финальный ряд: 4, 8, 12, 16, 20, 24, 28, 32, 40, 52, 72, 104, 156...
Контент
Перед расчётом шкалы для контента я определился с абзацным отступом, базовым модулем для этой подсистемы.
Абзацный отступ — 8 пикселей.
Маргины для прочих стилей подобрал на глаз, выбирая из общей шкалы значения кратные восьми.
Стандартный абзац имеет одинарные отступы с обеих сторон.
Заголовки четвёртого и третьего уровня снизу получили одинарный отступ, сверху полуторный и двойной, соответственно.
Заголовок второго уровня снизу получил двойной отступ, сверху в два раза больший.
Заголовок первого уровня пятикратный отступ снизу и свободный сверху. Этот элемент на странице обычно один и часто располагается в самом верху там где верхний отступ задаст контейнер.
Блоки увеличенного текста (цитаты, тезисы), таблицы, изображения планирую отбивать с обоих сторон полуторными отступами.
Секции
Выбор отступов для секций начал с определения максимального интервала между разделами — 104 пикселя.
Следом прошёл по основной шкале и выбрал значения через одно. Получился следующий набор: 8, 16, 24, 32, 52, 104.
Для экранов мобильных устройств сдвинул линейку на шаг влево: 4, 12, 20, 28, 40, 72.
Компоненты
Даже простая дизайн-система состоит из множества компонентов, которые отличаются устройством и решаемыми задачами.
Пока компоненты не созданы, я не стал со старта строить стройную систему размерений для них, а ограничился декларацией общих принципов, которых буду придерживаться в работе.
Набор правил для дизайна компонентов
- Любой интервал соответствует общей шкале отступов. Потребность в большом количестве исключений является скорее поводом пересмотреть и доработать систему, нежели вносить в дизайн хаос.
- Каждый из компонентов имеет до трёх вариантов размера: стандартный, маленький и большой.
- В вытянутых элементах, имеющих визуальные границы (кнопки, инпуты) вертикальные поля меньше боковых. Допускается два варианта расчёта соотношения:
1. боковое поле в два раза больше вертикального;
2. боковое поле больше вертикального на фиксированную величину, которая едина в рамках группы компонентов. Например, у каждого размера поля формы боковой отступ больше вертикального на 4 пикселя.
- Колонка внутри блока не больше половины бокового поля. Например, интервал между иконкой и текстом в кнопке с боковым полем в 24 пикселя не может быть больше 12 пикселей. Отступать от этого правила допускается если интервал становится меньше 8 пикселей.
Пока всё.
В следующем выпуске планирую разобраться со структурными элементами страниц, контейнеры разные, строки, после чего можно будет начинать работать над компонентами.
Эта серия постов — описание процесса, который подразумевает эволюцию продукта. Поэтому если вы читаете пост спустя некоторое время после публикации, имейте ввиду, что это не документация, некоторые вещи в актуальной версии работы могут отличаться от описанного.Актуальную версию можно посмотреть:
Полный список записей серии смотрите по тегу #raw-alfa