ZIRKA Interceptor

别的产品站会写一段文案，告诉你这台机器有多好。这一个不写这种文案，它让页面本身表现得像一台开着的设备，钟在走，数据在刷新。

页面顶上有一只钟，秒数一秒一跳，走的是基辅时间。屏幕左下和右下角常年显示 X: 0 和 Y: 0，那是你鼠标的坐标。顶部一条细尺子随着你往下滚，一点点被橙色填满。首屏左上角那段文字不是文案，是排成代码样子的遥测数据：以 // 开头，}; 收尾，中间写着目标已锁定、坐标多少、系统响应 0.003 秒、07 号单元已激活，收尾之后还跟一行高度 412 米、状态正常。

这些数字没有一条是有用信息。它们不告诉你航程、载荷或者价格，只负责营造一种设备正在运转的现场感。

最大胆的一步是把正文全部设成 11 到 13px 的等宽字。全站算下来，等宽字写了 4,530 个字符，标题字体只写了 1,151 个，而且等宽字从不超过 13px，标题字从不小于 19px。

标题是给人看的，正文读起来像机器打印出来的。一家把武器卖给军方的公司，用这个办法避开了广告腔：它听起来不像在推销，像在汇报。

这个效果不是白来的，它有两处代价。头一处是可读性，四十屏内容全挤在一个 11px 的字号上，看久了很累。第二处更微妙：这些数字里有真有假。基辅的时钟是真的，那几行目标锁定是排出来的文案。站点从不区分这两种，而整套说服力恰恰建立在你分不清的基础上。

军用抬头显示器和终端界面，这套语言近几年在国防科技公司的官网上已经用成了套路。真正原创的部分不在画面上，而是那个决定：把橙色从一个强调色，变成盖在所有纪实照片上的滤镜。

颜色这一块是全站最硬的规矩。三个 CSS 变量就把整套配色定完了：橙色 #fc4f00、近黑 #050505、米白 #ddd。全站十种文字颜色，其实是米白的四档透明度，加一档深灰，再加橙和黑。橙色只出现在 55 个地方，而那一档深灰出现在 810 个。

换句话说，这个站里大部分文字是故意压暗的，橙色是从暗里挑出来的那几个点。想要做出这种克制感的人，重点不在于橙色用得少，在于别的字压得够暗。

橙色的用法比色值本身更值得看，因为它不只是强调色，还是盖在照片上的滤镜。讲威胁的那几屏里，消防员在燃烧的居民楼上救援的纪实照片被整张做成了橙色单色调，上面叠一组白色十字准星，底下压一行时间戳，用的还是顶上那个实时时钟。

所以那些早就拍下来的照片，看起来像是此刻正在传回来的画面。同一个橙色同时出现在进度尺、柱状图、按钮描边和照片上，照片就这样并进了界面，读起来是仪表的一部分，不是插图。

几何形状上同样毫不妥协。全站 1,786 个元素，圆角为零，没有一个按钮、卡片或标签是圆的。配上四角的裁切标记和大量一像素细线，整页看起来像一张技术图纸，不像网页。

有一处信息设计做得极扎实。比较成本那一屏把四个方案排成横条：这款拦截机五千美元，单兵防空导弹十万，出动战机五十万，导弹系统一百万以上。右边配一个橙色点云渲染的目标无人机，框住并标上编号，底下写着目标成本五万。柱子不用实色填充，用的是跟顶上进度尺一样的竖条纹。

整套商业论证在一屏里讲完，一个形容词都没用。这是这个站最值得学的一段：数字自己会说话，不需要写"极具性价比"这种话。

产品照片、纪实照片、模拟画面，三者的界限分得很清楚。产品照片是近黑的低照度拍摄，只留下硬边的高光。纪实照片一律橙色单色调。第三类是模拟出来的热成像和炮镜画面，满是噪点、扫描线和七段数码读数，而那一屏恰好也是全站最卡的地方。三类都很暗，整个站没有一处亮面。

最见功夫的是页脚：巨大的 ZRK 三个字母横贯整个宽度，机身照片从字母的空腔里透出来，机翼正好横穿字母 K。

从头到尾你只需要做一件事，往下滚。

滚动带动的是一套 458 张连号的 WebP 图片，一帧帧画进两块画布，一块在首屏，一块在页面中段的产品区。全站没有 WebGL。滚起来的效果像摄影机绕着机身移动。

GSAP 用得出人意料地克制：45 条滚动触发器，一条 pin 都没有，只有两条跟随滚动进度。剩下 43 条全是"进入视口就播放"的简单动画。四十屏的页面完全不钉住任何东西，纵深感全靠那套图片序列，不靠劫持滚动。这个思路值得记：长页面想做纵深，未必要 pin。

