Конструктор КП: UX/UI дизайн системы управления коммерческими предложениями

Платформа «Адверти» — один из лидеров рынка сувенирной и промо-продукции в России. Менеджеры компании ежедневно готовят коммерческие предложения для B2B-клиентов: от простых прайсов до сложных расчётов с нанесением логотипа, несколькими тиражами и индивидуальными скидками.

Инструмент для создания КП существовал давно, но за годы накопил UX-долг: интерфейс устарел, вёрстка неэффективна, а сценарии работы менеджеров изменились.

Проблема старого интерфейса

• Вертикальная вёрстка характеристик. Каждый параметр товара (бренд, материал, плотность, цвет, размер…) шёл отдельной строкой с иконкой. Карточка одного товара растягивалась на пол-экрана, менеджеру приходилось долго скроллить.
• Визуальный шум. Серый фон, разношёрстные элементы, текстовые ссылки вместо кнопок — интерфейс выглядел как внутренняя админка из 2010-х.
• Нет быстрых действий. Чтобы добавить товар, менеджер уходил в корзину или искал его в каталоге отдельно — прямо внутри КП это сделать было нельзя.
• Скрытые возможности. Экспорт в PDF/DOC был спрятан в текстовых ссылках, сворачивание карточек отсутствовало, редактирование полей — неочевидно.
• Нет превью и контекста. Менеджер не мог быстро посмотреть описание товара или найти похожие — приходилось открывать карточку в новой вкладке.
• Итог: одно КП занимало 30–40 минут, ошибки в расчётах, менеджеры обходили инструмент стороной и собирали КП в Excel.

Что мы сделали

Полностью переработали интерфейс конструктора, сохранив всю бизнес-логику:

1. Табличная вёрстка характеристик. Вместо вертикального списка — компактная горизонтальная таблица. Карточка товара стала в 3 раза короче, на одном экране видно больше позиций.
2. Зелёная панель действий. Три ключевых сценария — «Товар из корзины», «Товар по ссылке», «Создать товар» — вынесены в яркие кнопки наверху. Менеджер выбирает путь в один клик.
3. Редактирование по месту. Иконка карандаша у каждого поля (название, артикул, характеристики, цена) — менеджер правит данные прямо в карточке, без перехода в другие разделы.
4. Сворачиваемые карточки. Стрелки ↑↓ позволяют скрыть детали товара и оставить только название и сумму — удобно при длинных КП.
5. Переключатель описаний. Toggle «Описания товаров Вкл/Выкл» — менеджер сам решает, показывать ли клиенту текстовые описания в итоговом КП.
6. Блок комментария. Отдельная секция с описанием товара и полем для персонального комментария менеджера к заказу.
7. Похожие товары. Кнопка рядом с карточкой — быстрый способ найти альтернативу, если нужного товара нет в наличии.
8. Прозрачный итог. Общий тираж, цена за тираж, цена нанесения и ИТОГО — в одной строке внизу. Всё считается автоматически.
9. Экспорт и удаление. Кнопка «Скачать КП» с выпадающим меню и красная «Удалить КП» — действия стали явными.

Результат

• ⏱ Время создания КП: 40 мин → 3–5 мин
• 📉 Ошибки в расчётах: снижены до минимума
• Менеджеры вернулись в инструмент — больше не собирают КП в Excel
• Единый стандарт оформления для всех КП платформы

До

После

📋 Раздел «Мои КП» — список коммерческих предложений

Центральный хаб менеджера — здесь хранятся все созданные КП с возможностью поиска, сортировки, просмотра комментариев и быстрого создания новых.

Ключевые UX-решения

1. Бейдж с количеством В левой навигации у пункта «Мои КП» — оранжевый бейдж «99». Менеджер сразу видит объём работы, не заходя внутрь раздела.

2. Живой поиск Поле поиска с мгновенной фильтрацией и кнопкой очистки (крестик). Менеджер начинает вводить «Пре» — и таблица сразу показывает релевантные КП. Не нужно ждать Enter или нажимать «Найти».

3. Сортировка по колонкам Название, Дата, Сумма — кликабельные заголовки со стрелками. Менеджер может отсортировать КП по свежести или по сумме заказа. Это критично, когда КП сотни.

4. Комментарии с превью В колонке «Комментарий» показывается обрезанный текст. При наведении — тултип с полным содержимым. Менеджер быстро вспоминает контекст («Эта ручка в белом цвете есть на оперативном складе МЗ»), не открывая КП.

5. Визуальные статусы

• Активные КП — чёрный текст, иконка корзины для удаления.
• Архивные/неактивные (например, «Гарантированный») — серый текст, иконка «×» вместо корзины. Визуально понятно, что с ними нельзя работать.
• Hover-строка подсвечивается — легко отследить, на какое КП наведён курсор.

6. Три сценария создания Внизу — три кнопки с разными путями создания КП:

• Primary (синяя): «Создать КП из корзины» — основной сценарий, самый частый.
• Outline: «Создать КП по ссылке на товар» — альтернативный путь.
• Outline: «Создать КП с новым товаром» — редкий сценарий.

Иерархия кнопок направляет менеджера к основному действию.

7. Ссылка на инструкцию «Скачать Инструкцию» в правом верхнем углу — для новых менеджеров или тех, кто забыл функционал. Не перегружает интерфейс, но доступна в один клик.

Какую задачу решает

Менеджер за 10 секунд находит нужное КП, видит его статус и сумму, может удалить или открыть. Раньше этот же поиск занимал минуты — приходилось открывать каждое КП и смотреть внутрь.

📦 Модалка «Создать КП из корзины» — выбор источника

Модальное окно для быстрого создания коммерческого предложения из существующей корзины. Менеджер может либо вставить ссылку на корзину клиента, либо выбрать из сохранённых корзин в системе.

Ключевые UX-решения

1. Два сценария через переключатели

