「在臺大，每位學生都有出國交換的機會。」這次 磨人 Polish™ 受到臺大國際事務處的委託，要將以往實體舉辦的「海外教育博覽會」轉為線上舉辦。臺大在全球有 260 所交換學校，關於交換學校的資訊非常多且複雜，而本次的博覽會即是為了讓這些資訊能更簡單、清楚的傳達，並吸引大家來報名交換學生而打造的線上平台。

活動舉辦至今，從數據成果來看可說是頗為成功，去年的博覽會網站一整年的瀏覽次數為 10 萬，但這次我們僅花 10 天就突破校內 10 萬瀏覽。開展七天便有 2,000 名學生使用學生信箱登入（過去展期只有約 60 名），直播節目的觀看數也突破歷史紀錄。有超過 20% 登入學生連續瀏覽網頁超過 7 天，最高單次體驗網站時間為 3 小時，超過 10% 學生單次體驗網站超過 2 小時。

結合 3D 地圖與一頁式網站，既能提升逛展體驗和探索慾，也能清楚呈現文字資訊

與臺大有配合的交換學校遍佈全球各大洲，要如何讓學生一眼就看出「有非常多學校可以選擇」呢？如果只是用一般的一頁式網站，很難一次呈現出這麼多學校，或是會看起來不太美觀，因此我們將網站設計為一幅 3D 世界地圖，一進到頁面就能將所有學校一目瞭然，不需要特別說明「學校很多」，而是在視覺上讓學生一眼就能看出來。地圖形式也能自然而然激發人的探索慾，提升「逛展」的代入感。

臺大海外教育博覽會 — 世界地圖

近年許多線上展覽都選擇用 VR 來做，我們認為 VR 儘管能做到沈浸式體驗，卻不一定能達到活動的實質目的。對使用者來說，要完整逛完一個沈浸式 VR 展覽是困難的，很容易就迷失在展覽中，且展覽內容多以圖片、影片為主，不適合放置太多文字訊息。本次網站首頁採用 3D 地圖設計，先營造出沈浸感、氛圍感，但在呈現複雜資訊時則採用一頁式網站呈現，讓使用者閱讀時更加輕鬆。

恰當的資訊排序與整合，逐一展示重要資訊，逛展過程不迷路

本次的網站體驗主角是「世界地圖」，不過不同於多數這種地圖體驗網站是一開始就進入地圖，我們特別設計了一個「入口頁」，不僅能更完整置入活動資訊、有更多行銷版位可以運用，也能讓「進入地圖」更有儀式感。在資訊排序上，我們將最重要的地圖安排在最上方，其次是這次博覽會想要傳達的核心訊息，也是想打破臺大學生既定印象的文案：「每個人都有交換的機會。」，接著放置了報名時程以提升報名轉換率，最後才呈現這次博覽會特別設計的積分遊戲制度。

博覽會首頁-一頁式內容

這次網站的一大特色是「積分遊戲」的環節，我們提供獎品作為誘因，吸引學生登入並參加積分遊戲。為了取得網站整體調性以及積分遊戲之間的平衡，我們將積分、抽獎等相關頁面收合在一個 Modal（彈跳視窗）裡，而非直接呈現在地圖頁上。這也能讓專屬學生的活動以及其他內容做出區別，非學生的訪客也不會覺得有很大的落差。Modal 中除了有甄選資訊，還透過有趣的「學校答題」，讓學生更清楚學校資訊。各個學校資訊除了地圖式的探索，還有「清單列表」的呈現方式，配合 Filter（篩選器）能更快速找到目標學校。

南美洲地區 — 聖保羅大學(Modal)

臺大學生積分活動登入 CTA

利用細節堆砌作品美感，並提供實質誘因，讓學生更願意主動向外擴散

一個活動網站要能達到擴散，本身就需要具備一定品質，並且需提供足夠的誘因作為助力。本次透過積分遊戲促使學生進行指定行為，積分最高的學生可以獲得 iPad、Apple Watch 等大獎。我們在網頁的不同環節搭配不同的小遊戲，包含每日登入、探索博覽會內容、觀看博覽會活動直播、填寫問卷等，完成不同遊戲都可以賺取積分，並結合排行榜機制，激發學生想要競爭的慾望。

<iframe title="vimeo-player" src="https://player.vimeo.com/video/760750743?h=0b499bac44" width="640" height="360" frameborder="0"    allowfullscreen></iframe>

臺大學生個人空間 (modal) — 抽獎誘因 + 邀請制 + 排行榜

值得一提的是，這次積分遊戲中的一大重點是邀請制（Referral），讓學生去邀請其他的學生登入網頁，成功邀請越多人，可以獲得越多獎勵。邀請制在一般遊戲或 App 服務中雖然很常見，但邀請制的成功與否，還是要回歸到作品的品質，作品本身要具備一定水準，大家才會願意推薦。這次在網站體驗和設計美感上我們都下了很多功夫，像是特別打造的配樂，利用翱翔飛越的音效開場，帶領使用者從世界出發到各地體驗；再從鋼琴與弦樂的旋律中，微微聽見校園裡的喧鬧聲，讓探索過程充滿活力洋溢的氣息。而美術的部分也沒有馬虎，根據不同州的風格調性，設計學校的屋頂、主體，透過排列組合讓視覺看起來不單調。藉由這些細節的堆砌營造正面觀感，才能讓學生更願意真心、大方地分享出去。

台大學生邀請登入頁

使用 Three.js 渲染出 3D 模型，並在視覺效果與網站效能間取得平衡

這次 磨人 Polish™ 在前端的部分，歸功於 Three.js 讓我們能在瀏覽器上渲染出 3D 模型，引用內建的 controller 其實就能達到不錯的效果。不過畢竟是內建，為了提升使用者對於操作地圖的體驗，我們最終選擇了自己手作，花了許多時間調整 3D 參數，包含滑動速度、地圖大小、邊界、阻尼等等。由於現代使用者能夠連進網頁的方式越來越多，不同的載體讓我們在手作控制器時，需要了解對應的觸發事件是什麼，也需要對此做出相對應的運算，才能讓場景中的模型以及攝影機可以如預期般的移動。

<iframe title="vimeo-player" src="https://player.vimeo.com/video/760764211?h=802e76936d" width="640" height="360" frameborder="0"    allowfullscreen></iframe>

世界地圖體驗測試 — 桌機版

當然剛開始踏入 Three.js 的世界對於該使用什麼事件監聽、該怎麼透過事件得到的數據做怎麼樣的運算也是霧裡看花，在此真的要感謝 Bruno Simon 的 Three.js journey 以及他所建立的社群才能讓我們一步一步走來，最終做出理想的成果。

做 3D 時最大的障礙往往在於如何兼顧視覺效果與網站效能，若實際放上燈光和陰影效果會太過消耗效能，因此我們選擇不在網站上打光，而是用貼皮（bake）的方式，地圖板塊底下的陰影也不是做 3D，而是用 jpg 檔來處理，並盡可能把圖檔大小壓低。雖然沒辦法做到非常精緻，但最後我們讓視覺有一點類似 Minecraft 的 pixel 感，也別有一番風格，並且不需要犧牲最重要的網站體驗。

北美地區

歐洲地區

東北亞地區

大洋洲地區

南美州地區

中東地區

北亞地區

東南亞地區

博覽會主視覺