Cartier - Le Chœur des Pierres

高级珠宝的官网通常从成品讲起，先给你看项链，再补一段工艺说明。这一支把顺序倒过来了，它从原料讲起。

第一屏只有五颗裸石，躺在一块有褶皱的白绸上，光从左上角斜着打过来，每颗石头下面都有一小片柔和的投影。没有产品名，没有价格，没有导航提示，只有中间一个小圆圈和一行字，写着选一颗石头。

选了祖母绿，整个画面换成深绿。绿色不是平铺的底色，是一层带焦散光斑的雾，明暗在缓慢地移动，像隔着水看过去。项链悬在正中，名字 OLORRA 排在下方，再往下一个箭头写着向下滚动继续。

这一步是整套概念的落点。石头的颜色不只是决定了成品，它决定了你此刻看到的整个房间。五颗石头就是五个颜色完全不同的世界，访客选哪一颗，就进哪一间。

再往下滚，画面推近到项链的一段，绿色从雾变成了丝绒的质感，能看见每一颗祖母绿的包裹体和绿松石段之间那些蓝宝石的三角。团队自述里说，再点一下可以把成品翻开，露出底下那张 guaché，也就是设计师当初手绘的彩色设计稿。把成品和手稿叠在同一个位置，和第一屏那五颗裸石是同一句话的两头，一头是石头，一头是画，中间才是珠宝。

卡地亚有自己的字，这套体验也只用这两款。

标题用的是 Fancy Cut Pro，一款对比极强的衬线，笔画从极细到极粗，转折处很锐。正文用 Brilliant Cut Pro，笔形干净、开口小的无衬线，全站写了 3,849 个字符。标题这一款只写了 782 个字符，占掉的画面面积却是全站最大的一块。

标题的排法也值得看。Le CHŒUR des PIERRES 被拆成两行并且错开，小写的 Le 和 des 用斜体，大写的 CHŒUR 和 PIERRES 用正体，两种笔形交替出现在同一句话里。这是珠宝广告的老规矩，把冠词和虚词缩小成斜体，让名词自己站出来。

颜色上，界面这一层几乎只有黑白。文字颜色里纯黑用在 2,398 个元素上，另一档近黑的深灰用在 779 个。整个页面 3,184 个元素里只有 2 个带圆角。

真正的颜色全部来自内容。五颗石头各自带一套色，选中之后那套色接管整屏。也就是说，界面主动退成中性，把所有饱和度让给了拍摄的素材。做产品展示的人可以照这个思路走。界面越素，产品的颜色越响。

最见功夫的是光。石头躺在丝绸上那一屏，投影是柔的、带一点色散，绸缎的褶皱上有很缓的明暗过渡。进了石头的世界之后，背景是一层在动的焦散光，亮斑的形状和移动速度都像水面下的光。这两种光都不是静态图片，它们在缓慢变化，而变化慢到你不会觉得有东西在动，只会觉得画面是活的。

主交互是选和滚，两步，没有别的。

选石头是一次点击，画面随后整屏转场。进了某颗石头的世界之后，向下滚推进叙事，先是整条项链，再推近到局部。

三维这一层用了四个 glTF 模型，名字直接说明了各自的岗位。一个是选石头那一屏的场景，一个是成品的产品图，还有两个是 guaché，一个正常版一个带景深虚化。四个模型全部走 Basis Universal 压缩纹理，另外配了一个解码用的 worker 脚本。

这个选择很关键。Basis 这种格式在显存里保持压缩状态，而且解码放在 worker 里做，不占主线程。对一个必须嵌在正式商店页面里的体验来说，这是硬要求：主线程上已经挤着购物车、登录、支付这些组件，三维这一层不能再去抢。

声音配了四个文件，分工同样明确：首页一段音乐、内页另一段音乐、一个点击音、一个悬停音。两段音乐各 640 KB，是这个页面除脚本外最大的一块资产。开关做在左上角，写着 SOUND。

减弱动画这一项，样式表里有 33 条规则，数量远超一般站点。这是卡地亚整套设计系统自带的，不是为这个体验单独写的，但它确实覆盖到了页面上的过渡。

这个页面真正值得研究的地方，是它同时是一个体验和一个商店。

底层是 Adobe Experience Manager，页面里能看到它的 clientlib 和一个 1.12.4-aem 版本的 jQuery。体验这一层是 Nuxt。两套东西叠在同一个文档里，最后是 3,184 个元素、112 个请求。

打开这一页要传 3.57 MB，分在 78 个文件里。脚本占了 1.4 MB，音频 1.4 MB，图片和字体加起来不到 700 KB。

脚本那 1.4 MB 里有一部分和这个体验完全无关。取消合同的表单组件 356 KB、迷你购物袋 180 KB、登录按钮 170 KB、PayPal 快捷支付 142 KB、Apple Pay 快捷支付 93 KB，全都在一个不卖任何东西的编辑页面上加载了。加起来将近 950 KB，比整套三维资产还重。

这是把体验建在生产商店里的直接账单。好处是这一套能跟着商店一起走二十来种语言、跟着商店一起更新、不用单独维护一套部署。账单是它继承了商店的全部包袱，包括那两道弹窗。一道 cookie 授权，一道根据地理位置弹出来问你要不要改去别的国家商店。想看这五颗石头的人，要先回答两个和石头无关的问题。

速度本身还好。首字节 483 毫秒，首次内容绘制 976 毫秒，最大内容绘制 2,976 毫秒。累计布局偏移只有 0.0011，几乎不抖，这在一个元素这么多的页面上算做得相当细。加载过程里有 11 个长任务，最长的一个 381 毫秒，比较分散，没有出现一次卡死的情况。

无障碍这一块两头差得很远。系统自带的部分很完整，页面声明了语言，页眉、导航、主内容三个地标齐全，样式表里有 79 条焦点规则。但页面上两百多张图片里，绝大多数没有替代文字，而这个页面的内容几乎就是图片。用读屏器的人打开这一页，五颗石头、那条项链、那张手稿，全都是空的。

FWA 那边没有分项，但团队写了一段自述。他们把这个项目描述成一次沉浸式的旅程，让访客先选石头、进入它的世界，再看到它启发出来的珠宝，最后翻开成品露出底下的手绘稿。自述里还专门提了两件事。刻意克制的界面，以及这套体验要接进 cartier.com 并铺开到大约二十种语言。

第二件事在实测里看得很清楚，它确实住在正式站点里，也确实背着正式站点的全部重量。团队把这一点当成成绩写，而不是当成妥协，这个判断是对的。一个能跟着商店一起走二十种语言的体验，比一个漂亮但孤立的微站有用得多。

makemepulse 名下有 98 座 FWA，这个数字在这份名单上很扎眼。两位个人署名一位两座、一位三座，说明主力是工作室而不是某个人。客户 Cartier 自己也被列为署名，名下一座。

Awwwards 上查不到它。它本来也不是一个独立站点，而是商店里的一个栏目，按站点提交本身就不成立。