• Ссылка на корзину (активно по умолчанию) — для случаев, когда клиент сам собрал корзину на сайте и прислал ссылку. Менеджер просто копирует URL.
• Выбрать корзину — для сценария, когда менеджер заранее сохранил типовую корзину (например, «Премиум», «Экспресс», «Промо») и хочет использовать её как шаблон.

Переключатели визуально разделены: активный — оранжевый с иконкой, неактивный — серый. Это направляет внимание к основному сценарию.

2. Список корзин с контекстом Каждая корзина показывает:

• Название (например, «Премиум», «Экспресс») — понятная категоризация.
• Дата (20.12.2025) — менеджер видит актуальность.
• Сумма (5 450,00 ₽) — сразу понятно, на какой бюджет рассчитана.
• Комментарий (обрезанный) — контекст («Предзаказ завершён, ожидается…»).

3. Визуальная иерархия списка

• Корзины отсортированы по дате (сверху — более ранние).
• Чередование белого и светло-серого фона строк — улучшает читаемость таблицы.
• Hover-эффект на строках (на скрине виден курсор на «Экспресс») — понятно, что можно выбрать.

4. Единая CTA-кнопка Большая зелёная кнопка «Сохранить» внизу — финальное действие. Цвет совпадает с основными CTA в интерфейсе (зелёные кнопки добавления товаров), создавая консистентность.

5. Закрытие по крестику Классический крестик в правом верхнем углу — менеджер может закрыть модалку, если передумал.

Какую задачу решает

Менеджер не тратит время на ручной подбор товаров — берёт готовую корзину (свою или клиента) и превращает её в КП за 2 клика. Раньше приходилось копировать товары вручную или пересобирать корзину внутри КП.

Модалка «Создать КП из корзины» — режим «Выбрать корзину» (активен)

Второе состояние той же модалки. Менеджер переключился с режима «Ссылка на корзину» на «Выбрать корзину» — теперь видит список сохранённых корзин и может выбрать одну из них как основу для нового КП.

Ключевые UX-решения

1. Переключение режимов

• «Ссылка на корзину» (серый тоггл) — деактивирован, поле ввода скрыто.
• «Выбрать корзину» (оранжевый тоггл) — активен, таблица корзин видна.

Переключатели работают как радио-кнопки: включается один режим, другой автоматически выключается. Менеджер не запутается — нельзя одновременно вставить ссылку и выбрать корзину из списка.

2. Таблица сохранённых корзин
10 строк с данными:

• Название (Новая, Главная, Премиум, Стандарт, Экспресс, Супер, Базовый, Лимитированный, Классик, Промо) — понятные категории, отражающие тип корзины.
• Дата (19.12.2025 – 27.12.2025) — менеджер видит актуальность. Корзины отсортированы по дате создания.
• Сумма (от 1 800,00 до 10 000,00 ₽) — сразу понятно, на какой бюджет рассчитана корзина.
• Комментарий (обрезанный текст) — контекст («Предзаказ завершён, ожидается…», «Только для избранных клиентов»).

3. Hover-эффект на строках
Строка «Экспресс» подсвечена серым — курсор наведён на неё. Менеджер видит, какую корзину выбирает, до клика. Это снижает ошибки: не нужно гадать, на какую строку нажал.

4. Чередование фона строк
Белый / светло-серый фон чередуется — улучшает читаемость таблицы, особенно когда строк много. Глаз не «соскальзывает» на соседнюю строку.

5. Консистентная CTA-кнопка
«Сохранить» — большая зелёная кнопка на всю ширину, с курсором на скрине (менеджер готов нажать). Цвет совпадает с другими кнопками сохранения в интерфейсе.

Какую задачу решает

Менеджер использует типовые корзины как шаблоны для КП. Например, корзина «Премиум» — для VIP-клиентов, «Промо» — для новых клиентов со скидкой. Не нужно каждый раз собирать товары вручную — выбрал корзину, нажал «Сохранить», получил готовое КП.

Раньше менеджеры либо запоминали состав корзин «в голове», либо вели отдельный Excel со списками. Теперь всё в системе, с датами и комментариями.

Модалка «Создать КП по товару» — быстрый путь по ссылке

Вторая из трёх точек входа в создание КП. Менеджер вставляет ссылку на конкретный товар из каталога — система автоматически подтягивает все данные (название, артикул, характеристики, цену) и создаёт карточку в новом КП.

Ключевые UX-решения

1. Минимализм — одно поле, одно действие В отличие от модалки «Создать КП из корзины», здесь нет списка или переключателей. Только поле ввода ссылки и кнопка «Сохранить». Это осознанное решение: сценарий простой, не нужно перегружать интерфейс.

2. Плейсхолдер с протоколом Поле содержит плейсхолдер https:// — это:

• Подсказка формата (менеджер понимает, что нужна полная ссылка, а не артикул).
• Визуальный якорь — курсор встанет после https://, не нужно вводить протокол вручную.
• Снижение когнитивной нагрузки — менеджер не гадает, что от него хотят.

3. Зелёная рамка поля ввода Поле обведено зелёным — это визуальная связь с кнопкой «Сохранить» того же цвета. Создаётся единый визуальный поток: «заполни поле → нажми кнопку». Цвет совпадает с основными CTA во всём интерфейсе.

4. Консистентность с другими модалками

• Тот же размер и пропорции окна, что у «Создать КП из корзины».
• Тот же крестик закрытия в правом верхнем углу.
• Та же зелёная кнопка «Сохранить» на всю ширину.
• Тот же фон-затемнение (overlay) с размытием заднего плана.

Менеджер, уже знакомый с одной модалкой, мгновенно понимает, как работать с этой. Не нужно переучиваться.

5. Контекст на фоне За затемнённым фоном виден раздел «Мои КП» — менеджер не теряет ориентацию, понимает, куда вернётся после сохранения. Это снижает тревожность при работе с модалками.

Какую задачу решает

