Realevate

Realevate 卖的不是某一个楼盘，而是一种生活方式。它把手里的房源按四种生活分成四类，By The Sea 是海边和码头旁的房子，Evergreen 是高尔夫度假区和森林里的房子，Urban Living 是市中心和老城区的公寓，Rare Gems 是地标建筑和品牌公寓。首页不列任何房源，只给一句口号、一个起价和一个入口。整个站的目的是把访客送到联系页那张表单前面。

访客打开首页，先要看 4.5 秒的开场动画。深蓝色的屏幕底部有两位白色数字从 0 数到 99，屏幕正中一个小方块每半秒换一张照片，四张分类封面轮一遍。白色从屏幕底部升起盖住深蓝，小方块移到首页照片的位置，Elevating Life 几个巨字从照片后面滑出来。首页就这一屏，一行跑马灯巨字横穿屏幕，一张 382 像素的正方形照片压在字中间，照片里一位穿白裙的女士坐在石阳台上看黑山的海。照片下面是一句话，Invest in Exceptional Real Estate Properties in Cyprus, Montenegro, and Georgia，再下面是一枚写着 STARTING FROM 100,000€ 的药丸标签。这一屏不能往下滚，首页到此为止。

Our Selection 按钮是首页的第二个出口，第一个是页头的 About 和 Contact。访客按下它，整个首页缩到 44% 的大小沉到屏幕底部，浅灰色的背景上立起四张 400 乘 623 像素的卡片。每张卡片一种颜色，标题竖着排像书脊，左下角一行副标，下面三分之一是这一类的照片。访客把鼠标放到照片上，照片上会罩一层从中心亮起的柔光。访客按 Esc 或者点一下缩小的首页，卡片收回去，首页升回原位。

四个分类页共用同一套结构，只换颜色和内容。页面用这一类的颜色铺满，跑马灯标题横穿屏幕，正中一个小方块照片，下面一句话和起价。访客往下滚，小方块长成满屏的照片，然后白色的内容从下面盖上来。白色部分先是一段衬线体的章节标题加一段说明，然后是一条横向滑块，放 10 到 14 张效果图。滑块下面是一句摘自行业报告的引言并注明出处，三条卖点各配一张小图，一张满屏照片，第二句引言。页面末尾是一段深色的 CTA 写着 Speak With Us，最后一块 Next 引向下一类。每页的文字量在 200 到 240 个英文词之间。四类的起价分别是 10 万、15 万、35 万和 10 万欧元。

About 页和 Contact 页给整个站收尾。About 页是白底长页，七段文字各带一个括号里的小标题，(About Us)、(Philosophy)、(01) 到 (04) 四条选房标准和 (The process)，中间嵌一段 37 秒的宣传影片，末尾一块深蓝 Building wealth through better living 引向联系页。Contact 页左边是竖排的 Contact 跑马灯和三个联系方式，右边一张表单，分 Investors 和 Partnership 两个标签，前者问预算、目的、目的地和时间，后者问公司名和合作类型。

整个站只认一种深蓝加白，别的颜色全部交给照片和四个分类底色。首页、About 页和 Contact 页是白底深蓝字。四个分类页各自换一种底色，By The Sea 是深藏青，Evergreen 是墨绿，Urban Living 是深梅紫，Rare Gems 是近黑。访客进入一个分类页，页头的字标、按钮和页脚全部反成白色，滚过封面进入白色内容区之后，按钮又反回深蓝。选择卡片的浅灰背景是全站第三个中性色，只在那一层出现。

三款字在这个站上各管一件事，互不越界。Google Sans 是一款圆润的无衬线字，字重 500，从 306 像素的跑马灯到 23 像素的正文全部是它，首页上所有文字都用它。Roslindale Display 是一款细衬线字，字重 200 到 300，它只出现在三处。分类页的章节标题和两句引言用它排到 99 像素，菜单里 Home、About、Contact 三个链接用它排到 54 像素，About 页的引言和收尾标题也是它。Monument Extended 是一款很宽的字，它在首页和四个分类页上各写一处，就是那枚起价标签，18 像素全大写，字距拉开。三款字的文件加起来只有 97 KB，每款只带一个字重。

