UI-kit на Vue.js для 1С-Битрикс: разработка и внедрение под ключ

Когда на Битрикс-проекте работает команда из 5+ разработчиков, а каталог насчитывает десятки тысяч товаров, интерфейс начинает напоминать лоскутное одеяло: кнопки в разных шаблонах выглядят по-разному, модальные окна реализованы тремя способами, а уведомления — четырьмя?

Каждый новый компонент пишется с нуля, потому что общего стандарта нет. Мы накопили опыт решения этой проблемы в десятках проектов — и знаем, что UI-kit на Vue.js с единым API и документацией устраняет хаос.

Разработка UI-kit под ключ позволяет сократить время на создание новых фич, улучшить консистентность интерфейса и упростить онбординг новых разработчиков. Ниже — как мы проектируем и разрабатываем UI-kit на Vue.js для проектов 1С-Битрикс, с реальным кейсом и этапами работы.

Что такое UI-kit и зачем он нужен в Битрикс-проекте

UI-kit — это библиотека переиспользуемых Vue-компонентов с единым визуальным языком. В неё входят базовые элементы: кнопки, поля ввода, модальные окна, уведомления, иконки, типографика. Каждый компонент инкапсулирует верстку, стили и поведение. В контексте 1С-Битрикс это особенно важно, потому что каждый шаблон компонента может писаться разными разработчиками, и без UI-kit согласованность теряется.

Архитектура библиотеки

Структура типового UI-kit:

/local/js/ui-kit/
├── src/
│   ├── components/
│   │   ├── UiButton.vue
│   │   ├── UiInput.vue
│   │   ├── UiModal.vue
│   │   ├── UiToast.vue
│   │   └── ...
│   ├── composables/
│   │   ├── useModal.js
│   │   └── useToast.js
│   ├── tokens/
│   │   └── design-tokens.css
│   └── index.js
├── dist/
└── vite.config.js

Библиотека собирается через Vite в формате UMD:

// vite.config.js
export default {
    build: {
        lib: {
            entry: './src/index.js',
            name: 'BitrixUIKit',
            formats: ['umd'],
            fileName: 'ui-kit',
        },
        rollupOptions: {
            external: ['vue'],
            output: { globals: { vue: 'Vue' } }
        }
    }
}

Дизайн-токены и CSS-переменные

Все цвета, отступы, радиусы и тени хранятся как CSS-переменные. Компоненты используют токены, а не хардкод. Это позволяет менять тему без изменения компонентов:

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --radius-button: 6px;
  --shadow-modal: 0 20px 60px rgba(0,0,0,.2);
}

Типовой набор компонентов для e-commerce:

Какие этапы включает разработка UI-kit?

Вот пошаговая инструкция для интеграции UI-kit в проект:

1. Проведите аудит существующего UI — инвентаризация всех элементов, выявление дублей.
2. Спроектируйте дизайн-систему — зафиксируйте токены, состав компонентов, их варианты и состояния.
3. Разработайте компоненты на Vue 3 с Composition API, типизация props, инкапсуляция логики.
4. Настройте сборку через Vite в UMD-формат с внешней зависимостью Vue.
5. Интегрируйте библиотеку в шаблон Битрикса с помощью AddHeadScript и монтируйте в нужных точках.

Интеграция с шаблоном:

use Bitrix\Main\Page\Asset;
$asset = Asset::getInstance();
$asset->addJs('/local/js/ui-kit/dist/ui-kit.umd.js');
$asset->addCss('/local/js/ui-kit/dist/ui-kit.css');

Как говорится в документации Vue?

js, компоненты — это переиспользуемые экземпляры, и UI-kit реализует этот принцип на практике.

Почему стоит инвестировать в UI-kit?

