1917 Into the Trenches

这个站没有把预告片放在首页，而是让访客自己走进片场。《1917》讲的是一战时两名英国士兵穿越敌占区去送一封信，要赶在进攻之前救下 1,600 个人，导演 Sam Mendes 把全片拍成了看起来不间断的一个镜头。为了这种拍法，剧组搭了一英里多长的战壕。Powster 在 FWA 的访谈里说，他们拿到了这些布景的高精度三维扫描，想让观众在网页上亲身走一遍，并且一边走一边看电影是怎么拍出来的。

落地页是一整块黑底，上面只有片名数字、一句邀请和一个 START 按钮。那句邀请是 STEP INTO THE TRENCHES AND GET AN EXCLUSIVE LOOK AT THE MAKING OF 1917，按钮上方还有一行小字 BEST EXPERIENCED ON A MOBILE DEVICE，告诉访客这个站在手机上体验最好。访客按下 START 之后，网页先放一段 6 秒的片头，然后淡入第一段战壕。屏幕中间这时提示 SCROLL TO MOVE. PAN TO LOOK AROUND.，意思是滚动滚轮往前走，移动光标看四周。

战壕一共三段，每段要滚大约一百三十下滚轮才走得完。访客只能沿着一条预设的路线前进或后退，离不开这条路，光标决定的只是往哪里看。走到某些位置，战壕里会出现一行巨大的章节标题，例如 ONE SHOT、SETTING THE SHOT 和 A HISTORIC CONSTRUCTION，三段战壕里一共有五个。访客停下来超过 20 秒，屏幕下方会出现一行 YOU HAVE TO KEEP MOVING...，催访客接着往前走。

战壕沿路一共放了十个热点，内容几乎都是电影的幕后。六个热点放的是竖屏短片，有导演 Sam Mendes 讲镜头怎样一刻不离开两个士兵，有电影里将军 Erinmore 交代任务的那场戏，也有搭建战壕时工地上挖掘机的画面。另外三个热点标着 STORYBOARD TO SCREEN，把分镜草图和拍出来的画面放在一起对照。最后一个叫 DECODE THE MESSAGE，点了会在新标签页打开 YouTube 上环球影业发布的一段幕后特辑。除了这个链接，其余九个热点里的短片加起来大约有 6 分钟。

右下角的 MAP 打开一张整条战壕的地图，三段分别标为 PART 1、PART 2 和 PART 3，访客点其中一段，就会被送到那一段的起点。第三段走完是一段 13 秒的片尾，之后回到黑底的结束页，写着 IN THEATERS DECEMBER 25，下面是 BACK TO THE TRENCH 和 VISIT OFFICIAL SITE 两个按钮。这句上映日期指的是 2019 年的圣诞节，右上角的按钮已经换成了在家观看的 WATCH AT HOME，结束页的这句话却一直没有跟着改。

这个站的画面几乎全部来自电影本身，一边是扫描出来的战壕，一边是剪进来的电影片段，设计团队自己加上去的只有一层很薄的界面。界面的颜色几乎只有黑、白和一种橙色，文字用的是几何无衬线体 Futura，标题和按钮都排成大写字母，四个角各放一个小控件。左上角是 1917 字标，右上角是 WATCH AT HOME，左下角是声音开关 SOUND，右下角是 MAP。这几个控件占的面积很小，战壕和影片几乎铺满了整个屏幕。

落地页把片名 1917 做成了一扇看进电影里的窗。1917 四个数字从屏幕顶端一直排到底，宽度大约占画面的三分之一，数字的笔画里是一片从灰蓝过渡到火红的天空，笔画之外全是黑的，右边那句邀请和 START 按钮则排得很小。这片天空不是网页用遮罩挖出来的，四个数字连同里面的火光本来就画在落地页循环播放的那段影片里。片尾之后的结束页用的也是这个画面，访客出门时看到的还是进门时那扇窗。

战壕里的章节标题不是贴在屏幕上的文字，而是放进三维场景里的模型。这些标题是浅灰白色的大写字母，有的立在战壕的墙边，有的平躺在地上，访客走近时它们跟着透视变大、变斜，走过去之后就留在身后。标题的字形和界面一样是几何无衬线的大写字母，场景里的标题和屏幕角落的按钮因此读起来是同一套字。

