Конструктор украшений, 2026

Проект находится в разработке и планируется к внедрению в реальный бизнес-процесс клиента. Это позволит проверить ключевые гипотезы на практике и использовать реальные сценарии использования для дальнейшего масштабирования продукта.

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

 Статус проекта

✅ Сделано

1. Исследование предметной области — текущий процесс согласования «клиент ↔ дизайнер», аналоги, боли, JTBD
2. Постановка задачи и гипотезы — перспектива, предположения в основе продукта, критерии успеха
3. Проектирование структуры: OOUX-модель — объекты предметной области, их свойства, связи и действия как единый источник истины
4. Пользовательские сценарии и логика сборки — потоки редактора: выбор изделия → основа → компоненты → проверка ограничений → отправка клиенту
5. Дизайн-система — дизайн-токены, UI Kit, библиотека компонентов, состояния, правила отображения украшений. Ссылка на дизайн-систему в Figma

🔥 В работе: UI редактора на базе дизайн-системы

⭕️ Дальше

• Интерактивный прототип — кликабельная сборка для проверки сценариев на пользователях
• Валидация — юзабилити-тесты по гипотезам: скорость сборки, понятность принципа, сокращение числа правок, влияние на скорость решения
• Разработка MVP — каталог элементов, редактор сборки, визуализация, сохранение вариантов, экспорт для согласования
• Внедрение и итерации — реальный бизнес-процесс клиента, метрики, масштабирование ассортимента.

Перспектива

Создание украшений на заказ обычно сопровождается длительным согласованием между клиентом и дизайнером. Клиенту сложно представить итоговый результат, а каждая новая версия требует ручной подготовки визуализации. При этом украшения редко являются уникальными объектами целиком. В большинстве случаев они собираются из набора повторно используемых компонентов. Это создаёт возможность перевести процесс согласования в формат интерактивного конструктора.

Предположения, которые лежат в основе проекта:

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

Гипотезы и метрики

1. Самостоятельная конфигурация сокращает согласование
   • Метрика: среднее число итераций «правка → новая визуализация → согласование» на заказ.
   • Порог: сократить с текущих N до ≤2.
2. Клиент понимает конструктор без обучения
   • Метрика: доля пользователей, собравших изделие без подсказки (task success rate); время до первой сборки.
   • Порог: ≥80% собирают сами; первая сборка < 3 минут.
3. Компонентная модель покрывает реальный ассортимент
   • Метрика: доля изделий клиента, воспроизводимых из библиотеки компонентов (coverage).
   • Порог: ≥85% каталога собирается из существующих компонентов.
4. Инструмент ускоряет решение о заказе
   • Метрика: время от старта сборки до отправки на согласование; конверсия «начал → отправил».
   • Порог: сокращение времени решения / рост конверсии относительно baseline.
5. Единая библиотека упрощает расширение ассортимента
   • Метрика: доля переиспользованных компонентов при добавлении нового изделия (reuse rate).
   • Порог: новое изделие в основном из существующих компонентов.

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

Структура: OOUX-модель

Для снижения сложности проекта была построена предварительная Object-Oriented UX-модель предметной области. Модель описывает основные объекты системы, их свойства и взаимосвязи, выступая единым источником истины для проектирования пользовательских сценариев, редактора сборки и последующей реализации веб-приложения.

Фреймворк OOUX предполагает проектирование продукта через объекты предметной области, их атрибуты, отношения и действия над ними, а не через отдельные экраны и пользовательские потоки.

Логика и сценарии

Логика редактора:

• Выбор изделия
• Выбор основы
• Выбор длины
• Добавление компонентов
• Изменение порядка
• Проверка ограничений
• Просмотр результата
• Сохранение конфигурации
• Отправка клиенту

Интерактивная модель. Пользователь должен иметь возможность:

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

Параметрическая библиотека изделий

Продуктовая библиотека компонентов

Для подготовки цифровой библиотеки компоненты были отрисованы в Adobe Illustrator, экспортированы в SVG и перенесены в Figma. Внутри Figma была построена иерархическая компонентная система: камни, оправы и декоративные элементы реализованы как вложенные компоненты. Это позволяет автоматически распространять изменения на все производные элементы — это формирует основу для дальнейшей разработки веб-приложения.

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

Цепочка в системе конструктора

Цепочка реализована как параметрическая кривая, основанная на деформации. Берётся простая геометрия — окружность или кривая, и она используется как «каркас»:

• задаётся длина (периметр / масштаб кривой)
• задаётся форма (окружность, овал, свободная кривая)
• применяются параметры натяжения и провиса
• на эту кривую “садятся” элементы (звенья, подвесы)

Подход упрощает разработку — вместо ручного управления каждым звеном система работает с единой параметрической формой и автоматически рассчитывает геометрию и размещение компонентов:

• это дает стабильную топологию (нет начала и конца)
• равномерное распределение сегментов
• лёгкое масштабирование (увеличил радиус → увеличил длину)
• предсказуемую геометрию.

Якорные точки

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

Компоненты привязываются к свободным якорным точкам, получая координаты и угол поворота автоматически. Это обеспечивает корректное расположение элементов при изменении длины цепочки, её деформации или смене типа основы. Такой подход позволяет:

• автоматически перестраивать композицию при изменении параметров изделия;
• равномерно распределять элементы без ручной настройки отступов;
• поддерживать ограничения совместимости между компонентами;
• реализовать механики перетаскивания и перестановки элементов;
• значительно упростить разработку редактора, так как система работает с абстрактными точками привязки, а не с координатами каждого объекта.

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

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

Визуализация параметрической модели в Figma

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

При попытке воспроизвести такое поведение в Figma, столкнулся с ограничением. Абсолютное позиционирование (top/botom) не сработало: при деформации кривой её геометрия смещается, тогда точки не попадают на кривую.

Для имитации поведения параметрической модели в Figma использовал Grid Layout. Контейнер состоит из одной колонки и трёх строк:

• 1 и 3 строки содержат якорные точки. Размеры строк задаются в процентах относительно общей высоты контейнера)
• 2 строка занимает всё оставшееся пространство и выступает в качестве деформируемой области.

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

Режимы якорных точек

Для баланса между автоматизацией и ручным контролем якорные точки поддерживают три режима: Fixed, Auto и Offset. Такой подход переносит принципы Auto Layout на параметрическую кривую, позволяя сочетать автоматическую адаптацию композиции с точечной настройкой отдельных элементов.

Fixed — точка имеет фиксированное положение на кривой и не зависит от изменений соседних элементов. Подходит для подвесок, замков и ключевых декоративных элементов.

Auto — положение точки рассчитывается автоматически с учётом размеров компонентов и отступов. При изменениях композиции соседние точки пересчитываются, предотвращая пересечения. Подходит для бусин, разделителей и повторяющихся элементов.

Offset — точка наследует позицию из режима Auto, но может быть дополнительно смещена вручную (в пикселях, процентах или вдоль кривой). Режим сохраняет преимущества автоматической раскладки, одновременно предоставляя дизайнеру возможность тонкой ручной настройки композиции. Подходит для тонкой настройки композиции, асимметрии и оптической балансировки изделия.

Локальная система осей

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

Дизайн-система интерфейса

Разработана дизайн-система конструктора: библиотека UI-компонентов, дизайн-токены, типографика, цветовая палитра, система отступов, иконография, правила композиции и состояния компонентов. Архитектура библиотеки строится с расчётом на развитие продукта и синхронизацию с кодовой реализацией.

Продолжение следует ...