2026 营销网站技术栈

大多数所谓的“现代”营销网站,其实落后了五年。2021 年的 Webflow 模板,Adobe 的两款网络字体,首屏一个 Lottie,CSS 包大得像一部漫威电影。然后隔壁 Linear 或 Cursor 的页面 200ms 就加载完毕,差距在第一次滚动时就暴露无遗。

2026 年的技术栈,十秒内就能认出来。同样的框架,同样的字体,同样的动效,同样的视觉密度。这是一份逐个品牌拆解,讲清楚最好的营销网站究竟是怎么搭建的,以及你的下一个网站应该通过的审计。

2026 年的技术栈有五层

别再把营销网站当成一个整体。设计师想要模仿的那些页面,其实是五个独立的层叠在一起。任何一层出错,整个网站都会显得过时。

这五层依次是:框架与托管、字体、动效与交互、视觉系统,以及性能。2026 年每一层都有默认选择,每个默认选择胜出都有明确的理由。

第 1 层:框架与托管已收敛到 Next.js 加 Vercel

框架之争已经结束。Linear、Cursor、v0、Anthropic、OpenAI、Stripe、Vercel 和 Notion,全都在 Vercel 上部署 Next.js。这是趋同,不是巧合。这套组合开箱即用就提供静态渲染、partial prerendering、边缘缓存、图片优化和路由级预取。

可信的替代方案很窄。Astro 加 Vercel 适合想在内容密集的网站上做到近乎零 JavaScript 的独立 SaaS。Framer(该公司自家的建站工具)占据了重设计的创意机构和模板驱动的独立产品市场。Webflow 仍然撑着不少页面,但在严肃 SaaS 中的份额正在下滑。过去用 Webflow 做首页的团队,正转向 Next.js 加 Sanity 或 Contentful CMS,因为营销网站一旦需要像产品一样运作,他们立刻就撞上了天花板。

如果你的网站有任何产品形态的界面(带实时数据的首屏区块、接入计费的定价页、需要登录的文档路由),就用 Next.js。创意工作室的宣传册式网站,Framer 没问题。除此之外,都是遗留方案。

第 2 层:字体收敛到一小批特定名单

看看你真正想模仿的那些网站用的字体。轮换出场的就是那六个家族:Inter 及其展示版兄弟、Geist 和 Geist Mono、Söhne、Switzer、Tobias 和 General Sans。这就是现役名单。

Inter 是默认选项。Linear 首屏用 Inter Display,正文用 Inter。Vercel 到处都用 Geist 和 Geist Mono,包括 v0 和 Vercel 官网本身。Anthropic 用 Söhne,并为编辑内容配了一个衬线子品牌。Stripe 在营销和产品中都用 Söhne。OpenAI 使用定制的 Söhne 变体。Notion 和 Framer 都用 Inter。Cursor 首屏用定制展示字体,正文用一款可靠耐用的无衬线字体。

等宽字体的子趋势是开发者工具特有的。Vercel、v0、Cursor、Linear 和 Anthropic 都在眉标、代码示例、版本标签和小号说明文字中使用等宽字体。它不用明说就传达出“工程感”,也是让 SaaS 网站看起来像 2026 而不是 2022 的最快方法。

这些字体大多是与网站同域自托管的可变字体。Adobe Fonts 在严肃 SaaS 中正在流失份额,因为延迟成本是实打实的,而且直接购买授权在价格上已经更划算。字体搭配指南讲了如何挑选搭配。2026 年的元规则:一个强力的可变字体家族加一款等宽字体,足够了。

第 3 层:动效是功能提示,不是装饰

2026 年的动效是在干活,而不是填补沉默。重头戏由滚动驱动,页面切换使用 View Transitions API,微交互则放在 Framer Motion 或纯 CSS 里。

三种模式占主导。首屏编排(Linear 首次绘制时的渐变绽放,Anthropic 克制的文字淡入)。滚动固定的产品展示(Cursor 固定一个面板,页面滚动,面板原地更新)。View Transition 页面切换(Vercel 和 v0 使用 View Transitions API,让导航像状态变化,而不是重新加载)。

Lottie 在严肃网站上正悄悄退场。笨重,对无障碍不友好,读起来像 2021 年。现在做动画的品牌用 Framer Motion 做组件,GSAP 或滚动联动的 CSS 做重头戏,View Transitions 做导航。标准是“每个动效都有理由”,而不是“我们有动画”。

