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% та економить бюджет замовника — в середньому на значну суму на одному проекті.

Чому 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% (це дало додатковий дохід). Конкурентний розбір — не «подивилися красиві сайти», а структурний аналіз: навігація каталогу, кількість кроків до чекауту, робота фільтра на мобільних.

Прототипування

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

• 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 робочий день. Отримайте консультацію — зв'яжіться з нами. Замовте проектування інтерфейсу під ключ: від досліджень до фінальних макетів.