首屏的构图靠一张照片把一行巨字切开。跑马灯巨字占屏幕中段整整一条，照片是 382 像素的正方形，压在字的正中，字母从照片两侧露出来。照片下面的口号排两行居中，起价标签再往下，左下角是版权，右下角是 Our Selection 和菜单两个按钮。四个分类页的首屏是同一个构图换一套颜色，字变成白色，照片换成这一类的封面。

选择卡片的标题像书脊一样竖着排。卡片 400 乘 623 像素，标题竖排在右侧，62 像素的白色 Google Sans 从下往上读，左下角两行小字的副标，左上角一个 R 形的字标。卡片下三分之一是照片，四张照片分别是悬崖上的无边泳池、高尔夫球场里的度假村、老城露天餐厅和云层里的一座塔楼。四张卡片并排，颜色从深藏青到近黑逐张变深。

分类页里的图像全是生活场景，没有一张户型图或平面图。效果图和实拍混着用，海景泳池、高尔夫球道、餐厅长桌、酒吧里的白色钢琴。白色内容区的排版像杂志，衬线体的引言居中排四到五行，下面一行小字写出处，Knight Frank / Global Waterfront Report / 2019。三条卖点用 70 像素的 Google Sans 写标题，各配一张小图，三组左右错开往下排。

开场动画用 4.5 秒把一个方块送到位。屏幕底部的两位数字各自滚动，从 0 数到 99 用 2.3 秒。正中的小方块每半秒换一张分类封面，四张换完停在首页的照片上。2.3 秒时白色从底部往上擦过整个屏幕，用 1.2 秒，同时方块从屏幕正中移到照片的位置。口号、起价和按钮从下方逐行升起，4.5 秒时页面站稳。访客第二次打开首页，开场照样播一遍。

Our Selection 的动作是把整页当成一张卡片。访客按下按钮，首页以底边中点为轴缩到 44% 沉到屏幕底部，四张卡片从上方落下来，整个过程 0.8 秒。访客点一张卡片，卡片扩成整页，1.8 秒后新页面站稳，过程中帧率 58 帧，最慢的一帧 63 毫秒。

分类页的滚动由一套自写的平滑滚动接管。这套滚动把滚轮每格的位移乘 0.8，再让页面用一个很小的追赶系数慢慢靠近目标位置。访客推一格滚轮，页面走 480 像素，大约 1 秒停稳。封面照片跟着滚动长大，从 382 像素的方块长到 1920 乘 1040 的满屏，用掉 2,300 像素的滚动距离，然后白色内容从下面盖上来。两张满屏照片按 1.2 倍放大，随滚动上下位移，做出视差。

横向滑块是分类页上要动手拖的那个部件。995 乘 644 像素的照片横排成一条，间距 40 像素，鼠标放上去变成抓手。访客按住往左拖，照片一比一跟着走，松手后再滑 600 像素，1.2 秒停下。滑块右下角的两个圆形箭头一次走一张。访客不碰滑块只滚页面时，整条轨道也会跟着横向漂移，页面滚 200 像素，轨道走 200 像素。照片列表复制了三份，滚到头会无缝接上。

Next 那一块的翻页是这个站上最大的动作。访客滚到分类页底部，看到下一类的照片，鼠标放上去照片放大 1.1 倍。访客点下去，页面先锁住 1.3 秒，然后照片铺满整个屏幕。照片再用 0.7 秒缩成 397 乘 387 像素的方块，落到下一页照片的位置，下一页的跑马灯从两侧出现。从点击到新页面站稳一共 2.5 秒，这期间帧率 58 帧，最慢的一帧 94 毫秒。

整页连续滚动稳在每秒 59 到 60 帧，没有一帧超过 32 毫秒。About 页的影片一开始是一块 550 像素宽的静止画面，鼠标放上去会变成一个写着 Play 的深蓝圆圈。访客点一下，影片带声音播放，继续往下滚，影片扩到 1920 乘 945 的满屏，滚过去之后它还在播。

