锚点 · scrollytelling · 编辑设计

Mercedes "140 Years" — 编辑式 scrollytelling

整个网站当杂志做,scroll 是翻页,每一屏都是一篇头版——这种克制感是我现在的锚。

我第一次打开这个站,是想找一张 Patent-Motorwagen 的高清图。

结果在那个标着 140 Years of Innovation 的子目录里停了二十分钟。不是因为图多——图反而少。是因为它不催我

一个不催人的网站

2026 的 web 已经被训练成一种节奏:首屏要有 hero video,要 auto-play,要 parallax,要每隔三秒给我一个新的视觉冲击。短视频的逻辑被反过来灌进了网页里——如果你不在三秒内 hook 我,我就滑走。

Mercedes 这个 140 周年微站走的是反方向。它假设我会停下来,所以它没在使劲招呼。每一屏都像一份报纸的头版:一个年份,一句标题,一段克制的导读,一张大图。Scroll 一下,翻一页。再 scroll,再翻一页。

这种节奏放在 2026 的语境里,几乎是一种奢侈。因为它默认你不需要被娱乐——你是来读的。

时间作为骨架

它的内容线索是一个 140 年的时间轴,从 1886 年 1 月 29 日 Karl Benz 在曼海姆递交的 #37435 号专利开始。那张专利图——三轮、单缸、横置——是这一切的零点。

往后翻是几个不能跳过的锚:

  • 1886 Patent-Motorwagen,世界上第一台为内燃机而生的汽车
  • 1926 DMG 和 Benz & Cie. 合并为 Daimler-Benz AG,三叉星首次戴上桂冠
  • 1954 300SL Gullwing,鸥翼门
  • 1969–1970 C111 系列,Bruno Sacco 设计的 Wankel 转子原型,最终被柴油路线否决
  • 2020s EQ 电动序列

把这条线当骨架,再把每个节点摊成一篇短报道——这就是它的结构。没有花哨。但正因为没花哨,故事自己站起来。

为什么字体重要

Mercedes 的公司字体叫 Corporate A (Antiqua / 衬线) 和 Corporate S (Sans Serif / 无衬线),还有一个不常用的 Corporate E (Egyptian)。这套三件套是 Kurt Weidemann 1985 到 1990 年间为 Daimler 设计的,后来 URW 数字化。

我盯着这个站的版面看了很久才反应过来:它整页都在用这套字。衬线做标题,无衬线做正文——是非常古典的编辑做法。这种做法在汽车行业的官网里其实已经很少见了。大部分品牌官网现在都在用某种 Inter / SF Pro 风格的中性 sans,因为「容易适配」。Mercedes 的代价更高——它要为自家字体付永续授权——但回报是:整个网站从字形开始,就是 Mercedes,而不是另一个 SaaS 落地页

字体是一个网站最便宜也最容易出错的决策。这个站让我想起一件事:一致性本身就是奢侈品

我从这里偷什么

放回我自己的语境——P1-103N1X.COM 是个人站,不是品牌微站,我不可能用 140 个节点去铺一条 timeline。但有几样东西我想偷:

  1. Scroll 作为翻页,而不是无限滚动。每一屏是一个完整的版面,不要让用户处在「还有多少没看完」的焦虑里。
  2. 时间作为骨架。年份不是装饰,是锚点。读者需要知道自己站在线的哪个位置。
  3. 字体是身份的第一层。我已经锁了 black/white/gray 六阶 + #CFEC1B 信号色,字体规范要跟齐——衬线和无衬线的分工,从标题到正文,一以贯之。
  4. 不催。首屏不要 video,不要 auto-play,不要任何东西在我没动之前自己动。

一个测得很准的克制,远比一个使劲招呼你的页面要难得多。

我现在在做的事情,本质上是把一个 140 年品牌站的节奏感,缩到一个人的尺度上。