Каждый новый раздел каталога выглядит немного по-своему: кнопки то зелёные, то салатовые, отступы разные, карточка товара на акции не похожа на карточку в категории. По отдельности мелочи, но вместе они рассыпают витрину, тормозят разработку и путают покупателя. А когда приходит время редизайна, оказывается, что «фирменный зелёный» прописан в двух сотнях мест и правится вручную неделю.
Дизайн-система решает ровно эту проблему: делает интерфейс магазина единым, а изменения — быстрыми и предсказуемыми. В этой статье разберём, из чего она состоит, как связать её с компонентами 1С-Битрикс и как собрать по шагам, не увязнув в бесконечной документации. Если витрина растёт, а её поддержка отнимает всё больше сил, поможет и аудит и оптимизация системы на 1С.
Коротко
- Дизайн-система — это токены, компоненты, правила и документация, синхронизированные между макетом и кодом.
- Фундамент — дизайн-токены (цвет, отступы, шрифты) в виде CSS-переменных в шаблоне сайта.
- В 1С-Битрикс система живёт в шаблонах компонентов: каталог, корзина, формы верстаются из общего UI-kit.
- Стартуйте с минимума под текущие задачи и наращивайте; главное — назначить владельца и держать синхронизацию.
Что такое дизайн-система магазина
Дизайн-система — это не картинка с кнопками и не документ с правилами по отдельности, а связный набор из четырёх слоёв: токены (базовые значения дизайна), компоненты (готовые элементы интерфейса), правила их использования и документация. Ключевое слово — «связный»: макет в Figma, реальная вёрстка и шаблоны компонентов на сайте описывают один и тот же интерфейс и меняются согласованно.
Для интернет-магазина это означает, что карточка товара, кнопка «В корзину», поле поиска, фильтр и форма заказа существуют в одном экземпляре — как переиспользуемые блоки, а не как отдельные вёрстки на каждой странице. Новый раздел собирается из этих блоков, а не рисуется заново. Именно поэтому дизайн-система экономит время не только дизайнеру, но и разработчику, и контент-менеджеру.
Зачем она интернет-магазину
Магазин — это не пять статичных страниц, а живая витрина, которая постоянно меняется: новые категории, акции, лендинги под товарные группы, сезонные блоки. Без единой системы каждое изменение — риск рассинхрона. Дизайн-система даёт три ощутимых выигрыша.
- Скорость. Новый раздел или промо собирается из готовых компонентов за часы, а не за дни вёрстки с нуля.
- Консистентность. Кнопки, отступы и типографика одинаковы по всему сайту — витрина выглядит цельной и вызывает доверие.
- Дешёвый редизайн. Смена фирменного цвета или скруглений — правка нескольких токенов, а не ручной обход всего кода.
Есть и косвенный эффект на конверсию: единообразный, предсказуемый интерфейс снижает когнитивную нагрузку покупателя. Он не тратит внимание на то, чтобы каждый раз заново понимать, где здесь кнопка заказа. Про смежные приёмы работы с конверсией мы пишем в других материалах рубрики, а системную настройку процессов закрывает автоматизация на 1С.
Из чего состоит система
Удобно представлять дизайн-систему как пирамиду: снизу — базовые значения, выше — простые элементы, ещё выше — сложные блоки и целые шаблоны страниц. Каждый уровень опирается на предыдущий.
| Уровень | Что входит | Пример для магазина |
|---|---|---|
| Токены | Цвета, отступы, шрифты, радиусы, тени | --color-accent, --space-16 |
| Атомы | Базовые элементы | Кнопка, поле, бейдж, иконка |
| Молекулы | Сборки из атомов | Карточка товара, поле поиска |
| Блоки | Крупные секции | Каталог, корзина, фильтр |
| Шаблоны | Компоновка страниц | Категория, карточка, оформление |
Такая иерархия помогает не хвататься сразу за «сделать красивую карточку», а идти снизу: сначала договориться о токенах и атомах, потом собирать из них молекулы и блоки. Тогда любое изменение внизу пирамиды автоматически прокатывается вверх по всем элементам.
Дизайн-токены: фундамент
Токены — это именованные переменные дизайна. Вместо конкретного «#1F9D6B» в коде живёт токен «--color-accent», вместо «16px» — «--space-16». Смысл в том, чтобы значение задавалось один раз и переиспользовалось везде. Тогда смена акцентного цвета или базового отступа — правка одной строки.
В 1С-Битрикс токены удобнее всего оформить как CSS-переменные в отдельном файле, который подключается в общем шаблоне сайта (`template_styles.css` или отдельный `tokens.css`). Далее все компоненты — и штатные, и кастомные — используют эти переменные вместо жёстких значений.
- Цвета. Акцент, фон, текст, границы, состояния (успех, ошибка, предупреждение).
- Отступы. Шкала на основе базовой единицы (4 или 8 px), чтобы верстальщики не изобретали произвольные значения.
- Типографика. Семейства, размеры, межстрочные интервалы, начертания.
- Радиусы и тени. Единые скругления карточек и кнопок, набор теней для уровней.
Библиотека компонентов витрины
Компоненты — это переиспользуемые элементы интерфейса, из которых собираются страницы. Для магазина есть базовый набор, который встречается практически везде и потому должен быть в системе в первую очередь.
- Кнопки. Основная («В корзину», «Оформить»), вторичная, ссылка-действие, состояния disabled и loading.
- Карточка товара. В сетке категории, в слайдере «похожие», в блоке акций — единый шаблон с вариантами.
- Поля форм. Ввод, селект, чекбокс, поле поиска с подсказками, сообщения об ошибке.
- Бейджи и метки. «Хит», «Скидка», «Нет в наличии», статус заказа.
- Уведомления. Тосты, сообщения об успехе и ошибке при добавлении в корзину.
Каждый компонент описывается один раз и переиспользуется. Если карточка товара нужна в трёх местах с мелкими отличиями — это варианты одного компонента, а не три отдельные вёрстки. Так вы избегаете ситуации, когда акционная карточка «отстаёт» от обычной после очередной правки.
Связь с компонентами 1С-Битрикс
Здесь дизайн-система магазина на Битрикс отличается от абстрактного UI-kit: витрину рисуют штатные компоненты платформы, и система должна жить именно в их шаблонах. Каталог выводит `catalog.section` и `catalog.element`, корзину — `sale.basket.basket`, формы — компоненты веб-форм или заказа. Каждый из них имеет шаблон компонента (папка `template`), где и находится HTML и подключение стилей.
Практически это выглядит так: вы кастомизируете шаблоны компонентов под свой UI-kit, а внутри них используете токены и классы из дизайн-системы вместо дефолтной вёрстки Битрикса. Карточка товара в `catalog.section` верстается тем же классом карточки, что и в блоке «похожие», кнопки корзины — общей кнопкой из системы.
- Копируете шаблон компонента. Не правьте стандартный шаблон — сделайте свой в шаблоне сайта и работайте в нём.
- Заменяете вёрстку на классы UI-kit. Дефолтные обёртки Битрикса заменяете разметкой своих компонентов.
- Подключаете токены. Стили компонента используют CSS-переменные вместо жёстких значений.
Если для магазина нужны нестандартные блоки, их часто оформляют как собственные компоненты. О том, как их правильно проектировать, — в статьях про разработку модуля для Битрикс и работу с D7 и ORM: аккуратная архитектура компонентов напрямую влияет на то, насколько легко держать их в единой дизайн-системе.
Типографика, сетка и отступы
Типографика и сетка — часто недооценённая часть системы, хотя именно они создают ощущение аккуратности. Договоритесь о шкале размеров текста (заголовки, подзаголовки, основной текст, подписи) и не отступайте от неё. Произвольные «16.5px тут, 15px там» — верный признак отсутствия системы.
Сетка задаёт колонки и максимальную ширину контента, отступы — вертикальный ритм между блоками. Базовая единица (обычно 4 или 8 px) и шкала кратных ей значений избавляют от «пиксель туда, пиксель сюда». Для магазина это особенно важно в каталоге: карточки в сетке должны идеально выравниваться при любом числе колонок и на любом экране.
Состояния, доступность, адаптив
Компонент — это не только его вид «по умолчанию». Для каждого элемента опишите состояния, иначе на боевом сайте они появятся стихийно и вразнобой.
- Состояния кнопок и полей. Наведение, фокус, нажатие, недоступность, загрузка, ошибка.
- Пустые и загрузочные состояния. Как выглядит пустая корзина, категория без товаров, карточка во время подгрузки цены.
- Доступность. Контраст текста, видимый фокус для клавиатуры, корректные alt и aria — это не «для галочки», а требование к качеству витрины.
- Адаптив. Как компоненты перестраиваются на планшете и телефоне; для магазина мобильная витрина часто главная по трафику.
Документация и правила
Система без документации живёт ровно до ухода автора. Документация не обязана быть громоздкой: достаточно, чтобы для каждого компонента было понятно, как он выглядит, где применяется и как не надо его использовать. Хороший минимум — живая страница с примерами компонентов прямо в вёрстке, а не только картинки в Figma.
Отдельно опишите правила: когда основная кнопка, а когда вторичная; какой отступ между секциями; как называть новые токены. Эти договорённости важнее красоты — именно они не дают системе расползтись, когда над сайтом работают несколько человек.
Как собрать пошагово
Собирать систему лучше итеративно, под реальные задачи витрины, а не «идеально и на будущее». Практичная последовательность такая:
- Аудит текущей витрины. Соберите все варианты кнопок, карточек, полей, что есть на сайте, — и увидите масштаб рассинхрона.
- Зафиксируйте токены. Цвета, отступы, шрифты, радиусы вынесите в CSS-переменные шаблона сайта.
- Соберите атомы. Кнопки, поля, бейджи — по одному экземпляру каждого, на токенах.
- Соберите ключевые молекулы и блоки. Карточка товара, поиск, корзина, фильтр — самое частое в магазине.
- Внедрите в шаблоны компонентов Битрикс. Перенесите UI-kit в шаблоны `catalog.*`, `sale.basket.*`, форм.
- Опишите правила и примеры. Живая страница компонентов плюс короткие правила использования.
- Назначьте владельца. Человек, который следит за целостностью и принимает новые элементы в систему.
Такой подход даёт результат уже после третьего-четвёртого шага: витрина становится заметно ровнее, а новые задачи — быстрее. Настройку сквозных бизнес-процессов вокруг витрины при этом закрывает автоматизация продаж и склада на 1С.
Поддержка и версионирование
Дизайн-система — не разовый проект, а живой продукт. Чтобы она не устарела через полгода, нужны версионирование и дисциплина. Изменения в компоненты вносятся осознанно, с пониманием, где они отзовутся, а обновления удобно привязать к общему процессу выкатки.
Здесь пригодится налаженный деплой: правки токенов и компонентов должны единообразно доезжать до боевого сайта, а не «докатываться руками» по FTP. Как выстроить такую доставку изменений, мы разбираем в материалах про CI/CD и деплой в Битрикс и инфраструктуру на BitrixVM: стабильная выкатка — условие того, что дизайн-система на сайте всегда соответствует своей документации.
Частые ошибки
- Система в Figma без связи с кодом. Макет красивый, но сайт живёт своей жизнью — рассинхрон нарастает с каждой правкой.
- Жёсткие значения вместо токенов. Цвета и отступы прописаны руками, и редизайн снова превращается в ручной обход всего кода.
- Дубли компонентов. Три версии карточки товара под три раздела вместо одного компонента с вариантами.
- Правка стандартных шаблонов Битрикса. Изменения затираются при обновлении; работать нужно в своих шаблонах компонентов.
- Нет владельца. Никто не следит за целостностью, и через полгода система расходится с сайтом.
- Игнор состояний и адаптива. Компоненты описаны только в «идеальном» виде, а ошибки и мобильная вёрстка появляются стихийно.
- Перфекционизм на старте. Полгода собирают «идеальную систему на будущее» вместо минимума под текущие задачи.
Чек-лист внедрения
- Токены вынесены. Цвета, отступы, шрифты, радиусы — в CSS-переменных общего шаблона сайта.
- Атомы собраны. Кнопки, поля, бейджи существуют в одном экземпляре и используют токены.
- Ключевые блоки готовы. Карточка товара, поиск, корзина, фильтр собраны из атомов.
- Внедрено в компоненты Битрикс. Шаблоны `catalog.*`, корзины и форм верстаются из UI-kit, стандартные шаблоны не тронуты.
- Состояния описаны. Наведение, фокус, ошибка, загрузка, пустые состояния — для всех интерактивных элементов.
- Адаптив и доступность. Компоненты перестраиваются на мобильном, контраст и фокус в порядке.
- Документация и владелец. Есть живая страница компонентов, правила использования и ответственный за систему.
- Обновления доезжают. Правки токенов и компонентов выкатываются через отлаженный деплой, а не вручную.
Вывод
Дизайн-система для интернет-магазина — это способ сделать витрину единой, а её развитие — быстрым и дешёвым. В основе лежат токены, из них собираются компоненты, компоненты живут в шаблонах штатных элементов 1С-Битрикс, а правила и документация держат всё вместе. Такая система окупается уже при первом расширении каталога или редизайне блока.
Не гонитесь за идеалом на старте: соберите токены и десяток ключевых компонентов под текущие задачи, внедрите их в шаблоны каталога и корзины, назначьте владельца — и наращивайте по мере роста магазина. Тогда витрина будет выглядеть цельно, разработка ускорится, а редизайн перестанет быть болью.
