twks

twks 从 2011 年起在日内瓦做品牌、广告和数字项目，客户是本地和国际的品牌与机构，官网的任务就是把作品摆出来，再让看中的人开口联系。twks 选的办法是让作品先说话，自己的话往后放。首页从上到下是一屏作品轮播、一段自我介绍、四个大案例、四篇文章，最后是黑色的页脚，页脚里全是联系方式。

第一次打开首页时，屏幕先是一片黑，导航上的字一个字母一个字母地打出来，然后才出现第一张作品。首屏的轮播一共有十五张，其中十一张是照片，四张是短视频，内容有街头的节庆海报、店里的会员卡、放在桌上的笔记本电脑，全部是 twks 给客户做的作品。照片每张停三秒多，视频放完才换下一张，换的时候直接切过去，没有淡入淡出。每次打开首页，这十五张的顺序都会重新打乱一次。

轮播下面是一大段自我介绍，句子里的 creative 后面嵌着一个会动的小人头图标，图标和字一样大，像一个字一样排在句子里。再往下是四个大案例，每个案例点进去都是一个长页面，给洛桑联邦理工学院（EPFL）做的心理健康项目那一页约有十五屏，图多字少。首页之外，作品页列着 38 个精选项目和 283 个归档项目，可以按服务和行业筛选，不过英文页上的行业筛选还留着几个法语标签，比如 Horlogerie & Joaillerie。公司介绍页把工作方法分成调研与策略、创作与测试、准备与上线、反馈与优化四步讲。

访客点导航右上角的 contact，页面会模糊下去，一块面板从右边滑进来。面板最上面滚动着一条信息带，写着办公室 08:30 到 18:00 开门，前面一个圆点开门时是绿色、下班后是红色，后面是日内瓦此刻的时间、当地的气温和团队的一份 Spotify 歌单。信息带下面依次列着电话、邮箱、社交账号和办公室地址。面板最底下并排两格，左边一格是一张图片，两次打开分别看到一张模糊的奔跑动物照片和一张团队合影。右边一格是一只走着的车站式圆钟，秒针是红色的。

面板里的 Tell us about your project 会打开一份对话式问卷。twks 把这份问卷做成了一个聊天窗口，顶上是 Marie 的头像和 Project Director 的头衔。Marie 先发两条灰色的消息打招呼，说如果没空填问卷，也可以直接写信到 start@twks.ch。接着访客这边会自动冒出一条蓝色的回话 Nice to meet you Marie.，再出现一个填空的蓝色气泡 My name is，等访客把名字填进去。整份问卷大约十个问题，问公司名、需要哪类服务、项目有多急、要给 twks 多少创作自由，紧急程度从 In the flow, no rush 一直到 Full alert, every second counts.，创作自由从 Highly defined framework, tightly directed. 一直到 Complete trust, let your creativity shine.，最后才问邮箱和电话。

twks 给自己定的规矩是界面用黑、白和一款字，颜色交给客户的作品。全站的字都是瑞士字体公司 Grilli Type 的无衬线体 GT Standard，只用常规和半粗两种粗细，导航全部小写。首屏的照片上压了一层薄薄的黑色，让作品的颜色暗下来一点，白色的导航在任何一张照片上都读得清楚。往下的内容是白底黑字，页脚又回到全黑，所以页面上大块的鲜艳颜色都来自那些作品图。例外只在联系面板里，营业时间前的圆点有绿有红，圆钟的秒针是红的，问卷里访客那一边的气泡用的是聊天软件常见的蓝色。

字号上，twks 只拉开了两档，一档是首页自我介绍那一大段字，一档是其余所有的字。自我介绍的字大约是导航和正文的两倍半，标题、案例名和文章名都和正文一样大，只靠灰色的副标题和粗细区分层级。真正的页面主标题藏起来只给读屏软件读，访客在页面上看不到。

导航是贯穿全站的一行字，它在首屏和其余页面上摆在不同的位置。在首屏，这行字横在照片正中，左边是 twks，右边是 contact。中间依次排着 projects、agency、services、insights 四项和 swiss creative agency，整行贴着屏幕的左右两边铺开。离开首屏之后，这行字停到页面最上方，颜色会跟着底下的画面反过来。压在白底上它是黑字，压在照片上就变成照片的反色，所以不需要另加一条背景色带。