UI-kit решает три ключевые проблемы. Первая — скорость разработки: новый шаблон собирается из готовых компонентов, а не пишется с нуля. Вторая — консистентность: пользователь видит одинаковые кнопки и формы на всём сайте, что повышает доверие. Третья — лёгкий онбординг: новый разработчик знакомится с библиотекой компонентов за пару дней, а не разбирается в 12 вариантах одной кнопки. Наш опыт показывает: после внедрения UI-kit время создания нового функционала сокращается на 30–50%, а количество багов, связанных с интерфейсом, падает практически до нуля. Библиотека сопровождается документацией (минимум README, в крупных проектах — Storybook) и поддерживается в актуальном состоянии. За счёт переиспользования компонентов стоимость разработки нового функционального блока снижается вдвое.

Кейс: UI-kit для крупного интернет-магазина из нашей практики

Клиент — ритейлер бытовой техники с каталогом 25 000 SKU. Команда: 4 фронтенд-разработчика. Проблема: за долгое время сайт разрабатывался разными командами, в CSS накопилось 8 вариантов кнопки, 3 реализации модальных окон (jQuery, Bootstrap, кастомная), 2 варианта нотификаций.

Первый этап — аудит: собрали все уникальные UI-элементы со всего сайта. Получили 47 типов элементов, которые нужно унифицировать. Второй этап — проектирование: совместно с дизайнером зафиксировали дизайн-систему (токены, 24 компонента, их варианты и состояния). Третий этап — разработка: написали библиотеку на Vue 3 с Composition API, включили UiButton, UiInput, UiModal, UiToast, UiPagination, UiDropdown, UiLoader и другие. Четвёртый этап — миграция: заменили старые реализации на компоненты kit, начиная с новых шаблонов и самых «грязных» старых.

Результат: скорость разработки выросла вдвое, дизайн-ревью сократился с 2 часов до 30 минут, все новые фичи сразу вписываются в единую дизайн-систему. Срок внедрения — 6 недель. Vue.js компоненты разрабатываются в 2 раза быстрее, чем аналоги на jQuery — разница в скорости особенно заметна на сложных кастомных элементах.

Как мы работаем: процесс и сроки

Полный цикл для базового UI-kit (15–20 компонентов) — 6–10 недель. Для крупного проекта с 30–50 компонентами и Storybook — 8–14 недель.

Гарантии и опыт

Мы разрабатываем на 1С-Битрикс и Vue.js более 10 лет. Сертифицированные специалисты, десятки успешных внедрений UI-kit для ритейла, сервисов и корпоративных порталов. Предоставляем гарантию на компоненты 6 месяцев. Закажите разработку UI-kit для вашего проекта — получите консультацию по срокам и стоимости. Свяжитесь с нами для оценки вашего проекта — мы подготовим предложение по разработке UI-kit под ключ.

Полезные ресурсы: Vue.js.

Вступление

Первое, что мы делаем, получив макет от «чистого» дизайнера — смотрим, как он ляжет на bitrix:catalog.section и bitrix:catalog.element. В половине случаев нестандартный фильтр на макете означает переписывание bitrix:catalog.smart.filter с нуля. А это не 2 часа — это неделя. Поэтому мы проектируем интерфейс сразу под компонентную архитектуру Битрикс, а не адаптируем после. С нами вы получаете дизайн, который разработчик соберёт без костылей и переделок.

Редизайн на Битрикс часто упирается в одно и то же: данные приходят из 1С через CommerceML, а дизайнер этого не учитывает. Мы закладываем в макеты реальную структуру торгового каталога — свойства инфоблоков, типы цен, остатки по складам. Тогда карточка товара не ломается, когда появляется 15 характеристик и 4 цены. Это сокращает итерации согласования на 30% и экономит бюджет заказчика — в среднем на 50–80 тыс. руб на одном проекте.

Почему UX/UI для Битрикс требует особого подхода?

Дизайнер нарисовал карточку товара с тремя вкладками, кастомным конфигуратором и аккордеоном характеристик. Красиво. Потом разработчик открывает шаблон catalog.element и понимает: данные приходят из свойств инфоблока плоским списком, а связанные товары тянутся через CATALOG_ELEMENT_ID. Половину макета нужно перерисовать. Мы это знаем — поэтому рисуем то, что можно собрать без костылей.

Вот что мы закладываем на этапе дизайна:

