Powerhouse Company

这个站的首页没有宣言，也没有介绍文字，只有项目照片。Build in Amsterdam 在 FWA 的说明里写道，他们为 Powerhouse Company 做了一整套重新定位，从品牌定位、视觉识别一直做到官网，其中提出的品牌口号 We give meaning to space，后来主导了整套识别和网站。网站把这句话落在作品上，访客一进门看到的就是这家事务所盖过、正在盖的房子。

访客打开首页，先看一段大约 6 秒的开场动画，照片在 POWERHOUSE 字标周围停成一面照片墙。访客可以按住鼠标拖着整面墙平移，也可以推滚轮把墙拉近或推远，看中哪张就点哪张。光标停在照片上时只会变成一只手，墙上不显示项目名称，访客要点进去才知道那是哪个项目。

每个项目页都是一篇长文，Sluisbuurt 1B 有二十屏左右，Céline & Lolo 超过四十屏。页面从一张铺满屏幕的封面照片开始，之后是项目简介、可以切换 Key info、Team 和 Collaborators 三组信息的标签，以及一节节带标题的图文。项目页里还穿插着业主和建筑师的引言、平面图和剖面图，以及标着 1 of 9 这样页码的图片轮播。页面最后是一个 Ask us anything 按钮，按下去会展开一个 Join the conversation 留言框，事务所审核之后会把留言挂到项目页上，再往下是三个相关项目。

首页上方那颗白色胶囊里放着 Projects、Team、About 和 Contact 四个入口，通向项目列表、团队、事务所介绍和联系方式。这四页是常规的图文版面，项目列表可以筛选和搜索，团队页列出建筑师的头像、职位和所在城市。事务所现在在鹿特丹、慕尼黑、奥斯陆和内罗毕都有办公室，About 页开头就是那句 We give meaning to space through profound form and function。

这个站获奖之后一直在用，内容也一直在更新，墙正中那个项目 Sluisbuurt 1B 现在还在施工。网站的结构有几处改动，2020 年时顶上的白色胶囊里是一句带下划线的口号 We give meaning to | Space，现在换成了四个入口。项目页结尾的留言框和相关项目也是后来加上的。首页的照片墙、开场动画和从照片放大进项目页的做法，都还是获奖时的样子。

这个站自己几乎没有颜色，画面上的颜色全部来自项目照片。版面只有白底、黑字和顶上那颗带一点阴影的白色胶囊，照片之间留着整齐的白缝，没有边框，也没有阴影。字体只有两款，人文无衬线体 Optima 负责大标题和引言，笔画末端微微张开，看上去接近衬线体。界面文字和正文用的是无衬线体 Graphik。项目页上 Optima 排出来的字数只有 Graphik 的七分之一左右，在页面上占的面积却和 Graphik 差不多，因为它只在很大的字号上出现。

照片墙不是一张平面网格，而是有前后层次的三维空间。照片有竖的、横的和方的，按列排开，相邻两列的上下位置互相错开，所以整面墙看上去像一组参差的书架。Build in Amsterdam 用 Optima 的大写字母排出 POWERHOUSE 字标，把它夹在照片之间的一层，有几张照片在它前面挡住了几个字母，也有几张在它后面被字母压住。默认的视角下，字标大部分被挡住，只露出一两个字母，访客把墙推远一些才能读全它。

项目页的封面延续了照片墙的规矩，画面完全交给照片。左上角用 Graphik 小字写项目名，下面是 Optima 排的大标题，大约是项目名的四倍大，例如 5050 Gansevoort 下面的 Supertall for All。右上角是一个浅灰色的圆形关闭按钮，画面上再没有别的界面元素。

封面之后的版面像建筑杂志的跨页。照片和文字分在左右两栏，标题常常放在右栏顶上，左栏是一张大照片，照片边上竖着一行小字图注。业主或者建筑师的话用 Optima 排成整段大字，下面配一个小小的头像和名字。整页没有分割线，每一节之间靠大片留白隔开。

项目页右上角的关闭按钮同时也是阅读进度条。按钮外圈有一道细弧，访客往下读，这道弧就沿着顺时针慢慢变长，读得越多，圈就绕得越满。

开场动画把这面照片墙一张一张地搭了起来。字标先出现在白底中央，接着几十张照片从远处朝屏幕飞来，远处的照片褪成接近白色，越靠近屏幕颜色越饱满，这层像雾一样的白把远近拉开了。照片最后各自落到墙上的位置，颜色也全部恢复，整个过程大约 6 秒。