Lenis 接管了滚动，lerp 设成 0.05。这个值很慢，松开滚轮之后画面还要滑很久才停，配上 39.6 屏的总长度，从头翻到尾很费手。

鼠标指针被完全接管了。系统指针被隐藏掉，站点自己画一个 28×28 的橙色瞄准镜十字，用了差值混合模式，所以经过亮的地方会自动反相成深色。鼠标移到导航链接上时，十字旋转 90 度变成一根竖线，同时那个词被划上删除线。锁定，然后划掉。这是全站最贴合主题的一个小动作。

一个满屏都在动的站，偏偏完全不理会减弱动画这个设置。系统里把它打开，页面上跑着的 98 个动画一个都没减。样式表里没有对应的规则，代码里也没有判断。一个跑着 458 帧图片序列、叠着 1 MB 颗粒动图、还有模拟噪点的站，完全不理这个设置。

这是个 Webflow 站，带着 Webflow 的标记和 jQuery，外加五个 Webflow 的代码块。自己写的那一层是外链的 GSAP、ScrollTrigger、Observer 和 Lenis，其中 Observer 被加载了两次。两块画布都是普通的 2D 画布，不是 WebGL。

打开一次要下载 30.3 MB。里面图片是 494 个请求共 24.5 MB，而其中 489 个是那套 WebP 图片序列，占 23.3 MB。视频 7 个共 5.2 MB，最大一个 4 MB。还有一个颗粒效果的 GIF 单文件 1.1 MB，拿一张一兆的动图做了本来一小块平铺纹理就能做的事。

真正的问题不是体积，是时机。那套图片序列是一次性全部请求的：最早的一张在 316 毫秒发出，第 229 张在 538 毫秒，全部赶在页面加载完成之前。也就是说，不管访客会不会滚到那里，23 MB 在开场两百多毫秒内就全发出去了。

这一点值得做长页面的人警惕。同样是图片序列，按需分段加载和一次性全发，对访客来说是天壤之别，尤其在移动网络上。

页面的稳定性也有问题。访客一动不动坐在首屏上，页面会在他眼皮底下抖六十多次，累计位移量达到 0.20，正好卡在 Google 判定"需要改进"的那条线上。这全部来自首屏自己的入场动画，跟滚动无关。

帧率有两个数，方向相反。停着不动的时候是 60 fps，一帧不掉，看起来完美。但一边滚一边测，全程平均 57.2 fps，把页面按位置切成十二段，分别是 60、60、60、50、59、60、60、60、60、60、58、52。两个低谷一个是模拟炮镜那一屏，一个是页脚。

只测停着不动的帧率会得出完全错误的结论，这是做性能检查时常犯的错。

塌得最厉害的是无障碍，而且几条都是基本功。页面根本没声明语言。全站一个 H1、十五个 H2、一个 H3 都没有，其中四个 96px 的 H2 拼在一起才是一句完整的话，做成阶梯状缩进。视觉上是一句话换四行，读屏器听到的是四个标题。

三个链接的地址写的是 #，页脚那个电话号码点了没反应，因为没做成拨号链接。用键盘浏览时，焦点走到哪里都完全看不出来，因为轮廓被设成了 0，也没有别的替代样式。

图片这一块倒是做对了：133 张里 132 张写了空的 alt，只有 1 张真的漏了。空 alt 是装饰图的正确写法，这条不算问题。

还有一个不该出的错。导航四项从左到右是 THREAT、FEATURES、EFFECTIVENESS、SYSTEM，但点下去分别跳到页面的 18,679、14,469、11,968 和 32,758 位置。前三项是往回走的，而这是一张接近四十屏的长页面。导航顺序和内容顺序不一致，访客很容易迷路。

Qream 在项目页上说，他们要做三件事：讲清产品优势、讲清俄罗斯攻击型无人机造成的威胁有多大、讲清这款拦截机在整个防空体系里的位置。这三件页面上都做到了，而且顺序是编排过的：威胁叙事占了 01 到 05 五个层叠章节，产品参数排在后面，成本对比压轴。

四个署名全在基辅，而且每一类活都有对应的人：公司、Webflow 开发、设计、三维动态。页面上看得见的每种手艺都能在署名里找到人，这在获奖站里不常见，多数站的署名要么只到公司一级，要么少一大块。

开发者自己的简介第一行就写着 Webflow，跟页面上的标记完全对得上，省去了猜的工夫。

Qream 是常客，同一批人名下还有几个 81 到 83 分的项目。这个站是他们第七座 FWA。Awwwards 那边没有这个站，站点自己也没挂获奖徽章，对外链接只有三个社交账号。