• Компонентная сетка — интерфейс строится из реальных компонентов Битрикс: bitrix:catalog, bitrix:sale.basket.basket, bitrix:sale.order.ajax, bitrix:system.auth.form. Дизайнер знает, какие данные отдаёт каждый компонент и какие параметры у него есть. Это позволяет избежать доработок на стадии вёрстки. Как отмечает документация платформы, «Компонентная модель 1С-Битрикс позволяет строить интерфейсы из готовых блоков без дублирования логики».
• Визуальный редактор — контент-менеджер будет править контент через административную панель. Блочная структура, гибкие секции, управляемые баннеры — всё это продумывается до Figma.
• Данные из 1С — товары, цены типа BASE, RETAIL, остатки со складов приходят через CommerceML. Карточка товара учитывает реальный объём данных: 15 характеристик, 4 типа цен, остатки по 3 складам — а не идеальные три строчки из макета.
• Семантическая вёрстка — иерархия H1–H6, микроразметка Product/Offer, alt-тексты. Всё закладывается на этапе дизайна, потому что «допилить SEO потом» означает перевёрстывать шаблоны.

Типичные проблемы дизайна и их решения

Исследования до открытия Figma

Прежде чем рисовать — копаем в данные.

Мы формируем персоны и сценарии на основе Яндекс.Метрики (Вебвизор, тепловые карты), GA4 и интервью. Не абстрактные «мужчина 25-45 лет», а конкретные: «закупщик, который формирует заказ по артикулам из Excel за 10 минут». Это позволяет точнее проектировать прототипы.

При редизайне проводим UX-аудит текущего сайта: воронки конверсий, записи сессий, точки оттока. На одном проекте обнаружили, что 40% пользователей бросали корзину на шаге выбора доставки — потому что компонент sale.order.ajax рендерил 12 служб доставки без группировки. Переделали — конверсия выросла на 18% (это дало дополнительно 200 тыс. руб в месяц). Конкурентный разбор — не «посмотрели красивые сайты», а структурный анализ: навигация каталога, количество шагов до чекаута, работа фильтра на мобильных.

Прототипирование

Прототип проверяет логику до расхода бюджета на визуал.

• Wireframes — схемы ключевых страниц: главная, каталог (catalog.section), карточка (catalog.element), корзина (sale.basket.basket), чекаут (sale.order.ajax), личный кабинет. Определяем приоритет информации.
• Кликабельные прототипы — Figma с переходами, модалками, работой фильтров. Заказчик «трогает» сайт до начала разработки.
• Тесты с пользователями — модерируемые сессии с представителями ЦА. Проблему навигации дешевле поймать здесь, чем после вёрстки 40 шаблонов компонентов.

Пошаговый процесс проектирования UX/UI для Битрикс

1. Дизайн-аналитика — сбор данных Метрики, интервью, аудит текущего интерфейса. Выявляем точки оттока (если конверсия падает на этапе выбора доставки — видим это в воронке).
2. Прототипирование — wireframes + кликабельный прототип. Проверяем сценарии: поиск товара, добавление в корзину, оформление заказа. Итерации до утверждения.
3. Создание дизайн-системы — типографика, цвета, UI-компоненты, модульная сетка. Всё завязываем на компонентную модель Битрикс.
4. Дизайн ключевых страниц — макеты под все breakpoints (320–2560px). Учитываем реальные данные: свойства инфоблоков, типы цен, остатки.
5. Передача в разработку — Figma с Dev Mode, экспорт SVG/WebP/AVIF, документация по компонентам. Помогаем разработчику адаптировать шаблоны под новый дизайн.

Дизайн-система

Для каждого проекта собираем масштабируемую систему — единый словарь для дизайнеров и фронтенда.

• Типографика — шрифтовые пары, оптимизированные под кириллицу и веб-рендеринг. Размерная шкала, интерлиньяж, иерархия заголовков.
• Цвета — основные, акцентные, состояния (hover, active, disabled, error). Контрастность по WCAG 2.1 AA минимум.
• Модульная сетка — фиксированные отступы, консистентность от 320px до 2560px.
• UI-компоненты — кнопки, формы, карточки, таблицы, уведомления, иконки. Каждый — с вариантами состояний и адаптивными версиями.
• Документация — правила применения, чтобы новый дизайнер не «изобретал» стили. На практике без неё через полгода в проекте 4 оттенка серого и 3 варианта кнопки «Купить».

