The Tuscan Journey Begins

品牌花钱做广告，通常是为了让人看自己的东西。这一支把舞台让了出去，让给了别人家的手艺，而且让得很彻底。

网站的开场是一节手绘的意大利火车包厢：皮座椅、行李架、车窗，笔触和画布纹理都看得见，画面四边是撕开的毛边。正中间悬着一张橄榄绿的车票，写着托斯卡纳之旅开始了，下面一行小字说，把每一章都看完可以得到一份礼物。座位旁的手提箱上摆着那只手袋本身。

它不像摆出来卖的商品，倒像同车的旅客。

真正特别的地方要进了第一章才看得出来。里面的内容不是手袋有多好，是佛罗伦萨一家真实的丝织基金会收藏的历史面料。一件件拿出来讲，六件一组，各有名字和来历，而每张说明卡下面还压着一行斜体小字：所有织物的版权归那家基金会所有。

品牌退到了幕后，出场的是别人的手艺，还标着别人的版权。一支广告愿意这么做，是因为它算明白了一件事：讲自己有多好没人信，讲你在乎的东西有多好，别人反而会连你一起信。

这个选择也有它的问题，两处，而且都不小。

头一个在门口。点下"开始"之后先放一段引子，引子放完，章节还是没开始，先来一张收集联系方式的表单：成为周末客，姓、名、邮箱三项必填，电话选填，旁边还有两组是否同意的单选和一个隐私条款勾选框，填完才给你那份"数字礼物"。表单确实给了"跳过"，但"立即领取"是一个填实底色的按钮，"跳过"只是它底下一行小字。一个靠别人的手艺立住的故事，把收集客户名单放在了内容前面。

第二个是章节被锁着。三章里只有第一章开放，另外两章各别着一张纸质小标签，写着"本章未解锁"。

画风不是原创的，来自手绘旅行海报和上世纪中期的铁路宣传画。新的是锁的做法：它不是一把挂锁图标，是一张别在布招牌上的纸条，跟全站的撕边、车票、手写标签是同一种材料。想做锁定状态的人可以学这一手：锁的样子应该长在你自己的设计语言里，而不是随手拿一个通用图标。

整个站只用一种画法：数字油画。墙面、木头、织物、金属全部带笔触和画布纹理，没有一处是照片，也没有一处是干净的矢量图形。画面四边一律做成撕开的毛边，让每一屏看起来像一张贴上去的印刷品。

全站的颜色只靠一种主色撑着。Awwwards 的页面上写着这个站只用一种颜色，那个橄榄绿，实际数下来它出现在 53 个地方，车票、说明卡和锁定章节的底色都是它。

剩下所有颜色，赭石、酒红、灰粉、奶白、木色，全都来自画本身，不是 CSS 里定义的。这个分工很干净：界面的颜色归 CSS 管，画面的颜色归画布管，互不干涉。想做插画风格站点的人可以照这个思路，能省掉大量维护色板的功夫。

字体只有一款 Nimbus Sans，三个字重共 99 KB。这款字是 Helvetica 的复刻版，样子像公共标识牌上用的字，放在一支奢侈品牌广告里是个反直觉的选择，但它正好配得上那张车票和那些展签。

分工也很清楚：粗一点的加宽字重只做大字，在一个章节里只写了 27 个字符却占了 27 万平方像素，而正文字重写了 1,269 个字符。2% 的字数占了画面上三分之二的面积。

装饰有两套，都不进正文。一套是扇形的鱼鳞纹，填在画面的对角，用酒红、奶白、黑和灰粉四种颜色排列。另一套是波浪纹，只用在说明卡的边框上。两套都来自织物纹样，跟内容主题一致，不是随手挑的花边。

圆角接近于零：一个章节页里 177 个直角元素，只有 2 个是圆的，都属于那个声音开关。

最见功夫的是标志的处理。左上角是一块实心酒红三角，压着品牌和活动的联合标识，而三角的斜边正好接上鱼鳞纹的边界。标志没有浮在画面上面，它是画面构图的一部分。

整个体验一根滚动条都没有。你是一屏一屏点过去的，不是滚过去的。

结构是一条直线：开场，一段可以跳过的引子，一张可以跳过的表单，章节标题页，点"探索"进去，然后是六步织物导览，靠左右箭头往前走。

