WebAR 商品頁:什麼時候「放進我家看看」值得做

消費者在商品頁上點一下「放進你家看看」,把手機掃過客廳,一張沙發就貼著牆穩穩落在那裡,比例看起來差不多對。示範畫面挺好看。問題是它該不該佔掉你預算表上的一行,跟這個畫面漂不漂亮,幾乎沒有關係。

兩個數字框住了整個判斷。第一個是 80%:絕大多數消費者不肯為了看一件家具裝一個 App,這也是 App 版 AR 熱過一陣就退回新奇玩意狀態的原因。第二個是 1–5MB,每個 AR 模型想做到點下去幾秒內就站穩,檔案得壓在這個區間裡。兩者都不是技術問題,一個是使用阻力,一個是素材紀律。專案成敗差不多就落在這兩處。

那顆按鈕背後在發生什麼

WebAR 跑在手機瀏覽器裡。不進應用商店,不用裝,不用註冊。iPhone 上 Safari 交給 AR Quick Look,Android 上 Chrome 打開 Scene Viewer。鏡頭找到一個水平面,模型吸附上去,環境光估得還算準,影子不至於看起來像貼紙一樣浮著。大約九成現代手機都支援。商業上真正的差別是少掉的那一步:在消費者看到自己的東西擺進空間之前,不必先從商店下載任何東西。

從工程角度看,那顆按鈕是一條素材管線的最後一環。得有人把 3D 模型做出來或轉出來,砍到手機吃得動的面數,把材質烘進壓縮格式,丟上 CDN,再為那 10% 完全不支援 AR 的瀏覽器寫一條退路。品牌方說「AR 做了沒效果」,多數時候是指上面某一環被跳過了。

那些數字,還有該信幾分

代理商寫的案例裡,頁面互動提升通常報在 30% 左右,家具家飾類的退貨率降幅落在 20–40% 之間。有家製作公司公布的手機端轉換提升接近 15%。導入預算大致是 5,000 到 25,000 美元,看商品數量和平台整合深度,回本週期他們說三到六個月。

在你跑完自己的測試之前,這些數字先當行銷數字看。方向上有參考價值,因為尺度、尺寸這種不確定性主導的品類,AR 確實動得了退貨。轉換提升那部分,取決於你原本的基線、你的流量結構,還有你網站的訪客到底有沒有那個耐性。至於退貨三成是因為沙發運送途中撞壞的品牌,攝影機救不了這個。

花錢之前你能驗證的其實只有一件事,退貨原因。翻一下退貨紀錄,如果「跟想像的不一樣」「尺寸不合空間」是主力,AR 是對著正確的問題開刀。如果主要來自運損、室內光下的色差、買完就後悔,那顆按鈕幫不上忙。

WebAR 商品視覺化 手機實景擺放

成本在哪裡回得來

產品得大到手機螢幕說不清楚,才有得談。沙發、餐桌、衣櫃、戶外家具、磁磚與地板樣品、要擺在檯面上比的電器。這些品類裡,買家真正的問題是空間性的:塞不塞得進去,會不會擋住窗,胡桃木在我家地板上看起來偏暖還是偏灰。一個 3D 模型丟進他真實的房間,回答的是攝影棚照片答不了的那一層。

B2B 買家也在受益,只是安靜得多。經銷商和設計師沒法親自跑一趟展廳,但他可以把一台設備的佔地面積放到車間地面上,或把一組燈具放進客戶的大廳。這件事沒有消費級 AR 那麼好看,價值說不定更高,因為判斷錯的代價是按棧板計的。

對已經在賣定製家具的品牌,兩件事疊起來比單做一件強:先配置,再把那一台配置好的放進房間。我們的定製家具配置器和這類 AR 視圖吃的是同一個 3D 主模型,管線成本因此可以共用,不用做兩遍。

什麼時候不值得

小東西不需要。手錶、檯燈、手機殼,一張好渲染圖就夠判斷了,AR 多一個步驟卻沒多給資訊。

靠質感賣錢的產品風險高。手機鏡頭加上壓縮材質,織紋、木紋、金屬珠光都會被抹平。一件在主視覺照片裡貴氣逼人的布料,變成壓縮模型飄在別人的廚房裡,可能看起來很平。你拿出來的保真度低於渲染圖,場景還由對方控制。這筆交換有時會反咬你一口。

