Colonia Zacamil

这个网站要讲的是一个街区怎样从帮派地盘变回居民的家。站上的文字交代了背景，Zacamil 的这片公寓楼建于二十世纪中叶的工人住宅计划，一共四十栋。内战时这里打过仗，后来又成了两个帮派的地盘，居民用铁栏和铁丝网把门窗封起来过日子，这种日子一直持续到 2022 年。在那之后，由艺术家自己运营的基金会 Custom Made Stories 请来壁画艺术家、景观设计师和城市设计师，和居民一起重新收拾这片街区。网站没有把这些内容排成一本项目画册，而是先把访客放到街区上空，让访客自己飞下去看。

访客在进入模型之前，要先过一道需要点击的门。页面加载时，一张街区的航拍照片铺满屏幕，照片上压着一行由方块和半圆拼成的 ZACAMIL 字标。照片随后缩成一条横幅，夹在 FLY TO 和 ZACAMIL 几个大字中间。横幅下面是一个黑色的 Discover 按钮和一行请访客打开声音的提示。访客点下按钮，环境声响起，屏幕先用三个小图示教访客拖动、滚轮缩放和点击图钉，然后街区的模型才出现。

模型上散着二十七个图钉，访客主要的动作就是点它们。十四个金色图钉各对应一幅壁画，访客点下去，镜头飞到那面墙跟前，右边滑出一块面板，里面有壁画的名字、作者、完成年份、一段艺术家的话和一部短片。面板顶上的两个箭头可以直接跳到上一幅或下一幅壁画。另外十三个紫色图钉只在鼠标移上去时显示名字，访客点不开它们。模型里还藏着三件没有标记的物件，一只颜料桶、一座雕像和一处垃圾分类点，访客点到它们，会弹出一张小卡片，分别讲捐颜料的人、内战纪念雕像和社区自己办的回收。

地图之外，网站还有三条路线和一套系列片，它们是站上文字最多的部分。顶部的 ROUTES 按钮展开后有 URBAN、ART 和 LANDSCAPE 三项，分别讲公共空间、壁画和绿化，每一条路线是一篇横着滚动的长文，有导语、一部预告片、一段历史、一组照片，结尾直接接到下一条路线。WATCH SERIES 按钮通向名叫 Rebirth 的系列纪录片，一共七集。全站有英语和西班牙语两个版本，图钉的名字和所有正文都翻译了。

每一幅壁画和每一条路线都有自己的网址。访客点开一幅壁画，地址栏末尾会多出这幅壁画的名字，面板上的分享按钮复制的就是这个地址。别人拿到链接后重新打开，过了 Discover 那道门，镜头会直接飞到那幅壁画。

制作团队把整个街区画成了一座手工上色的建筑模型。公寓楼是灰绿色的方盒子，屋顶是一道道浅紫色的瓦楞，楼的边缘、电线和栏杆都勾着铅笔一样的黑线，树是几片叠在一起的绿色色块，行人只有火柴大小。楼边的黑线是建模时就做进模型里的线条，不是事后描的边，所以镜头怎么转，线条都贴在楼上。画面四角压暗，表面带着细细的颗粒，远处的天空像一片蓝色的水彩。在这片灰绿色里，最鲜艳的是壁画，所以访客第一眼看到的就是那十几面彩色的墙。

底部那个开关换掉的不只是壁画，街区里的许多细节也跟着变。在 PAST 状态下，墙面是空的，楼下堆着黑色的杂物，楼前围着黑色的栏杆。路边的车是深色的，路上几乎没有人，整个画面蒙着一层灰雾。回到 PRESENT，墙上有了画，草地上多了土色的小路，行人三三两两站在楼下，车也换成了粉色和紫色。两个状态用的是同一个视角、同一批楼，访客看到的差别全部来自这几年的改造。

开关旁边还有一个昼夜按钮，它让壁画在夜里也是主角。访客按下它之后，楼体沉进深蓝紫色，街灯在路面上投下一团团光，汽车拖着橙红色的尾灯，金色和紫色的图钉在暗处发亮。画面里最亮的地方是那些壁画和中间的球场，夜景等于把壁画又圈了一遍。

