Lidar Drone Scanning

Riotters 做这个站，是为了展示自己能把一件复杂的硬件讲清楚。工作室在 FWA 上的自我介绍只有一句，你的产品很复杂，我们让它一目了然。网站顶部写着 Tech Demo By Riotters，页尾写着这个网站是一个技术演示，想要类似的可以联系，再往下一行小字说明这是一个非商业的技术演示，和 DJI 没有任何关系。Aevion 这个品牌和它的无人机因此都是编出来的，参数则照着 DJI 一款真实的激光雷达设备来写，正文里说这台无人机是围绕 DJI Zenmuse L2 激光雷达载荷设计的。

进门的第一眼是一片白底，正中一个数字从 0 往上数，数完之后，一架银白色的无人机在一行巨大的 aevion 空心字前面悬停。下面一行字写着自主激光雷达巡检系统，守护关键基础设施的精度。访客往下滚，页面先用一句很长的标题说明这台无人机做什么，在裂缝、变形和结构风险变成故障之前把它们找出来。这句标题之后是一屏写着 Gear 的大字，介绍它的载荷，再往下是一个半圆形的仪表盘，依次亮出 5 returns、±2 cm 和 450 m 三个参数。

页面的后半段按产品官网的惯例讲用途和能力。Solutions 一段有 Energy、Infrastructure、Industry 和 Geospatial 四个标签，访客点一个，左边的说明文字和下面一张小参数表就换成这个行业的，右边换成一段对应的航拍视频，比如 Energy 是一片太阳能板阵列。Capabilities 一段分成 Scan、Connection 和 Compactness 三项，分别讲 360 度扫描、7 公里的加密遥控链路和折叠后只有 42 厘米的机身。最后的 Software 一段说处理软件能在 20 分钟内把原始飞行数据变成可交付的结果，下面就是那张地形图。

地形图是整页最能让访客自己动手查数据的地方。图上插着三根带加号的标记，分别叫 Structural Fault Zone、Sediment Drift 和 Erosion Scarp。访客点一下，镜头就朝那个点飞过去，旁边弹出一张深色的小卡片，右侧再展开一块完整的面板。以 Structural Fault Zone 为例，面板上写着在一块 42 平方米的区域里检测到地表变形，风险等级 Moderate，置信度 87%，下面还有一排柱状的负荷指数。这些数字同样是编的，但排得像一份真的巡检报告。

Aevion 的画面几乎只有白、灰和一种接近黑色的深蓝灰，像一份干净的工业产品手册。背景是白色和极浅的灰，首屏有一层从浅灰到白的渐变，正文和大标题用的是深蓝灰。版面上最显眼的一点冷色是浅青色，它出现在激光雷达的光束、扫描点和地形图的等高线上，所以访客一看到这种蓝，就知道这里在讲扫描。

页面上的文字分成两层，一层是说话的，一层是标注的。标题和正文用的是一款无衬线体 Switzer，大标题用得非常细，Gear 和 Capabilities 这样的单词放得比正文大十几倍，占掉半屏的宽度。小标签用的是一款等宽字 Proto Mono，全部大写，外面套着一对方括号，比如 [ TECH ] 和 [ MAX RANGE ]，像仪器面板上的刻度说明。那句讲用途的长标题还用深浅来分重点，cracks、deformations 和 structural risks 是深色的，其余的字是浅灰，最后的 failures 几乎淡得看不见。

版面靠细线搭起来，处处有一种测量的感觉。各段之间用很细的横线和竖线分隔，参数放在一格一格的细线框里，仪表盘是一道细细的半圆，上面画着刻度。顶部的导航条也是这种口吻，左边是 Aevion 的标志和 Lidar Drone Scanning，中间是 Tech Demo By Riotters，右边是一个按格林尼治时间走的时钟，冒号会跟着秒数闪。

那架三维无人机是整页动得最多的东西。无人机画在一块固定铺满屏幕的画布上，访客往下滚时，它不跟着首屏一起滚走。它换一个位置和角度继续留在画面里，从首屏的正中飞到长标题右边，再落到 Gear 和仪表盘那几屏。无人机还会跟着光标转，光标在左边，机头就转向左边，光标移到画面下方，它就把正面对着访客。