Менеджер получает ссылку на товар от клиента (например, из переписки или с сайта) — вставляет её в одно поле и получает готовую карточку товара в КП. Не нужно искать товар в каталоге, запоминать артикул или копировать характеристики вручную.

Модалка «Создать КП с новым товаром» — полная форма

Третий и самый сложный сценарий создания КП. Используется, когда менеджеру нужно добавить товар, которого нет в каталоге платформы — например, эксклюзивная позиция от стороннего поставщика или кастомный продукт под конкретного клиента. Менеджер вручную заполняет все данные.

---

Экран 1: Основные данные товара

1. Обязательные поля со звёздочкой Наименование, Артикул, Тираж, Цена за товар — помечены красной звёздочкой (*). Менеджер сразу видит, что критично заполнить, а что можно пропустить (Скидка — без звёздочки, опционально).

2. Динамические характеристики Блок «Характеристики товара» построен по паттерну «ключ-значение»:

• Два поля в строке: «Заголовок параметра» и «Значение параметра».
• Иконка «=» слева — маркер drag-and-drop (можно менять порядок параметров перетаскиванием).
• Галочка в зелёном квадрате — подтверждение/валидация строки.
• Иконка корзины справа — удаление параметра.
• Кнопка «+ Добавить параметр» — добавляет новую строку. Менеджер сам решает, какие характеристики важны для клиента (бренд, материал, плотность и т.д.).

Это гибкий паттерн: не нужно заранее задавать структуру — менеджер собирает карточку под конкретный товар.

3. Плейсхолдеры и формат

