Команда садится верстать новый магазин «по референсам», а через месяц выясняется, что карточка товара не вмещает оптовую цену и наличие по складам, фильтр не помещается на мобильном, а оформление заказа в четыре шага пугает покупателей. Каждая такая правка — это уже свёрстанный и подключённый к инфоблокам код, который приходится переделывать. Прототип в Figma существует ровно для того, чтобы поймать эти проблемы, пока их исправление стоит минуты, а не дни.
В этой статье — практический путь проектирования интернет-магазина под 1С-Битрикс: от карты сценариев и чёрно-белых wireframe до кликабельного макета, дизайн-системы и аккуратной передачи в вёрстку. Мы разберём, какие экраны и состояния нельзя пропускать и как связать макет с данными, которые придут из учётной системы. Если проект — это ещё и перестройка процессов, начать стоит с аудита и оптимизации 1С, чтобы интерфейс опирался на реальные данные.
Коротко
- Прототип ловит ошибки логики и навигации до вёрстки, когда правка стоит минуты, а не часы.
- Сначала user flow и wireframe, потом дизайн — структура важнее цвета на раннем этапе.
- Проектируйте состояния: пустая корзина, нет в наличии, ошибка формы, а не только «идеальный» экран.
- Компоненты Figma сопоставляйте с шаблонами компонентов Битрикса, а данные карточки — с обменом 1С.
Зачем прототип до вёрстки
Прототип — это дешёвая репетиция дорогой разработки. На макете вы двигаете блоки мышью, а в готовом магазине на 1С-Битрикс за каждым блоком стоит компонент, шаблон, вызовы к инфоблокам и торговому каталогу, кэш и вёрстка под три ширины экрана. Стоимость изменения растёт на порядок с каждым этапом: правка идеи — бесплатно, правка макета — минуты, правка вёрстки — часы, правка на боевом сайте — дни и риск.
Второе назначение прототипа — общий язык. Заказчик, дизайнер, верстальщик и программист смотрят на одни и те же экраны и договариваются до того, как написана первая строка кода. Прототип превращает размытое «хочу удобный магазин» в конкретные экраны и переходы, которые можно обсудить, утвердить и оценить в часах.
User flow: путь покупателя
Проектирование начинается не с рисования страниц, а с карты пути пользователя к цели. Для магазина базовый сценарий — «нашёл товар — выбрал вариант — положил в корзину — оформил заказ». Пока этот путь не описан, рисовать экраны рано: непонятно, какие из них вообще нужны и как они связаны.
Полезно расписать несколько типовых сценариев: покупатель, который знает товар и идёт через поиск; покупатель, который подбирает через каталог и фильтр; оптовый клиент, который заходит в личный кабинет и повторяет заказ. Для каждого — свой маршрут по экранам и точки, где человек может уйти. Именно эти уязвимые места потом проверяют на кликабельном прототипе.
Что даёт карта сценариев
- Полноту экранов. Видно, каких страниц не хватает, а какие лишние.
- Логику переходов. Понятно, откуда и куда пользователь попадает на каждом шаге.
- Точки отвала. Заранее видны места, где сценарий рвётся и покупатель может уйти.
Wireframe: скелет страниц
Wireframe — это чёрно-белая схема страницы без цвета, шрифтовых изысков и реальных картинок. Задача wireframe — расставить блоки по важности и проверить структуру: что видит пользователь первым, где кнопка «В корзину», как устроена сетка каталога. На этом этапе намеренно убирают всё декоративное, чтобы обсуждать логику, а не оттенок кнопки.
Работая в оттенках серого и прямоугольниках-заглушках, легче принимать структурные решения. Здесь решают, сколько шагов в оформлении заказа, где живёт умный фильтр, помещается ли в карточку весь нужный B2B-набор данных. Утверждённый wireframe становится каркасом, на который потом «надевают» дизайн.
Экраны магазина, которые проектируют
Не нужно рисовать все страницы сайта — достаточно ключевых экранов, из компонентов которых собираются остальные. Для интернет-магазина обязательный набор выглядит так.
| Экран | Что проектируем | Критичные детали |
|---|---|---|
| Главная | Первый экран, навигация, точки входа в каталог | Понятность за 5 секунд |
| Каталог | Сетка товаров, умный фильтр, сортировка | Фильтр на мобильном |
| Карточка товара | Галерея, цена, характеристики, «В корзину» | Варианты, наличие, B2B-цена |
| Корзина | Список позиций, количество, итог | Изменение и удаление |
| Оформление | Данные, доставка, оплата | Минимум шагов и полей |
| Личный кабинет | Заказы, повтор, данные клиента | История и повторный заказ |
Каждый из этих экранов в 1С-Битрикс обслуживается своим компонентом: список каталога, детальная карточка, компонент корзины, оформление заказа. Продумав экраны в Figma, вы фактически формулируете требования к настройке этих компонентов и их шаблонов.
Состояния, о которых забывают
Главная разница между красивым макетом и рабочим прототипом — состояния. «Идеальный» экран с товаром в наличии и заполненной корзиной рисуют все. А магазин живёт в состояниях, которые определяют реальный опыт покупателя.
- Пустая корзина. Что видит пользователь и куда его вести дальше.
- Товара нет в наличии. Кнопка «В корзину» недоступна, но есть «Сообщить о поступлении».
- Ошибка формы. Как подсвечивается незаполненное поле при оформлении заказа.
- Загрузка и пустая выдача. Фильтр не нашёл товаров — что показать вместо пустоты.
- Гость и авторизованный. Для B2B — скрытые цены гостю и оптовые цены после входа.
Дизайн-система и компоненты
Когда структура утверждена, собирают дизайн-систему: цвета, типографику, отступы, кнопки, поля ввода, карточки. В Figma это делают через компоненты и стили — единожды описанная кнопка используется на всех экранах, а её правка обновляет весь макет. Такой подход дисциплинирует дизайн и резко ускоряет и рисование, и последующую вёрстку.
Особенно важны дизайн-токены — переменные для цветов, размеров и отступов. Они напрямую ложатся в CSS-переменные вёрстки, поэтому дизайн-система в Figma и стили в шаблоне сайта говорят на одном языке. Компоненты Figma при этом стоит именовать так же, как компоненты и блоки в вёрстке, чтобы связь макета и кода была очевидной.
Кликабельный прототип в Figma
Кликабельный прототип — это экраны, связанные переходами, по которым можно «походить» как по настоящему сайту. В Figma переходы настраивают в режиме прототипирования: клик по товару открывает карточку, «В корзину» ведёт в корзину, «Оформить» — на страницу заказа. Так проверяется весь путь целиком, а не отдельные картинки.
Хороший прототип покрывает основные сценарии из user flow и ключевые состояния. Не нужно оживлять каждую мелочь — достаточно, чтобы человек мог пройти путь «каталог — карточка — корзина — оформление» и типовые ветки вроде «товара нет в наличии». Именно на таком прототипе проводят тестирование и презентуют решение заказчику.
Тестирование на пользователях
Кликабельный прототип нужен не для красоты, а чтобы проверить понятность на живых людях до вёрстки. Классика юзабилити: даже пять-семь человек выявляют большинство проблем навигации. Человеку дают задачу — «найдите и закажите вот такой товар» — и молча смотрят, где он путается.
- Сформулируйте задачи. Реальные сценарии: найти товар, оформить заказ, повторить прошлую покупку.
- Наблюдайте молча. Не подсказывайте — фиксируйте, где человек застрял или ошибся.
- Соберите паттерны. Проблема, повторившаяся у нескольких людей, важнее единичного мнения.
- Внесите правки в макет. Исправьте на прототипе и, при необходимости, прогоните ещё раз.
Один-два коротких раунда до вёрстки окупаются: вы входите в разработку с проверенным решением, а не ловите те же проблемы потом по метрикам и жалобам.
Передача макета в вёрстку под Битрикс
Финальный этап — аккуратная передача макета команде. В Figma для этого есть Dev Mode: верстальщик снимает отступы, цвета, размеры и типографику прямо из макета, видит дизайн-токены и экспортирует ассеты. Чем чище собраны компоненты и авто-лейауты, тем ближе вёрстка к макету и меньше правок «на глаз».
Под 1С-Битрикс важно сопоставить компоненты Figma с шаблонами компонентов: карточка товара из макета — шаблон детальной карточки, элемент сетки — шаблон списка каталога, форма — шаблон соответствующего компонента. Тогда вёрстка ложится в готовую структуру Битрикса, а не переписывает её. Инфраструктурные вопросы вроде окружения для сборки мы разбираем в статье про хостинг и инфраструктуру BitrixVM, а предсказуемую выкладку макета в бой — в материале про CI/CD и деплой в Битрикс.
Связь прототипа с данными из 1С
Прототип магазина — это не только про пиксели, но и про данные. Каждый блок карточки товара задаёт требование к тому, что должно прийти из учётной системы: цена по группе клиента, наличие по складам, характеристики, единица измерения и кратность, статус заказа в кабинете. Если на макете это есть, значит, обмен с 1С обязан это отдавать.
Поэтому проектирование интерфейса и проектирование интеграции лучше вести параллельно. Когда данные о заказах и складе автоматизированы, макет опирается на реальность, а не на заглушки. Настройку такого обмена и складского учёта закрывает услуга автоматизации продаж и склада на 1С. Если же в перспективе магазину нужны программные интерфейсы для внешних систем, это отдельная тема — про неё есть материал о REST, вебхуках и безопасности в Битрикс.
Частые ошибки прототипирования
- Рисуют дизайн сразу, минуя wireframe. Красивый экран с нелогичной структурой переделывать дороже.
- Проектируют только «идеальные» экраны. Пустая корзина, нет в наличии и ошибки форм всплывают уже в вёрстке.
- Нет компонентов и токенов. Каждый экран рисуется заново, правки не тиражируются, вёрстка расходится с макетом.
- Не тестируют на людях. Проблемы навигации ловят после запуска — по метрикам и жалобам.
- Игнорируют мобильный. Фильтр и карточка «на десктопе красиво», а на телефоне не помещаются.
- Макет оторван от данных 1С. В карточке есть поля, которых обмен не отдаёт, — вёрстка упирается в пустоту.
- Компоненты Figma не названы как в вёрстке. Связь макета и кода теряется, передача идёт дольше.
Чек-лист прототипа
- User flow описан. Есть карта пути для основных типов покупателей, включая B2B.
- Wireframe утверждён. Структура ключевых экранов согласована до дизайна.
- Ключевые экраны нарисованы. Главная, каталог, карточка, корзина, оформление, кабинет.
- Состояния проработаны. Пусто, нет в наличии, ошибка, загрузка, гость и авторизованный.
- Дизайн-система собрана. Компоненты, стили и токены переиспользуются на всех экранах.
- Прототип кликабелен. Основные сценарии проходятся переходами end-to-end.
- Прототип протестирован. Проведён хотя бы один раунд на реальных людях, правки внесены.
- Готов к передаче. Dev Mode, ассеты, соответствие компонентов шаблонам Битрикса и данным 1С.
Вывод
Прототип в Figma — это способ спроектировать магазин головой, а не руками верстальщика. Пройдя путь от user flow и wireframe к дизайн-системе и кликабельному макету, вы входите в разработку с проверенным решением: логика сценариев обкатана, состояния учтены, компоненты сопоставлены с шаблонами Битрикса. Это сокращает и сроки, и число болезненных правок на боевом сайте.
Главное — помнить, что интерфейс магазина живёт на данных из учётной системы. Проектируйте макет и обмен с 1С параллельно, закладывайте цены по группам, наличие и статусы заказов в карточку и кабинет — и прототип превратится не в красивую картинку, а в точное техническое задание на рабочий магазин.
