Aspen Search

猎头这门生意全部发生在网上。而这家公司的官网，是照着报纸的版面排出来的。

它的基本单位不是区块，是格子。整页由实线分隔的方格构成，每格里只放一样东西：一个巨大的词、一段文字、一个数字，或者一块图。颜色都放在格子上，不放在字上，文字永远是近黑或纯白，白、黑、灰、薄荷绿全是格子的底色。这是拼报纸版面的做法，不是做网页的做法。

最聪明的一步是明暗切换的做法。切到暗色之后，原来黑底白字的文案格变成了白底黑字，原来白底的大字格变成黑底，而那块薄荷绿一动不动。

页面没有变暗，它是一格一格对调的。整幅版面的明暗节奏完全保留，翻转的只是每一格的黑白。

这个效果只用了两个 CSS 变量，一个管背景，一个管文字。两套主题共用同一张版面，没有为暗色重新画一遍，这是这种做法最大的好处。想做明暗双主题又不想维护两套设计的人，这是一条很省力的路。

这么做也有两处问题。头一处是那块薄荷绿没跟着翻，它在两套里都一样，暗色下就比周围亮得多，成了整页最刺眼的东西。

第二个问题在速度上。页面的版面 456 毫秒就出来了，但最大的那块图要等将近三秒。这两秒半里，你看到的是一张已经排好但还没上图的版。

瑞士网格加报纸排版，这套办法早就有了。新的是那个一格一格对调的主题切换。

字体怎么分工，颜色怎么省着用，其实是同一条规矩的两面。全站两款字，一款正文体写了 5,621 个字符，字号从 14 到 202px。另一款等宽体写了 1,026 个，字号只在 12 到 14px 之间。等宽字从不放大，专管标签、按钮文字、清单和计数器。

规矩很清楚：要当数据看的东西用等宽，要当话读的东西不用。读者不需要判断，看字形就知道该怎么读。

文字只有五种颜色，近黑用在 704 个地方，纯白 315 个，剩下三种加起来不到十个。Awwwards 的页面上写着这个站只用两种颜色，就文字而言完全准确。

但背景是另一回事，而这里藏着最有意思的一处决定。按面积排，白最多，然后是一档灰，再是近黑，接下来才是薄荷绿，出现在十二个地方：统计数字格、清单的方块项目符号、团队成员名牌、约谈按钮。别的地方一点都没有。

这样一来，页面上只要冒出绿色，就一定是要你看的东西，不用加任何说明。

再往下还有一组颜色更有意思。客户名单里每家公司配一块自己的品牌色，深蓝、青、藏青各占一小块。你选中哪家公司，左边的预览块就换成哪家的颜色。这个站把客户的颜色当成素材直接引用，而不是统一成自己的调子。做客户展示的时候，这是一种既尊重对方又不破坏自己系统的办法，因为那些颜色被限制在一个固定尺寸的方块里。

圆角是零。全站 948 个元素，一个圆角都没有。

图像有四个来源，各管各的地盘。第一类是半调网点，全部是 WebGL 现场算出来的，网点中间浮出的浅灰形状就是品牌标志本身，一片白杨叶。第二类是黑白人像，只在团队那一段出现，配薄荷绿名牌错落排开。第三类是黑底上的细线图解，放射状的扇形和虚线轨道环，只在服务那一段出现。第四类是客户标志的滚动条。

四类里只有第二类是真照片，其余都是画出来或者算出来的。

最见功夫的是顶上那个时钟。它不是普通文字，每一位数字都是一条从 0 到 9 的长条，靠上下移动来换数，像老式的翻牌钟。同一个零件还被用在证言的计数器上。时钟本身在纽约和洛杉矶之间来回切换，而联系面板里两个城市各配一个圆形表盘。那不是装饰，那是他们的两个办公室。

最值得动手的是顶栏那个明暗开关。位置给得很显眼，Awwwards 也把它列进了亮点。你的选择会被记住，下次打开直接是你上次选的那一套，而且不会先闪一下白再变暗。

