定制喵中的「模板」
模板种类
目前定制喵中一共有五种模板，分别是：
- 2D Preview Design(2D预览设计)
- 3DPreview Design (3D预览设计)
- Mockup Desgin(样机设计)
- Production Design(生产设计)
- Production & Preview Design (生产&预览设计)
为什么有这么多模板？
为了满足不同场景的需求，比如：
- C端只需要展示定制效果，不涉及到DPI以及图片格式要求，可以使用2D Preview Design(2D预览设计)；
- 只需要生产印刷图，不需要预览效果，可以使用生产模板；
- 除了预览效果，还需要一张300DPI，JPG格式的生产印刷图，预览效果是平面的，如亚克力摆件和钥匙扣，可以使用Production & Preview Design (生产&预览设计)；
- 生产印刷和预览效果都要，预览效果并不是平面的，可以使用Mockup Desgin(样机设计)；
- 会做3D模型并上传到Sketchfab,可以使用3DPreview Design (3D预览设计)
……
结合你的业务需求，选择最合适的！
为什么有预览组件和设计模板
- 预览组件和模板的关系：
一幅画，必须由画布+画框组合后，才被挂在墙上展示。
- 一幅画=预览
- 画布=模板
- 画框=预览组件
- 墙上=产品详情页中的定制功能
我该如何选择哪个预览组件和模板
所有制作都离不开工厂，在动手创建模板前，建议先问清楚工厂需要什么样的生产文件，再选择最合适的模板创建。避免浪费劳动！
- 格式，PNG JPG ?
- 参数，像素比例大小是多少？DPI是多少
- 色彩模式是RGB还是CMYK？
- 图片里是否需要包含产品？
模板对应预览组件
不同设计模板需搭配不同的预览组件使用，预览组件之间可实现的效果会有差别。
1.「Preview」
组件可导入2D Preview Design(2D预览设计)，Production Design(生产设计)，Production & Preview Design (生产&预览设计)三种设计模板，该组件可开启定制图层移动缩放。
但「生产&预览设计」缺少功能支持，不要开启「定制图层移动缩放」
2.「3D Preview」组件
仅可导入 「3D Preview」组件使用，该组件不支持定制图层移动缩放。
3.「Mockup Preview」
必须导入Mockup Desgin(样机设计)以及Production Design(生产设计)，该组件不支持定制图层移动缩放。
截图中1是Mockup Desgin(样机设计)，2是Production Design(生产设计)
每种模板特点介绍
2D Preview Design(2D预览设计)
在菜单栏-预览设计分类中创建
不可在Workflow中作为「生产设计」中引用
仅能合成PNG格式，72DPI的图片
合成的图片尺寸与创建时所选的尺寸一致
无法实现扭曲，透视等效果。
Production Design(生产设计)
在菜单栏-生产设计中创建
可在在Workflow中作为「生产设计」中引用
合成的图片参数（图片格式，图片色彩格式，像素比例，DPI）与创建时所设置的一致
无法实现扭曲，透视等效果。
Production & Preview Design (生产&预览设计)
在创建生产设计时勾选「Include preview design (Production & Preview)」（包括预览设计（ 生产&预览））创建
使用细节：
创建后先设计「生产」部分，设计好后点击右上角Next进入「预览」部分设计
进入「预览」部分设计前，需要设置「预览」部分的像素比例
进入后，「生产」部分的图层会自动编组，只可整体放大缩小移动以及单独隐藏编组内图层，不可进行其他编辑操作。
完成「预览」部分设计后，点击右上角保存即可。
如需修改「生产」部分，点击左上角返回（切勿使用浏览器内置的后退）。
C端只会展示「预览」部分。
消费提交订单后，预览和生产部分会各自生成图片。
Mockup Desgin(样机设计)
可以用于在线化定制，也可用于POD模式
可实现扭曲透视效果
在「在线化定制」模式下，必须搭配「Production Design(生产模板)」才可使用。
可以把它想成一个**“展示用的杯子模型”和一张“透明贴纸”**。
- 样机就像展示柜里的杯子模型。它不是拿去生产的，主要是让顾客提前看到定制完成后的样子。
- 设计区域就像贴在杯子上的一张透明贴纸。顾客添加的文字、上传的图片、选择的图案，都会先放进这张“透明贴纸”里，再一起显示到杯子上。
样机是用来试效果的产品模型；设计区域是模型上专门用来放定制内容的那块“透明贴纸”。
Mockup的产品图
Mockup的产品图应该是白底（可以理解为半成品，未定制），如：
- 毯子
- 相框挂饰
- 连衣裙
什么是设计区域？
关于设计区域，他应该是基于产品的印刷生产图参数创建（需要咨询实际生产方），比如毛毯的生产图参数是1000 *1300px 72DPI PNG，创建设计区域时参数如下填写
设计区域如何贴合产品图？
随后你可以通过修改定制区域的显示范围以及扭曲来让显示区域（修改显示范围不会改变上一步骤中配置的参数）
1.修改显示范围
2.扭曲-Warp
关于扭曲的操作演示：https://youtu.be/Px853BnNOOg
除了扭曲-Warp，还有透视-Perspective以及倾斜-Skew。
透视-Perspective：
倾斜-Skew：
设计区域替换显示图片
在编辑过程中如果难以掌握扭曲或透视角度，可以手动上传「生产图」代替「定制区域」的显示内容。
替换前
生产图：
替换后
开始扭曲
完成扭曲后点击Remove即可去掉
添加Mockup预览图
如果该样机有多个预览图，你可以点击添加图片
复制设计区域到其他预览图
如果多个预览图共用一个「定制区域」，你可以点击设置好的「定制区域」并按复制快捷键（Ctrl + C/ Com + C），和粘贴快捷键（Ctrl + V/ Com + V）复制过去，如下：
反之，点击新增则代表新增，右侧设计区域图层变迁颜色会不同
Mockup测试图
1.中间画布点击后可以上传Test图片，test图片不会出现在C端
2.预览图会根据你上传的Test图片实时更新
设置定制区域的填充方式
- Fill-拉伸
- Cover-填充
- Contain-适应
设置图片方向对齐
安全线（出血位）
一般用于提醒消费者定制内容摆放最好不要超出此线。
只会出现在C端，并不会影响预览图合成范围以及生产图合成
参考示意图
添加示意图后，会在C端画布中显示，起到指导消费者定制的作用。
Enable fill color SVG
开启后，C端设计页面会有颜色选项提供给消费者选择，他并不会影响生产图。（参考示意图需要上传SVG文件才可开启）
请注意，该选项并非开启就能使用，必须需在集成或推送产品到店铺时，勾选颜色并配置颜色选项。↓
如何让「定制功能」集成到产品落地页？（产品详情页） ←里面POD产品集成的时候有讲，可以结合查看理解
Bring to front
开启后只会影响C端设计画布样式，不会影响生产图样式。
开启后并在C端上传图片的样子↓
未开启并在C端上传图片的样子↓
显示定制区域的参数
「在线化定制」模式中的使用方式
「在线化定制」中的样机预览，只能选择 「样机设计」中的其中一张预览图使用以及必须导入「生产设计」。
生产图合成参数与「生产设计」的参数一致。
1.添加样机预览组件后，选择导入样机设计
2.选择样机设计
3.选择样机预览图（只能选其中一个）
4.选择设计区域（如有多个设计区域，可以选多个）
5.导入生产设计
如在上一步选择了多个设计区域，这里需要添加多个生产设计；如需多个设计区域使用同一个生产设计，可勾选上方的「Replace all desgin areas wtih a production design」
6.点击生产设计
7.完成组件与生产设计图层的数据连接
8.保存并预览
样机设计与生产设计的在样机预览中的关系可以简单理解为:
一个是外壳（样机设计），一个是贴图（生产设计），
贴图贴在外壳上。
因此样机设计一次制作，套用不同的贴图，达到可多次复用。
同时，贴图也可以套用在不同的外壳上并且无需重新连接组件和图层，非常方便。
你只需要复制一个功能出来，然后直接替换外壳即可。
「在线化定制」模式中如何复用Mockup
1.复制已完成的搭建
2.编辑新复制出来的搭建
3.点击替换（一定要点击替换才会生效）
4.选择新的样机
5.选择预览图以及设计区域
6.确认后可以看到组件与生产设计图层的链接并没有断开，点击预览和保存查看效果
3DPreview Design (3D预览设计)
建议寻找3D设计师，设计完模型后，上传到Sketch Fab，然后在定制喵里引用。
定制喵只负责引用3D模型，本身不提供设计3D模型和修改的功能
拓展阅读
新手入门
进阶功能
加价与追销
更新于： 26/10/2026
谢谢！