• Поле «Тираж, шт.» содержит плейсхолдер 0 — понятно, что нужно число.
• Поле «Цена за товар, ₽» обведено зелёным — визуальная связь с кнопкой «Сохранить».
• Поле «Скидка (₽ или %)с примером10` — менеджер понимает, что можно ввести либо сумму, либо процент.

4. Вертикальная структура формы Поля идут сверху вниз в логическом порядке: сначала идентификация (название, артикул), потом детали (характеристики), потом коммерция (тираж, цена, скидка). Это соответствует ментальной модели менеджера.

---

Экран 2: Работа с изображениями

1. Инструкция в начале блока Четыре пункта с иконками объясняют все доступные действия:

• ≡ — перетаскивание для изменения порядка
• “ — добавить пример нанесения
• ★ — сделать фото главным
• 🗑 — удалить изображение

Менеджер не гадает, что делают иконки — всё объяснено заранее. Это снижает порог входа.

2. Карточки изображений с действиями Каждое изображение товара (футболки разных цветов) — отдельная карточка с:

• Иконкой ≡ в левом верхнем углу — drag-handle для сортировки.
• Иконкой корзины в правом верхнем углу — удаление.
• Иконкой 🖼 в левом нижнем углу — добавить пример нанесения (логотипа клиента).
• Звёздочкой ★ в правом нижнем углу — сделать главным фото.
• Синей рамкой у выбранной карточки (белая футболка) — визуальный фидбек.

3. Разделение на «Основные изображения» и «Другие цвета»

• Основные — фото товара в разных ракурсах или с нанесением. Показываются крупно, с полным набором действий.
• Другие цвета — отдельные карточки для каждого цветового варианта (белая, фиолетовая футболка). Упрощённый набор действий (только сортировка и удаление).

Это логичное разделение: клиент в КП увидит основное фото товара, а цвета — как дополнительные опции.

4. Зоны загрузки файлов

• «Загрузите фотографии» — основная зона с фиолетовой кнопкой «Выбрать файл(ы)».
• «Загрузите фотографии дополнительных цветов» — отдельная зона ниже, с неактивной (серой) кнопкой, пока не заполнен основной блок.

Прогрессивное раскрытие: сначала менеджер работает с основными фото, потом переходит к цветам.

5. Цветовая кодировка кнопок

• Фиолетовая кнопка «Выбрать файл(ы)» — акцентное действие в этом блоке (загрузка).
• Серая кнопка для дополнительных цветов — вторичное действие, доступно позже.
• Зелёная кнопка «Сохранить» (на первом экране) — финальное действие всей модалки.

---

Какую задачу решает

Менеджер может создать карточку любого товара с нуля — с полным набором данных, фотографиями, цветовыми вариантами и примерами нанесения. Раньше такие позиции вообще нельзя было добавить в КП, либо приходилось использовать «костыли» вроде текстовых описаний без фото.

Модалка «Добавить логотип» — начальное состояние (до загрузки)

Первый экран модалки, который видит менеджер сразу после открытия. Логотип ещё не загружен — интерфейс показывает только зону загрузки и пустую футболку как «холст» для будущего превью.

Ключевые UX-решения

1. Пустой «холст» как визуальная подсказка В центре — изображение белой футболки без логотипа. Это не просто декор, а визуальное обещание: «сюда ты разместишь логотип». Менеджер сразу понимает конечную цель действия, даже ещё не загрузив файл.

2. Зона загрузки с явным CTA

• Пунктирная рамка — стандартный паттерн drop-zone, интуитивно считывается как «сюда можно перетащить файл».
• Синяя кнопка «Выбрать файл(ы)» — основное действие выделено цветом. Синий здесь работает как акцент загрузки (в отличие от зелёного, который зарезервирован под «Сохранить»).
• Подпись «Форматы файлов: JPG, PNG, GIF» — менеджер сразу знает, какие файлы подойдут, не получает ошибку после загрузки неподдерживаемого формата.

3. Прогрессивное раскрытие интерфейса Сравнивая с предыдущими скринами этой же модалки, видна чёткая логика состояний:

Состояние	Что видит менеджер
Начальное (этот скрин)	Пустая футболка + кнопка загрузки
После загрузки	Панель управления файлом + логотип на футболке + переключатель режимов
Режим «Макет» включён	Фотореалистичное превью на модели

Интерфейс не перегружен с самого начала. Менеджер видит только то, что нужно на текущем шаге. Дополнительные элементы (заменить, удалить, AI-превью, Макет) появляются после загрузки файла — когда они становятся релевантны.

4. Заголовок и подзаголовок задают контекст

• «Добавить логотип» — что делаем.
• «Загрузите изображение и настройте его расположение на футболке» — как делаем и что будет дальше.

Менеджер ещё до первого клика понимает весь флоу: загрузить → настроить → сохранить.

Какую задачу решает

Начальный экран максимально прост: одна кнопка, одно действие. Это снижает когнитивную нагрузку — менеджеру не нужно разбираться в интерфейсе, он просто нажимает «Выбрать файл(ы)» и переходит к следующему шагу.

Раньше, вероятно, менеджер открывал отдельный графический редактор, искал там функцию загрузки, разбирался с форматами — теперь всё в одном окне с понятной точкой входа.

Модалка «Добавить логотип» — визуализация нанесения

Инструмент для загрузки логотипа клиента и его размещения на изображении товара. Менеджер видит превью нанесения в реальном времени и может сохранить результат для включения в КП. Это критически важная функция для B2B-продаж сувенирной продукции — клиент принимает решение, когда видит свой логотип на изделии.

Ключевые UX-решения

1. Инструкция в подзаголовке «Можно перемещать, масштабировать и поворачивать логотип прямо на футболке» — сразу объясняет все доступные действия. Менеджер не ищет подсказки, не гадает, что можно делать с изображением. Текст серый, не перегружает заголовок, но читается.

2. Прямое манипулирование Логотип размещается непосредственно на изображении товара (футболки). Менеджер работает в контексте — видит результат сразу, без перехода в отдельный редактор. Это интуитивно: перетащил, увеличил, повернул — готово.

3. Управление загруженным файлом Над изображением — компактная панель:

• Иконка изображения + «logo.png» — показывает, какой файл загружен.
• «Заменить» с иконкой обновления — если менеджер загрузил не тот файл, не нужно удалять и загружать заново, можно заменить в один клик.
• Корзина — удалить логотип полностью.

Три действия в одну строку, без лишних кнопок.

4. Переключатель «AI-превью» Тоггл в правом верхнем углу с иконкой звёздочки (магии). Когда включён — система генерирует реалистичное превью нанесения (видимо, с учётом складок ткани, освещения, перспективы). Это опциональная функция: менеджер может работать с простым наложением логотипа или включить AI для более профессионального вида.

5. Центральная визуализация Большое изображение футболки с логотипом «адверти» (оранжевый, в стиле бренда) занимает основную часть модалки. Менеджер сразу видит результат. Изображение достаточно крупное, чтобы оценить пропорции и расположение логотипа.

6. Консистентная CTA-кнопка «Сохранить фото с нанесением» — большая зелёная кнопка на всю ширину, с иконкой изображения. Цвет совпадает с другими кнопками сохранения в интерфейсе. Иконка усиливает понимание: сохранится именно фото (изображение), а не просто данные.

Какую задачу решает

Менеджер загружает логотип клиента, размещает его на товаре и сохраняет превью. Клиент в КП видит не просто текст «нанесение логотипа», а реальное изображение — как будет выглядеть готовый продукт. Это ускоряет принятие решения и снижает количество вопросов от клиента.

Раньше менеджеры либо вообще не показывали превью (клиент гадал, как будет выглядеть), либо использовали сторонние графические редакторы, что занимало 10–15 минут на каждое КП.

Модалка «Добавить логотип» — режим «Макет» (включён)

Что изменилось

Это тот же экран, что и предыдущий, но с активным переключателем «Макет» (синий тоггл). Режим показывает фотореалистичное превью нанесения — логотип размещён на фотографии реальной модели, а не на плоском изображении товара.

Ключевые отличия от режима без макета

1. Фотореалистичная визуализация Вместо изолированного изображения футболки на белом фоне — фото девушки, одетой в эту футболку. Логотип «адверти» отображается с учётом:

• Перспективы — ткань изгибается на груди, логотип следует форме.
• Освещения — тени и блики на ткани делают нанесение естественным.
• Масштаба — видно, как логотип смотрится в контексте человеческого тела.

Это критично для клиента: он видит не абстрактную картинку товара, а как будет выглядеть готовый продукт в жизни.

2. Переключатель «Макет»

• Выключен (предыдущий скрин) — плоское изображение товара, логотип наложен как стикер. Быстрый режим для технической оценки.
• Включён (этот скрин) — фотореалистичный мокап. Режим для презентации клиенту.

Менеджер сам выбирает уровень детализации: если нужно быстро прикинуть расположение — плоский режим; если отправить клиенту — макет.

3. Консистентность интерфейса Все остальные элементы unchanged:

• Панель управления файлом (logo.png / Заменить / Удалить).
• Кнопка «Сохранить фото с нанесением».
• Инструкция в подзаголовке.

Менеджер не переучивается — просто переключает режим визуализации.

Какую задачу решает

Клиент получает в КП не просто текст «нанесение логотипа» и не плоскую картинку, а реалистичное фото — как будет выглядеть готовый продукт. Это:

• Ускоряет принятие решения (клиент видит результат).
• Снижает количество уточняющих вопросов («а как это будет смотреться?»).
• Повышает конверсию из КП в заказ.

Раньше менеджеры либо вообще не показывали превью, либо тратили 10–15 минут в Photoshop, чтобы сделать мокап. Теперь — один клик на переключатель.

Редактор КП — главный экран работы с карточками товаров

Центральный экран конструктора, где менеджер собирает коммерческое предложение: добавляет товары, редактирует характеристики, настраивает цены и скидки, пишет комментарии. Здесь происходит вся основная работа.

Ключевые UX-решения

1. Редактируемый заголовок КП «Новое созданное КП» с иконкой карандаша — менеджер может переименовать предложение прямо здесь (например, в «КП для ООО Ромашка / Декабрь 2025»). Рядом — дата создания (22.12.2025) как неизменяемый ориентир. Стрелка «назад» слева возвращает в список «Мои КП».

2. Переключатель «Описания товаров» Toggle «Вкл/Выкл» — менеджер решает, показывать ли клиенту текстовые описания товаров в итоговом КП. Это гибкость: для внутреннего использования описания могут быть нужны, для клиента — нет.

3. Деструктивное действие выделено Кнопка «Удалить КП» — красная, с крестиком, визуально отделена от остальных действий. Менеджер не удалит КП случайно: цвет сигнализирует об опасности действия.

4. Панель «Добавить» с тремя сценариями Три зелёные кнопки — те же пути создания, что и в списке «Мои КП», но теперь доступны прямо внутри редактора:

• Товар из корзины (иконка корзины) — основной сценарий.
• Товар по ссылке (иконка звена) — альтернативный.
• Создать товар (плюс) — для кастомных позиций.

Рядом — дропдаун «Скачать КП» с дополнительными опциями экспорта (PDF, DOC, ссылка, email).

5. Карточка товара: компактность и редактируемость

• Изображение товара слева — визуальный якорь, менеджер сразу видит, о каком продукте речь.
• Название и артикул с иконками карандаша — редактируются по месту, без перехода в другие разделы.
• Кнопка «Похожие товары» (синяя) — быстрый способ найти альтернативу, если нужного товара нет в наличии или клиент хочет сравнить.
• Таблица характеристик — горизонтальная вёрстка вместо вертикального списка. 8 параметров (Бренд, Производитель, Материал, Вид, Плотность, Вырез, Цвет, Размер) умещаются в одну строку. Карточка стала в 3 раза короче по высоте.
• Нанесение — отдельная строка под таблицей («Шелкотрафарет 6 цветов»).
• Стрелки ↑↓ справа — сворачивание/разворачивание карточки. Менеджер может скрыть детали и оставить только название и сумму — удобно при длинных КП с десятками позиций.

6. Таблица «Цена за товар» Четыре колонки: Тираж, Цена за товар, Цена за нанесения и допусл., Скидка. Менеджер видит разбивку стоимости и может редактировать каждое значение (карандаш у заголовка блока).

7. Блок итого справа «Цена за изделие» и «Стоимость тиража» — вынесены отдельно, крупным шрифтом. Менеджер сразу видит ключевые цифры, не считая в уме.

8. Блок «КОММЕНТАРИЙ» Отдельная секция с описанием товара (текст о футболке REGENT). Менеджер может отредактировать описание (карандаш) или добавить персональный комментарий для клиента. Это заменяет необходимость писать сопроводительное письмо отдельно.

9. Дополнительная скидка на весь заказ Поле ввода справа от комментария — менеджер может применить общую скидку ко всему КП (в процентах). Значение пересчитывает итог автоматически.

10. Итоговая строка внизу Фиксированная панель с ключевыми метриками:

• Общий тираж: 175 шт.
• Цена за тираж: 157 287,90 ₽
• Цена нанесения: 31 416,00 ₽
• ИТОГО: 157 072,90 ₽ (крупным жирным шрифтом)

Менеджер всегда видит финальную сумму, независимо от того, сколько товаров добавлено.

Какую задачу решает

Менеджер собирает КП в одном окне: добавляет товары, редактирует данные, настраивает цены, пишет комментарии. Всё автоматически пересчитывается. Раньше приходилось переключаться между каталогом, корзиной, Excel и текстовым редактором — теперь всё в одном месте.

Редактор КП — режим с описаниями и экспорт

Что изменилось

Это альтернативное состояние редактора: переключатель «Описания товаров» активен (оранжевый), и в карточке товара развёрнуто полное описание. Также открыт дропдаун «Скачать КП» с вариантами экспорта.

Ключевые UX-решения

1. Переключатель «Описания товаров» — состояние «Включено» Тоггл оранжевый, рядом текст «Выкл» (показывает действие при клике). Когда описания включены — в каждой карточке товара отображается развёрнутый текстовый блок. Менеджер контролирует, видит ли клиент детальное описание в итоговом КП.

2. Развёрнутое описание товара Под названием и артикулом — блок «Описание» с иконкой глаза и кнопкой «Скрыть описание». Текст детальный:

«Базовая, комфортная и недорогая классическая футболка без боковых швов из мягкого хлопка. Мягкость достигается за счет тонкой, но прочной пряжи, имеющей ровную безворсовую структуру. Круглый ворот из рибаны с эластаном. Укрепляющая тесьма по вороту. Втачной рукав. Прямой силуэт.»

Это не маркетинговый текст, а техническое описание — клиент понимает, за что платит. Раньше менеджеры копировали описания из каталога вручную или вообще не включали их в КП.

3. Визуальное выделение карточки Изображение товара обведено фиолетовой рамкой — карточка в фокусе (менеджер с ней работает). Это помогает ориентироваться, когда в КП много позиций.

4. Дропдаун «Скачать КП» — четыре сценария экспорта

• Скачать КП в PDF — для отправки клиенту (фиксированный формат, нельзя редактировать).
• Скачать КП в DOC — для внутреннего использования или если клиент хочет что-то поправить.
• Скопировать ссылку на КП — быстрый способ поделиться через мессенджер.
• Отправить письмо с ссылкой на E-mail — встроенная отправка, менеджер не уходит в почтовый клиент.

Четыре формата закрывают все сценарии коммуникации: формальная отправка (PDF), редактируемая версия (DOC), быстрая ссылка (мессенджер), прямая доставка (email).

5. Блок скидки с расчётом В поле «Дополнительная скидка на весь заказ, %» введено значение 5.99 с крестиком для очистки. Рядом — рассчитанная сумма скидки 4 499,00 ₽. Менеджер видит не только процент, но и сколько денег это даёт клиенту — удобно для переговоров («мы даём вам скидку почти 4500 рублей»).

Какую задачу решает

Менеджер гибко настраивает состав КП: включает или скрывает описания, выбирает формат экспорта под контекст (клиент/внутреннее использование/быстрая ссылка), применяет скидку с мгновенным расчётом суммы. Всё в одном окне, без переключения между инструментами.

Карточка товара — ховер-состояние при наведении на удаление

Демонстрация интерактивного состояния: когда менеджер наводит курсор на иконку корзины (удалить) в правом верхнем углу карточки, вся карточка переходит в «полупрозрачный» режим, а иконка меняется с корзины на крестик ✕. Это визуальное подтверждение перед удалением.

Ключевые UX-решения

1. Двухэтапное удаление без модалки Вместо всплывающего окна «Вы уверены?» — мягкий визуальный фидбек:

• Шаг 1 (обычное состояние): карточка яркая, иконка корзины.
• Шаг 2 (ховер на корзину): карточка выцветает, иконка меняется на крестик.
• Шаг 3 (клик): товар удаляется.

Это быстрее, чем модалка, но безопаснее, чем мгновенное удаление. Менеджер видит, что произойдёт, до клика.

2. Визуальное «умирание» карточки При наведении на корзину вся карточка становится полупрозрачной:

• Текст бледнеет.
• Изображение товара выцветает.
• Таблица характеристик теряет контраст.
• Кнопки действий становятся серыми.

Это метафора: «этот объект скоро исчезнет». Менеджер периферийным зрением понимает последствия действия, не читая предупреждений.

3. Смена иконки: корзина → крестик

• Корзина 🗑 — стандартная иконка удаления, менеджер наводит на неё.
• Крестик ✕ — появляется при ховере как финальное подтверждение. Крестик универсальнее: означает «закрыть/убрать/отменить», считывается мгновенно.

Смена иконки — дополнительный сигнал: «ты нажал не туда случайно? Ещё можно передумать».

4. Сохранение читаемости Несмотря на полупрозрачность, структура карточки остаётся видимой: менеджер видит, что именно удаляет (название товара, артикул, сумму). Это важно — нельзя удалить «что-то серое», не понимая, что это.

5. Обратимость до клика Пока менеджер не кликнул, он может увести курсор — и карточка вернётся в нормальное состояние. Это даёт чувство контроля: действие не произойдёт случайно.

Какую задачу решает

Паттерн защищает от случайных удалений без раздражающих модалок. В B2B-контексте, где менеджер работает с десятками позиций в КП, скорость важна. Двухэтапное удаление через ховер:

• Быстрее, чем модалка «Вы уверены?».
• Безопаснее, чем мгновенное удаление.
• Визуально понятно без текста.

Раньше, вероятно, было либо мгновенное удаление (менеджеры случайно стирали товары), либо модалка на каждое удаление (раздражало и замедляло работу).

Модалка «Похожие товары» — поиск альтернативы

Модальное окно, которое открывается по клику на кнопку «Похожие товары» в карточке товара редактора КП. Показывает альтернативные позиции из каталога — на случай, если текущий товар не подходит клиенту (нет в нужном цвете, дорого, снят с производства). Менеджер может выбрать замену и добавить её в КП в один клик, не покидая редактор.

Ключевые UX-решения

1. Карусель с навигацией Горизонтальный слайдер с 5 видимыми карточками и стрелками ‹ › по бокам. Менеджер может прокрутить список и посмотреть больше альтернатив, не закрывая модалку. Стрелки в синих квадратах — стандартный паттерн, считывается мгновенно.

2. Выделение активной карточки Первая карточка (белая футболка) визуально отделена от остальных:

• Белый фон с тенью (остальные — на прозрачном фоне).
• Появляется кнопка «Добавить в КП» (синяя, на всю ширину карточки).
• Иконки действий (сердечко, добавление в корзину) в правом верхнем углу.

Остальные карточки — «спящие»: без кнопки добавления. Менеджер сначала кликает на карточку (она становится активной), потом нажимает «Добавить в КП». Это двухэтапный паттерн, защищающий от случайного добавления не того товара.

3. Бейджи статусов

• «Новинка» (зелёный, левый верхний угол) — товар недавно появился в каталоге. Менеджер может предложить клиенту свежую позицию.
• «-15%» (оранжевый, правый верхний угол) — товар со скидкой. Менеджер видит возможность сэкономить для клиента.

Бейджи работают как триггеры: менеджер может использовать их в переговорах («у нас как раз новинка появилась» или «сейчас скидка 15%»).

4. Палитра цветов Под изображением каждой футболки — ряд цветных кружочков (до 12 видимых + «+13 цветов»). Менеджер сразу видит, в каких цветах доступен товар, не открывая карточку. Это критично для сувенирной продукции: клиент часто выбирает по цвету корпоративного бренда.

5. Двухуровневая цена

• Крупная цена (3728,79 ₽) — базовая стоимость.
• Мелкая синяя подпись «При тираже 10 шт.» — цена за конкретный тираж из текущего КП.

Менеджер видит не абстрактную цену из каталога, а пересчитанную под его тираж. Это экономит время: не нужно мысленно прикидывать, сколько выйдет на 10 штук.

6. Перечёркнутая цена у скидки У карточки со скидкой «-15%» цена 3820,52 ₽ перечёркнута, рядом новая цена 3728,79 ₽ оранжевым. Визуальный акцент на выгоде — менеджер сразу видит, что товар дешевле аналогов.

7. Информация о наличии «в наличии: 999999 шт. всех цветов» — менеджер уверен, что товар можно заказать, не нужно проверять склад отдельно. Это снимает тревожность: «а вдруг закончится, пока я КП согласовываю?».

8. Артикул Внизу каждой карточки — артикул (Арт. P-03812). Если менеджер работает с несколькими похожими товарами, артикул помогает не запутаться.

9. Контекст на фоне За затемнённым фоном видна карточка товара в редакторе КП с кнопкой «Похожие товары». Менеджер понимает, откуда пришёл и куда вернётся. Не теряет ориентацию.

Какую задачу решает

Менеджер не уходит из редактора КП в каталог, не ищет альтернативы вручную, не копирует артикулы. В два клика (выбрал карточку → нажал «Добавить в КП») заменяет товар на похожий. Раньше этот процесс занимал 5–10 минут: открыть каталог, найти аналог, сравнить цены, вернуться в КП, добавить товар, удалить старый.

Особенно полезно в ситуациях:

• Клиент просит «покажите другие варианты».
• Товар закончился на складе.
• Клиенту не подходит цвет или цена.
• Менеджер хочет предложить альтернативу со скидкой.

Паттерн inline-редактирования — модалки для полей карточки

Единая система редактирования данных прямо внутри редактора КП. Менеджер кликает на иконку карандаша у любого поля (название КП, название товара, артикул, комментарий) — открывается компактная модалка с одним полем ввода. После сохранения изменения применяются мгновенно, без перезагрузки страницы.

Общий паттерн всех четырёх модалок

1. Консистентный дизайн Все модалки идентичны по структуре:

• Заголовок по центру (что редактируем).
• Одно поле ввода (иногда textarea для многострочного текста).
• Зелёная кнопка «Сохранить» на всю ширину.
• Крестик закрытия в правом верхнем углу.
• Затемнённый фон с размытием заднего плана.

Менеджер, открыв одну модалку, мгновенно понимает, как работать с любой другой. Не нужно переучиваться.

2. Почему модалка, а не inline-редактирование Казалось бы, проще сделать поле редактируемым прямо в карточке (как в Notion или Google Docs). Но модалка здесь оправдана:

• Фокус. Менеджер видит только одно поле, ничто не отвлекает.
• Защита от случайных изменений. Клик на карандаш → осознанное действие → сохранение. Inline-редактирование может сработать случайно (двойной клик, автозамена).
• Валидация. В модалке можно проверить данные перед сохранением (например, формат артикула).
• Отмена. Крестик закрывает модалку без сохранения — менеджер может передумать.

3. Контекст на фоне За затемнением видна карточка товара в редакторе. Менеджер понимает, что именно редактирует, не теряет ориентацию. Это особенно важно для поля «Название товара» и «Артикул» — они визуально связаны с карточкой на фоне.

---

Разбор каждой модалки

1. «Комментарий к КП»

• Тип поля: textarea (многострочное).
• Содержимое: описание товара («Базовая, комфортная и недорогая классическая футболка…»).
• Задача: менеджер может отредактировать стандартное описание из каталога или написать персональный комментарий для клиента. Например, добавить: «Эта модель хорошо подходит для нанесения логотипа — плотная ткань, не просвечивает».

2. «Название товара»

• Тип поля: однострочное текстовое.
• Содержимое: «Футболка мужская REGENT, черная, 2XS».
• Задача: менеджер может переименовать товар под клиента. Например, изменить на «Футболка REGENT для корпоративного мероприятия ООО Ромашка». Это полезно, когда в КП несколько похожих товаров — клиент видит различия.

3. «Артикул»

• Тип поля: однострочное текстовое.
• Содержимое: «I-711380-309-XXS».
• Задача: менеджер может исправить артикул, если он неверно подтянулся из каталога, или добавить внутренний артикул клиента. Поле называется «Наименование» (видимо, шаблонное название лейбла), но содержит артикул — это мелкий inconsistency, который можно поправить.

4. «Название КП»

• Тип поля: однострочное текстовое.
• Содержимое: «Новое созданное КП».
• Задача: менеджер переименовывает предложение для удобства навигации. Например, в «КП для ООО Ромашка / Декабрь 2025 / 175 футболок». Это критично, когда в разделе «Мои КП» десятки предложений — без понятных названий невозможно найти нужное.

---

Какую задачу решает паттерн

Менеджер может отредактировать любое поле карточки товара или КП без перехода в другие разделы. Раньше, вероятно, чтобы изменить название товара, нужно было идти в каталог, находить товар, редактировать там — и только потом возвращаться в КП. Теперь всё по месту, в один клик.

Это особенно важно для B2B-сценариев, где менеджер часто кастомизирует КП под конкретного клиента: переименовывает товары, добавляет комментарии, уточняет артикулы. Гибкость без потери скорости.

Модалка «Редактировать характеристики» — гибкая структура карточки товара

Модальное окно для редактирования характеристик товара внутри КП. Менеджер может изменить любое значение (бренд, материал, цвет…), добавить новый параметр, удалить ненужный или поменять порядок параметров. Это даёт полную гибкость: стандартные характеристики из каталога — это база, но менеджер может адаптировать карточку под конкретного клиента.

Ключевые UX-решения

1. Табличная структура «ключ-значение» Две колонки:

• Заголовок параметра (Бренд, Производитель, Материал…) — что описываем.
• Значение параметра (Sol’s, хлопок, чёрный…) — конкретные данные.

Это знакомый паттерн (как в Excel или Google Sheets), менеджер не тратит время на освоение интерфейса.

2. Drag-and-drop сортировка Иконка ≡ слева у каждой строки — handle для перетаскивания. Менеджер может поменять порядок параметров: например, вынести «Цвет» и «Размер» наверх, если это важно для клиента, или опустить «Производитель» вниз. Это даёт контроль над тем, как клиент увидит информацию в итоговом КП.

3. Зелёная галочка — индикатор валидации Квадрат с галочкой между drag-handle и полем заголовка. Показывает, что строка заполнена корректно и прошла валидацию. Если менеджер введёт некорректное значение (например, оставит поле пустым), галочка, вероятно, сменится на предупреждение. Это мгновенный визуальный фидбек без необходимости нажимать «Проверить».

4. Удаление параметра Иконка корзины справа у каждой строки. Менеджер может убрать параметр, который не нужен в КП. Например, если клиенту не важен «Производитель» — удаляем строку, карточка становится компактнее.

5. Добавление кастомного параметра Кнопка «+ Добавить параметр» внизу списка — менеджер может создать любой параметр, которого нет в стандартном наборе. Например:

• «Срок изготовления»
• «Упаковка»
• «Сертификат соответствия»
• «Минимальный тираж»

Это критично для B2B: разные клиенты关心ют разные аспекты, и менеджер может адаптировать карточку под запрос.

6. Предзаполненные значения Все поля уже содержат данные из каталога (Бренд: Sol’s, Материал: хлопок, Цвет: чёрный…). Менеджер не заполняет с нуля — только редактирует нужное. Это экономит время и снижает риск ошибок (не нужно вспоминать точное название бренда или артикул).

7. Консистентная CTA-кнопка «Сохранить» — большая зелёная кнопка на всю ширину, как во всех других модалках системы. Менеджер не гадает, как применить изменения.

Какую задачу решает

Менеджер может полностью кастомизировать карточку товара под клиента: изменить значения, добавить уникальные параметры, убрать лишнее, поменять порядок. Раньше характеристики были жёстко заданы каталогом — менеджер не мог их редактировать, либо приходилось писать дополнительные комментарии вручную.

Это особенно полезно в ситуациях:

• Клиент просит указать специфические параметры (например, «сертификат ISO 9001»).
• Нужно скрыть внутренние данные (например, «Производитель» не важен для клиента).
• Менеджер хочет выделить определённые характеристики (например, вынести «Срок изготовления» на первое место, если клиент торопится).

Модалка «Редактировать цену» — настройка коммерческих условий

Модальное окно для редактирования ценовых параметров товара внутри КП. Менеджер может изменить тираж, цену за единицу, стоимость нанесения и применить скидку — всё в одном месте. Изменения автоматически пересчитывают итоговую стоимость позиции и всего КП.

Ключевые UX-решения

1. Обязательные и опциональные поля

• Тираж, шт. и Цена за товар, ₽ — помечены красной звёздочкой (*). Без них невозможно рассчитать стоимость, поэтому система требует заполнения.
• Цена за нанесения и допусл. и Скидка — без звёздочки, опциональны. Менеджер может оставить их пустыми или нулевыми, если нанесение не требуется или скидка не применяется.

Это снижает когнитивную нагрузку: менеджер сразу видит, что критично, а что можно пропустить.

2. Предзаполнение из карточки товара Все поля уже содержат значения из карточки (25 шт., 500,00 ₽, 99,99 ₽, 0). Менеджер не заполняет с нуля — только корректирует нужное. Например, клиент просит скидку 10% — менеджер меняет только одно поле, остальные остаются без изменений.

3. Разделение цены товара и цены нанесения Два отдельных поля:

• Цена за товар (500,00 ₽) — стоимость самой футболки.
• Цена за нанесения и допусл. (99,99 ₽) — стоимость логотипа, упаковки и других услуг.

Это специфика B2B-сувенирки: клиент часто хочет видеть разбивку, чтобы понять, из чего складывается итог. Например, «футболка 500 ₽ + нанесение 100 ₽ = 600 ₽ за изделие». Раньше эти суммы, вероятно, были слиты в одну — клиент не понимал, за что платит.

4. Гибкий формат скидки Поле «Скидка, ₽ или %» принимает оба формата:

• Менеджер может ввести 10 (проценты) или 500 (рубли).
• Система, судя по всему, сама определяет формат или позволяет выбрать.

Это удобно в переговорах: клиент просит «скидку 10%» — вводим проценты; «скиньте 500 рублей» — вводим рубли. Не нужно мысленно пересчитывать.

5. Вертикальная структура формы Поля идут в логическом порядке:

1. Тираж — сколько штук.
2. Цена за товар — базовая стоимость единицы.
3. Цена за нанесения — дополнительная стоимость.
4. Скидка — финальная корректировка.

Это соответствует ментальной модели менеджера: сначала объём, потом цена, потом скидки. Не нужно прыгать между полями.

6. Консистентность с другими модалками

• Тот же размер окна, что у «Редактировать характеристики», «Название товара» и других.
• Та же зелёная кнопка «Сохранить» на всю ширину.
• Тот же крестик закрытия в правом верхнем углу.
• Тот же затемнённый фон с размытием заднего плана.

Менеджер не переучивается — паттерн единый для всех модалок системы.

7. Контекст на фоне За затемнением видна таблица «Цена за товар» в карточке товара с теми же значениями (25, 500,00 ₽, 99,99 ₽, 0). Менеджер понимает, что именно редактирует, и видит связь между модалкой и карточкой.

Какую задачу решает

Менеджер может гибко настроить ценовые условия под конкретного клиента: изменить тираж (например, клиент хочет не 25, а 50 штук), применить скидку, уточнить стоимость нанесения. Всё пересчитывается автоматически — не нужно открывать Excel и считать вручную.

Раньше, вероятно, цены были жёстко заданы каталогом — менеджер не мог их менять, либо приходилось писать комментарии вроде «скидка 10% по договорённости» и считать итог вручную. Теперь всё в системе, с мгновенным расчётом.

---

Вывод

Редизайн конструктора КП превратил разрозненный набор инструментов в единую систему, где менеджер может видеть весь цикл работы — от создания предложения до отправки клиенту — без выхода из интерфейса.

Ключевые изменения:

• Три точки входа (корзина / ссылка / новый товар) закрывают все сценарии работы менеджера
• Inline-редактирование через модалки позволяет менять любое поле без перехода в другие разделы
• Визуализация нанесения с AI-превью показывает клиенту готовый продукт, а не абстрактный текст
• Гибкая структура карточки — менеджер адаптирует характеристики и цены под конкретного клиента
• Четыре формата экспорта (PDF / DOC / ссылка / email) под разные каналы коммуникации

---

Контакты

Telegram: @Mansurov_UX

Почта: support@vector30.com

Портфолио: ozon-walberies