Santioni Spirits

Santioni Spirits 是一个刚刚起步的酒品牌，第一个系列叫 Notturno Collection，意思是夜曲，一共三种奶油风味的调制酒。网站页尾写着 Select Houses Forthcoming，也就是首批销售的店家还没有公布，所以这个站没有购买入口，它的任务是让第一次听说这个牌子的人记住它。团队在 FWA 上把它称作这个品牌向世界的自我介绍，做法是一段受漫画启发的沉浸式旅程。这一段旅程很长，整个故事大约有 35 屏，访客一直往下滚，画面就一直跟着往下走。

访客进门先要回答一个问题，ARE YOU OF LEGAL AGE?，问访客是否已到法定饮酒年龄。访客选 YES 就能进门，选 NO，屏幕上只剩下 ACCESS DENIED 和一行说明，页面上没有任何返回的办法，只能重新加载。进门之后，故事从一片白茫茫的荒原开始，一位披着棕色斗篷的圣人低着头赤脚往前走，旁边的小画格里是他兜帽下的侧脸和紧握的手。接下来他望见远处一块巨石，石头底部有一个发着红光的圆形入口。他走近入口，伸出手，屏住呼吸迈了进去，醒来时站在一间布满红柱子的大厅里，大厅尽头的台子上立着三瓶酒。

故事里有四处地方让访客亲手参与，光标会变成一个白色圆形标签，写着这一处该怎么做。第一处在入口前，标签写着 HOLD & MOVE，访客按住鼠标移动，圣人的手就跟着光标伸向那扇红门。第二处是挑酒，标签写着 CHOOSE FLAVOR，三瓶酒分别是蓝色的橙子巧克力奶油、绿色的薄荷巧克力奶油和黄色的棉花糖咖啡奶油。第三处写着 HOLD & POUR，出现在调酒壶往杯里倒酒的那一屏，第四处写着 HOLD，出现在圣人升进一道光柱的那一屏。这四处都不拦路，访客什么都不做，一直往下滚，故事也会照样讲完。不过访客只有亲手挑过酒，后面的颜色才是自己选的那一种。

挑酒的那一下决定了后半段的样子。访客挑了黄色，调酒壶和酒杯里就是黄色的酒，圣人喝下之后长袍从棕色变成黄色，说明框里写着光柱里旋转着 MARSHMALLOW、COFFEE 和 CREAM。访客挑绿色，同一句话就换成薄荷和巧克力。访客什么都不挑，站点默认给的是蓝色那一瓶，也就是橙子巧克力奶油。

故事讲完之后，页面从漫画转回品牌。红色大厅的柱子和屋顶碎裂飘走，露出一片深红的天空，接着出现一行很大的 INDULGE NOW ATONE LATER，意思是现在尽情享受，以后再赎罪。这行字之后，一张白色卡片浮在空中，上面是分别以 CHILL、SHAKE 和 POUR 开头的三句短句，讲冷藏、摇匀和倒酒。卡片下面是三种口味的产品轮播，访客左右拖动就能换一瓶。轮播第一个停在的就是访客在故事里挑的那一瓶，如果挑的是黄色，轮播就从 MARSHMALLOW COFFEE & CREAM 开始。

整个故事画成一本黑白漫画，颜色是一种一种加进来的。开头几屏几乎只有白纸和黑墨，除了黑白，只看得到圣人斗篷的土棕色。到了那块巨石，画面里多出一个暗红色的圆形入口，进门之后整间大厅都换成了大红色，后半段的画面大多是大红配黑影。三种口味的蓝、绿、黄要到大厅尽头的台子上才出现，访客挑完之后，画面里只留下挑中的那一种，所以这个颜色在满屏的红黑里格外显眼。

漫画的手法贯穿了每一屏的版面，画格、说明框和阴影都照着漫画书来画。主画面四周画着手绘感的黑色边框，边框略微歪斜，像是用尺子随手画出来的，旁边再叠上几个更小的画格，给人物的脸、手或眼睛一个特写。旁白放在白底黑框的说明框里，排在画格的一角。阴影是整块的纯黑，明暗之间用一排排细密的平行线过渡，衣褶、地面和墙面都是这种刻线的质感，看上去像是用钢笔一笔一笔排出来的。

标题和旁白用了两款语气完全不同的字体，品牌的部分偏复古，故事的部分像漫画对白。大标题用的是 Charles Rosie，一款笔画细长、带装饰的展示字体，开场标题 THE NOTTURNO EXPERIENCE 里，NOTTURNO 的第一个 O 画成两个扣在一起的圆环，EXPERIENCE 最后一个 E 换成一个小小的斜体花饰字母。INDULGE NOW ATONE LATER 和三种口味的名字也都用这款字，读起来像一张老海报。旁白和光标标签用的是一款圆头的无衬线字 PP Nikkei Maru，字号小，全部大写，正是漫画说明框里常见的样子。页尾的邮箱和署名再换成一款很细的无衬线字，只占很小一块地方。

界面上的部件都很少，而且都做成了故事的一部分。右上角固定着一个白底黑框的切换条，左边是 EXPERIENCE，右边是 COLLECTION，访客点 EXPERIENCE 回到故事开头，点 COLLECTION 直接跳到产品轮播。左上角是品牌的圣像标志和手写体的 Santioni Spirits，右下角是一个声音开关。除此之外，屏幕上没有菜单和按钮，需要访客动手的地方全靠光标上的那个白色圆形标签来说明。