twks 自己的插画也守着黑白的规矩，而且是用名字画出来的。页脚那只奔跑的豹子和 404 页上的几只猫，都是用 t、w、k、s 四个字母和小圆点拼出来的。亮的地方用笔画多的 W，暗的地方用小点，远看是一只动物，凑近看全是 twks 的字母。

首屏和下面内容之间的交接，是 twks 首页最主要的动效。访客往下滚的时候，首屏的作品照片会慢慢放大，同时变淡。等首屏完全滚出去时，照片已经放大到原来的两倍左右、几乎看不见，白色的自我介绍从下面推上来盖住了它。整页的滚动由平滑滚动库 Lenis 接管，访客停下滚轮之后，页面还会顺着惯性再滑一小段。系统里打开减少动态效果之后，这段放大和导航打字的开场照样会播，站点没有为这个设置做任何调整。

页面的另一头是页脚，它不是跟着页面滚上来的，而是一直垫在白色页面的底下。访客滚到最后，白色页面像一块幕布一样往上收，黑色的页脚就从下面一点一点露出来。页脚刚露出一条边，那只豹子就开始出场，一大片散开的字母在两秒左右聚拢成一只豹子，之后豹子一直原地奔跑。因为出场是在页脚刚露头时开始的，访客如果滚得慢，前半段聚拢的过程会在白色页面后面放完。

除了这两处，站上其余的动效都很小，大多跟着光标和点击出现。访客把光标移到案例图上，光标旁边会跟着一行 See the project，字的颜色和底下的图反着来。导航的链接在悬停时底下会划出一条线，联系面板从右边滑进来时，后面的页面同时模糊下去，问卷里的消息则像聊天软件一样一条一条地冒出来。

两遍从顶到底的连续滚动都稳在每秒 60 帧，没有出现卡顿。首屏放大和页脚的豹子都是视频和样式在动，页面上没有用来实时绘制的画布，所以滚动时浏览器要做的事不多。

twks 的官网把面板开合、轮播换图这些交互交给一个轻量的小框架 Alpine.js，首屏放大和页脚出场这类跟着滚动走的动画交给动画库 GSAP。站上的访问统计用的是不写 cookie 的 Fathom，所以页面上没有 cookie 提示条。

打开首页十秒左右，页面已经下载了约 6 MB，主要是首屏的照片、几段短视频和一张动图。之后轮播每放到一段视频，就下载那一段视频，访客停在首页一分多钟，下载总量会涨到 16 到 24 MB。最大的一段轮播视频只有十秒左右，却有约 11 MB。另外两处小文件和它们做的事不太相称。一篇文章的缩略图是一张 1.3 MB 的动图。自我介绍里那个小人头图标，要先从公共服务器下载一个约 0.5 MB 的动画播放器才能动起来，而且站上取的是这个播放器的最新版本，库一更新，站上用的版本也会跟着变。

twks 首页的加载速度大体正常，服务器开始返回内容要 0.64 到 0.83 秒，接近 Google 建议的 0.8 秒，屏幕上第一次出现画面在 0.92 到 0.98 秒，低于建议的 1.8 秒。第一张作品要等导航的字打完才出现，大约在四五秒的时候。整页的画面跳动很小，测量工具读到 0.02，远低于 0.1 的建议上限。

键盘用户基本能用这个站，只在联系面板上会卡一下。访客按 Tab 键时，走到的每个链接都会出现清楚的焦点框，services 下面的三个子项也能走到。按回车打开联系面板之后，焦点会进到面板里。不过面板打开之后，按 Esc 并不能把它关掉。

读屏软件的用户会在两处听到不对的内容。联系面板那个叉按钮没有名字，读屏软件只会读出按钮两个字。英文页面整页标成了法语，读屏软件会用法语的读音去念英文。

在 Awwwards 评委那里，twks 拿分最高的是 Content，得了 7.64，最低的是 Creativity，得了 7.09。内容分高，和这个站把大量真实作品、长篇案例和文章都放了出来有关。创意分垫底，大概和它故意把自己的界面收得很素有关，首页最吸引人的颜色和画面都来自客户的作品，而不是这个网站自己。另一组开发评委给了 7.24 分，不算响应式那一项，网页性能最高，得了 7.4，无障碍最低，只有 6.8。无障碍分低，可能和前面说的语言标错、叉按钮没有名字有关。

Awwwards 上的署名只到 twks 这家公司，表里的战绩算到写报告时为止。署名里没有列出个人，也没有写明各自的分工。这是 twks 在 Awwwards 上的第一个当日站，获奖的是它自己的官网，而不是给客户做的项目。