Odyssée

Odyssée 是一家做医学美容的诊所，开在悉尼的 Hunters Hill。这个官网要做的事很单纯，就是让看完的人去约一次面诊，首页上每一个 BOOK CONSULTATION 按钮、菜单里的预约项和页脚那整段影片，都会在新标签页里打开同一个外部预约系统。诊所反复强调自己的治疗以医学证据为本，首页有一章的标题就叫 Method, not myth，意思是讲方法而不讲神话。它没有拿价格或者效果对比来说服访客，只讲自己怎么评估、怎么定方案。

首页打开时，访客最先看到的是一块灰紫色的开场画面，诊所的标志和一句 Medical aesthetics for timeless results 排在屏幕正中的一条线上。开场画面淡出之后，后面是一段 27 秒的影片，模特把手搭在下巴和肩膀上，镜头贴得很近。标志、标语和导航这时仍然排在原来那条线上。访客往下滚一屏，影片换成一张铺满屏幕的嘴唇特写，这条线也还停在屏幕中间。

这条线离开之后，首页一章一章往下排，大约十屏长。最前面是一段自我介绍和第一个预约入口，接着是 WHY ODYSSÉE? 一章，四张卡片各配一段五秒左右的短片，轮流讲诊所的四条理由。再往下，首页依次放着两张并排的大图和诊所的理念、一个通往治疗页的入口、Method, not myth 一章，最后两张卡片分别通往 Treatments 页和 About 页。

首页之外还有三页，第一页是 Treatments，它把治疗分成五大类，从面部轮廓、皮肤修复一直到男士项目，每一类都写了一段做法和一串具体项目。Concerns 页反过来，从皮肤健康、面部轮廓和头发修复三种诉求讲起。About 页讲诊所的理念，并介绍两位成员，Dr Jean-Paul Chung 和注册护士 Mary Chigwidden。三页的内容都不长，讲的始终是同一件事，诊所先评估，再按每个人的情况定方案。

这个站还给停留得久的访客准备了两处少见的细节。页脚的营业时间旁边有一只实时的时钟，按悉尼所在的新南威尔士州时间显示此刻几点，前面的小圆点在营业时是绿色，打烊后是红色，打烊时光标移上去会出现 Currently closed。访客如果十分钟没有碰鼠标、键盘或滚轮，首页会慢慢盖上一层模糊的人像，正中一行白字重复着诊所的标语。访客点一下，这层人像就消失，页面还停在原处。

Odyssée 的整套版面只用两种颜色、两款字，层级靠位置和图片的大小拉开，而不是靠字号。首页上的文字只有深海军蓝和白两种颜色，铺在一层带一点暖意的米白底上，海军蓝的字在米白底上非常清楚。成句的标题和大段的话用一款衬线体，首页上最大的也只有正文的三倍多。导航、标签和正文用一款小号的无衬线体，标签一律大写。开场那一屏只有一行和导航差不多大的标语，诊所想说的主张留给了画面。

版式上最特别的是一条横贯全屏的线，首页开场时，标志在最左，标语在左边三分之一处，四个导航项排在右边。它们一起钉在屏幕的正中间，像一条地平线横过影片和嘴唇特写。同样的拉开方式在首页的大图和内页的标题上又出现了两次。两张并排的大图上，BESPOKE、MEDICAL、AESTHETIC 三个词分别贴在左边缘、正中和右边缘。内页的标题也被拆成两半，Treatments 页的 Guided by science 贴在左边，refined through care 贴在右边。访客往下滚之后，这句话才合成一行，出现在顶部的标题栏里。

站上的照片和影片拍的几乎全是皮肤，它们要么近得只剩脸的一部分，嘴唇、眼睛、鼻翼占满画面，要么是光着肩膀的模特，背景都是浅灰。首页上很少拍诊所本身，只有一段放着沙发的室内短片和几张问诊的照片，医生的正装照只在 About 页上。另一类画面是产品的质地，一滴凝胶、一堆气泡，以及页脚那颗刻着 ODYSSÉE 的珍珠色小球。站上鲜活的颜色基本都来自这些皮肤，界面本身只有蓝和米白。

这套版面用淡出来表示某样东西此刻不是主角。WHY ODYSSÉE? 一章里，正在播放的那张卡片是全彩的，标题和说明文字都在，另外三张蒙着一层米白，标题淡得几乎看不见。Treatments 页左侧的五类治疗也是这样，滚到哪一类，那一类就展开成一段说明和一串项目，其余四类只留一行浅色的标题，右边的照片跟着换成这一类的配图。首页最后那两张通往内页的卡片反过来用这条规矩，平时是蒙着一层海军蓝的黑白照片，光标移上去才恢复原来的颜色。

几处细节说明这套版式有人一处一处管过。大段的衬线句子都在开头空出一段，像书里的首行缩进，只是空得更宽。卡片和治疗类别的编号写成 (1). 这样带括号的样子，页脚的地址、联系方式和社交账号前面分别标着 A.、C.、S. 三个字母。站上还有一个反复出现的小圆点，大小正好是半个字，颜色跟着文字走，页脚时钟前的状态灯是它，菜单里 CLOSE 前面也是它。

Odyssée 的动效都很慢、很轻，几乎没有东西会突然跳出来。滚动由平滑滚动库 Lenis 接管，滚轮的每一下都会被抹成一段平缓的滑动。大段的衬线句子滚进视野时，会一个词一个词地浮上来，这是动画库 GSAP 的拆字插件做的。页脚那段小球影片在访客往下滚时，从一点五倍大慢慢缩回原大。首页和三个内页连续滚动都稳定在每秒 60 帧，几乎没有卡顿。