Realevate 没有搭在任何框架上，七个页面是七个静态 HTML。一个 278 KB 的脚本包管所有事，包括一套自写的路由。访客点一个链接时，这套路由用 fetch 拿到目标页的 HTML，解析出主体，换进当前页面的舞台里。动画库 GSAP 连同 ScrollTrigger 和 SplitText 两个插件自己托管，平滑滚动也是自己写的。整个站没有一块画布，所有动效都落在普通的页面元素上。

访客首次打开首页要下载 8.6 MB，其中 7.8 MB 是图片。开场动画结束后的 0.7 秒内，站点把四个分类的 45 张滑块效果图和全部封面一次下载完，为的是之后每一次翻页都不用等图。七个页面的 HTML 在开场前和开场后各抓了一遍。访客直接打开一个分类页要下载 3.4 MB。脚本 470 KB，其中 188 KB 是 Google 的统计标签，109 KB 是 Facebook 像素，站点自己的脚本压缩后 240 KB。About 页那段 37 秒的影片 45.5 MB，放在另一个域名上，访客点了才下载。

服务器返回第一个字节要 0.16 到 0.20 秒，Google 的建议是 0.8 秒以内。首次内容绘制（FCP）在 0.44 到 0.57 秒之间，画出来的是开场计数器的第一个数字。最大内容绘制（LCP）要到 4.2 秒，因为首页照片被开场动画挡到 4.2 秒才画出来，Google 的建议是 2.5 秒以内。布局位移（CLS）只有 0.01，加载过程中没有东西跳动。浏览器被脚本占住超过 50 毫秒的长任务一个都没有。

无障碍这一块，键盘和读屏软件的基本项都做到了。页面声明了语言，有页头、导航、主体和页脚四个地标，所有按钮和链接都有名字，没有一张图缺替代文字，箭头和重复的封面标成了装饰图。键盘用户按 Tab 能走完导航、卡片和表单，About 和 Contact 两个链接聚焦时会出现一条下划线。不过字标链接、Our Selection 按钮和菜单按钮在聚焦时什么都不显示。样式表明确把这三个控件的焦点框关掉了，键盘用户走到它们上面看不出自己在哪。滑块里的效果图替代文字是 By The Sea property 1 这样的编号，读屏软件听到的只是序号。

操作系统里的减少动态效果设置，是给容易被屏幕上的运动弄得不舒服的人用的。这个站为它写了五条规则，开场动画和翻页动画都会被关掉，分类页和 About 页退回原生滚动，内容完整。首页却在这个设置下坏掉了。开场被关掉之后，标题、口号、起价和 Our Selection 按钮全部留在隐藏状态，页面上只剩 About、Contact 和一行版权，访客按 Our Selection 的位置没有任何反应，只有菜单按钮还能打开。控制台里同时出现五条动画库找不到目标的警告。

联系表单该有的都有。Investors 那张表十个字段，六个必填，国家下拉列了 221 个选项，Partnership 那张表九个字段。必填项漏了时，表单用浏览器自带的提示提醒。邮箱那一栏是一个按钮，点一下复制地址并显示 Copied。

Realevate 从 Awwwards 的评委手里拿到 7.22 分，四个分项里 Design（设计）7.41 最高，Content（内容）7.34 和 Creativity（创意）7.28 居中，Usability（易用性）6.88 最低。十九位评委里七位给的总分正好是 7.0，三位低于 7，三位给了 8 分以上，最高的一位给了 9.25。易用性垫底和这个站的几个决定对得上，首页不能滚动，每次进站都要看 4.5 秒开场，第一次打开要下载 8.6 MB。开发评委团另外给了 7.27 分，Animations（动画）7.60 最高，Accessibility（无障碍）6.60 最低，奖项页上没有挂开发奖的徽章。

这个站署了两个名字，实际是一个人。Or Halevi 在 Awwwards 上的档案写着来自特拉维夫，会英语和希伯来语，报价 5,000 到 30,000 美元，正在找一份代理商里的自由职业。MAKETHECUT 是他自己的工作室，档案里的九件作品全部署他的名。他此前的一个当日站是咖啡设备公司 CoffeeTech 的官网。