Google 的裝置與服務行銷 (DSM) 部門負責監督各類產品的市場進入策略,包括智慧型手機、手錶、耳機、平板電腦、智慧型住宅裝置和相關訂閱項目,這些產品和服務皆可透過 Google 商店和全球第三方供應商購買。使用者會在網路和實體零售商店中看到這些產品。
這個團隊面臨的一大挑戰,就是向消費者和零售商說明 Google 硬體生態系統和進階 AI 體驗的用途和優點。為協助消費者更瞭解產品和功能,DSM 團隊運用先進的網頁技術打造 3D 虛擬空間,解決許多這類挑戰。本案例研究說明瞭團隊如何為客戶打造更身歷其境的體驗,並以四倍快的速度和一半的成本推出這些新體驗,而這項成本是傳統數位資產的一半。
挑戰:產品教育
向銷售人員和初次使用 Google 硬體產品的客戶解說互通性和 AI 等功能的好處,成本高昂且難度高。傳統的產品教育策略仰賴數位內容,這些內容是使用實體產品製作,然後託管在數位學習平台上。這些學習平台提供產品技術規格、圖片和影片,但無法存取實體或連網產品。
影片等學習內容的製作成本高昂,且難以為全球市場進行本地化,幾乎無法在不同產品之間重複使用。製作初始素材資源需要預算,用於選角、服裝、場勘、場地費用、攝影棚費用、攝影團隊和後製工作。製作成本和成品也需要考量本地化問題;修改素材資源、地點、產品、文字和人才,對傳統行銷來說特別具有挑戰性,因為這些項目需要大量管理。而且,由於大多數支援的產品每隔幾個月就會推出新功能,這些素材資源在完成時就已經過時。
探索更佳的產品資訊分享方式
為了尋找更佳的產品資訊分享方式,DSM 團隊在應用程式中試驗了 VR/AR 體驗,結果相當樂觀,不僅提升了互動度,也增加了銷售點的購物籃大小。不過,對於銷售人員和客戶而言,應用程式下載作業都是重大的進入門檻,而且如果只限於應用程式,就無法嵌入 store.google.com 等其他第一方或第三方資源。
使用 <model-viewer>
的輕量解決方案
在看到 3D 產品模型用於產品教育的成功案例後,團隊決定將這種做法應用在網站上。其中一種方法是使用 <model-viewer>
為個別產品建立 3D 體驗。
<model-viewer>
是網頁元件,可讓您以宣告方式將 3D 模型新增至網頁,同時在您自己的網站上代管模型。您可以在 Google 商店的 Pixel Fold 頁面上看到這項功能的實際運作情形,<model-viewer>
可讓使用者以各種折疊位置,從任何角度查看 Pixel Fold。我們很輕鬆就能將 3D 模型整合至其他 HTML UX,並透過按鈕以鏡頭角度和互動式色彩變化來講述故事。有了 <model-viewer>
,您可以為使用者提供任何您能想到的體驗。
建立 3D 模型
開發 3D 虛擬體驗的第一步,就是建立 3D 產品模型。DSM 團隊在 CAD 中建立 3D 模型。透過與製作產品 CAD 的設計師密切合作,DSM 團隊得以匯出可針對網站最佳化的低多邊形算繪。他們採用了以下幾項最佳做法來達成這項目標。
- 幾何圖形:
- 請專注於從各個角度正確繪製幾何圖形 (形狀和比例)。
- 請勿使用法線圖斜切邊緣。
- 建立貼花圖案做為獨立的幾何圖形。
- 顏色和材質:
- 目標:一致地呈現物理屬性。
- 考慮即時光源動態。
- 為每個網格類型 (不透明、透明、貼花) 使用個別的紋理集和材質。
- 如需進一步調整,請與原始 CAD 設計人員進行設計重複作業。
- 檔案大小:
- 以 GLB 格式匯出為低多邊形模型,以便
<model-viewer>
使用該模型。 - 由 3D 設計師手動壓縮幾何圖形網格,或透過 DRACO (OS) 等壓縮軟體。
- 以 GLB 格式匯出為低多邊形模型,以便
由於這些 3D 模型經常用於行動電話,因此我們將紋理的最大檔案大小設為 2 MB,以便支援舊款裝置和網路連線不佳的情況。
<model-viewer>
DSM 團隊使用 Google 的 <model-viewer>
開放原始碼網頁元件,將新建立的 3D 模型嵌入網頁。為了讓在第一步中建立的模型與 <model-viewer>
相容,素材資源必須採用 gITF 或 GLB 格式 (副檔名為 .glb)。這兩種格式都很精簡、可壓縮,且可快速載入至 GPU。所有主要的常青瀏覽器都支援 <model-viewer>
元件。
在這個步驟中,DSM 團隊遇到的最大挑戰是 Google 硬體調色盤無法正確顯示。團隊最終發現,ACES 色調對應 (電影業標準) 是造成顏色遺失的原因。為解決這個問題,他們開發了新的 Khronos PBR 中性色調對應器,專門解決這些缺陷,並在螢幕上精確呈現色彩,同時避免因線性色調對應而產生的過曝亮點和色調偏移。
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
如要進一步瞭解 <model-viewer>
,請前往 modelviewer.dev。如要測試 3D 模型並下載整個入門網站,請試試我們的編輯器。
使用 three.js 的大型解決方案
<model-viewer>
是顯示及與單一 3D 模型互動的絕佳方式,且效能出色。不過,DSM 團隊有時需要更沉浸式且互連的網路體驗,而 <model-viewer>
無法提供這類體驗。其中一個例子是 Nest Mini + C 的推出。<model-viewer>
可讓潛在客戶在網路上以 3D 方式體驗產品,但無法顯示與其他 Google 硬體產品和 Google 助理等 AI 功能搭配時的實用性。
為完成這項工作,團隊轉向 <model-viewer>
的基礎程式庫 three.js。Three.js 是開放原始碼 JavaScript 遊戲引擎,團隊人員因此能夠為虛擬家居環境建立可重複使用的素材資源架構,其中包含 Nest 室內攝影機、燈具和音箱。這讓團隊能夠針對裝置之間的互動方式,提供即時意見回饋。
Dialogflow
建立互連體驗的最後一項工作,就是加入 Google 助理。這表示使用者可以透過互連的虛擬體驗,嘗試使用真實的指令和例行程序。不過,從使用者現有帳戶插入 Google 助理會產生許多隱私問題。為了打造隱私權優先的解決方案,DSM 與 Google Cloud Dialogflow 服務合作,模擬 Google 助理在這個領域的功能。下圖概略說明網路應用程式如何使用 Dialogflow 的 API (改編自 Dialogflow 的「基礎知識」)。針對每個對話回合,網頁應用程式都會使用 Dialogflow 的意圖分類,而 API 則會傳回與意圖相符的預先設定使用者表達內容。
如要進一步瞭解 Dialogflow,請參閱 Google Cloud 說明文件。
最終結果:可嵌入的 iFrame
最終結果是資產程式庫,可透過 <model-viewer>
嵌入網頁,或在完整虛擬環境中使用,協助客戶進一步瞭解個別產品以及產品的連結方式。這項服務不僅真實,且可擴充及節省成本。這項首波虛擬體驗於 2021 年 5 月推出,雖然已從 Google 商店網站下架,但您仍可試用。
成果
自 Nest Mini + C 推出以來,DSM 已能重複使用並擴充過去兩年 Pixel 產品陣容推出的架構,並持續取得成功。透過這些 3D 素材資源和體驗的迭代作業,團隊目前已將互動產品教育訓練體驗的數量增加四倍,並讓能從這項網路技術獲益的產品數量增加三倍。
最終結果是品牌化的真實產品教育,可針對日益增加的用途變化進行大規模應用,比先前的策略更具可持續性、更具連貫性,且更具互動性。展望未來,DSM 團隊現在擁有豐富的沉浸式體驗元件組合,可快速調整動態業務目標。這些改善措施讓 DSM 團隊能夠以四倍的速度推出新的產品教育內容,而且成本不到先前傳統程序的一半。