沒有 3D 資料的目錄是陷阱。八成 SKU 只有照片,AR 就變成一個商品一個專案,覆蓋率永遠補不齊,撐不起那顆按鈕。要嘛下定決心把整條產品線建模,要嘛接受 AR 只活在幾支主打商品上。

還有一類退貨 AR 碰不到:服飾的版型、運送損壞、買後懊悔、商品描述沒寫清楚造成的錯誤期待。那是另一個專案,跟攝影機無關。

素材管線才是專案本身

這節最不光鮮,卻決定上線之後撐不撐得住。每個 AR 模型最好待在 1–5MB。這意味著 CAD 或高面數原始模型要減面,材質要為即時渲染重做而不是離線光線追蹤,測試要拿中階 Android 機跑,不能拿工作室那支最新 iPhone 測完就宣布完工。轉檔這一段跟網站配置器要的功夫高度重疊,我們寫過的為網站 3D 配置器準備 CAD 檔案那張清單,幾乎可以一行不改拿來用。

另一半是頁面效能。一顆會把笨重載入腳本拖進商品頁的 AR 按鈕,能讓手機端 LCP 跨過 2.5 秒,而這個代價落在每一個訪客身上,包括大多數根本不會點的人。AR 素材改成互動時才延遲載入,然後把有它跟沒它的頁面各測一次。

退路也要先想好。大約每十台裝置有一台吃不了 AR,老 Android 瀏覽器是常客。誠實的做法是在那些裝置上給 360 度序列或靜態 3D 檢視器,這個取捨我們在360 度旋轉與 3D 配置器的差別裡走過一遍。兩套檢視器維護起來比一套貴;假裝這個落差不存在,貴的是訂單。

已經有配置器的話

AR 最強的版本不是畫廊旁邊多一顆按鈕。是配置結束的那一刻:消費者選完布料、腳座、尺寸,然後把那一台放進房間。要做對,AR 模型必須繼承配置狀態。這是管路問題,渲染本身不是重點。判斷哪些組合合法的規則層,產品配置器規則引擎那篇寫過。AR 在這層下游,而在這裡失敗的實作,多數是因為配置器和 AR 檢視器活在不同系統裡。

手機端互動設計再加一層限制。拇指、單手、注意力短,這些把 AR 畫面上能放的介面壓得很小。我們在手機端 3D 產品互動裡談過桌面配置器塞進手機之後掉了多少東西,AR 把這個壓縮推得更遠。

這週就能做的判斷

調出三個月的退貨原因,數一下有多少條指向尺寸、空間、跟想像不一樣。然後看營收前二十的 SKU,老實問一句,這些你有能用的 3D 模型嗎。兩個答案指向同一個方向的話,也就是退貨主要來自空間判斷失誤、模型手上也有,那就值得在那二十支商品上試點,配延遲載入的檢視器和一套正經的退路。任何一個答案站不住,先把預算花在模型管線上。它是 AR 的前提,是配置器的前提,也是你目錄本來就需要的那批渲染圖的前提。

在限定的 SKU 上試點還有個好處:你會拿到自己的數字,而不是供應商案例裡挑過的數字。九十天後再數一次退貨原因,再決定要不要鋪開。想聽第二意見的,把商品清單和退貨資料寄給我們,我們會直接說會怎麼做,包括答案可能是「還不要」。

FAQ

問:WebAR 商品視覺化要多少錢?

導入預算大致落在 5,000 到 25,000 美元,取決於多少商品要做 3D 模型、AR 要不要接配置器、你的電商平台是哪一套。帳單大頭通常是建模那一段,不是 AR 檢視器本身。

問:WebAR 所有手機都能用嗎?

大約九成現代智慧手機支援。iPhone 走 Safari 裡的 AR Quick Look,Android 走 Chrome 的 Scene Viewer。老 Android 瀏覽器是主要缺口,所以 360 度檢視器的退路算正經實作的一部分,不該當成事後補救。

問:WebAR 模型要多快載入?

從點擊到模型站穩,抓兩到五秒鐘。大致對應每個商品 1MB 到 5MB 的 glTF 或 GLB,放 CDN,AR 腳本只在消費者按下去時才載入。

問:AR 能顯示消費者自己配置的那一台嗎?

可以,而且這是最強的用法。檢視器要能從你的配置器繼承配置狀態,布料、表面、尺寸都要帶過去。把 AR 當成獨立於配置器的另一套模型,最後會得到同一個商品的兩個不一致版本。