行動裝置上的3D產品互動：為拇指而設計

用手機打開一個典型的3D產品頁，試著滾過模型。一半的機率你會和頁面打起架來：一根手指想滾動頁面卻觸發了旋轉，雙指想縮放網頁卻放大了模型，熱點彈窗的關閉按鈕恰好躲在拇指夠不到的角落。這個頁面是有人在桌面顯示器前拖著滑鼠設計的，而且一眼就能看出來。

這件事比多數團隊願意承認的更重要。行動裝置佔電商流量六成以上，也是大多數首次產品訪問的來源——對多數產品目錄來說，手機不是次要螢幕，而是主要螢幕。一個在桌面端表現出色、在手機端跌跌撞撞的3D體驗，不會被評價為「桌面端更好」，它會被多數訪客用他們經歷的那個版本來評價，也就是壞掉的那個。以做配置器為業的團隊很快會學到這一課；第一次自建的團隊，通常是從上線當天某支iPhone發來的反饋裡學到的——那是一種貴得多的學習方式。我們交付的3D配置器開發專案正是基於這個原因，先在真機上測試，再測其他任何東西。

好消息是，這些修法大多早有定論，只是很少被排進第一版。

手勢問題是一場談判，不是一個開關

旋轉、縮放、頁面滾動，全都想要同樣的手指。最省事的方案——3D畫布一載入就接管所有手勢——正是人人喊打的「滾動劫持」。實踐中站得住腳的模式，按我們的使用頻率排序：單指旋轉只認橫向拖曳，豎向滑動繼續滾頁面；縮放必須雙指，因為網頁本身很少需要雙指操作；模型載入後先處於「靜止」狀態，需要一次明確的點擊才進入互動，並配一句「拖動旋轉」的提示。每個選擇都用一點即時性換來大量信任——在手機上，訪客對頁面行為的信任，比任何一個炫技細節都值錢。

還有一個更細膩的變體值得標註。在模型在上、內容在下的產品頁裡，一些轉化表現最好的做法是：把完整互動收進一個買家主動進入的全螢幕模式，頁內嵌的模型保持輕度互動。買家可以自由滾動閱讀評論，好奇時點進去玩，永遠不用和頁面搶手勢。

點擊目標與拇指熱區

需要像素級精準才能點中的熱點，等於沒人會點的熱點。手指是鈍的，任何可點擊元素的實用下限大約是44pt見方；密集模型上的熱點標記還要再幫一把——要麼在標記旁自動展開標籤，要麼配一個與模型聯動的零件清單，讓買家在直接點模型太費勁時可以從清單選部件。與此同時，真正重要的控制項——AR按鈕、色板——必須放在單手拇指夠得到的地方，也就是大多數手機的下半屏。我們至今仍會看到主控制項放在右上角的配置器，那是一個人握著手機時最難夠到的位置。

載入速度才是真正的轉化槓桿

互動模式手冊裡描述的每一種互動，都建立在一個前提上：模型真的出現了。在手機上，這個前提需要工程手段才能存活。經過Draco壓縮的GLB通常能壓到3MB以內，紋理換成KTX2格式還能再砍，漸進式載入則讓訪客在剩餘資源串流進來之前先看到可用的模型。我們給專案定的標準是：中階手機、4G網路下，首次有效渲染低於2.5秒——這和Google核心網頁指標給LCP設的門檻是同一個數字，並非巧合，因為在3D產品頁上，模型就是那個最大的內容渲染元素。

同樣重要的是哪些東西晚點載入。只轉了一圈就離開的買家，不需要4K紋理包、每一幀爆炸圖狀態和整個AR資源包在首次請求裡排隊。把這些改成首次使用時才載入：沒有人會在意第一次點AR按鈕時那半秒的閃爍；每個人都會在意產品該在的位置上出現轉圈動畫。

設備分級：一種體驗，三檔畫質

打開你產品頁的手機，圖形性能差距可以達到五十倍。給所有設備端同一個場景，結局要麼讓旗艦機用戶失望，要麼讓五年前的舊機器過熱。實際可行的答案是畫質分級：載入時探測設備能力，對弱機下發更少面數、更小紋理、更少同屏特效，低於某個門檻則直接砍掉可選特效。中階手機上流暢60fps的可購買模型，比一個讓機身發燙、掉幀的電影級場景更能帶來訂單。買家說不清為什麼一個頁面「感覺廉價」——幀率抖動時他們的拇指先停下來，錢包跟著停下來。

手機上的AR現在是一顆按鈕，不是一個專案

最具手機特色的互動，成本比過去低得多。iOS在Safari原生暴露AR Quick Look，Android在Chrome暴露場景檢視器，所以對很多產品來說，整個AR功能就是一顆位置得當的按鈕，把GLB交給系統——不裝App、不寫WebXR、不維護自有3D引擎。模型以真實尺寸落在買家自己的地板或桌面上，配他自己的燈光。對家具、家電和一切「放進真實空間才成立」的產品，這是目前手機端槓桿率最高的互動，以天計而非以月計。但要注意內容本身：AR會把模型的每個缺陷放大到實物尺寸，模型必須真的準確，而不只是好看。

行動端3D上線前檢查清單

任何一次上線前，把成品對著這份清單過一遍：

• 單指拖曳橫向旋轉；豎向滑動仍正常滾動頁面

• 縮放需要雙指，且永不劫持網頁的雙指縮放

• 每個熱點至少44pt見方，密集模型配清單式後備方案

• 主控制項位於屏幕下半部，拇指可及

• 中階設備、4G網路下首次有效渲染低於2.5秒

• 重量級資源（爆炸狀態、AR、4K紋理）首次使用時才載入

• 畫質分級：弱機下發縮減資源，低於門檻砍掉特效

• AR交給Quick Look或場景檢視器，而不是要求裝App

這些檢查大多在起步時順手就能做進去，上線之後再回頭補就貴了——這幾乎是行動端3D所有事項的共同規律：一個能轉化的頁面和一個讓人煩躁的頁面之間，差距很少在3D引擎本身，而在於是否真的有人為拇指做過設計，而不是默認滑鼠永遠都在。

如果你需要第二雙眼睛檢查現有的成品，或者正在規劃新的，透過聯絡頁把產品情況告訴我們，我們會照著這份清單幫你過一遍——包括那些此刻就躺在你口袋裡的手機上會出問題的部分。

FAQ

問：為什麼我的3D模型會在手機上劫持頁面滾動？

畫布預設用單指手勢做旋轉。把單指旋轉限制為橫向拖曳、縮放改為雙指、或者讓完整互動需要一次主動點擊才啟用。

問：手機端的3D模型檔案應該多大？

目標是Draco壓縮後的GLB在3MB以內，紋理用KTX2。漸進式載入可以先顯示可用模型，更重的細節隨後串流補齊。

問：手機AR需要另外裝App嗎？

不需要。iOS的Safari原生支援AR Quick Look，Android的Chrome支援場景檢視器。一顆把GLB交給系統的按鈕，通常就是全部實作。

問：3D產品頁會傷害手機端SEO嗎？

做得規範就不會。快速載入的3D會提升互動指標，且模型本身應該成為2.5秒核心網頁指標預算內的最大內容渲染元素。