1minus1

1minus1 做这个站，是为了让游戏公司一眼认出它是自己人。首屏写着这是一家为电子游戏服务的获奖创意代理，成员是品牌塑造者、游戏营销人和网页工程师。团队在 FWA 上的说明是，这是改版后的代理商官网，由团队自己设计和开发，用来展示他们给游戏工作室和发行商做的品牌、网站和营销作品，并加了一些来自游戏的小细节。网站的服务对象是游戏公司，所以整个站的样子也像游戏。

访客进门时，深紫色的屏幕上先由一粒粒小方块拼出 1minus1 的标志，几秒之后，首屏出现两个占满整屏宽度的大字 DISTINCT 和 ALWAYS，意思是永远与众不同。两个大字之间斜插着一张小卡片，卡片里循环播放游戏画面，从一个戴面罩的角色换到一场火光，再换到别的游戏，而且卡片会跟着光标挪动位置。

访客往下滚，页面依次讲四件事，每一件占一段。第一段是一整屏的作品集锦影片，访客点 PLAY SHOWREEL 就在原地播放完整版。第二段是服务，分成网站和平台、品牌和创意、营销和推广三张卡片。第三段是作品，八个案例排成一条可以左右拖动的轮播，上面可以按品牌、网站和营销三类筛选。访客点任何一个案例都会进入一整页的案例介绍，比如 Adhoc Studio 那一页大约有十五屏。最后一段是几张客户评价和一张联系表单，表单的标题写着 BEGIN YOUR STORY，开始你的故事。

页尾有一个按钮写着 PLAY OUR 404 GAME，点进去就是那局清除 404 的小游戏。屏幕上一个巨大的像素 404 由 219 个方块拼成，左上角写着出了点问题，那就玩个游戏吧，你能多快把 404 清干净。访客的光标划过一个方块，那个方块就被擦掉，只留下一圈细线框。访客碰到第一个方块时开始计时，底部还有重来和查看排行榜的按钮。

整个站用的是三种很冲的颜色，深紫、荧光绿和一种明亮的薰衣草紫，再配一点白。首屏和页尾是深紫配荧光绿，服务那一段把三种颜色轮流用在三张卡片上，作品和评价那几段换成白底，让游戏截图和角色海报自己出颜色。

像素字是这个站的招牌，整页最大的字都是它。最大的几行字用的是像素字体 OffBit，DISTINCT、SERVICES、OUR WORK、BEGIN YOUR STORY 这些字都放得和屏幕差不多宽，有的还超出屏幕边缘，一个个方块清清楚楚。同一款字有两种画法，一种是实心的方块，一种只画外框。首屏的 DISTINCT 是实心的，ALWAYS 是空心的，像游戏标题画面上的两种字样。卡片标题用一款粗体的无衬线字，正文和评价用另一款圆润一些的无衬线字，像素只留给最大的那几行。

版面上几乎没有一样东西是正着放的。服务卡片都斜着叠在一起，白色的服务面板压上来时也是斜的，客户评价是一张张歪着贴上去的荧光绿和白色便签，中间夹着黑白的贴纸插画，写着 BREAK COMFORT ZONES 这样的口号。评价区的左下角还画着一个写着 MINIMAP 的小地图框，旁边的标签写着 DRAG TO NAVIGATE，像游戏界面上的小地图。这些歪斜和贴纸让整页看上去像一面贴满东西的墙，而不是一份整齐的服务说明。

首屏那张卡片是全站最主要的动效。访客往下滚，这张斜着的小卡片会越变越大，同时慢慢摆正，最后铺满整个屏幕。它就这样变成作品集锦那一屏的背景影片，影片正中再出现 PLAY SHOWREEL 按钮。首屏和下一屏因此是用同一段画面接起来的，中间没有一次换页。

这张卡片之后，其余的动效大多是滚动带出来的。白色的服务面板斜着从下面推上来，盖住集锦影片，三张服务卡片一张接一张叠上去。作品轮播可以用鼠标拖，松手之后会停在一张卡片的位置上。页尾那一串 DISTINCT、BRAVE、CREATIVE 之类的像素大字会一直横着滚动。整页的滚动交给平滑滚动库 Lenis，滚轮停下后还会再滑一小段。

滚动起来很顺，连续滚动两遍，平均都是每秒 60 帧，只有一次一帧卡了不到十分之一秒。系统里打开减少动态效果的设置之后，站点会关掉一部分动画，首屏不再出现那张跟着光标走的卡片，集锦影片也直接以普通的整屏视频出现，不再有从小卡片放大的过程。

这个站用 Vue 的框架 Nuxt 搭起来，滚动带出来的动画交给动画库 GSAP。首页第一次打开就要下载约 10 MB，其中八成以上是一段视频，约 8.3 MB。这段视频只有 6 秒长，画面却比屏幕还大，它就是首屏那张小卡片里循环播放的游戏画面，也是下一屏集锦影片的背景。访客打开首页时，这张卡片只占屏幕的八分之一左右，站点却已经为它下载了整页最大的文件。访客一直滚到底，还会再下载评价区的贴纸和作品截图，一共约 13 MB。

第一笔画面在 0.37 到 0.43 秒之间出现，这是首次内容绘制的时间，低于 Google 建议的 1.8 秒。像素标志拼完、首屏的大字全部出现，大约要到第 4 到 5 秒。布局位移只有 0.006 到 0.016，远低于 0.1 的建议上限，加载时页面最长也只卡了约 0.2 秒。

这个站在隐私上有一处先后做反了。页面右下角弹出一条 cookie 提示，可以选全部接受，也可以进管理面板只保留必要的那一类，分析类默认是关着的。但在访客做出任何选择之前，站点已经加载了 Google Analytics、两段 Google 的跟踪代码和 LinkedIn 的统计脚本，并且已经向 LinkedIn 和 Google 的统计服务器发出了请求。

只用键盘或者靠读屏软件的访客都能用这个站，但有几处会吃亏。作品轮播做得很细，页面里为读屏软件写好了一段说明，告诉访客可以用方向键在案例之间切换，还写明当前是第几个案例。键盘焦点也看得出来，顶部的 WORK 获得焦点时会整颗变成白底。不过联系表单的几个输入框没有标签，只有框里的提示文字。访客一开始打字，提示就消失了，读屏软件也就说不出这一格要填什么。页面上很多图片的替代文字是设计稿里的图层名，比如 Group 50891 和 Slide 16_9 - 428，读屏软件会把这些编号原样念出来。

1minus1 的官网拿到 FWA 当日站时得了 81 分，FWA 把它归进设计和制作工作室、游戏两个类别。这两个类别正好是这个站的两面，它是一家工作室的官网，又处处借用游戏的样子。团队在说明里提到的来自游戏的小细节，站上看得到的有首屏像开机画面一样拼出来的标志、评价区的小地图和 404 小游戏。

FWA 上署了这五个人的名字，表里的战绩算到写报告时为止。这五人的资料页都没有写身份和自我介绍，这次也都是第一次在 FWA 获奖。团队的说明写明网站由内部团队自己设计和开发，所以这五人应该都是 1minus1 的成员，奖项页上没有写明各自的分工。1minus1 在站上自称在游戏行业已经做了十多年。