設計之第一篇章：讓著陸頁重新著陸

沒有一款產品的設計是永恆的，尤其是在 AI 快速發展的時代。隨著產品需求不斷增加、協作方式也越來越複雜，團隊常常會猶豫：是不是正好該趁這個機會重新設計一下？但這終究不是一件容易的事——尤其是在保證現有著陸頁正常迭代的同時，完成一套新的設計。

為什麼是現在？

Zeabur 最初的著陸頁，只需要講清楚一件事——我們是一個按量付費的部署平台。使用者只要看懂 CI/CD 和按量付費這兩點就夠了。但過去一年裡，Zeabur 的產品形態一直在不斷擴展：AI Hub、Dedicated Server、Domain、Email，再到後來基於 Claude Code 的 Skills。我們一直用同一種方式把它們塞進首頁——加一張卡、加一小段介紹、加一個跳轉。每一步看起來都合理，可當我們真的把整頁滾到底時，它已經不像一個產品主頁，更像一個越堆越滿的陳列櫃：看得完，卻講不出一個完整的故事。

變化的還有使用者來到著陸頁時的意圖。過去，使用者會從上到下閱讀——看特性、看計費、看範本；而現在，越來越多人希望直接把一個專案交給我們，讓 Zeabur 替他們思考接下來該怎麼做。著陸頁因此需要一個真正意義上的 AI 入口。

可迭代，而不是一次性

我們最終沒有把這次重做當成「做一版更好看的著陸頁」來規劃。我們想做的是一個能承載未來變化的著陸頁——這意味著，今天的重點不該是這一版做得有多精緻，而是半年後下一個同事要加一個 section 時，會不會有心理負擔。

這也是整個 ReLand 專案最底層的一條原則：承認著陸頁是活的。它會繼續被改。所以我們把精力放在了三件事上。

一是把顏色、字體、邊框這些瑣碎的東西從元件裡收回到一套 CSS Variable 裡。淺色和暗色各定義一套 token，透過 html.dark 切換。元件裡剩下的只是語意引用——「品牌色」、「活躍態」、「邊框」。主題切換不再是某個元件需要特殊處理的事，而是整個頁面天然具備的能力。

LightDark

二是讓每個 section 都可以被獨立替換。新首頁裡的每一塊都是一個獨立元件，section 之間用一套固定的視覺語彙串聯起來：頂部和底部的實線，以及中間插入的對角線條紋過渡帶。對角線像是施工現場的警戒帶，看上去像是在「接縫」處。我們沒有讓它們渾然一體——相反，我們刻意讓它們看起來有介面、可替換。哪天加一個 Skills、刪一個 Template，都不會讓整體節奏斷掉。

三是讓 AI 入口貫穿整條視線。AIBar 不是一個附加功能按鈕，而是整個著陸頁的視覺終點。使用者從 Hero 開始看，在中段理解我們能做什麼，最後自然落到 CTA 上方的 AIBar——他們可以直接把程式碼拖進去開始部署，不需要先註冊、先讀文件、先跳去 Dashboard。

新首頁改動最大的是 Hero。

所以我們把它重新畫了一遍。新的 Hero 背景是完全自繪的 WebGL shader 疊層，淺色是一組暖橘，暗色是一組紫色，在主題切換的一瞬間緩緩淡入，而不是硬切。它看起來像一片被輕微擾動的資料海——有方向性的光、一層細碎的字元點陣、一次溫和的網格扭曲。這不是為了炫技——只是因為，作為一個基礎設施平台，Zeabur 應當能自己畫出屬於自己的第一屏。現在的 Hero 很乾淨：背景營造氛圍，tagline 提供決策參考，AIBar 和 CTA 提供動作。

這種「在細節上一點點往下削」的方式，是我們在這次專案裡反覆做的事。很多時候設計師的直覺是「再加一點會更好」，但更難的判斷是「拿掉這一層之後會不會更好」。

信任感

這次重做裡，有一個幾乎改寫了整站氣質的決定——我們拋棄了過去那套大圓角。

舊版著陸頁上，卡片、按鈕、容器普遍使用 16px 甚至更大的圓角。大圓角在過去幾年幾乎是 SaaS 和消費級產品的預設語言：它友好、柔軟、親切，降低了介面的攻擊性，讓人第一眼覺得「這個產品不難用」。對一個需要快速獲得新使用者好感的早期產品來說，大圓角是非常有效的策略。

但隨著 Zeabur 服務的使用者越來越多地從「想試一下的開發者」變成「把生產流量放在上面的團隊」，大圓角開始成為一種負擔。

大圓角設計留給使用者第一印象的就是心理上的「玩具感」。圓角越大，介面越像一顆被打磨過的鵝卵石——漂亮、無害、可以放在手心裡玩。但基礎設施不是玩具。當一個使用者要把公司的生產環境託付給我們時，他想看到的是承重牆，而不是泡沫積木。設計心理學裡有一個很樸素的觀察：曲率越接近圓，越接近「可愛」；越接近直線，越接近「嚴肅」。現在的 Zeabur 需要後者。

「承載感」的缺失。大圓角本質上是在把矩形的四個角「削掉」。角被削得越多，容器看起來能裝下的東西就越少——視覺上它在暗示「這是一個小物件」。但我們要展示的是叢集、專案、伺服器，這些都是重量級的概念。用一個看起來很輕的容器去裝很重的東西，觀感上永遠是錯位的。

開發者每天打開的終端機、IDE、監控面板、雲端控制台，幾乎沒有一個是靠大圓角立身的。它們用的是克制的小圓角（4–8px）、硬朗的邊線、密集的資訊。當 Zeabur 的著陸頁用一套消費級的圓角去講基礎設施的故事時，使用者的大腦會下意識地把我們和「玩具專案託管」歸到一類，而不是「可以放生產的雲端平台」。

當所有 SaaS 都在用 16px+ 的圓角和柔和漸層時，大圓角本身已經不再傳遞任何資訊——它只是雜訊。反而是那些敢於收緊圓角、敢於讓邊線直接相交的品牌（Linear、Vercel、Stripe Dashboard），在視覺上天然顯得更「成年」。

當然，完全拋棄圓角也不是答案。直角會帶來另一種極端的情緒：冷漠、拒人千里、官僚。我們要的不是銀行官網那種「我不在乎你是否看得懂」的姿態，而是一種「我知道你在做嚴肅的事，我陪你一起認真」的姿態。

所以新版裡，我們把整站的圓角系統收斂到了一套更克制的尺度。邊線變得更清楚，分隔更直接，對角線條紋過渡帶的銳利邊緣也是這個思路的一部分——我們希望使用者在滾動的過程中，每一次視覺落點都在告訴他：這是一個認真的平台，值得你把真正的業務放上來。

圓角只是一個符號，但它背後是整套溝通策略的轉向：從「請你來試試看」變成「我們準備好承接你」。

最後

這次的 ReLand 是一次性發布的，但對我們來說，它不是終點，而是起點。對訪客來說，最重要的不是頁面變得有多驚豔，而是它變得更容易開始；對我們自己而言，最重要的是下一次再要加一塊新東西、換一種新主題、回應一種新的互動方式時，都不需要再推倒重來。

這也讓我們重新想了一遍著陸頁這件事本身。對一個部署平台來說，著陸頁最重要的指標從來不是「看起來多高級」，而是「從看到產品到第一次部署之間有多少步」。AIBar 的 sticky dock 把這個距離壓到了極短：看一眼背景、讀一句 tagline、往下滑三屏、把專案拖進 AIBar。

這就是我們說「讓著陸頁重新著陸」的意思——它不該只是一個展示，它本身就是部署的第一步。