Onyx Coffee Lab 如何为电商打造交互式 3D

咖啡是一种感官体验，但网购不是。

对 Onyx Coffee Lab 来说，线上形象的成败取决于能否弥合这道鸿沟。

在这个拥挤的品类里，咖啡豆看起来都差不多，产品差异体现在香气、风味和口感中，光靠文字讲故事只能走到这一步。

Onyx 需要一种数字体验，能够承载他们在烘焙中展现出的那份对工艺的执着，同时不拖慢性能和转化。

于是他们突破了边界：在网页上使用交互式 3D，用 Spline 构建，由一支小团队交付。

Onyx Coffee Lab 2025 降临节日历的滚动式 3D 体验

没有感官的品牌差异化

咖啡品牌在网上出了名地难做：

• 大多数产品看起来都很相似。 浅烘和深烘放在一起，看上去也都还是咖啡豆。

• 你在卖一种闻不到、尝不到的食品。 没有任何感官反馈。

• 市场已经饱和。 “好咖啡”已经不再是差异点。

Onyx 的网站不能只是好看，它必须快速传达信息。否则，目标受众很快就会失去兴趣并离开。

把工艺变成看得见的品牌信号

Onyx Coffee Lab 的 CTO Michael Mahler 介绍了定义这个品牌的两大支柱：

1. 尽可能新鲜的咖啡 咖啡按订单烘焙并快速发货，从烘焙厂到家门口通常只需 24-48 小时。
2. 改变激励机制的道德采购 Onyx 支付给生产者的价格是大宗商品市场价的 4-6 倍，建立起长期合作关系，形成一个关键的正向循环：生产者愿意把最好的批次卖给 Onyx，社区也在这一过程中受益。

同样的心态也延续到了他们的网页体验中。

我们的口号是“永不满足于还不错”。我们永远在想：还能做些什么来改进？这种心态从未停止。

Onyx Coffee Lab 带有交互式 3D 场景的 Circadian 产品页面

为专业型消费者而设计

Onyx 并不是为所有人设计，他们为在意细节的人设计。

Michael 称他们为专业型消费者（prosumer）。这些客户会注意到品牌在小地方偷工减料，并期望连贯的数字体验能体现产品品质。

这塑造了一种刻意的设计思路：网站必须一眼就能看懂，但同时又要恰好站在电商“常规”做法的边缘。

Onyx 在一个地方找到了这条与众不同的边缘：用 Spline 进行 3D 设计。

我们想找到那条线，并尽可能贴着它走……那条线就是 3D 动画。

借助 Spline 运行时的 Shopify 网站

Onyx 运行在 Shopify 上，但他们的店铺体验是一个完全自定义的前端，把 Shopify 用到了极限。

Onyx 没有导出模型，也没有依赖专门的集成，而是通过 Spline Viewer 嵌入 Spline，并使用 Spline 的 Code API 以编程方式控制场景。

这让他们能够打造像产品功能一样运作的交互时刻，而不只是静态视觉。

从故事板到 Spline 交互

Onyx 的 3D 制作流程以速度、协同和效率为核心：

1. 高质量的产品渲染图 通常以抠图 PNG 的形式交给设计团队。
2. 故事板 设计团队为动效设置“关键帧”：什么在动、何时动、为什么动。
3. 在 Spline 中制作动画 团队把这些故事板重建为真正的交互式场景。
4. 交接给开发 Spline 嵌入内容上线到网站，并通过运行时逻辑进行控制。

用 3D 解释客户意想不到的内容

Circadian 不是一个典型的咖啡产品页面。

Circadian 没有使用“浅烘还是深烘”或“风味描述”这类常规的咖啡描述，而是推出了按咖啡因含量划分的款式，并提供一个计算器，帮助客户规划一天中的摄入量。

Onyx 把 3D 视觉当作一套讲解系统，帮助传达这些信息，让它更引人入胜：

• 背景以视觉方式引出概念
• 场景会对交互做出响应
• 点击不同款式会在 Spline 场景中触发不同的动效

“对我们来说，不同的款式实际上就是产品里含有多少咖啡因。背景中的素材会根据他们正在查看的体验而移动。”

关键在于，Onyx 团队让这些交互素材在需要时退居幕后，在需要时又能走到台前成为交互焦点。例如，当重要文字横跨页面时，嵌入的 3D 素材上的灯光就会调暗。

最大的收获：上线速度

对 Onyx 来说，最突出的优势不只是视觉质量，而是对团队而言的可行性和速度。

大约有 10 个人参与网站代码和创意工作。对一家咖啡公司来说，聘请专门的 3D 工程师和设计师是一项重大的投入和开支。

Spline 通过压缩时间线、让每个人都能做 3D，降低了这种风险。

最大的优势是上线速度……Spline 降低了开始用 3D 做这些事情所需承担的风险。

开始使用 Spline

Onyx Coffee Lab 采用 3D 并不是为了炫技，而是用它来解决一个真实的电商问题：

如何让一种感官产品在网上显得真实，同时不牺牲速度、清晰度和转化？

借助 Spline，他们找到了一套适合小团队、在移动端运行流畅、能让交互式叙事快速上线的工作流，帮助品牌在拥挤的市场中脱颖而出。

联系销售