这是一个很早之前的方案，主要用于为船自定义颜色，尝试过将其应用在b2b中实现自定义下单，只需要传递订单的船型、颜色数字、位置，数据量极小，无需图片上传、其定制快照将同时记录在b2b与ERP端。

对于 Packraft 而言，客户知道自己想要什么颜色，但不知道最终搭配出来是什么效果这个问题比较突出。

一条船通常由多个区域组成，船头、船尾、左右舷、装饰条都可以选择不同颜色。客户往往会提出类似：

• 主体想用蓝色

• 装饰条换成黄色

• 左侧做绿色渐变

• 船尾改成黑色

如果完全依赖销售人员沟通，就会出现大量截图、P 图和反复确认的过程。

为了减少沟通成本，同时让客户能够直观地看到最终效果，才有了此Custom Color定制模块。

项目目标

项目的目标很简单：

让用户自己完成产品配色设计。

整个流程如下：

选择产品型号

↓

点击船体区域

↓

选择颜色

↓

实时预览效果

↓

提交定制方案

不需要设计软件，不需要安装任何程序，只需要一个浏览器即可完成。

产品系列支持

系统目前支持多个船型系列，可以根据需求增添

用户可以在页面顶部切换不同型号，每个型号都拥有独立的配色方案。

SVG 交互式拼色

项目最核心的部分是 SVG 矢量图。

每个船型都被拆分成多个独立区域：

• L1 ~ L5（左侧区域）

• R1 ~ R5（右侧区域）

• Strip（装饰条）

这些区域都可以单独设置颜色。

例如：

• L1 设置为蓝色

• L2 设置为绿色

• L3 设置为黄色

• Strip 设置为黑色

用户每次选择颜色后，系统都会立即修改对应 SVG 区域的填充颜色，实现实时预览。

相比传统图片方案，SVG 具有几个优势：

• 缩放不会失真

• 文件体积小

• 可以直接操作颜色

• 适合移动端和桌面端

整个配色过程几乎是即时响应的。

动态颜色管理

初版系统中的颜色是直接写在代码里的。

后来随着颜色种类不断增加，维护成本开始上升，于是重构出了后台配置系统。

管理员可以直接在后台：

• 新增颜色

• 删除颜色

• 控制颜色是否显示

• 区分主体颜色与装饰条颜色

所有配置均保存在 WordPress Options 中，无需修改代码即可完成更新。

配色方案提交

完成配色后，系统会自动记录：

• 产品型号

• 左侧各区域颜色

• 右侧各区域颜色

• 装饰条颜色

并通过表单提交给商家。

在后续版本中，这部分逻辑已经被整合到 B2B 定制订单系统中，实现了：

客户配色

↓

生成定制方案

↓

创建订单

↓

进入生产流程

从单纯的预览工具演变成了定制业务链路的一部分。

图片导出

为了方便客户保存设计方案，系统提供两种导出方式：

PNG 导出

将当前 SVG 转换为图片后下载。

适合：

• 微信发送

• 邮件沟通

• 客户确认

SVG 导出

直接下载矢量文件。

适合：

• 后续设计加工

• 生产资料归档

• 高分辨率输出

技术实现

项目主要基于：

• WordPress

• jQuery

• Inline SVG

实现。

SVG 文件最初由 CorelDRAW 绘制和导出，随后针对不同区域进行结构拆分和命名规范化处理。

前端通过 jQuery 操作 SVG 节点，实现颜色切换和实时预览。

整个项目没有依赖复杂框架，保持了较低的维护成本。

从 v1 到 v2

项目经历过两个阶段。

v1

单文件 HTML 版本。

所有颜色和配置均写死在页面中。

优点：

• 部署简单

• 无依赖

缺点：

• 修改颜色需要改代码

v2

WordPress 版本。

增加：

• 后台颜色管理

• 产品系列管理

• 表单集成

• 权限控制

维护性大幅提升。

一些思考

回头看，这个项目本身并不复杂。

它没有复杂算法，也没有庞大的系统架构。

但它解决了一个真实的问题：

如何让客户更快、更准确地表达自己想要的产品。

很多时候，数字化工具的价值并不来自技术本身，而来自于减少沟通成本。

对于定制化产品而言，让客户能够在网页上看到自己的设计方案，往往比几十张效果图更有效。

而这也是 Custom Color 诞生的原因。因此记录一下这个有一定意义的实现方案。