Web包装设计实战
电商离不开物流，物流离不开包装，电商公司会在包装上融入自己的设计元素，从而形成自己独特的品牌文化，包装是传递品牌的优秀媒介。
包装有很多种类型，比如半开纸箱、全开纸箱、折盒、手提盒、飞机盒、天地盖、上下抽屉盒、左右抽屉盒等等，下图是常见的半开纸箱：
包装的尺寸由长、宽、高决定，对于同一个 SPU 商品，包装上面的信息可以是一样的，但 SPU 可以包含多个 SKU，不同的 SKU 尺寸可以不一样。所以包装设计稿件应该是矢量的，这样才能适用于不同尺寸的 SKU，不用为不同的 SKU 设计不同的包装稿件，极大降低了设计师的工作量。
SPU，Standard Product Unit，标准化产品单元，比如 iPhone 13 是一个 SPU。SKU，Stock Keeping Unit，最小存货单位，即库存进出计量的基本单元，也就是最终到消费者手上的某款具体商品，比如 iPhone 13 深空灰 256G
了解包装设计的朋友应该知道 Adobe Illustrator 这款软件，一般叫做 AI 软件，在包装设计中使用得比较多，它可以制作矢量图形。
矢量图形是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示的图像
任何包装都可以展开成一张平面图，大家可以试试拆解手中的包装盒，所以包装设计也是平面设计，这样我们就可以在 AI 软件中设计包装，甚至可以在 Web 浏览器中来设计包装。
本文接下来就来讲述如何在 Web 浏览器中使用 SVG 技术实现包装设计。前文已经介绍过包装设计稿件是矢量的，在 Web 中可以使用 SVG 来制作矢量图形，另外 AI 软件也可以直接导出 SVG 格式的文件，这一点非常关键。
SVG，Scalable Vector Graphics，可缩放矢量图形，是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式
AI 中导出 SVG 文件的步骤：文件 -> 导出 -> 导出为 -> [文件格式选 svg] -> 导出为 -> [svg选项] -> 确定
包装盒是一个长方体，长方体有六个面（本文我们称之为包装面），一般顶面和底面不会放置内容，其他包装面分别会放置诸如 Logo、Slogan、产品图、产品信息等内容。
包装面上的内容，一般有文字、图片和条形码等，文字本身就是矢量的，图片可以使用 SVG 格式的图片，条形码的开源库也有不少。所以如果只是设计包装面，似乎并不需要使用 SVG 技术，完全可以使用普通的 Web 技术（如 DIV+CSS）来实现包装面的设计和排版。实际情况果真如此吗？
我们再来仔细看一下“图二：包装平面展开图”，不难发现，除了包装面之外，还有很多不规则的“插舌”图形，专业术语是“摇盖”。这些不规则图形使用 DIV 技术来绘制是非常麻烦的，不太可能使用 DIV 去绘制这样的不规则图形，只能使用 SVG。当然实际情况要复杂的很多，我们很难能画出所有盒型的摇盖图形，因为规则非常复杂，需要非常专业的包材知识。这里不得不提的一个概念是包装刀版。
刀版，我的理解是标注钢刀压裁的位置，包装盒展开是一个平面图形，纸张又肯定是一个标准的矩形，所以还需要使用钢刀压裁，去掉不需要的部分，这样剩下的部分才能折成一个正确的盒子。
前面已经介绍过，为了适用于不同尺寸的 SKU，包装盒的长宽高需要自定义输入。比如“图三：上下插盒刀版”中的“品名”面，如果要将它的宽度增加 100 毫米，那可以在 A 和 B 处各增加 50 毫米，也可以在 C 处增加 100 毫米，当然也可以分别在 A、B、C 处增加适当的长度并保证总增加的长度为 100 毫米。跟“品名”面相对的是“产品icon”面，它同样也要增加 100 毫米，因为它们两个是对称面，“产品icon”面存在相同的问题，即应该在哪个位置增加多少长度，它的情况可能还更复杂，因为梯形的角度是否需要或者是怎么变化。还有 D 处的弧度大小，应该和纸张的厚度有关。以上这些问题都涉及到了非常专业的包材知识，到目前为止，我也不知道变化规则是什么，我们咨询过专业的包材老师，他说变化规则确实很复杂，开发一款新的盒型并不简单，有些盒型的开发和优化时间长达十几年。所以在没有包材专家指导的情况下，去实现这样的功能是不现实的。
那么盒型的长宽高尺寸就不能自定义变换了吗？其实也不是，有些盒型的规则很简单，如下图所示的半开纸箱刀版：
上面的半开纸箱刀版，包装面都是很规则的矩形，所以尺寸变化只需要更改矩形的长和宽。A 处的摇盖，在包材老师的指导下，可以固定为 35 毫米，基本上不会影响盒子的使用。
但是，做为一个较为通用的 Web 包装设计平台，总不能只支持固定的一种或者几种盒型。那其他那些不知道如何变换尺寸的盒型如何解决呢？我们想到的方案是让供应商来上传刀版文件，做为一家制作盒子的供应商，他们那里肯定有正确的刀版文件。设计平台负责包装面的内容和风格的设计及排版，然后再让供应商把刀版文件上传到设计平台，再经由专业的设计师把包装面拖动到刀版中对应的位置，这样一个正确的盒型稿件也是可以制作出来的。
在 Web 中只能识别 SVG 格式的刀版文件，但供应商的设计稿件是 AI 格式的，幸好 AI 软件可以直接导出 SVG 格式的文件，所以前面说了这一点非常关键，不然整个方案流程可能就无法跑通。
这其中还有一个问题，就是设计师如何将包装面拖动到刀版文件中对应的包装面的位置呢，因为精度要求非常高，不能有丝毫错位。有人可能会说，只要支持能无限放大 SVG 刀版，就能精确对齐包装面了。这没错，但实操太复杂了，设计师是无法接受这种操作的，操作太耗时，直接会导致设计平台无法投入实际使用。
从“图三：上下插盒刀版”中可以发现，只要能识别出刀版文件的直线，然后将包装面和直线进行对齐就可以了。在说解决方案之前，我们需要先知道 SVG 的一些基本知识。
SVG 的基本元素有矩形(Rectangle)、圆（Circle）、椭圆（Ellipse）、直线（Line）、多边形（Polygon）、折线（Polyline）、路径（Path）、文本（Text）等。不难发现，除了直线元素外，直线还可能会出现在矩形、多边形、折线、路径元素中。解析矩形、多边形、折线中的直线部分是比较方便的，问题的难点是如何解析路径中的直线。通过分析实际的供应商刀版文件，各种元素都可能会出现。
SVG 中的 path 是一种较复杂的元素，用它可以画出任意的图形，这也正是 SVG 的强大之处。下面是用 path 画了一个三角形：
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
path 的 d（data） 属性是一堆坐标点，坐标点前面有一些字母，所有字母也可以是小写，小写字母表示相对坐标，大写字母表示绝对坐标，含义如下：
- M = moveto，移动
- L = lineto，直线
- H = horizontal lineto，水平直线
- V = vertical lineto，垂直直线
- C = curveto，曲线
- S = smooth curveto，光滑曲线
- Q = quadratic Bézier curve，二次贝塞尔曲线
- T = smooth quadratic Bézier curveto，光滑二次贝塞尔曲线
- A = elliptical Arc，椭圆弧线
- Z = closepath，闭合path
上述字母的具体效果这里就不展开讲述了，不难发现，直线主要可能会出现在 L、H、V 等这些节点上。但是，在没有解析库的前提下，要自己去解析 path d 属性中的直线，想想也是挺复杂的。
在查阅资料的过程中，发现了 path 元素两个非常有用的方法：getTotalLength 和 getPointAtLength，第一个方法可以获取 path 元素的总长度，第二个方法可以获取某个长度处的坐标，有了这两个方法，就不难解析出 path 中的直线部分了：可以遍历整个 path 的长度，先记录第一个长度处的 xy 坐标，然后再遍历下一个点，如果 x 值和前一次遍历的相等，说明横线还未结束，如果不相等，则说明横线已结束，y 值同理，表示的是竖线。需要注意的是 path 元素还可能有 transform 属性，这个属性会影响坐标系偏移。另外获取到的横线或者竖线可能很短，实际上没什么用，可以设置一个阈值，低于这个阈值的丢弃掉即可。实现代码这里就不贴出来了，需要的朋友可以私我。
有了上述这些方案，基本上可以将供应商刀版文件的识别率达到 100%，可以投入实际应用。
在实际研发过程中，我们发现还有一些知识点和开发技巧是比较重要的，下面挑一些来介绍。
单位及转换
包装设计稿件，尺寸使用的是 mm 单位，字号使用的是 pt 单位，这和一般网页中使用的 px 单位不同，不过 CSS 是直接支持 mm 和 pt 单位的。
但是把包装设计搬到 Web 中之后，在很多场景下，给出来的单位都是 px，比如鼠标的位置、鼠标移动的距离等等，这里有一个单位转换。画布可以放大缩小，但鼠标的位置又是相对于 viewport 视口的，这里也有一个单位转换。在 AI 软件中使用的是 mm 单位，但是导出的 svg 文件中的元素以及 svg 本身的 viewBox 属性会全部转换成 px 单位。我们发现，AI 导出的 SVG 文件的 viewBox 属性，使用的是 72dpi 来转换的，而现代电脑一般都使用 96dpi，而包装面上的元素排版都使用 mm 单位，所以这里也需要单位转换。
在 AI 中可以设置文本的字间距（letterSpacing），但在 AI 软件，这个字间距是不带单位的。通过查看导出的 svg 文件，发现它会转换成 em 单位，具体的数值和字体以及字号有关系。所以在 Web 中展示时，字间距也需要单位转换。
在 Chrome 浏览器中，中文的字号如果小于 12px 会统一显示为 12px，这对包装印刷是不适用的，小于 12px 的场景很多，所以所有的文本元素都需要对字号进行转换，目前只能通过 transform scale 来显示小于 12px 的文字，字号转换后，其他相对于字号的属性也需要转换，比如行高、字间距等等。
svg 的 viewBox 属性
svg 元素的 viewBox 属性是一个比较重要的概念，它的单位是像素，可以认为是该 svg 的默认尺寸，比如 viewBox="0 0 100 100"，表示该 svg 中的元素都是在一个 100x100 像素大小的容器来排列的。如果把该 svg 放置在一个 500x500 像素大小的 div 中，则会将 svg 等比放大 5 倍，这个放大效果是默认行为，因为 svg 中的元素都是矢量的，最终效果就是所有元素放大了 5 倍。也可以通过 svg 的 preserveAspectRatio 属性来控制是否等比例缩放。
利用 AI 导出 svg
有时候我们并不清楚一些效果在 svg 中是如何实现的，比如元素的旋转、缩放、文本的两端对齐等等，此时可以先在 AI 软件中绘制，然后再导出 svg 文件，此时就可以看到 svg 是如何来实现 AI 中的效果的。比如文本的两端对齐，并不是使用 CSS 中的 text-align: justify;text-align-last: justify; 来实现的，因为 svg 不支持这个样式属性，svg 是使用字间距来达到两端对齐的效果。
利用 AI 导出 svg 文件的功能，可以从结果推导 svg 是如何实现某种效果的，可以大大降低查阅资料和研究的时间成本。
导出 .pdf 和 .ai 文件
光在 Web 上面设计包装稿件还不够，因为稿件最终需要发给生产纸箱的供应商厂家，他们只接受 .ai 格式的文件，可能还需要在 AI 软件中继续编辑。.pdf 格式的文件方便在 Web 中查看。在 Web 中导出 .pdf 文件，这个比较常见，但是导出 .ai 格式的文件，貌似做不到。经过研究分析，我们发现其实 .pdf 和 .ai 文件是一样的，只是扩展名不同。
纸箱生产厂家，需要在 AI 软件中编辑 .ai 格式的文件，所以导出的文件是需要分图层的，这样可以把不需要印刷的内容去掉。其实 .pdf 文件也可以直接用 AI 软件打开，我们发现 .pdf 文件也是分图层的，想想也合理，毕竟都是 Adobe 公司的产品。
我们使用了 pdfkit 开源库来导出 pdf 文件，这个库提供了丰富的 API，完全能满足目前的需求。因为有些元素本身就是 svg 格式的，所以还需要 svg-to-pdfkit 这个库来往 pdf 中添加 svg 格式的内容。
此外，导出的 pdf 文件，需要把文本转换成图形，这个过程叫转曲，因为文本显示是需要字体支持的，如果电脑上没有相应的字体文件，则无法正确显示文本的样式，纸箱生产厂家一般也不会接受没经过转曲的文件。这个我们是使用 fontkit 这个开源库来实现的。
关于 Web 包装设计的介绍就到这里。在 Web 中实现包装设计，相当于做了一个简易版本的 AI 软件，对于编辑类的软件，对细节处理和用户体验的要求非常高。包装设计和普通网页又有很多不同之处，对于前端工程师来说，是一个崭新的领域和挑战。
留下评论