旁白是这个站少见的一处用心。屏幕右下角常驻一个字幕框，一句一句显示解说词，配三个按钮：关字幕、暂停、重播，而且字幕默认是开着的。一支时装广告主动给旁白配字幕，而且默认就是开着的，这种做法很少见。

声音的处理也是对的。在你点任何东西之前，五个音轨已经加载好了但一个都没在播，音频上下文是挂起状态。开场底部有一行静态提示告诉你可以打开声音，开关常驻左下角。不存在自动播放。

真正没做到位的是减弱动画这个偏好，而且失手的方式很微妙。样式表里为这个偏好写了 13 条规则，数量相当多。可是那些规则管的全是按钮和控件的过渡效果。开不开这个设置，画布照样在渲染，帧率照样是 60。

规则管的是界面上的小动画，画面本身照常运动。规则写得不少，真正管到的那一层却没碰。这是个值得警惕的陷阱：写了多少条规则不代表做到了多少，关键看那些选择器管的是哪一层。

页面用 Vue 写，配了 Modernizr 做能力检测。

画面这一层跑的是 three.js，而且走的是 WebGPU，这在网页上还很少见。材质是七张压缩纹理共 1.7 MB，成套给出了漫反射、法线和凹凸三种贴图，另配一个 241 KB 的解码器。

体积最大的是视频。两个文件共 11.7 MB，其中一个单独就占 9.7 MB，文件名末尾带着 ionly 三个字母。这是全关键帧编码：体积远大于普通编码，换来的是可以瞬间跳到任意一帧，不用先解码前面一整组画面。想让访客随意拖到任意一帧，就得接受这个体积。另一个 2 MB 的是火车循环。

打开一次总共下载 15.4 MB。除去视频和纹理，剩下最重的是脚本，43 个文件共 1.1 MB，而其中相当一部分不属于这个作品：一套企业级的标签管理工具带六个投放标签，外加一套 Cookie 同意管理。这些追踪和合规的东西叠在一件创意作品上，占的文件数比作品本身还多。

速度上有一处明显的落差。页面的版面和文字六百毫秒就出来了，很快，但那幅画要等到 3.7 秒。中间这三秒页面是稳的，只是空的。

无障碍要分两层看，而且两层差得很远。

控件这一层做得相当好：页面标了语言，八个可以用键盘选中的元素全都有名字，用了正确的角色标记，18 张图全部写了空 alt 一张不漏，焦点框保留了浏览器默认的样子。连"这一章是锁着的"这个状态都写进了给读屏器听的说明里，这一点做得比大多数站都细。

文档结构这一层几乎不存在：没有主内容地标，整个章节页只有一个三级标题，而那个 139px 的章节大标题根本不是标题元素，一级二级标题都没有，也没有跳到主内容的链接。这就是语义和标记两项分数垫底的原因。

还有一处具体的缺口：字幕框没有标记成"实时更新区域"，全页一个这样的标记都没有。字幕会一句句更新，读屏器不会念出来。做了字幕却没接上这个标记，等于做了一半。想做字幕的人一定要注意这个，否则那份工作对读屏器用户完全无效。

最后一条是可用性问题。直接输入某一章的网址会被弹回开场页，章节的链接不能单独分享。对一个鼓励你"看完所有章节"的活动来说，这挺别扭的。

四项里 Creativity 最高、Usability 最低。五位评委的总分是 7.00、6.40、7.00、7.00、7.10，一位乌克兰的体验设计师给了 6.40，其余挤在 7 附近。

开发这边没有拿到奖，6.67 低于七分这条线，六项里标记质量 6.00 垫底。格鲁吉亚那位前端评委的打分最能说明这个站：动画给了 10 分满分，语义、无障碍、标记全给了 4 分，总分 5.50。

他这份打分和实际情况几乎逐条对得上，只是把无障碍整体打成 4 分略显粗糙，因为控件那一层确实做得不错，问题出在文档结构上。

只有一个署名，而且是一家拿过 19 次 SOTD 的老手。客户是 Weekend Max Mara，项目是那只 Pasticcino 手袋的意大利根源巡展。

这里有个不常见的巧合：做这个托斯卡纳工艺故事的工作室，自己就在佛罗伦萨。第一章讲的那家丝织基金会是佛罗伦萨的机构，第二、三章的采石场和 San Miniato 也都在托斯卡纳境内。这不是外来团队在写别人家的地方志。

还有一条值得记：报奖用的网址是工作室自己的托管域名，不是客户的正式域名。