将一张正面照片变成 Thermal 配置器，各部位均可单独选择。

Hore! Tote：网站与产品配置器

交互原型 · 网站设计与前端开发

客户提供了一张袋子的正面照片。我们主动了解哪些部位可以定制，再将这些产品知识转化为网站中的规则。对于 Thermal，袋身、顶部和提手的颜色可以分别选择。

查看网站原型

Thermal 配置器：袋身为 Orange（橙色），顶部为 Cream（奶油色），提手为 Ink（墨黑色）；可见顶部的颜色控件。 — 袋身为 Orange（橙色），顶部为 Cream（奶油色），提手为 Ink（墨黑色）。颜色可以分别选择；控制面板已滚动至顶部配色选项。放大图片

客户无需为每种组合拍照，就能比较具体设计。同一张照片也成为讨论定制选项的起点。

这是正面视角的模拟效果，不是生产确认样。颜色、材料和印刷方式仍需由生产团队确认。

一张照片，各个部位遵循不同规则。

我们借助 AI 制作产品部位映射图，再将其与颜色及设计覆盖范围的规则关联。袋身、顶部和提手在配置器中各有不同作用。

客户照片

用作模拟基础的橙色 Thermal 袋原始正面照片。 — 以原始照片为基础，袋型和拍摄视角保持不变。放大图片

AI 辅助部位映射图

Thermal RGB 技术映射图：袋身为红色，顶部为绿色，提手为蓝色，背景为黑色。 — 这是技术映射图，不是产品照片，也不是袋子的配色选项。放大图片

红色：袋身
绿色：顶部
蓝色：提手

配置效果

截图中的模拟细节：橙色袋身、奶油色顶部和黑色提手。 — 从原始截图中裁切的效果局部。打开图片可查看完整界面。放大图片

浏览器通过 Canvas 2D 处理照片和部位映射图，保留照片的纹理与明暗。代码将选定的颜色和图案组合起来；每次选择时，AI 并不会重新生成图片。

图案可覆盖袋身和顶部，提手保持纯色。

同一示例图案可以只覆盖袋身，也可以同时覆盖袋身和顶部。切回仅覆盖袋身时，顶部恢复为 Cream（奶油色），提手仍为 Ink（墨黑色）。

袋身 + 顶部

Thermal 袋身和顶部使用演示图案，提手保持 Ink（墨黑色）纯色。 — 袋身 + 顶部的覆盖范围使用同一演示图案。放大图片

仅袋身

演示图案仅覆盖 Thermal 袋身；Cream（奶油色）顶部和 Ink（墨黑色）提手保持纯色。 — 顶部恢复为纯色，提手颜色不变。放大图片

所示图案仅用于演示，并非客户设计作品。模拟以正面照片为基础，不改变袋子的形状或结构。

明快的品牌形象，安静的设计空间

Carry Something Happy 是视觉设计的主旨。托特包照片占据主导，搭配温暖的黄色、品牌橙色点缀和圆润的 Quicksand 字体。访客首先看到的是产品。

用户开始设计时，背景变得更安静。桌面端的袋子预览位于设置面板旁；移动端则将预览和控件纵向排列。这一变化将品牌介绍与选择配置的空间区分开来。

所提供的产品照片并非由 Lithe 拍摄。样机效果和设计放置效果均为模拟，并非成品照片。

查看移动端首页

Hore! Tote 首页截图，包含流程及模拟局限的说明。 — 首页将产品介绍与设计、询价流程衔接起来。放大图片

Hore! Tote 原型产品目录，包含五种袋型、筛选器和颜色选项。 — 产品目录顶部。打开图片可查看全部五种袋型及其印刷区域。放大图片

与设计相衔接的产品选择

产品目录展示五种型号：Canvas、Spunbond、Juco、Thermal 和 Thermal minuman 1 cup（单杯饮品提袋）。照片、模拟配色选项和印刷区域指引，帮助用户在打开编辑器前比较各个型号。

接下来的选择分为五步：袋型、颜色、设计、配件和数量。对于 Canvas，印刷指引标出两条提带之间的中央区域。这个边界为用户放置文字提供参考，而不是暗示整个袋面都可以印刷。

Canvas 提供了一个补充示例：文字被限制在两条提带之间的中央区域。放大图片

查看移动端产品目录

在一份汇总中核对需求

设计方案可以复制，并分别设置不同数量。汇总将各方案的预览、型号、颜色和数量放在一起，便于核对。截图使用的是两个测试方案，并非客户订单。

两个托特包方案的汇总，测试数量为 25 个和 10 个，共 35 个。 — 25 个和 10 个的数量仅为测试示例，并非客户订单或最低起订量要求。放大图片

项目状态： 所展示的网站是交互原型。询价请求仅在浏览器中模拟，并未发送给生产团队。最终价格、材料供应情况、印刷尺寸比例和配件仍需确认；生产前须批准确认样。此版本没有结账或支付功能。

移动端的预览和控件纵向排列。

编辑器与汇总在 390 × 844 视口下的展示。首屏裁切图呈现各屏幕的布局；打开图片可在适应窗口或原始尺寸模式下查看完整截图。

Hore! Tote 原型的移动端首页，包含托特包照片和袋型选择按钮。 — 首页在选择袋型前先介绍产品。放大图片

移动端 Thermal 编辑器：图案仅覆盖袋身，顶部为 Cream（奶油色），提手为 Ink（墨黑色）。 — Thermal 编辑器的首屏裁切图；打开图片可查看预览下方的覆盖范围控件。放大图片

移动端汇总，包含两个托特包示例方案及袋子总数量。 — 汇总的首屏裁切图；各方案及数量依次展示。放大图片

您的产品需要定制选项吗？

我们帮助定制产品企业将产品知识转化为客户可在网站上尝试的选项。有限的初始素材也可以成为产品预览、设计规则和需求汇总的基础。

我们可以根据客户选择产品的方式，设计产品目录和网站流程。

讨论您的定制产品网站