设计之第一篇章：让落地页重新落地

没有一款产品的设计是永恒的，尤其是在 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。

这就是我们说"让落地页重新落地"的意思——它不该只是一个展示，它本身就是部署的第一步。