仪表盘那一段是用滚动来翻参数的。访客往下滚时，这一段停在屏幕上不动，三个参数依次从浅灰变成深色。半圆底部的小圆圈里有一个由小点组成的动画图标，每换一个参数，图标就换一种排法。Capabilities 一段同样停住不动，左边的 Scan、Connection、Compactness 跟着滚动轮流变深，中间的画面跟着换。访客点其中一项，页面会直接滚到这一项对应的位置。Scan 那一格里，无人机的镜头射出一道浅蓝色的光，周围的地面变成一片打着旋的扫描点。

除了无人机，页面上还有几处很轻的小交互。长标题里的三个关键词是可以悬停的，光标停在 cracks 上，旁边就弹出一个小窗，放一段对应的视频，光标一离开，小窗就收起来。地形图在光标移动时会轻轻转一点角度，点开标记时镜头会推过去。整页的滚动由平滑滚动库 Lenis 接管，滚轮停下后页面还会再滑一小段。

这一页从头滚到尾，两遍都稳定在每秒 60 帧，没有掉帧的段落。系统里打开减少动态效果的设置之后，滚动仍然带着同样的惯性滑行，站点没有为这个设置关掉平滑滚动。

这个站用 Next.js 搭起来，三维画面交给 three.js，那几个会动的小图标交给动画工具 Rive。这几个图标的动画文件加起来只有约 3 KB，但要播放它们，站点先下载了一个约 0.8 MB 的 Rive 播放程序。页尾自己列出了用到的六样技术，从前端框架、三维库到内容管理和托管平台都写在上面。

打开 Aevion 的首页要下载约 10 到 13 MB，最大的一类是视频。长标题里那三个关键词各配了一段悬停视频，加起来约 5.3 MB，最大的一段 3.2 MB 就是首次打开时最大的一个文件。这三段视频在页面一打开就全部下载，可它们只有在访客把光标停到那几个词上时才露出来，不悬停的访客永远看不到。三维模型约 6.1 MB，其中无人机约 3.1 MB，两块地形各约 1.5 MB。访客一直滚到底，还会再下载几个行业视频，整页一共约 16 MB。

画面最早在 0.21 到 0.27 秒之间出现，这是首次内容绘制的时间，低于 Google 建议的 1.8 秒，这时访客看到的是白底上那个往上数的数字。完整的首屏要等得久一些，无人机要到大约第 5 秒才完整出现。加载时页面最长一次卡住了 1.5 秒以上，不过布局位移为 0，画面加载完之后没有跳动。

只用键盘的访客大体能走完这个站，只在几处小地方会卡一下。访客按 Tab 键，焦点会依次停在导航、四个行业标签、三个能力选项和地形图上的三个标记，每一处都有清楚的黑色焦点框。不过地形图那三张关着的说明卡片，关闭按钮也在 Tab 键的路线上，焦点会在这三个看不见的按钮上各停一次。菜单和地形图的说明卡片按 Esc 键都关不掉，只能点关闭按钮。页面声明了英语，分出了导航、主体和页脚几个区域，有一个跳到正文的链接，但整页没有一级标题。

Awwwards 评委给 Lidar Drone Scanning 的四个分项差得不多，Content 最高，得了 7.93，Usability 最低，得了 7.58。内容分最高，和这个站把一个虚构产品讲得像真的一样有关，从参数、行业到风险报告都写得很满。另一组开发评委给了 7.34 分，其中动画最高，得了 8.4，代码结构最低，只有 6.4。FWA 在 9 月 7 日已经给过它当日站，团队在 FWA 上的说明是把无人机原始的激光雷达扫描变成实时的三维点云，直接在浏览器里用 WebGL 渲染。站上看得到的扫描点主要在 Scan 那一格，地形图则看上去是一块实心的地形，表面撒着一层细点，再描上发光的等高线。

表里的战绩算到写报告时为止，这个站是 Riotters 在两个平台上的第一件获奖作品，而且它不是给客户做的，是工作室给自己做的样品，它真正要推销的是 Riotters 自己的设计和开发服务。