其余的交互都很克制，而且全是联动，没有弹窗。点客户名单里的一行，不会打开任何东西，只是那一行黑白对调、左边预览块换成那家公司。证言是带前后箭头的轮播，一共九条。点 Contact 从右边滑进来半屏面板，里面有邮箱和电话的一键复制、两个城市的表盘，还有一个上传简历的拖放区，接受 PDF、DOC、TXT，最大 5MB。

滚动这一层归 Lenis 管，而且两个帧率数难得地一致：停着不动 60 fps，一边滚一边测 59.9 fps，把页面切成十二段，十一段是 60，剩下一段 59。五块 WebGL 画布同时在跑，全程没有一段掉出 59。这在同时跑多块画布的站里很少见。

有一件事它做得比大多数站都彻底，就是响应减弱动画这个偏好。开了这个设置之后，页面上的动画从两条降到零条，画布数量从五块降到四块。它不只是停下动画，还直接卸掉了一块 WebGL 画布。这是个值得学的做法：响应这个偏好不一定只能关动画，也可以少渲染一层。

Next.js 加 Turbopack 构建，33 个代码分片共 736 KB，内容用 Sanity 管理，统计用 Umami。CSS 变量总共只有四个，其中两个是主题用的。

画面这一层是五块独立的 WebGL 画布，全部由 three.js 驱动，尺寸从 1913×1941 到 478×442 不等。那些半调网点不是事先做在图里的，原图以 PNG 下载下来，解码之后进入渲染管线，管线里有一条从 1913 降到 384 再降到 128 的降采样链，网点是渲染的时候现算的。

问题全出在原图上。打开一次总共下载 6.9 MB，其中八张原图就占了 6 MB，也就是 86%。最夸张的一张 518×514 的 PNG 占 926 KB，而这个尺寸完全不压缩的原始数据也才 1,040 KB，所以这张图基本没被压过。另外一张 618×516 占 777 KB，还有四张 1254×1254 的从 590 KB 到 1,211 KB 不等。

一个最终只输出黑白网点的页面，为此运了六兆的无损彩色原图。想做类似效果的人可以注意：如果网点是渲染时算的，源图的色彩信息几乎全被丢掉了，那就没必要用无损格式。

页面稳定性做得非常好：访客坐着不动的时候，页面几乎不抖，累计位移量只有 0.0006，全程只发生两次。这和那个三秒才出来的大图并不矛盾：版面先到位，并且给图留好了位置，图后到但不挤动任何东西。这是处理慢图的正确做法。

无障碍两边都要说。做对的部分相当完整：页面标了语言，38 个可以用键盘选中的元素全都有名字，轮播按钮和主题按钮都有说明，40 张图全部写了空 alt，客户名另外用标题文字给出，页面还带了给搜索引擎看的结构化数据。

做错的有三处：两个 200px 的大字都是 H1，没有导航地标，也没有跳到主内容的链接。

最费解的一条在焦点框上。样式表里明明写了两层焦点框，2px 白加 4px 薄荷绿，而且浏览器也确实认为这个元素处在键盘焦点状态。可是焦点落在它身上的时候，画面跟没有焦点时一模一样，一个像素都没变。

这个框从来没被画出来过。有人写了它，还用的是品牌色，说明是认真做的，但它没生效。这不是漏做，是个 bug。署名里有一位开发者把无障碍写进了自我介绍，这一条就更可惜了。

四项分数里 Creativity 最高、Usability 最低，差 0.43。而权重恰好是反的：Usability 占总分的 30%，Creativity 只占 20%。这个站是靠权重低的那一项赢的。

分布比平均分更能说明事情。五位评委的总分是 7.00、7.60、6.00、7.20、7.00。中间三票挤在 7.0 到 7.2，一位给了 7.60，还有一位把四项全部压到 6.00。那是一位土耳其的独立艺术总监，全场唯一一张四项齐平的低分。

开发奖那边，六项里动画 7.60 明显高出一截，语义和标记并列最低，都是 7.20。这跟实际情况对得上：滚动帧率挑不出毛病，而页面里确实有两个 H1、一个导航地标都没有。

Lunardi 在自己的主页上写明是 Awwwards 评委。Mangham 的自我介绍是给设计公司长期做开发搭档，专攻细致的微交互、无障碍和性能。

三个署名里没有设计师，而这个站得分最高的恰恰是 Creativity。这些版面判断出自谁，署名回答不了。