第 4 层:视觉系统是几何感、出格式布局、带噪点

2026 年网站的视觉语言,不需要上下文就能认出来。大号几何字体作为首屏主角。溢出栏宽、不按网格排布的微型截图。看起来原生的高对比模式 OKLCH 调色板。噪点渐变(在平滑渐变上叠加胶片颗粒噪点)取代平面渐变。用生成式 SVG 首屏图案取代图库摄影。

Linear 的首屏是经典范本:一句超大字重的话,一团柔和的渐变绽放,一张带轻微视差悬浮的产品截图,单一颜色的强调标签。Stripe 的首页运行着一个随滚动动画的定制 SVG 构图,文字后面是他们的渐变生成器。Anthropic 推出以衬线为主的编辑子品牌和以无衬线为主的产品品牌,两者之间的对比确实发挥了作用。

统一的手法是克制。一个强调色最多用三四次。一张大首图。整站一种字体声音。2026 年看起来最“有设计感”的品牌,恰恰是每个页面视觉元素最少的那些。视觉层级一文解释了为什么做减法会被读作品味。

第 5 层:性能是最后一个美学决定

看起来最好的品牌,加载也最快。同一种自律,两种表现。4G 下不能在一秒内完成绘制的网站,无论多好看,都不是 2026 年的网站。

领先者的模式高度一致。自托管的可变字体,配合 font-display: swap 预加载。静态生成加 Vercel Image Optimization。路由级预取。用 View Transitions 实现柔和的页面切换。关键路径上没有第三方脚本。还有能放进幻灯片的真实 Core Web Vitals 数据。

“瞬时感”导航模式是最容易复制的部分。悬停链接,Next.js 预取路由。点击,页面已在缓存中,View Transition 让切换顺滑。营销网站感觉像产品,这正是重点。速度就是品牌一文讲得更深。

逐个品牌拆解

具体细节比原则更重要。下面是每个被点名的网站表面上实际运行的东西。

Linear。 Vercel 上的 Next.js。Inter 和 Inter Display,自托管。组件交互用 Framer Motion,渐变首屏用滚动联动的 CSS。一个强调色,首次绘制时的首屏编排,长页面上的吸附式 CTA。

Cursor。 Vercel 上的 Next.js。首屏用定制展示字体,正文用耐用的无衬线,标签用等宽字体。滚动固定的产品展示是它的招牌动作。

v0 和 Vercel。 Next.js,Geist 和 Geist Mono,营销路由全程使用 View Transitions。v0 的“实时预览”首屏是一个真实运行的、由生成页面构成的 iframe,这是产品能展示的最有力的证明。

Anthropic。 Next.js,Söhne,克制的动效(文字淡入,而不是视差把戏),编辑内容用衬线子品牌。做得比几乎所有同行都少,却因此显得更“高级”。

Stripe。 Next.js,Söhne,首屏的定制 SVG 构图,文字后面的渐变生成器,以及以文档驱动的信息架构,十年来一直是金融科技的标杆。

OpenAI。 Next.js,接近 Söhne 的定制字体,极简的密度更像博物馆而不是 SaaS 落地页。首屏几乎没有页内 CTA,这行得通,因为这个品牌负担得起。

Notion。 Vercel 上的 Next.js,Inter,用动画产品插图展示真实界面做着真实的事。大量使用真实产品视觉,很少用图库隐喻。

Framer(公司本身)。 用 Framer 自己搭建,最彻底的自用验证。重设计的模板美学,页面密集,动效丰富,并带着明确的“想要这样的网站,就用这个工具”的宣传。

反面例子很容易发现。一个还在用 2018 年 WordPress 主题、配着“人们使用笔记本电脑”图库插图的 SaaS 网站,第一次滚动之前就显得老了十年。一个带着缓慢自动播放视频和四个 CTA 首屏的创意机构首页,读起来像假装成网站的路演 PPT。要学的是品类,而不是品牌。

评估任何技术栈的五个问题

在复制一套技术栈之前,先评估它。五个问题,按这个顺序。