橙色是界面上的强调色，出现在 START 按钮的描边、加载进度条、热点的方块和地图上当前所在那一段的标记上。扫描出来的战壕是泥土、沙袋和木板，颜色都是灰褐色，所以界面上的橙色在画面里格外醒目。三段战壕的天色也不一样，第一段是阴沉的灰白，到第三段天边已经透出昏黄的光。

热点同样立在三维场景里，而不是浮在屏幕表面。每个热点由一个橙色方块、一行 VIDEO 小字加章节号，以及一条虚线组成，虚线一直拉到地面上一个菱形的十字标记，方块背后还衬着一排蓝色的斜线。这套记号看起来像画在军用地图或者分镜稿上的标注，访客从侧面看过去时，方块和文字会一起随透视倾斜。

点开的短片全部是竖屏的，形状和手机屏幕一样，这和落地页上那句手机体验最好对得上。短片出现在屏幕正中一个竖长的框里，框的四角各有一个细线折角，像相机取景框的对焦角，背后的战壕整个压暗，压暗的画面上铺着一层很淡的方格线。地图也是同样的黑底方格，整条战壕的俯视渲染图斜着摆在上面，三段各用一条横线标出来，当前所在那一段的线和圆点是橙色的。

访客每推一下滚轮，镜头就沿着路线往前挪一小步，而且不是一下跳到位，镜头每一帧只追上剩余距离的一部分。连续滚动时，访客因此像在平稳地往前走，停下滚轮后镜头还会顺势再滑一小段，往回滚则会倒退。访客往前走的时候，脚下的木板和泥地上会一前一后冒出带斜线纹的脚印，像是访客自己踩出来的。

光标的位置直接决定视线朝向，访客不需要按住鼠标拖动。光标移到屏幕最左边，视线向左转大约 65 度，移到最右边也向右转同样多。上下的范围小得多，抬头或低头都只有大约 27 度，而且视线是慢慢转过去的。走到路线上的某些位置，镜头还会自己转一个角度，把访客的视线引向前方的路或者旁边的热点。

光标管视线这个设计，到点热点的时候就成了麻烦。热点在屏幕边上时，访客把光标移过去，视线跟着往那边转，热点就往屏幕中间滑，正好从光标底下溜走。访客如果一下把光标移到热点所在的位置，热点会在两个位置之间来回摆，要分三到五次、每次只往热点的方向挪一部分，热点才会停在光标底下。

按下 START 之后的 6 秒片头，是落地页那扇窗的延续。1917 四个数字先变成四扇窗，窗里换成了士兵在战壕里往前走的镜头。接着 7 的那条斜边把画面斜着推开，几块斜切的画面越拼越大，片头结束时已经是一整屏电影画面。片头右下角有一个 SKIP，访客可以直接跳过。

段与段之间的衔接是这个站最主要的动效。访客走到一段战壕的尽头，网页接着放一段电影片段，两段片段分别长 7.6 秒和 9 秒。Powster 在访谈里说，这些片段特意挑了开头正好接在扫描场景结尾处的镜头，好让网页尽量贴近电影一镜到底的拍法。片段开始播放的同时，网页就在后台加载下一段战壕，等片段放完、画面淡入，访客已经站在下一段的起点。下一段战壕要下载二三十 MB 的贴图，这段等待被整个藏进了电影片段里，访客看到的只是一段电影。

访客点开热点时，短片框从屏幕中间出现，背后的战壕压暗，镜头停在原地。短片播放时滚轮不起作用，访客不能往前走。访客看完或者点右下角的叉，短片框收起，访客回到点开之前所站的位置接着走。

连续滚动走完三段战壕，画面平均每秒 58 帧左右，超过 32 毫秒的卡顿帧不到 0.5%，和每秒 60 帧的理想节奏几乎一样。显卡每画一帧只要处理十几到二十几批模型，走路时的开销很轻，扫描战壕的细节主要放在贴图上，而不是靠堆模型的面数。

这个站用 three.js 渲染三维战壕，界面用轻量的 React 替代品 Preact 搭建，动画交给 GSAP，背景声音交给音频库 Howler，全部代码打成一个压缩后 266 KB 的脚本。脚本里还留着两个开发时用的调试工具，一个是帧率面板，一个是调参面板，线上版本没有打开它们。

进门之前，落地页要下载约 6.5 MB，其中 3.4 MB 是那段画着数字的晚霞影片，1.3 MB 是样式表。样式表这么大，是因为地图的底图和阴影图被直接编码进了样式表，访客还没决定要不要按 START，就已经把后面才会打开的地图下载了一遍。

