跳至主要內容
SHAO MEDIA

一臺先被換了車色的特斯拉:車衣塗裝網站,是一頁被做成的 3D 上色介面

從 V2EX 一則分享看特斯拉車衣塗裝網站如何以 3D 模型與貼圖置換做成可玩的上色介面。

科技 設計評論 約 3 分鐘閱讀

10 月 31 日,V2EX 上有一則「分享創造」帖。發帖者 ShawnHacks 在獨立開發羣裡看到一個名為 teslawrap.online 的網站,玩了一下覺得有趣,接著搜了一圈,發現做特斯拉車衣塗裝視覺化的網站已經相當多,tesla-wrap.com、teslawrapgallery.com 的 visualizer 都在做類似的事。帖子的重點很快從「好玩」轉向「這是怎麼做出來的」,也順帶留下了一個觀察:這麼小的一個需求,已經擠滿了做的人。

先把畫面拆開看。這類網站的核心畫面通常很單純:一臺停 在淺色背景裡的特斯拉,使用者從旁邊的色票或材質選項裡點一下,車身漆面立刻換色。沒有多餘的導覽、沒有長篇文案,整個頁面的資訊階層就是「一臺車加一排色票」。這種極簡其實是被功能決定的:使用者要判斷的只有一件事,這個顏色貼在我的車上長什麼樣。所以最好的介面,是把所有會幹擾判斷的東西都拿掉,只留下車體與可更換的表面。

技術上,回覆者 xiaoming1992 給了一條清楚的路徑:先取得汽車的 3D 模型(自己做,或從網路上找),再自己畫貼圖,最後用 3D 函式庫做展示與互動,他點名 three.js 是目前最成熟的選擇。發帖者也補充,在 GitHub 上已能看到開源的類似程式碼。換句話說,這種網站的門檻已經降到「模型加貼圖加一個成熟的 WebGL 函式庫」。車漆的質感好壞,取決於貼圖的解析度與材質參數:金屬漆的反光強度、消光膜的霧面程度、變色龍膜在不同視角下的色偏,這些才是同類網站之間真正拉開差距的地方。模型大家都能取得,函式庫是公開的,最後比的就是那層表面的說服力。

這裡值得注意的設計脈絡是:特斯拉把車身塗裝做成官方選配的一部分,車主本來就習慣在訂車流程裡「點選車色」。車衣塗裝網站做的事情,是把這個已經被教育好的行為,從原廠訂購介面搬到第三方網站,再把原廠不提供的選項(各種膜色、材質、圖案)補進去。這與我們先前談過的特斯拉在歐洲的輔助駕駛更名是同一種現象的兩面:這個品牌的使用者介面語言,早已被原廠定型,第三方只要沿用「乾淨背景加一臺車加選項」的語法,使用者就會。這也解釋了為什麼同類網站長得都像:它們共享同一個母版。

帖子裡也有不以為然的聲音。用戶 dengjunwen 直說理解不了喜歡塗裝的人,「這個能增加續航還是增加動能,我平時開車看都不帶看他的」。這句話恰好指出了這類網站存在的理由:它服務的從來不是駕駛功能,而是車作為一件會被觀看的物件。車衣的買家買的是停好車之後回頭看的那一眼,視覺化網站做的,就是把那一眼提前到下單之前。

回到發帖者的感嘆,「這麼一個小需求也這麼卷了」。從設計的角度看,這其實是一個健康的訊號:當模型、函式庫與開源程式碼都唾手可得,小需求上的競爭就會轉移到表面品質與細節判斷。誰的消光灰更像真的消光膜、誰的燈光讓車身曲線更立體、誰的色票命名更貼近車主語彙,這些才是下一輪被比的東西。一個入門門檻變低的市場,最後比的都是門檻以外的部分。

主題 介面與互動設計

標籤 #tesla車衣網站、#3d網頁介面、#獨立開發設計