專案背景
客戶說他們去拜訪投資人的時候,對方打開官網,停頓了一下說「先跳過這個」。那個瞬間讓他們決定要重做。目標很清楚:官網要在前十秒讓人看懂他們在做什麼,以及為什麼值得投資。
中英雙語是從一開始就要設計進去的,不是做完再翻譯,因為兩個語言的排版邏輯不一樣——中文習慣看密一點的資訊、英文讀者更喜歡留白和短句。i18n 的設定用的是 next-intl,每個語言有獨立的 metadata 和 OG 圖片,Google 才能正確索引兩個版本。
動畫是這個案子最容易變成負擔的地方。第一版做了很多視差滾動效果,在開發用的 MacBook 上很順,但在中階 Android 手機上跑起來很卡,Core Web Vitals 直接噴紅。後來把大部分動畫改成 CSS transition 而不是 JS 驅動,只留幾個關鍵位置用 Framer Motion,效能才過。上線之後他們說接到的投資人 cold email 回覆率明顯提高了,雖然沒有辦法直接歸因,但他們自己感覺得到差異。
介面展示
科技感首頁 Hero
Hero 區用一句話說清楚產品做什麼、解決誰的問題,背景光線動畫在不影響效能的前提下增加科技感。
產品功能特點
功能特點區以圖示搭配短句呈現三到四個核心賣點,方便投資人與採購方快速掃瞄。
定價方案頁面
定價方案頁面突顯推薦方案,各方案差異一欄對比,CTA 按鈕引導進入試用申請流程。
英文版首頁
英文版首頁獨立 SEO 設定,用詞針對東南亞 B2B 市場調整,避免直譯造成的閱讀障礙。