台灣 App 團隊 Fourdesire 於 9 月舉辦一年一度的使用者線上見面會。磨人 POLISH™以 Fourdesire 核心精神「玩心設計」出發，為他們打造這次的活動入口網頁，創造令使用者印象深刻的沉浸式體驗。

ㄧ、使用者體驗核心

「讓線上活動不只是一個單調的會議連結，而是從頭到尾都經過設計的完整沉浸式體驗。」

這兩年受疫情影響，許多團隊把實體活動轉為線上，但方式多半很陽春，通常都是寄信給參與者，提供 Google Meets 或 Gather Town 連結，體驗比較單一。這次為 Fourdesire 線上見面會製作的活動網頁，目標是打造更精緻用心的沉浸式體驗。

「Fourdesire 生活遊樂場」活動入口網頁

我們將活動當天會使用的 Google Meets 入口、Gather Town 入口、和參與者專屬角色都整合在一個 Campaign Site。使用者在網頁中登入並掃描 AR marker 即可解鎖自己的角色。其中掃描 AR marker 這個環節是活動前的最大驚喜，希望使用者想把這個有趣的體驗分享在自己的社群上。

「掃描 AR 環節」是本活動網頁的一大體驗亮點

二、網頁架構設計

「將使用者一切體驗集結在這個線上載體，並透過仿 App 介面設計加強沉浸式體驗的效果。」

流程上：進入網頁前要先輸入遊戲 ID 登入，增加儀式感、尊榮感，讓使用者覺得這個網站是專屬於他的。一進到網頁會看到一張空的角色圖＋驚嘆號引導，提醒大家領專屬角色。

網頁登入畫面

介面上：fix 畫面高度＋切換頁面使用 SPA（單頁體驗），用動畫取代一般網頁載入效果，降低網站分頁感，讓體驗更流暢、不被打斷。

裝置考量：Google Meets、Gather 環節的介面會以電腦版優先，也會提示使用者在這兩個地方要用電腦瀏覽。掃 AR 環節則以手機版為主。

電腦 v.s. 手機版

三、測驗卡牌設計

「透過資訊層級的安排，讓使用者一眼看到最容易產生共鳴的文字內容。」

<div style="padding:56.6% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/631829537?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="P-Fourdeisre2-04_仿App設計"></iframe></div><script src="https://player.vimeo.com/api/player.js"><

測驗結果卡牌設計

設計卡牌時的幾大重點：

1. 測驗結果必須讓使用者產生立即共鳴，因此參考之前很紅的網易雲顏色測驗，寫出使用者「在群體裡的位置」、「佔總人口％數」，並讓這個％數盡量低，讓使用者覺得自己很獨特、少見。

2. 希望降低使用者吸收資訊的負擔。我們發現當資訊量很大時，可以用模仿卡牌的 layout，文字比較不會擠在一起、難以閱讀。也可以用卡牌的編排方式製造不同的資訊層級。例如把「OO 指數／數字」放在最上方，跟其他內容做出區隔，不要讓數字阻礙使用者閱讀。並把最重要的測驗結果放在中段，而不是最上方。

3. 必須考量這個資訊會在 AR 環境下閱讀。多次測試後發現，跟一般平面設計不太一樣，AR 環境下的文字不太需要關注文字大小，因為使用者可以自由縮放、旋轉，所以比較需要關注第一眼看到的「感受」，也就是上面說的，能不能一眼看到他們最在意、最可能產生共鳴的東西。

   
   

四、Web AR 實作

「用 C4D 輸出 glb 檔能達到最好的網頁效能表現。」

我們觀察台灣多數行銷活動目前還是以 App AR 為主（例如 IG 濾鏡），Web AR 比較少人做。但我們希望降低使用者參加的門檻，不需要為活動下載一個 App，所以最後決定採 Web AR。

實作上，本次最大的挑戰是網頁效能問題。經過一番測試，這次 Web AR 的 3D 物件和動畫是使用 C4D 輸出 glb 檔案，在實作過程中有一些限制和要注意的細節，與大家分享：

經過測試，檔案輸出尺寸在 1–2 公分以內就非常足夠

物件大小：物件的大小會很直接地影響到檔案大小，太大的檔案容易讓瀏覽器效能爆掉。因此，在 3D 軟體中所設定的物件大小，在 1–2 公分以內已非常足夠。

1. 光源：原先我們在 C4D 中加入光源，但即使在軟體中渲染時都是正常的，一上傳到 AR，物件就會變黑。最後我們發現在程式中設定光源是最有效的做法，不僅穩定，也可以調整光源的亮度，甚至光源的種類也可以選擇（我們所使用的光源是：Directional light。）

2. 材質：glb 這個檔案類型，對於 3D 中的一個物件（Object），僅能認定一個材質（Material）。因此使用 UV Mapping 的做法是最穩定的，也能讓顏色較為接近原本的設計稿。另外，我們曾想為卡牌出場時加入發光特效，可惜在材質的表現上，glb 並無支援輸出自體發光（Luminance）。

3. 動畫：在 glb 這個檔案類型限制了 C4D 主要的動畫功能（Mograph）。不過 glb 有支援輸出使用骨架系統（Bone System）的角色動畫，而基本的移動、旋轉、縮放都是可以的。

材質上，使用 UV Mapping 的作法是最穩定的

其他檔案輸出須知：

• 如果 AR 裡的模型出現了色偏問題，先確定在渲染設定（Render Setting）中的 Gamma 值是否有調整為 2.2 以上。

• 有做動畫的話，輸出前先 Bake，可以讓動畫變得較為順暢。

• 檔案越大，AR 的 Loading 時間也會相對比較長，10–15MB 都還在可接受的範圍。