Отступы

Система отступов

В основе системы отступов дизайн-системы Сеченовского университета лежит модуль в 8 px. Это означает, что большинство интервалов и отступов в интерфейсе должны быть кратны 8 пикселям. Такой подход обеспечивает ритм, порядок и визуальную согласованность между всеми элементами интерфейса.

Базовый модуль: 8 px. Используется как основной шаг для вертикальных и горизонтальных отступов.
Допустимые значения отступов: 8 px, 16 px, 24 px, 32 px, 40 px, 48 px, и т.д. (шаг 8px). Эти значения являются предпочтительными для создания интервалов между блоками контента, компонентами, элементами управления и текстом.
Исключения: В крайних случаях, когда требуется более тонкая настройка, допускается использование отступов, кратных 4 px. Однако, следует стремиться к использованию 8-ми пиксельного модуля в большинстве ситуаций. Примеры исключений могут включать в себя небольшие внутренние отступы внутри компонентов, где излишне большой отступ (8px) может нарушить компактность.

Применение системы отступов:

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

Преимущества использования модульной сетки и системы отступов:

Визуальная консистентность: Обеспечивают единый стиль и узнаваемость всех цифровых продуктов Сеченовского университета.
Улучшенная читабельность и восприятие контента: Упорядоченная структура и достаточное количество "воздуха" в интерфейсе делают контент более доступным и легким для восприятия.
Ускорение процесса проектирования и разработки: Наличие четких правил и гайдлайнов упрощает и ускоряет работу дизайнеров и разработчиков, снижает количество ошибок и необходимость в принятии ad-hoc решений.
Масштабируемость и адаптивность: Модульная сетка и система отступов обеспечивают гибкость и масштабируемость дизайн-системы, позволяя эффективно адаптировать интерфейсы под различные устройства и разрешения экрано