Когда речь заходит о B2B-интерфейсах, прототип — это не эскиз для утверждения цветовой гаммы. Это инструмент проверки того, насколько быстро и безболезненно оптовый покупатель сможет найти нужный артикул, понять цену, оформить заказ и, главное, вернуться за повторной закупкой. На старте проекта критично выбрать средства, которые не усложняют, а ускоряют проверку гипотез. Из десятков инструментов, с которыми я сталкивался в аудитах нишевых B2B-площадок, базовый костяк почти всегда сводится к связке Figma и Miro, а специализированные решения вроде Axure подключаются только тогда, когда сценарий действительно становится нетривиальным.
Зачем вообще нужен прототип в B2B
В оптовом интерфейсе ошибки стоят заметно дороже, чем в розничном e-commerce. Пользователь приходит не «посмотреть», а решить конкретную задачу: быстро найти нужный SKU, понять цену с учётом своей скидки, увидеть остатки на складе, оформить заказ и через неделю повторить его в пару кликов. Если на этом пути появляются лишние шаги, скрытые данные или путаница в фильтрах, деньги теряются ещё на этапе макета, а затем — в реальном продукте. В одном проекте по продаже стройматериалов оптовики массово бросали корзину, потому что фильтр по складу был спрятан на третьем экране, а цена показывалась только после ручного ввода количества. Прототип, собранный за пару дней, вскрыл эту проблему до того, как её зашили в код.
Хороший прототип помогает:
- проверить логику каталога до начала разработки;
- согласовать путь закупщика и менеджера — увидеть, где они «спотыкаются»;
- поймать проблемы в авторизации, отображении цен, корзине и личном кабинете;
- показать заказчику не статичную картинку, а рабочий сценарий;
- сократить число переделок после запуска, когда цена правки вырастает кратно.
Для B2B особенно важно прототипировать не отдельные страницы, а весь сквозной маршрут: вход, поиск, фильтрация, карточка товара, корзина, повторный заказ, документы, статусы, личный кабинет. Именно в стыках между этими этапами чаще всего прячутся потери.
Какой инструмент выбрать на старте
Если проект только начинается, не стоит сразу брать тяжёлый стек. На практике удобнее идти от задачи, а не от моды. Я не раз видел, как команды уходили в Axure ради пары условных переходов, а потом неделями разбирались в собственной логике, хотя всё решалось в Figma с аккуратной структурой.
Базовый выбор для старта
| Инструмент | Лучше всего подходит для | Сильные стороны | Ограничения |
|---|---|---|---|
| Figma | Сборка интерфейсов от черновых вайрфреймов до детальных макетов, создание кликабельных прототипов, передача макетов разработчикам | Режим многопользовательского редактирования в реальном времени, отлично держит высокую детализацию, позволяет вести проект от первых набросков до финального дизайна в одном файле | Когда в сценарии появляются множественные условия (разные роли, динамические цены), приходится искусственно усложнять структуру связей — без дисциплины файл быстро превращается в кашу |
| Miro | Карты пути клиента (CJM), пользовательские сценарии, быстрые структурные схемы, воркшопы с командой | Идеальна для совместного обсуждения логики, набросков и связей между экранами — всё видно на одной бесконечной доске | Не заменяет полноценный UI-прототип: нельзя кликать по элементам и тестировать микровзаимодействия |
| Balsamiq | Черновые wireframe-прототипы, когда нужно быстро накидать структуру без отвлечения на визуал | Намеренно грубый стиль не даёт уйти в украшательство, фокус остаётся на логике и компоновке | Не подходит для демонстрации финального дизайна или согласования с заказчиком, который ждёт «картинку» |
| Axure | Сложные сценарии с ветвлениями, логика корпоративных интерфейсов, enterprise-системы | Глубокая интерактивность: можно задавать условия, переменные, динамически менять контент — практически имитировать работу бэкенда | Выше порог входа, дольше старт; для простых оптовых витрин часто избыточен |
| Framer | Живые интерактивные прототипы с анимацией, демонстрация «ощущения» продукта | Хорош для микроанимаций, плавных переходов, эффектов при наведении — того, что сложно передать в статике | На ранней стадии проекта может отвлекать от проверки структуры и сценариев |
По моему опыту, для 80% оптовых проектов на старте хватает пары Miro + Figma: на доске выстраивается логика, а в Figma она превращается в осязаемый интерфейс, который можно пролистать и протестировать.
Что брать, если задача — оптовый B2B-сайт
Когда перед вами стоит задача спроектировать полноценную B2B-платформу, а не просто лендинг, важно разбить работу на этапы, чтобы не утонуть в деталях раньше времени. Иначе легко потратить неделю на отрисовку иконок для карточки товара, а потом понять, что сама карточка не решает задачу закупщика.
Этап 1. Сценарии и структура
Используйте Miro или аналогичную онлайн-доску, чтобы собрать:
- карту пути клиента — от первого входа до повторной закупки;
- основные пользовательские сценарии: поиск по артикулу, заказ по шаблону, работа с отложенными товарами;
- список ключевых сущностей: товар, цена, остаток, склад, доставка, документы — и связи между ними;
- проблемные точки: авторизация, уровни доступа, повторный заказ, поиск по артикулу, отображение индивидуальных цен.
Часто на этом этапе всплывает, что «повторный заказ» не сводится к кнопке «Повторить», а требует отдельного сценария с историей, фильтрацией по датам и возможностью частичного повтора.
Этап 2. Черновые экраны
На этом этапе удобно делать низкодетализированные прототипы ключевых экранов:
- главная;
- каталог;
- карточка товара;
- корзина;
- личный кабинет;
- история заказов;
- избранное;
- повтор заказа.
Если логика ещё не зафиксирована, не уходите в цвет, шрифты и визуальные эффекты. Сначала важна структура. Помню случай, когда команда потратила три дня на подбор оттенков для статусов заказа, а потом выяснилось, что часть статусов вообще не нужна — переделывать пришлось всё.
Этап 3. Интерактивный прототип
Для согласования с бизнесом и теста с закупщиками лучше собрать кликабельный сценарий в Figma или Axure. Figma хорошо подходит для большинства интерфейсов, где нужен баланс скорости, совместной работы и наглядности. Axure имеет смысл, если сценарии действительно сложные: разные роли, условия показа цен, многоступенчатые формы, ветвления по типу клиента. В таких случаях Figma начинает «задыхаться» от количества фреймов и связей, а Axure позволяет описать логику один раз и не плодить дубликаты экранов.
Когда Figma достаточно, а когда уже нет
Figma — самый практичный стартовый инструмент для большинства B2B-команд. В ней удобно работать нескольким участникам одновременно, оставлять комментарии и собирать интерактивные прототипы с переходами между экранами. Для типового оптового сайта этого хватает на 80% задач. Но есть граница, за которой Figma начинает мешать.
Figma подходит, если:
- нужно быстро согласовать структуру каталога и карточки товара;
- надо показать сквозной путь до оформления заказа;
- важна совместная работа дизайнера, аналитика и заказчика в реальном времени;
- интерфейс не требует сложной условной логики — например, цены для всех клиентов отображаются одинаково;
- проекту нужен единый файл от вайрфрейма до макета, чтобы не терять контекст.
Лучше искать более тяжёлое решение, если:
- в сценариях много ветвлений — например, для разных ролей пользователей разный набор экранов;
- личный кабинет кардинально меняется в зависимости от роли: менеджер, закупщик, администратор;
- есть сложные правила отображения цен и остатков — цена зависит от объёма, склада, статуса клиента;
- требуется глубоко имитировать поведение системы: динамическая фильтрация, калькуляция доставки, проверка доступности;
- прототип должен заменить почти готовую интерактивную демо-версию для питча инвесторам или ключевым клиентам.
В одном проекте оптового маркетплейса с тремя типами покупателей и динамическим ценообразованием прототип на Figma превратился в лабиринт из сотен фреймов с дублирующимися связями. Тогда мы перевели логику в Axure и за день собрали то, что в Figma заняло бы неделю. Поэтому выбор инструмента — это всегда вопрос сложности сценария, а не личных предпочтений.
Практический набор на старте
Если задача — не «закрыть дизайн», а быстро запустить работу над B2B-интерфейсом, достаточно такого набора:
- Miro — для карты сценариев и обсуждения логики. Здесь удобно держать все развилки и видеть картину целиком.
- Figma — для вайрфреймов, макетов и кликабельного прототипа. В ней интерфейс обретает плоть.
- Текстовый документ — для фиксации правил: кто видит цены, как работает авторизация, что происходит после добавления в корзину. Это не бюрократия, а способ не потерять логику, которая не видна на макете. В одном аудите я видел, как команда полгода рисовала экраны, а условие «цены для дилеров показываются только после подтверждения менеджером» было записано в чате и забыто. В итоге переделывали весь личный кабинет.
- Таблица — для описания сущностей каталога: артикул, фасовка, остаток, минимальная партия, склад. Без неё легко упустить, что один и тот же товар может продаваться в разных единицах измерения.
- Список гипотез — чтобы понимать, что именно проверяется в прототипе. Например: «Закупщик найдёт товар по артикулу быстрее, чем через общий поиск» или «Повторный заказ из истории сократит время оформления».
Такой набор закрывает стартовую фазу без лишнего зоопарка сервисов и помогает держать фокус на реальных задачах бизнеса.
Как не ошибиться при выборе инструмента
Типовые ошибки
- Сразу делать hi-fi-дизайн, когда не согласованы сценарии. Красивая картинка создаёт иллюзию готовности, а логика остаётся сырой.
- Путать прототип с финальным макетом. Прототип — это черновик для проверки, а не утверждённый дизайн.
- Переносить в файл все экраны подряд без логики — получается «кладбище фреймов», в котором невозможно ориентироваться.
- Делать прототип «для красоты», а не для проверки гипотез. Тогда он не отвечает на вопросы, а просто демонстрирует визуал.
- Выбирать сложный инструмент, когда задача решается в Figma. Это затягивает старт и демотивирует команду.
- Игнорировать реальные ограничения опта: роли, прайсы, условия доставки, повторные закупки. Без них прототип оторван от жизни.
- Начинать с анимации кнопок до проверки логики повторного заказа. Микровзаимодействия важны, но не на первом этапе.
- Забывать, что в опте часто нужна работа с таблицами и массовыми действиями — обычные карточки товаров могут не подходить.
Что проверить до начала работы
- Кто будет смотреть прототип: собственник, отдел продаж, закупщик, разработка. От этого зависит степень детализации.
- Что именно нужно проверить: структуру, сценарий, интерфейс, логику. Не пытайтесь проверить всё сразу.
- Насколько сложна матрица доступа — сколько ролей, какие ограничения.
- Есть ли несколько типов цен и условий — от этого зависит, нужно ли показывать ветвления.
- Нужно ли тестировать частые повторные заказы — если да, этот сценарий должен быть в приоритете.
- Будет ли прототип использоваться для юзабилити-тестов с реальными закупщиками — тогда он должен быть достаточно интерактивным, чтобы не требовать пояснений.
Какой сценарий прототипировать в первую очередь
Для B2B-платформы самый ценный сценарий — не «вход на главную», а путь к повторной покупке. Именно он показывает, насколько интерфейс помогает бизнесу продавать молча. В типовом оптовом магазине 70% выручки делают постоянные клиенты, которые заходят, быстро находят прошлый заказ и повторяют его. Если этот путь занимает больше пары кликов, вы теряете деньги ежедневно.
Начните с такой последовательности:
- вход в систему;
- поиск товара (по артикулу, названию, через историю);
- фильтрация и сортировка;
- карточка товара с остатками и ценами;
- добавление в корзину;
- оформление заказа;
- просмотр статуса;
- повтор заказа из истории или шаблона.
Если этот маршрут работает понятно и без лишних остановок, остальная часть интерфейса обычно выстраивается проще — личный кабинет, документы, настройки становятся естественным продолжением.
Мини-чек-лист для старта
Перед тем как открывать первый файл, проверьте:
- определена ли цель прототипа — что именно мы хотим проверить;
- описан ли основной пользователь — кто этот закупщик, как он работает сейчас;
- собраны ли ключевые сценарии — хотя бы в виде списка шагов;
- известны ли правила цен и доступа — без них прототип будет фантазией;
- понятна ли структура каталога — какие атрибуты товара критичны для поиска;
- выбран ли формат проверки: обсуждение, тестирование, согласование — от этого зависит глубина проработки;
- решено ли, нужен ли low-fi или сразу интерактивный прототип — иногда грубого наброска достаточно, чтобы поймать главную проблему.
Что выбрать в одном предложении
Если нужен простой и надёжный старт для B2B-интерфейса, берите Miro для сценариев и Figma для прототипа. Если у проекта сложная логика и много ветвлений, добавляйте Axure; если нужен только быстрый черновик, достаточно Balsamiq.
FAQ
Можно ли начинать сразу в Figma без Miro?
Да, если сценарий простой и уже понятен. Но в B2B я почти всегда начинаю с Miro, потому что на доске легче увидеть, что путь повторного заказа не замкнут, а менеджер не может подтвердить цену без лишнего экрана. Miro помогает не плодить лишние экраны в Figma.
Что лучше для оптового сайта: Figma или Axure?
Для большинства проектов — Figma. Axure нужен, когда появляется сложное поведение: много условий, динамические данные, разные интерфейсы для разных ролей. Если сомневаетесь, начните с Figma — перейти на Axure при необходимости проще, чем разгребать переусложнённый прототип.
Нужен ли в B2B прототип на первом этапе дизайн-системы?
Нет. На старте важнее структура и сценарии. Дизайн-система подключается позже, когда логика уже подтверждена. Иначе вы потратите время на компоненты, которые потом придётся переделывать.
Как понять, что прототип готов к тестированию?
Если по нему можно пройти ключевой сценарий без объяснений со стороны команды и увидеть, где пользователь спотыкается. Хороший тест — дать прототип человеку, не знакомому с проектом, и попросить выполнить задачу: «Найдите товар X и повторите прошлый заказ».
Можно ли проверить прототип на реальных закупщиках?
Да, и это лучший вариант. В B2B именно живые пользователи быстро показывают, где интерфейс мешает, а не помогает. Даже три-четыре сессии с реальными клиентами дают больше инсайтов, чем неделя внутренних обсуждений.
Вывод
Инструменты для прототипирования B2B-интерфейсов нужно выбирать не по популярности, а по задаче. На старте почти всегда выигрывает связка Miro + Figma: первая помогает собрать логику, вторая — быстро показать рабочий интерфейс и проверить сценарии. Для сложных оптовых платформ добавляют Axure, а для грубых черновиков — Balsamiq. Главный принцип простой: сначала проверяйте путь закупщика, потом визуал. Потому что в опте интерфейс — это не картинка, а логика повторных продаж.