开场那条横在屏幕中间的线，带出了首页上的第一个动效。灰紫色的开场画面上，标志和标语本来就排在那条线的位置，画面淡出时它们原地不动，导航项随后才出现，访客看不出开场画面和首页之间有一道接缝。访客往下滚的头两屏里，这条线一直停在屏幕中间，等开场的影片和嘴唇特写滚完，它跟着一起离开，顶部换上一条只有标志、MENU 和 BOOK CONSULTATION 的窄标题栏。

WHY ODYSSÉE? 的四张卡片是一台小小的播放器。一张卡片里的短片播完，下一张卡片就接着亮起来开始播，左上角的计数从 1 : 4 走到 4 : 4，计数下面那条细线也随之往右延伸。访客把光标移到哪一张上，哪一张就立刻亮起来播放，其余几张退回那层米白里。

换场景时，这个站常用的手段是把后面的画面磨模糊，而不是盖一层深色。访客点开 MENU，右上角弹出一张窄窄的卡片，里面是五个编号的链接、一张人像和一块海军蓝的联系方式，后面的整页同时变成模糊的黑白，链接一个接一个地浮上来。内页的开场图上，一层透明的文字板随着滚动升上来，文字板背后的照片被磨成毛玻璃，毛玻璃的上沿是渐渐变模糊的，没有一道硬边。前面说的那层十分钟后出现的人像，同样是一张模糊过的照片，用一秒钟慢慢淡入。

光标经过的链接、标志和影片都会有一点小反应。导航项被悬停时，前面那个小圆点从无到有地长出来，普通链接下面的细线从左往右画出来，标志里连成一个字形的两个 S 会上下翻转过来。页脚的整段小球影片本身就是一个预约链接，光标进去之后会被藏起来，换成一个小圆点加 Begin your tailored journey 的标签，跟着光标移动。

打开系统里的减少动态效果设置之后，Odyssée 只省掉了两段动画，开场画面直接跳过，菜单里的链接也不再一个接一个地浮上来。首页开场的影片和 WHY ODYSSÉE? 的四段短片照样自动播放、自动轮换。

这个站用 Next.js 搭成，文字和图片来自内容管理系统 Sanity，所有影片都放在视频托管服务 Mux 上，按网速一小段一小段地下载。页面上的动画由 GSAP 负责，滚动由 Lenis 负责，整个站没有一块画布，画面全部由网页元素、照片和影片组成。

首页的下载量大部分来自影片，打开一次约 31 MB，其中约 29 MB 是八段影片，而且访客一下都还没滚，八段影片就已经全部下载完了。开场那段 27 秒的影片接近全高清，页脚那段 9 秒的小球影片是全高清，它在页面最底下，访客要滚到页底才看得到。站点本来给每段影片定了快进入屏幕才开始预读的规矩，可负责播放分段视频的组件看起来一接上影片就开始下载，因为影片标签上仍写着只预读基本信息，缓冲却已经是满的。Treatments 页也一样，打开十几秒后，页脚那段影片就已经缓冲完了。

Odyssée 的首页打开得很快，几项速度指标都远好于常用标准。服务器在 20 多毫秒内就开始返回页面，远低于常用的 0.8 秒标准，屏幕上第一次出现东西只要 0.2 秒左右，而这个指标的常用标准是 1.8 秒。访客这时看到的是开场画面上的标志和标语，开场画面淡出之后，影片大约 2.3 秒时完全露出来。整个过程中画面几乎没有跳动，布局位移只有 0.0006，远低于 Google 建议的 0.1 上限。

用键盘浏览首页的访客会在两个地方遇到麻烦。访客从页面顶端按 Tab 键，前三下落在那条窄标题栏的标志、MENU 和预约链接上，可开场时这条标题栏被影片盖着，访客看不见焦点停在哪里。焦点接着走完开场那条线上的导航，会直接跳到页尾的两张卡片，中间自我介绍里的预约入口和通往治疗页的入口被跳了过去，因为这两个链接要等访客滚到跟前、浮现动画放完之后才能被选中。菜单这边做对了，按 Esc 就能关掉，焦点也回到 MENU 按钮上，只是菜单开着时，滚轮仍然推得动后面的页面。

首页还有几处文字淡得不好读，照片也大多没有文字说明。开场那条线上的导航是白色的小字，压在浅灰的影片背景上，几乎和背景融在一起。页脚的隐私政策、使用条款和 Site by Nightjar 三个链接只有三成不透明度，和米白底的对比度大约是 1.8 比 1，而网页无障碍标准要求正文至少达到 4.5 比 1。首页的照片里，只有开场第二屏那张嘴唇特写写了替代文字，读屏软件的用户听不到其余画面是什么。

页面上还有一处没校对到的代码，出在一个客户管理系统的访客跟踪脚本上。这个脚本的地址两头被粘上了排版用的弯引号，浏览器请求的是一个不存在的地址，拿回来的是一张 404 页面，所以它从来没有运行过。

Content 是 Odyssée 四个分项里最高的一项，得了 7.63，Creativity 最低，得了 7.17。内容分高，可能和诊所的理念、五类治疗和团队成员都交代得很清楚有关。创意分最低，大概是因为米白底、海军蓝衬线字和贴着皮肤拍的特写，是护肤和美容品牌用了很多年的一套语言，这个站把它做得很完整，却没有拿出这套语言之外的新做法。开发奖的评委给了 7.36 分，不算响应式那一项，网页性能最高，得了 7.6。语义和搜索优化在开发奖里最低，只有 6.8。

Odyssée 的署名只写到 Nightjar 这家公司为止，没有列出个人分工，表里的战绩算到写报告时为止。Nightjar 是 Awwwards 上的常客，二十件作品里有十三件拿过当日站，这一次的上一个当日站是 2025 年 3 月的 ALNF，而这一次的客户和工作室同在悉尼。