Разработка прототипов интерфейса сайта 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 дней.