盖在模型上的界面只用黑色的胶囊按钮和很小的等宽字。WATCH SERIES、ROUTES、声音和复位四个按钮排在顶部正中，过去和现在的开关、昼夜按钮排在底部正中，语言切换写成方括号里的 EN / ES，放在右下角。这些按钮都很小，位置固定，没有一个压在壁画上。

壁画的面板和三条路线各有自己的底色。壁画面板是土黄色，和金色图钉是同一种颜色，面板上的标题用白色的窄体大写字，正文用衬线体。三条路线的正文都排在米白色的底上，结尾那一屏却各用一种平涂的颜色。壁画路线的结尾是灰蓝色，绿化路线的结尾是粉色，城市路线的结尾是浅褐色，每一块颜色上都写着下一条路线的名字。

三款字体包办了全站的文字，每一款只负责一类内容。Heathergreen 是一款又窄又高的无衬线大写字，只用来写标题，进门的 FLY TO ZACAMIL、壁画的名字和路线的标题都是它，路线标题每一行的字高都有屏幕的四分之一左右。Reckless Neue 是一款衬线体，负责所有需要读的段落和引语。Roboto Mono 是等宽字，只写按钮、标签和方括号里的小字。制作团队还在路线的标题里嵌了一张圆角的小照片，照片和字排在同一行，像一个换成了图片的单词。

模型出场的方式像一张正在显影的画。访客点下 Discover 之后，屏幕先变黑，楼顶和墙面以零散的白色笔触一块一块冒出来，接着颜色铺满整个街区，镜头同时降到俯瞰的位置。访客从点击到看到稳定的画面，大约要等九秒，其中四秒多花在那三个操作图示上。

访客在地图上的操作都带着一点惯性。访客按住拖动，街区跟着平移，松手之后画面还会滑行一秒多才停下。访客用滚轮可以把画面拉近和推远，两头都有限度，镜头始终停在能看清图钉的高度上。顶部那个圆形的复位按钮会用一秒左右把镜头送回开始的位置。鼠标在地图上是一个细线圆圈，移到金色图钉上，图钉会展开成一枚写着壁画名字的标签，屏幕右下角同时弹出一小段无声的预览影片。

镜头在访客点下图钉之后的那次飞行，是整个站最像电影的动作。镜头用三四秒从俯瞰滑到壁画跟前，停下时壁画正好占满面板左边的空间，每一幅的构图都不一样。模型里预先摆好了二十二个机位，镜头看起来就是在这些机位之间移动，所以每一幅壁画都有一个专门为它挑好的角度。访客在面板里点 Play Video，短片直接在面板里播放，也可以放到全屏。

过去和现在的切换，是在同一个模型上换一层颜色。访客拨动开关，壁画和草地的颜色在几秒钟内淡出或淡入，灰雾跟着升起或散开，行人和汽车同时换成另一批。制作团队应该是给同一批楼准备了两套手绘的表面图案，切换时让画面从一套过渡到另一套，所以楼的位置和形状一点都不动，访客的注意力全在变化的那一层上。

三条路线是横着滚的，访客推滚轮，页面向左移动。平滑滚动库 Lenis 让页面在滚轮停下后再顺着滑一小段。屏幕底部还有一条细细的进度条，跟着页面一起往前走。标题和导语一个词一个词地显出来。每条路线的中段都开了一扇窗，窗里是街区模型上和这一章有关的那个角落，比如城市路线里是那块球场。

无论访客在拖地图、缩放还是横向滚动路线，画面都保持在每秒 60 帧。路线页面能这么顺，是因为访客打开路线一两秒之后，后面的三维场景就停止了重画，窗里看到的是停下前的最后一帧，页面滚动时只是把这一帧左右挪动。停止重画也有露馅的时候，有时场景停在镜头还没飞到位的那一刻，窗里就是一张模糊的墙面。