整个故事由滚动推着走，画面像一台摄像机顺着一条长长的竖直路线往下走。访客停下滚轮之后，画面还会顺着惯性再滑一小段。站点每一帧只让画面追上剩下距离的一小部分，所以访客松开滚轮时，画面不会戛然停住，而是慢慢落定。

画面上的人和物即使在访客不动的时候也一直在动，而且动得一拍一拍的。圣人的斗篷在风里一顿一顿地摆动，衣服上的刻线每秒大约跳动八次，而不是平滑地流动，看起来就像手绘动画里每一张都重画过的线条。画面里的圣人、酒瓶和柱子其实都是三维模型。站点在每个像素上先算出这里受到多少光，再把明暗切成纯黑、本色和纯白三档，交界处叠上一张线条纹理。阴影的边缘因此变成一排排刻线，亮处的线条断成小点。线条纹理的位置和风吹的摆动都按固定的节拍跳动，所以三维模型看上去像是一张张画出来的漫画。

四处亲手参与的地方各有自己的反馈。HOLD & MOVE 那一处，圣人的手跟着光标在红门前移动，手碰到的地方像颜料一样晕开鲜红的痕迹，左下角的小画格里也同时出现红色。访客松开鼠标，手就缩回去，红色慢慢暗成一圈圈涟漪。到了标着 HOLD 的那一屏，圣人在一道白色的光柱里旋转着升起，身边飘着访客所选颜色的花瓣。

旁白是这个站最细致的一处动效，声音和文字是一个词一个词对齐的。故事里一共 16 段说明，每一段都配了一段英文朗读。访客停下滚动，声音就开始念这一段，说明框里的字跟着朗读逐个变红，念完之后全部回到黑色。站点会等访客停下来才开始念，访客一直在滚，旁白就不出声。

整页滚动很顺，从头到尾连续滚两遍，都稳定在每秒 60 帧，没有掉帧的段落。系统里打开减少动态效果的设置之后，站点不会有任何改变，跳动的线条、惯性滑行和所有交互动画都照样播放。

这个站是 Active Theory 用自己的网页三维引擎做的，整个故事画在一块铺满屏幕的 WebGL 画布上，没有用 three.js 这类通用的三维库。圣人、手臂、酒瓶和柱子都是三维模型，故事的说明框和光标标签也都画在这块画布里，顶部的导航、产品区的部分文字和页尾才是普通的网页文字。

Santioni Spirits 的首页一打开就要下载约 12 MB，其中一半以上是声音，约 6.7 MB。最大的五个文件全是背景里的长音，加起来约 4.3 MB，其余是交互音效和一段爵士乐。三维模型约 1.7 MB，图片约 2.2 MB，脚本约 0.6 MB。访客回答 YES 之后，站点再下载 18 段朗读，约 2 MB，这一次访问一共约 14 MB。走完整个故事不会再下载任何东西，所以滚动途中不会因为等文件而停顿。

加载画面出现得很早，首次内容绘制在 0.44 到 0.66 秒之间，低于 Google 建议的 1.8 秒，这时画出来的是圣像标志和一条进度线。年龄确认的问题大约在第 5 秒出现。加载时页面会被卡住好几次，最长的一次超过 1 秒，不过这时访客看到的只是加载动画，不会察觉。测量工具报出的布局位移高达 1.04，远超 0.1 的建议上限，但挪动位置的是画布下面一层看不见的网页文字，访客的屏幕上并没有东西跳动。

只用键盘的访客和使用读屏软件的访客，在这个站上各会碰到一处大问题。年龄确认的 YES 和 NO 是画在画布上的，键盘的 Tab 键一次都停不到它们身上，只用键盘的访客从第一屏起就进不了门。进门之后的键盘操作是做对的，方向键、空格键和翻页键都能推动故事。读屏软件这边，故事的 16 段说明只存在于画布里，网页文字里一句都没有，读屏软件读不到这个故事。听得见声音的访客还有旁白可听，听不见的访客就只剩画面。页面声明了英语，导航、产品区的部分文字和页尾是读屏软件可以读到的普通文字。

Awwwards 评委给 Santioni Spirits 打的四个分项里，Creativity 最高，得了 8.5，Usability 最低，得了 7.54。创意分高，和一个酒品牌把官网做成一本可以挑口味的漫画对得上。易用分低，也和这个站的做法对得上，访客要先过一道年龄确认，再顺着一条 35 屏长的路线一直滚到底，才能看到产品。另一组开发评委给了 7.66 分，其中动画最高，得了 9.4，无障碍最低，只有 6.6。无障碍分低，正对应前面讲到的键盘进不了门和读屏软件读不到故事。FWA 先在 8 月 18 日给了它当日站，又把它评为 8 月的当月最佳。

两家的战绩都是截至写报告时的累计数。两家都是 FWA 名人堂成员，各自都拿过一百五十次上下的 FWA 奖。奖项页上没有写明两家的分工，从专长看，画面和交互应该出自 Active Theory，长音、音效和 16 段朗读这一层声音应该出自 Plan8。