L.I.S.A.

设计公司的官网通常在首页放作品，把联系方式压在页脚。Locomotive 把顺序倒过来了，这个站只做一件事，就是接待来访的人，作品和其他内容都挂在顶部那行小导航里。

接待的方式是一段有剧本的对话。开场之后，L.I.S.A. 给出四个去向：开始一个项目、加入团队、随便说两句、了解我们的文化，旁边还附一行直接写邮箱的出口，写着 info@locomotive.ca。

点进任意一个分支，它先接一句符合人设的话。选了开始项目，它回的是一句带点戏的台词，大意是来活儿了，该去搅点数字世界的浑水。下一步才开始收信息，让我们正式一点，我需要一个名字写在你的白金粉丝徽章上，下面是一个只有一条下划线的输入框，提示词是你的名字。

这里要说清楚一件事。它叫 Super Assistant，但顶层没有任何自由输入框，四个去向是写死的按钮，回答也是预先写好的台词。它不是一个能听懂任意提问的助手，是一棵分支很浅的对话树。这不是缺点，一个联系表单本来也不需要理解自然语言，但如果访客是冲着助手两个字来的，第一屏就会和预期对不上。

这套做法真正换到的东西是填表的意愿。把姓名、意图、留言这些字段拆成几步，每一步只问一件事，中间夹一句角色的话，填表这件事就变成了聊天。要还的是速度，它比一张表单慢，想快点留下邮箱的人得多点几次，所以他们在第一屏就留了那个直接写邮件的出口。

版面上只有两样东西，左边一列文字，右边一个角色。中间没有分隔线，没有对话气泡，也没有聊天窗的边框。

文字这一列的规矩很省。全站只有两款字，正文用的 HelveticaNowDisplay 写了 283 个字符，字号在 13 到 29px 之间。展示字 LocomotiveNew 只写了 69 个字符，字号却能到 154px。两款字加起来管住整个界面，而 108 个元素里一个圆角都没有。

最见功夫的是已说过的话怎么处理。上一轮的台词不会消失，它留在原位，颜色褪成浅灰，字号不变。当前这句是纯黑。于是访客一眼就能看出哪句是刚说的、哪句是刚才说过的，不需要气泡，也不需要左右分栏那一套即时通讯的惯例。

这一手很值得学。对话界面默认都会去抄 iMessage，一边一个气泡加时间戳。但那套惯例是为多人、长历史、可回溯设计的。这里只有两个说话的人，一次只有一句要紧，所以用明度做时间轴就够了，省掉的边框和气泡还给了画面。

颜色上，能在屏幕上看到的只有黑和白两种文字色，黑用在 72 个元素上，白 36 个。整套配色里唯一的第三个颜色值是一个电光蓝，挂在那个折叠菜单的元素上，默认画面里不出现。

角色本身是这个站最贵的一块资产，一个 2.8 MB 的模型，配一张 341 KB 的环境贴图。CRT 的金属外框、塑料按钮和高领毛衣的针脚都是靠这张环境贴图反射出来的，场景里没有额外的灯。显示器亮起之后，屏幕里的画面是带噪点和扫描线的绿黑底，两只眼睛是两团过曝的白光，这一层是单独画上去的，不属于模型。

这个站没有滚动，所有的动效都挂在对话的推进上。

每答一步，镜头会重新取景。开场是正面中景，能看清整台显示器和人的肩膀。进入分支之后角色转过四分之三侧，往前走了一点，能看见 CRT 侧面的散热格栅和一只喇叭。也就是说，对话不只是文字在换，画面也在跟着调度，像一段有分镜的戏。

这是整个站最见功夫的地方，也是动画那一项拿到 7.80 的原因。做对话界面的人可以把这条记下来。让镜头随着对话推进，比让文字做入场动画有效得多，因为它给了对话一个空间上的进度条。

声音这一层配了一段 3.9 MB 的环境音，右下角两个圆形按钮控制开关。

针对减少动态效果的设置，样式表里写了五条规则，比大多数站认真。但和所有把内容放进画布的站一样，这几条管得住 CSS 的过渡，管不住画布里的渲染循环，角色和噪点照常在动。

画面这一层是一块 1920×945 的 WebGL2 画布，three.js r165 驱动，渲染尺寸和显示尺寸 1 比 1。

整个站只有 12 个文件，加起来 9.4 MB，构成很干净：模型 2.8 MB、环境贴图 341 KB、一段 1.1 MB 的视频、主脚本 693 KB、两个字体 107 KB，剩下最大的一块是那段 3.9 MB 的环境音。

首屏出得很快，首字节 179 毫秒，首次内容绘制 256 毫秒。但真正能用要晚得多。加载过程里有一个 1,611 毫秒的长任务，将近一秒六，主线程被完全占住，点击和键盘在这期间都没有反应，而最大内容绘制要到 2,604 毫秒才定下来。首屏那句字出来了，人还点不动，这个落差是这个站最该修的一处。这类长任务通常来自一次性解析模型和建场景，分帧做就能打散。

另一处是布局稳定性。整个加载过程发生了 113 次位移，累计 0.0674。单次都很小，感觉不到明显的跳动，但次数这么多，说明对话每插入一句都在推动周围的元素，而不是在预留好的位置上出现。对话界面尤其该给未来的行留好位置，因为它天生就是不断往里加内容的。

无障碍这块做对的不少。页面声明了语言，页眉、导航和主内容三个地标齐全，样式表里有 13 条焦点规则，弹层用了正确的对话框角色，18 个可交互控件全部有可访问的名字。

但那两个名字里有两个是错的，而且错得很具体。右下角的声音开关和左下角的返回键，它们给读屏器听的文字是 lisa.toggle-sound 和 lisa.back，也就是没有被翻译替换掉的原始键名。用眼睛看的人看到的是两个图标，用读屏器的人听到的是两串代码。这比没有名字更难发现，因为自动检查只会判断有没有名字，不会判断名字是不是人话。凡是用键名做多语言的站，交付前都该搜一遍页面上还有没有形如 前缀.某某 的字符串。

标题层级也只有一个二级标题，整份文档没有一级标题。

四个维度里 Creativity 7.89 拔尖，Usability 7.22 垫底，中间隔着 0.67。Content 7.61 排第二高，这一项通常是获奖站最弱的一环，而这个站的内容就是那些台词，写得确实有人味。

五位评委给了 7.00、7.40、7.00、8.00、8.30，分布比一般宽，两位给到 8 以上，三位停在 7 附近。

开发奖 7.52 比站点总分还高一点。六项里语义 6.80 垫底，和实测对得上，整份文档只有一个二级标题。动画 7.80 最高，墨西哥那位评委在这一项上给了满分 10 分，同一张卡片上他给无障碍打了 5 分，两个极端落在同一个站上，正好说明这个站的长短板。

两个署名都是公司，没有列到个人。这是他们自己的站，没有客户预算和客户内容的约束，所以可以把首页整个让给一个角色，也可以不放作品。

FWA 上找不到这个站，它自己也没挂获奖徽章。