Modular Landing Pages at Bitget

我們將規範整理為五類模組：首屏、行情、產品內容、優勢與 CTA。每一類都有明確的資訊任務，讓新頁面可以先釐清要傳達的內容，再選擇適合的模組。

系統統一間距、字級、圓角與圖片安全邊界，同時保留產品視覺與資訊密度的變化空間。一致性來自共用規則，而不是讓每個功能都套用完全相同的頁面。

1. 首屏：建立產品主張，提供主要行動入口。
2. 行情：依資訊量選用卡片，或適合比較較多資料的列表。
3. 產品內容：以文字、圖片、影片或介面預覽說明功能。
4. 優勢：依賣點選擇圖文、圖示或純文字的呈現方式。
5. CTA：依需求提供單一行動、雙行動或多平台下載入口。

版面以 10、7、5、3 的相對寬度定義卡片角色。團隊在挑選圖片與細化畫面之前，便能先用比例討論資訊層級與內容配置。

1. 10：通欄呈現核心主張、大型產品畫面或收尾的行動引導。
2. 7＋3：以較大區域展示主要功能，搭配輔助說明或信任資訊。
3. 5＋5：並列兩項同等重要的功能或優勢。
4. 3＋3＋3：平行呈現一組輔助資訊，保留適當留白。

模組不只是一個固定的視覺容器。行情可以選擇帶幣種圖片或不帶圖片的卡片，資料較多時則改用列表；產品內容可採左右圖文、影片、平級卡片，或大幅的介面展示。

內容規範也限制視覺例外的使用：當頁面卡片過多時，可以透過通欄場景圖打破節奏，但單一落地頁原則上不超過兩個這類模組，在產品表現力與閱讀秩序之間維持平衡。

頁尾 CTA 延續同一套模組化方法，結構上支援一至兩個操作，也能依平台分組呈現多個下載選項。先依頁面要引導的下一步選擇形式，再透過共用間距與字級維持一致性。

視覺則同時提供克制的品牌色樣式與較豐富的材質背景，讓收尾區塊可以呼應整頁風格，同時保留清楚的操作層級。

響應式規則調整的是組合方式，而不只是縮小桌機版。通欄、主內容與對等卡片在 mobile 轉為滿寬；較小的輔助卡片，則可依內容長度採兩欄或橫向排列。

下方的 TradFi 桌機與 H5 設計，呈現這套方法如何構成完整頁面：從產品介紹，依序帶到行情、功能展示、優勢、FAQ 與收尾 CTA。畫面皆出自模組規範中的設計範例。

這套方法的目標，是將可重複的版面決策沉澱為共用規範，讓團隊將注意力放回產品敘事：哪些資訊先出現、哪些功能需要展示，以及下一步應引導什麼操作。新頁面可以組合既有模組，同時保留自身的內容與視覺重點。