Розробка прототипів інтерфейсу сайту 1С-Бітрікс
Розробка прототипів інтерфейсу сайту 1С-Бітрікс
Один з найдорожчих сценаріїв у веб-розробці — коли дизайн сверстали, компоненти Бітріксу підключили, а потім з'ясовується: каталог не враховує трирівневу вкладеність розділів, фільтр працює лише з одним інфоблоком, а кошик не підтримує логіку «один товар — кілька одиниць виміру». Переробляти — дорого. Прототип на етапі до дизайну — дешево.
Прототипування для 1С-Бітрікс відрізняється від звичайного UI-прототипування: потрібно розуміти не лише користувацький сценарій, але й те, як конкретний компонент платформи реалізує цей сценарій.
Навіщо прототип саме для Бітрікс-проєктів
Бітрікс — платформа з сильними архітектурними обмеженнями. Комплексний компонент bitrix:catalog реалізує каталог строго визначеним чином: ієрархія розділів → список елементів → детальна сторінка. Відступити від цієї логіки можна, але це кастомна розробка з відповідною вартістю.
Прототип дозволяє зафіксувати: які інтерфейсні патерни реалізуються стандартними компонентами Бітріксу, а які потребуватимуть кастомної розробки. Це впливає на кошторис.
Другий аспект: CMS-залежні зони інтерфейсу. Хлібні крихти генерує bitrix:breadcrumb. Посторінкова навігація — bitrix:main.pagenavigation. Форма зворотного зв'язку — bitrix:main.feedback або bitrix:form.result.new. Прототип повинен відобразити, де в макеті живуть ці компоненти, які дані вони відображають, як виглядають їхні стани.
Рівні деталізації прототипу
Вайрфрейм (wireframe). Схематичне розташування блоків без візуального дизайну. Мета — зафіксувати структуру сторінок і навігацію. Для Бітрікс-проєктів тут важливо позначити зони компонентів: «тут буде bitrix:catalog.section з параметрами...».
Інтерактивний прототип. Клікабельні переходи між сторінками, імітація станів (порожній кошик / кошик з товарами, стан фільтра, помилки форм). Інструменти: Figma з інтерактивними компонентами, Axure для складної логіки станів.
Функціональний прототип. HTML-шаблон з реальними даними з Бітріксу, але без фінального дизайну. Застосовується рідко — при складних проєктах, де важливо перевірити взаємодію компонентів до старту дизайну.
Процес розробки прототипу
Аналіз сценаріїв використання. Для кожного типу сторінок фіксуємо користувацькі сценарії. Головна сторінка — 2–3 сценарії. Каталог — 5–8 сценаріїв: перегляд розділів, фільтрація, пошук, додавання до кошика, порівняння. Особистий кабінет — історія замовлень, зміна даних, повторне замовлення.
Інвентаризація шаблонів сторінок. Для Бітріксу типовий набір: головна, розділ каталогу, картка товару, результати пошуку, кошик, оформлення замовлення, статична сторінка (про компанію, контакти), особистий кабінет. Кожен шаблон — окремий прототип.
Компонентна розмітка. На вайрфреймі прямо вказуємо, який компонент Бітріксу забезпечує даний блок і які параметри йому потрібні. Це не документація — це межа відповідальності: «ось що платформа дає з коробки, ось що потрібно кастомізувати».
Стани інтерфейсу. Для кожного інтерактивного елемента прототипуємо стани: порожній стан (немає товарів у розділі), завантаження (skeleton-екрани), помилка (форма з валідацією), успіх. У Бітріксі стандартні компоненти мають шаблони для стану «немає результатів» — це потрібно врахувати в прототипі.
Мобільна версія. Окремий набір прототипів для мобільних breakpoint'ів. Особлива увага: фільтр на мобільному (висувна панель або окрема сторінка?), навігація по каталогу, форма оформлення замовлення.
Кейс: прототип інтернет-магазину промислових фільтрів
Клієнт — виробник фільтраційного обладнання. Каталог: 3 000 SKU, складні технічні характеристики (тиск, температура, матеріал, типорозмір), підбір за параметрами — ключова функція сайту.
До прототипування команда припускала: «зробимо стандартний каталог з розумним фільтром Бітріксу». Після аналізу з'ясувалося: логіка підбору за параметрами вимагає залежних фільтрів (вибір типу фільтра звужує доступні значення типорозміру) — стандартний bitrix:catalog.smart.filter не підтримує залежні фільтри з коробки.
Прототип зафіксував два варіанти:
- Стандартний фільтр без залежностей — дешево, але UX гірший.
- Кастомний компонент вибору за параметрами на Vue.js поверх API Бітріксу — дорожче, але вирішує задачу.
Замовник обрав другий варіант — прийняв усвідомлено, тому що побачив різницю на прототипі до старту дизайну, а не після здачі проєкту.
Прототип також виявив: сторінка «Сертифікати і документація» вимагає окремого інфоблоку з типами файлів і фільтрацією за продуктом — це не покривається стандартними компонентами документів.
Інструменти і формати
Figma — стандарт для вайрфреймів і інтерактивних прототипів. Дозволяє працювати спільно, коментувати, версіонувати. Результат передається дизайнеру як база для візуального дизайну.
Для документування компонентного складу сторінок — таблиця або окремий шар у Figma з анотаціями: компонент → параметри → кастомізація.
Терміни
Прототип для стандартного інтернет-магазину на Бітріксі (7–10 типів сторінок, мобільна версія) — 10–18 робочих днів. Складні проєкти з нестандартними сценаріями (підбирач, конфігуратор, особистий кабінет з розширеними функціями) — 20–35 днів.