1. 导航给人什么感觉? 完整重新加载并伴随无样式内容闪烁,说明这套技术栈至少落后一个周期。状态变化则说明它是当下的。
2. 在中端手机上首次绘制有多快? 低于 800ms 是 2026 年的标准。超过 2 秒就是不及格。
3. 字体如何加载? 自托管的可变字体预加载,还是第三方 CDN 加上备用字体闪烁?前者读起来有工程感,后者读起来是 2019 年。
4. 动效如何服务于信息? 是按内容编排的,还是作为装饰硬贴上去的?Lottie 首屏动画就是破绽。
5. 空白页面长什么样? 去掉首屏和渐变。如果字体、间距和结构依然能读出品牌感,这套技术栈就是真的。如果就此崩塌,那它只是个模板。空状态就是产品一文讲了更深的版本。

一夜之间让网站过时的反模式

六种模式,上线的那一刻网站就显老。

• 拖拽式构建器大杂烩。 把十二个市场模块拖在一起搭出来的页面,看起来就是十二个市场模块。没有任何东西是针对下一个东西来设计的。
• 没人认得的插画包。 平面背景上的通用矢量小人,来自每个 SaaS 都在用的那三个库。视觉噪音,毫无记忆点。
• 每个区块都放 Lottie 动画。 笨重,对无障碍不友好,而且因为都来自同一个模板市场,用的缓动曲线也一模一样。
• 页面构建器输出 600KB 的 CSS。 CSS 包有 600KB 的网站,并不明白性能是一个品牌决策。
• 2021 年手写代码陷阱。 当年用心手写过一次,再也没更新。结构干净,字体过时,对比度不对。维护也是技术栈的一部分。
• Cookie 弹窗挡住首屏。 把同意墙当作第一次交互,是披着合规外衣的技术栈失败。

2026 技术栈审计

用这七个问题给你现在的营销网站打分。五个或更多“否”,说明你不在 2026 年的技术栈上。

1. 页面在 4G 连接下能在一秒内完成绘制吗?
2. 字体是自托管的可变字体,并在首屏之前预加载吗?
3. 路由之间的导航感觉像状态变化,而不是重新加载吗?
4. 页面上只有一个强调色,且使用不超过四次吗?
5. 每个动画都有明确的任务(提示、揭示、过渡)吗?
6. 产品视觉是真实产品的真实截图,而不是图库图片或 3D 抽象图吗?
7. 去掉首屏后,页面仍然读得出品牌调性吗?

五个或更多“是”,说明你在 2026 年的技术栈上。少于五个,说明下一次改版应该是技术栈升级,而不是视觉翻新。2026 网页设计趋势是这份审计所属的更宏观的模式图,落地页设计原则是页面本身的原则层,排版系统设计加网页设计原则则涵盖其余部分。

常见问题

Next.js 真的是 2026 年营销网站唯一可信的框架吗?

对于严肃的 SaaS 和品牌网站,基本上是的。Astro 适用于几乎不需要 JavaScript 的内容密集型网站。Framer 适用于重设计的创意机构界面。其他方案都带着天花板,而且网站一旦需要像产品一样运作,天花板立刻就会显现。

如果我的网站已经能用,还要放弃 Webflow 吗?

不要只因为美学而换。当 Webflow 无法再做网站所需的事情(自定义动效、路由级预取、视图过渡、真正的性能预算),或者营销网站需要与产品共享组件时,再换。如果它只是宣传册式网站,转化也不错,那就别动。

小品牌该选 Framer、Webflow 还是 Next.js?

如果追求由动效和视觉系统挑大梁的、重设计的模板驱动美学,Framer 胜出。如果营销团队需要在没有工程师的情况下发布更新,而且网站确实只是宣传册,Webflow 胜出。只要网站需要与真实产品共享代码、组件或内容,Next.js 就胜出。

用 2026 技术栈搭建你的网站

这套技术栈不是秘密。领先者做的是同一类决策,而 2026 年的网站与 2021 年的网站之间的差距,一个专注的项目就能弥合。选框架。选可变字体和等宽字体。选页面真正需要的三种动效模式。其余的全部砍掉。

如果你想要一个基于 2026 技术栈搭建的营销网站,而不是上个周期的 Webflow 模板,雇用 Brainy。我们用 Next.js 交付品牌网站,配自托管可变字体、真实的动效,以及一份能放进幻灯片的性能预算。