这个站用网页框架 Nuxt 搭页面，三维部分交给 three.js，动画用 GSAP，横向滚动用 Lenis。访客在点 Discover 之前，浏览器已经下载了约 6.4 MB，整个街区都包含在内。最大的一项是街区的模型，传输时 1.9 MB。模型里的物件有五千六百多个，光是行人就有五百多个，晾着的衣服有四百多件。其余是壁画和地面的贴图约 2.3 MB，以及一段约 1 MB 的环境声。进门以后，每条路线会再下载一段约 1 MB 的环境声，每打开一幅壁画的面板，会再下载两张 0.25 到 0.5 MB 的照片，短片只有在访客按下播放时才开始传输。

页面打开得快，加载途中却有一次明显的卡顿。首次内容绘制（FCP）在 0.6 到 0.7 秒，好于 Google 建议的 1.8 秒，加载画面走完、Discover 按钮出现大约在第 4 秒，整个过程没有布局跳动。不过页面在加载期间有一段 0.65 到 0.86 秒的长任务。长任务指浏览器被一段脚本连续占住、没法响应操作的时间，Google 建议的上限是 0.05 秒。这段时间大概花在解开模型和贴图上。

这座模型存下来只有不到九万个三角形，屏幕上每一帧却要画两百多万个，因为大部分物件是同一个模型重复摆出来的。重复摆放也让画面始终流畅，显卡每一帧只收到大约一百一十次绘制指令，其中七十多次是一次画出一大批相同的行人、树或汽车。切到过去的状态时，指令降到七十多次，因为那一层的行人和小路都不用画。前面提到的路线页面暂停重画，也让显卡在访客读长文时完全空闲。

只用键盘的访客进得了门，却看不了任何一幅壁画。在门口，访客按 Tab 键可以选中 Discover 按钮并用回车进入，但这个按钮被选中时没有任何可见的焦点框。进入地图以后，二十七个图钉、顶部的四个按钮和底部的两个开关都不是真正的按钮元素，Tab 键只能选中页脚的一个外部链接。面板打开以后，访客按 Esc 也关不掉它。

读屏软件的用户在这个站上同样吃力。面板顶部的上一幅、下一幅、分享和关闭四个按钮没有名字，面板和路线里的照片都没有替代文字，路线页面没有一个标题标签，英语和西班牙语两个版本都没有声明页面语言。制作团队做对的一处在路线的标题和导语上。这些文字为了做动画拆成了一个个单词，制作团队给它们补上了完整的朗读文本，读屏软件读到的是整句话。

访客在操作系统里开启减少动态效果之后，这个站没有任何变化。这个设置本来是用来告诉网页少做动画的，但这里的加载动画、模型的显影和镜头的飞行都照常播放，样式和脚本里都没有针对这个设置的处理。

创意（Creativity）7.81 是 Awwwards 四个分项里最高的一项，内容（Content）7.69 排第二，可用性（Usability）7.42 最低。创意分最高，和那个能把街区拨回过去的开关对得上。内容分排在第二，这个站上有十四部壁画短片、七集纪录片和三篇长文，可读可看的内容很多。可用性最低，可能和进门后要等九秒、键盘几乎用不了有关。

开发奖表里的五个分项之间差得很远。动画（Animations）8.80，高出其他项一大截，语义（Semantics）6.20、无障碍（Accessibility）6.40 和标记（Markup）6.40 都只有六分出头。这组分数和工程章里看到的情况一致，镜头和切换做得很细，页面的标题、语言声明和按钮名字却缺了不少。

FWA 在 8 月 28 日就把当日站给了这个站，比 Awwwards 早了一个多月，分数是 83。团队在两个平台上写的项目说明是同一句话，说 Colonia Zacamil 是公共艺术、社区共同设计和可持续发展交汇的地方。这句话讲的是街区，没有提到网站本身的任何做法。

这两家工作室都是两个平台上的常客。Adoratorio Studio 在 Awwwards 上有 45 个当日站，主页上写着自己拿过年度工作室，客户里有 Gucci 和 Max Mara。60fps 的定位是替别的工作室做开发，它的作品列表里有不少是和 Immersive Garden 这样的设计工作室合作的。从分工看，这个站多半是 Adoratorio Studio 负责设计、60fps 负责三维和开发，不过两个平台的署名都只写到工作室，没有列出个人。