Bitget Homepage Redesign
把品牌視覺從 2D 帶進 3D 的首頁改版
Bitget 網站首頁改版是我加入後主導的第一個大型專案,於 2024 年 11 月 26 日全量上線。首頁是尚未註冊的訪客認識 Bitget 的第一道門,因此它的任務非常明確:把訪客轉化為註冊用戶,並帶動 App 下載。
我全權負責這個專案:從前期調研、設計、交付上線,到上線後的數據分析。這次確立的視覺方向,後來也成為 Bitget 設計系統的基礎。
- 角色
- 調研視覺定調UI & UX 設計動態設計數據分析
- 平台
- 網站
- 時程
- –
- 日期
- 2024 年 11 月
研究告訴我們什麼
這次改版從證據出發,而不是從喜好出發。問卷針對 Bitget 當時並行的兩種首頁,蒐集到 808 份回饋:行銷版 421 份、簡潔版 387 份。簡潔版的問題是缺乏行業差異化、不夠友善、沒有重點;行銷版則是雜亂、賭場感重、閱讀體驗差、內容過多。
據此,提案訂出三個目標:降低新用戶的註冊阻礙、強化 App 下載的引導,以及視覺降噪,讓品牌與平台的安全性更值得信任。
行為數據則決定了資訊該放在哪裡。mobile 佔首頁訪客的 66.2%(PC 32.6%、Tablet 1.2%),而能看到長頁底部的訪客不到 3.6%。因此註冊入口與關鍵產品資訊必須前移,手機版也必須獨立設計,而不是從桌機版縮小而來。
三個設計決策
提案把這些發現轉成三項改變,下方的前後對照皆出自這份提案。
- 導覽列:原本有 1 個圖示按鈕、9 個主選項加上廣告位,共 10 到 11 項。提案把跟單(Copy)與策略交易(Bots)歸入 Trade,新增給新手的 Learn 入口,強化 Rewards,並精簡二、三級選單。
- 簡潔版:頁面從 8 屏以上精簡為 5 屏,讓更多訪客看到重點:熱門幣種、跟單與理財收益前移,重疊的業務與增信模組整併,並新增 FAQ。
- 行銷版:首屏保留活動,但拿掉雜亂的視覺,以微動效做強調;行情改以分頁呈現,跟單一次呈現三位交易員。
簡潔版
左邊是之前,右邊是之後;下方的完整頁面可以直接捲動,像瀏覽真實網站一樣。


行銷版
左邊是之前,右邊是之後;下方的完整頁面可以直接捲動,像瀏覽真實網站一樣。


行動版網頁(H5)
左邊是之前,右邊是之後,以手機尺寸呈現。


從 2D 走到 3D
Bitget 原有的視覺語言以平面的 2D 漸層材質為主。我把它帶進三維空間,將玻璃視為真實的材質,而非表面效果:折射、光暈、透明度與光線,都逐一細緻調校。
為了讓材質成為畫面的主角,其餘元素刻意保持克制。我制定了字體與圓角的使用規範,讓介面保持沉穩、一致,3D 視覺得以主導畫面,而不與內容互相競爭。

這次改版的影響遠不止於單一頁面。這些規則成為 Bitget 設計系統的基礎,也是後續主視覺與大型頁面設計的起點。
效果和效能之間
首頁是全站對效能最敏感的頁面之一,設計上卻需要豐富的 3D 動態。我們沒有因此犧牲動態,而是將素材壓縮成更輕量的檔案格式來保留它。取捨落在影片長度:我們縮短了影片秒數,讓每一段都能形成乾淨、無縫的 loop,同時檔案小到足以快速載入。