Что даёт дизайн-система для Битрикс?

Она ускоряет разработку интерфейса в 2–3 раза, потому что верстальщик получает готовые классы и отступы, а не угадывает их по макету. На одном проекте после внедрения дизайн-системы время на вёрстку новой страницы каталога сократилось с 5 дней до 1,5.

Что входит в работу

На выходе вы получаете:

• Figma-файл с дизайн-системой и макетами всех страниц (включая мобильные и планшетные версии).
• Интерактивный прототип для согласования и тестирования.
• Документацию по компонентам (стили, отступы, поведения).
• Доступы к файлам и финальные экспорты в SVG/WebP/AVIF.
• Рекомендации по доработке шаблонов Битрикс под новый дизайн.
• Пост-релизную поддержку (до 2 недель) — помогаем разработчику разобраться в макетах.

Мы — сертифицированные партнёры 1С-Битрикс с 15+ лет опыта. Гарантируем, что дизайн будет реализуем на вашей версии платформы. С нами работали более 50 интернет-магазинов и корпоративных порталов — от лендингов до маркетплейсов.

Mobile-first: не формальность, а порядок работы

Проектируем сначала мобильную версию, потом расширяем.

• Touch-friendly — минимум 44x44px для интерактивных элементов, достаточные отступы. Свайп для галереи, pull-to-refresh для каталога.
• Формы — автотип клавиатуры (inputmode="numeric" для телефона, type="email" для почты), маски ввода через IMask, автозаполнение через DaData. Каждое лишнее поле — минус к конверсии, это не теория, а то, что видно в воронках Метрики.
• Адаптивные изображения — разные ресайзы и кропы для мобильных/десктопных через <picture> и srcset. Art direction для баннеров — на мобильном не уменьшаем, а показываем другой кроп.

Как мы работаем в Figma?

• Структура файла — страницы: исследования, wireframes, UI-kit, макеты по breakpoints, анимации. Не каша, а навигируемый проект.
• Auto Layout — компоненты на Flexbox-логике, корректно тянутся при изменении контента. Разработчик видит в макете ту же модель, что будет в CSS.
• Variables и Variants — переменные для цветов и отступов, компоненты с вариантами состояний. Смена темы — переключение одной коллекции.
• Dev Mode — точные значения, экспорт SVG/WebP/AVIF, инспектирование CSS. Разработчик получает всё без «угадывания по пикселям».

Usability testing

Как мы измеряем эффективность дизайна?

• Модерируемые тесты — реальные пользователи выполняют задачи: найти товар, добавить в корзину, оформить заказ. Фиксируем, где спотыкаются.
• A/B-тесты — два варианта на живом трафике. Побеждает конверсия, а не мнение арт-директора.
• Эвристический аудит — по принципам Нильсена: видимость статуса, соответствие ожиданиям, единообразие, предотвращение ошибок.
• Доступность — контраст, клавиатурная навигация, alt-тексты, aria-метки. Не факультатив, а требование.

Конверсионный дизайн

• Визуальная иерархия — CTA, цены, акции выделены через размер, цвет, контраст. Взгляд идёт туда, куда нужно бизнесу — проверяется через eye-tracking или тепловые карты.
• Минимальное трение — сокращаем шаги до целевого действия. На одном проекте убрали обязательную регистрацию при чекауте — конверсия в заказ поднялась на 18%.
• Социальные доказательства — рейтинги, отзывы, кейсы, логотипы партнёров. Интегрированы в дизайн, а не прилеплены внизу страницы.
• Микроанимации — товар летит в корзину, форма подтверждает отправку. Направляют внимание и снижают тревожность при совершении действия.

Сроки и результаты

Оценим ваш проект за 1 рабочий день. Получите консультацию — свяжитесь с нами. Закажите проектирование интерфейса под ключ: от исследований до финальных макетов.