走完三段战壕要下载约 114 MB，这个数字包括点开的一段短片，其中 81 MB 是贴图。每段战壕的墙、地面、沙袋和道具各有一张 4096 像素见方的彩色贴图，以及一张同样大的法线贴图。法线贴图记录表面的凹凸，让平的模型看起来有起伏。这些贴图每张 2 到 4 MB 左右，一段战壕就有二三十 MB。模型本身反而很轻，三段的几何数据加起来不到 5 MB，每段画面里只有三万多到五万多个三角面。Powster 在访谈里说，原始扫描每段超过 3 GB、有上百万个面，他们把模型重新拓扑成低面数的版本，再把扫描的高清细节烘焙进贴图，这个下载比例正是这么来的。九段热点短片全部看完，还要再下载约 44 MB。

落地页的首次内容绘制在 0.5 到 1.1 秒之间，Google 建议在 1.8 秒以内，这一项算快，不过这时画出来的只是一个加载图标。访客真正看到 1917 那四个数字，要等大约四到六秒，网页要先把那段晚霞影片下载到可以播放。整个过程的布局位移是 0，画面出现之后不会跳动。第一段战壕的贴图在片头那 6 秒里开始加载，后两段则藏在过场的电影片段里。

访客走过的战壕不会从显卡的内存里释放。第二段加载进来之后，第一段的模型和贴图只是被隐藏，到第三段时，场景里同时存着三段战壕的模型、三组各一万五千颗的浮尘粒子和全部贴图，模型数从第一段的 44 个涨到了 135 个。显卡因此一直装着前两段几十 MB 的贴图，好在帧率没有因此下降。

这个站只认鼠标，用键盘和读屏软件的访客几乎哪里都去不了。整站的按钮都是没有按钮身份的普通元素，没有一个能用 Tab 键聚焦，访客连按 25 次 Tab，焦点始终停在页面本身，START、地图、声音开关和热点一个都碰不到。页面也没有任何标题层级，读屏软件读不出结构，短片框还只能用鼠标点叉关闭，按 Escape 键没有反应。系统里打开减少动态效果之后，片头和过场片段照样自动播放，不过战壕里的镜头本来就只在访客滚动时才移动。短片的字幕直接做进了画面，听不到声音的访客也能看懂内容，这是这个站在无障碍上做对的一处。

Powster 的访谈和线上版本有一处对不上。团队说他们在体验的最后藏了一个摩斯电码小游戏，线上那个 DECODE THE MESSAGE 热点打开的却是 YouTube 上的一段幕后特辑，这一版网页里也没有任何摩斯电码的内容，看起来这个小游戏在上线之后被换掉了。

这个站最先在 FWA 拿奖，2020 年 2 月 11 日成为当日站，84 分来自 57 张评委票，类别是电影。3 月 1 日 FWA 又把它评为 2 月的月度最佳，同一天它也拿到了 Awwwards 的当日站。Powster 在 FWA 的说明里写的是，他们用电影里那条一英里长战壕的三维扫描，做了一个可以沉浸其中的幕后网站，并且在手机上可以用增强现实把整段战壕按真实大小摆进访客身边。

走进真实片场的扫描、再用电影片段把几段扫描接成一个长镜头，让这个站拿到了 8.53 的创意 Creativity 分，是它在 Awwwards 最高的一项。Awwwards 另外三个分项是设计、可用性和内容，每项满分 10 分。内容 Content 有 8.09，排在第二，这和沿路那六分钟幕后短片对得上。得分最低的是可用性 Usability，只有 7.05，热点会从光标底下溜走、整站只能用鼠标操作，都可能拉低了这一项。

前端开发评委那一边给了这个站 7.12 分。除去响应式设计不算，五个分项里动画 Animations 最高，有 8.40，对应的是那段从片名数字推开的片头和段与段之间的衔接。无障碍 Accessibility 最低，只有 6.20，正好对应工程章里那些键盘碰不到的按钮。

这个站是 Powster 和环球影业的数字营销团队一起策划的。Powster 在访谈里说，工作室成立十年，算上这一次一共拿到十二个 FWA 和一个月度最佳。表里写的是截至现在的累计，所以 Powster 的 FWA 一栏已经是 18。署名里的 John Iacoviello 在 Awwwards 上自称程序员，他署名的三个作品都拿过当日站。