Onyx Coffee Lab 如何為電商打造互動式 3D

咖啡是一種感官體驗，但網路購物不是。

對 Onyx Coffee Lab 來說，他們的線上形象取決於能否彌合這道落差。

在一個競爭激烈、咖啡豆看起來都一樣，而產品差異藏在香氣、風味和口感中的品類裡，光靠文字說故事，能做到的有限。

Onyx 需要一個數位體驗，能承載他們在烘焙中展現的那份對工藝的執著，同時不拖慢效能或轉換率。

於是他們挑戰極限：在網頁上呈現互動式 3D，以 Spline 打造，並由一個小團隊交付上線。

Onyx Coffee Lab 2025 聖誕倒數日曆的捲動式 3D 體驗

在沒有感官的情況下做出品牌區隔

咖啡品牌在網路上出了名地難做：

• 大多數產品在視覺上都很相似。 淺焙放在深焙旁邊，看起來仍然都是咖啡豆。

• 你賣的是聞不到也嚐不到的食物。 沒有任何感官上的回饋。

• 市場已經飽和。 「好咖啡」已經不再是差異化的優勢。

Onyx 的網站不能只是好看，還必須快速傳達訊息。否則，他們的目標受眾很快就會失去興趣而離開。

將工藝轉化為看得見的品牌訊號

Onyx Coffee Lab 的技術長 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，他們找到一個適合小團隊、在行動裝置上流暢運作的工作流程，讓互動式敘事能快速上線，幫助他們在擁擠的市場中做出品牌區隔。

聯絡業務