首页的照片墙对鼠标拖拽和滚轮都有反应。访客拖动时整面墙跟着手走，松手之后还会顺着惯性滑大约半秒才停下。推滚轮时镜头沿着纵深前后移动，墙上的照片就跟着变大或变小，拉到最近时一屏只看得到三列照片，推到最远时能看到六列左右，前后几层照片之间的遮挡关系也会随着改变。访客停在照片上不动时，墙不会自己动。

从照片墙到项目页的那一下是这个站最主要的动效。访客点下一张照片，字标和其他照片很快褪成白色。被点的那张照片从原来的位置移到画面中间，同时放大到铺满整个屏幕，然后项目名和标题淡入，它就成了项目页的封面。整个过程从不到一秒到一秒半不等，每次点的照片不同，快慢也不一样。

这种衔接做得出来，是因为整个站的照片都画在同一块铺满屏幕的 WebGL 画布上，首页的照片墙和项目页里的照片都是如此。被点的照片不用换成另一张图，画布只要把同一张照片移过去、放大，项目页就接上了。从项目页回到照片墙时，网站用的是另一种做法。访客点关闭按钮，项目页先整个淡成白色，照片墙再从白色里淡回来，前后大约一秒多，并不是把放大的过程倒着放一遍。

项目页上的滚动由网站自己的脚本接管。访客推滚轮时，浏览器的页面本身并不移动，网站把整个内容层往上平移。内容层每一帧只追上剩余距离的一部分，所以停下滚轮后页面还会再滑一小段，画布上的照片也跟着内容层同步移动。一个四十屏长的项目页从头滚到底，画面一直保持每秒 60 帧，超过 32 毫秒的卡顿帧只有 0.1%。

这个站用 React 16 搭页面，并且在服务器端先渲染好，照片墙和项目页的照片都交给 three.js 画在 WebGL 画布上。拖拽和缩放的手势由手势库 react-use-gesture 处理，项目页里的图片轮播用的是轮播库 Flickity，内容由 WordPress 后台管理，Cookie 同意条用的是 Cookiebot。

首页打开一次要下载约 38.3 MB，其中 37.1 MB 是照片。这里面有四张照片各约 4.7 MB，每张大约 2,000 多像素宽、2,500 像素高，四张加起来约 19 MB，占了首页一半，可它们在墙上只显示成几百像素宽的格子。这几张照片看起来是编辑在 WordPress 里上传的原图，没有压缩就直接上了首页。左上角的事务所字标也是一样的情况，图片本身有 8,216 像素宽，页面上只显示 127 像素。

首页的首次内容绘制在 0.53 到 0.69 秒之间，低于 Google 建议的 1.8 秒，不过这时画出来的只是顶上的菜单文字，照片墙要到 6 秒左右才搭好。加载过程中浏览器的主线程被占住六次，最长的一次连续占了 1.1 到 1.2 秒，Google 把超过 50 毫秒的任务算作长任务，这段时间里访客的点击和拖动都得不到回应。布局位移只有 0.003，加载时页面几乎不跳。

键盘和读屏软件在首页上几乎做不了什么。照片墙是一块画布，75 个项目没有一个能用 Tab 键走到，Tab 只经过底部的 Cookie 条、左上角的字标和顶部的四个入口，然后就回到页面本身。样式表把浏览器默认的焦点轮廓去掉了，键盘焦点落在菜单上时，菜单看起来和没有焦点时一模一样。项目页的结构好一些，有正确的标题层级，Key info 这类标签也是真正的按钮。可是页面上的照片全部画在画布上，没有一张带替代文字，读屏软件读不到任何一张照片。样式表里也没有减少动态效果的设置，开场动画和照片放大的过渡对所有访客都一样播放。

照片墙和那一下从照片放大进项目页的过渡，让这个站拿到了 8.29 的创意 Creativity 分，是它在 Awwwards 四个分项里最高的一项。另外三项是设计、可用性和内容，每项满分 10 分，设计 Design 有 7.98，排在第二。可用性 Usability 最低，只有 7.68，墙上不显示项目名称、键盘碰不到照片，可能都拉低了这一项。前端开发评委那一边给了 7.28，除去响应式设计不算，五个分项里动画 Animations 最高，有 8.33。语义 Semantics 和标记 Markup 最低，都是 6.67，无障碍 Accessibility 是 7.00。

FWA 三天后把它评为当日站，81 分来自 28 张评委票，归在建筑与设计、作品集两类下面。Awwwards 随后把它评为 2020 年 4 月的月度最佳。

两个平台的署名都只有 Build in Amsterdam 一家，从品牌口号到网站代码都出自这一个团队。这家工作室的自我介绍是 We build digital flagship stores，也就是替品牌做网上的旗舰店。表里 Build in Amsterdam 的获奖数是截至现在的累计。