Noho

Noho 是新西兰一个不经过零售商、直接卖给顾客的家具品牌，2020 年 3 月上线，只卖两把椅子。Lightly 售价 329 美元，由 Formway 设计，重 6 磅，用植物基的聚合物做成，十把叠起来一米高，2023 年拿了 Dezeen 的年度家具设计奖。Move 售价 450 美元，椅背是一层透气的网面。站上说这些材料来自蓖麻豆、旧地毯和回收的渔网。2025 年 3 月，品牌在博客上发了一篇 A Good-Goodbye，宣布 5 月 15 日关闭美国的线上商店。

这个站是在那之后做的，站上所有的文字和照片都来自品牌本身，从首屏那句口号 We make furniture that's flexible, and playful, to fit modern life，到五篇博客、两位创始人的自述和七项家具奖。可是访客按下任何一个 Buy 或者 Make an order 按钮，弹出来的都不是购物车，而是一张卡片。卡片的标题写着 A good goodbuy，下面一句 This website is design concept builded in memory of the playful and sustainable brand，配一张照片，一个男人提着一把椅子走在乡间公路上。卡片上唯一的按钮通向品牌真正的官网。整个站是给一个刚关掉网店的品牌做的纪念。

卡片上的 playful 和 sustainable 两个词，各有一套东西对应。playful 对应的是那些会动的小玩意，跟着光标走的相册，一格一格变色的页脚大字，还有在页面上飘来飘去的椅子。sustainable 对应的是菜单里那块能耗面板，面板展开后有两个开关，一个切换深色模式，一个关掉动画，面板上写着两个都打开能省下大约百分之三十五的电池。开关旁边挂着一枚标签，两个都关时是橙色的 High，开一个变成黄色的 Med，两个都开变成绿色的 Low。深色模式不是黑色，而是屏保用的那种深棕色。

这个站的内容给得很足，两张产品卡各自能展开成半屏高的详情页，里面有引言、三条卖点和七张图。站上还有一个四步的选椅子小测验，访客答完，页面就直接弹出推荐的那把椅子。博客区放了五篇真实的博客文章，最长的一篇有一千三百多个英文词。常见问题旁边还放了一把三维椅子，可以随机换颜色、换环境光。

这个站的底色是米纸色 rgb(241, 238, 233)，上面压两层更深的沙色 rgb(231, 226, 218) 和 rgb(205, 192, 176) 来分出区块。文字是一种深灰 rgb(60, 60, 60)，全站没有别的文字颜色，深浅变化只靠把这种灰调到六成和四成的不透明度。深色模式把这三层底色换成 rgb(46, 36, 28)、rgb(70, 54, 42)、rgb(113, 89, 70)，字换成米色，照片一张都不动。

全站的字只有一款 Switzer，用两个字重，18 像素的正文用 Regular，标题用 Semibold。标题的字号跳得很开，章节标题 80 像素，字母间距收紧到负 3.2 像素，卡片标题 40 像素，小标题 25 像素，说明文字 14 像素。全站九千七百个字符里，八成是 18 像素的正文。页脚那行 happy modern 是 300 像素，一行就占满屏幕宽度，这是全站唯一一处把字当成画面来用。

首屏分成左右两半，左边是那句口号。右边是七张 210 乘 242 像素的照片，贴在沙色底上，摆成三行，却故意错开，第二行比第一行往右移一格，右下角空出一个位置。照片里全是人在玩椅子，倒立在椅子上的两条腿，把椅子举过头顶的人，裹着红毯子的人，一把长满草的椅子。每张照片的底都是一块平涂的颜色，米黄、橙红、紫、黄、绿。这些颜色在版面的其他地方再没出现，只在两处露面，一是光标扫过页脚那行大字时一格一格亮起来的颜色，二是那把飘着的椅子每次撞墙后换上的颜色。

产品区是两张并排的半屏卡片，浅色底上放黄椅子，深色底上放黑椅子。椅子是三维模型，访客可以用鼠标拖着它转。卡片下沿有一行小字，依次是型号、起售价、五个颜色圆点和两个按钮。讲可持续的那一段是三张编号 01 到 03 的卡片，分别写着 99% recycled nylon、82% renewable electricity 和 5-year warranty，数字居中，别的什么都没有。

博客区把五篇文章排成一行卡片，每张卡片只有标题和一段摘要，没有图。访客点开一篇后，文章从右边滑进来，占八百八十像素宽，里面依次是一张横图、标题、日期和分类、正文，最底下是下一篇的配图。

这个站的光标是一个 20 像素的深灰圆点，碰到不同的东西会变大，并在里面写上字。光标停在三维椅子上，会变成 120 像素的白圆，里面一对左右箭头。光标停在相册上，会变成 170 像素的白圆，写着 Scale。停在博客卡片上的光标是 170 像素的黑圆，写着 Open，弹层打开后，光标停在弹层外面会写着 Close。光标停在 Instagram 的照片上时，里面写的是 Follow。光标上的字告诉访客点下去会发生什么，按钮本身反而不用再说明。

访客进站时，先是一块深灰色的幕布从底部升上去，两秒半后页面露出来。这个站用平滑滚动库 Lenis 接管滚动，缓动时长设成了三秒，滚轮停下后页面还要滑很久才停，整个站的节奏都是慢的。

产品卡进入画面时，先显示的是椅子的静态海报图。一圈圈涟漪从椅子背后荡开，涟漪散尽后，海报换成真正的三维模型。访客拖动模型时只能水平旋转，不能缩放也不能平移，俯视的角度限制在 22.5 到 90.5 度之间，所以椅子不会被翻过去。

相册是十三张照片排成一行，比屏幕宽出九百多像素。它不用拖，光标往右移，照片就往左滑。访客点一张，那张就会放大三倍，盖住旁边的照片，光标上的字也从 Scale 变成 Close。博客那一行卡片在滚动时固定在屏幕上，这一段要滚四个屏幕高才过去，往下滚时卡片轮流展开，其余的收成窄条。

常见问题旁边的那把椅子有两个按钮。Random 给椅架和坐垫随机配色，同时让镜头绕椅子转整整一圈。Mood 换卡片的底色，沙色、珊瑚红、淡紫、鹅黄、橄榄绿轮流出现。Mood 每换一种底色，就换一张相同色调的环境贴图，也就是给模型提供反光的那张全景图，所以椅子上的反光也跟着底色变。

页脚那行 happy modern 的每个字母都是单独的一片，进入画面时从下往上一个接一个升起来，间隔 0.04 秒。光标扫过去，字母按顺序变成珊瑚红、淡黄、橄榄绿、淡紫和沙色，最近扫过的三个字母留着颜色，其余的褪回深灰。页脚本身藏在最后一屏的后面，随着滚动从底下露出来。

光标静止六十秒后，这个站的屏保就会开始。页面暗成深棕色，一把 371 乘 397 像素的椅子从边上飞进来，每秒走一百七十像素左右，碰到四条边就弹开，并换一种颜色，白、浅蓝、黑、灰轮流。鼠标一动，深棕色退掉，椅子却留在原地继续飘，飘过标题，也飘过照片，直到访客下一次停手。能耗面板里那个关动画的开关，会把上面这些几乎全部关掉，涟漪不再出现，字母不再升起。页面上原有二十五个滚动触发器，也就是滚到某个位置就启动动画的设置，关掉后只剩一个。

这个站用 Webflow 搭建，两位作者导出后自己托管在 noho.ink 上。脚本是三个手写的包，其中主包 84 KB，延后加载的重包 239 KB。这个站用到的库有 jQuery 3.5，动画库 GSAP 3.15 和它的 ScrollTrigger、CustomEase、SplitText 插件，平滑滚动库 Lenis，走马灯库 Embla，Google 出的网页三维模型展示组件 model-viewer，以及它内置的 three.js 0.149 和 Draco 解码器，还有 ogl 和 html2canvas。最后这两个只为产品卡那一下涟漪服务。html2canvas 能把网页上的元素画成一张图片，它把海报截下来，交给小型 WebGL 库 ogl 当贴图，涟漪就画在这张贴图上。

两把椅子装在同一个 GLB 文件里，这是一种把三维模型和贴图打包在一起的格式，用 Draco 压缩后是 2.2 MB，页面上三个 model-viewer 共用这一个文件。访客首次打开首页要下载 4.0 到 4.4 MB，共 59 个请求，GLB 占了一半多，然后是 model-viewer 274 KB，照片 1.1 到 1.4 MB，两个 woff2 字体一共 36 KB。访客滚到产品区时，页面开始在后台预先下载 Mood 按钮要用的七张 HDR 环境贴图，每张 760 KB。访客把整页滚完，总下载量会到 11.3 MB。

服务器在 96 到 126 毫秒内返回第一个字节，屏幕上第一次画出内容是在 252 到 348 毫秒，加载过程中没有任何东西跳位置，布局位移是零。浏览器把页面上最大的那块内容记成了首屏的一张 184 乘 242 像素的照片，它的不透明度只有 0.001，几乎看不见。这块内容画出来的时间和第一次画出内容几乎相同，那时幕布还盖着页面，所以这个数字并不代表访客真正看到内容的时间。解码 GLB 是一次 760 到 840 毫秒的长任务，这段时间里主线程被占满，发生在进站三秒多之后。整页滚动保持每秒 60 帧，页面静止时三维模型不重绘。

页面声明的语言是英文，只标了页眉 header 和页脚 footer 两个地标区域，没有标主体 main，读屏用户没法一键跳到正文。全站唯一的一级标题 H1 是隐藏着的隐私政策弹层的标题，首屏那句口号只是一个普通段落，没有标成标题。七十张图片的替代文字全部为空，三个三维模型也没有替代文字。菜单按钮是一个没有名字的图形，读屏软件读不出它是什么。键盘能走到产品模型和各个按钮上，焦点框是浏览器默认的细线。站点没有读取系统里的减少动态效果设置，访客想关掉动画，只能用站上那个开关。

这个站先拿到的是 FWA 的当日站，83 分，DAYS 一栏是 8。两个月后 Awwwards 也给了当日站，站点评分的四项里 Design 7.64 最高，Usability 7.00 最低，Creativity 是 7.25，Content 是 7.35。开发奖的五个分项里 Accessibility 7.40 最高，Animations 6.80 最低，Semantics 是 7.20，WPO 是 7.00，Markup 是 7.20。

两个人的 Awwwards 档案都写着塞尔维亚，FWA 档案上的地址则在黑山，两个平台上他们都只有这一件作品。Evgeny Morev 在 FWA 上介绍自己是 60 FPS 和 Outpost 的自由数字与交互设计师，在 Awwwards 上则写着正在找一家好的代理公司，自由职业或全职都可以。网站页脚的落款 Designed by Eugene More 链到他的领英。Alex Ivanov 介绍自己是自由创意前端开发，两个奖项上他都和 Evgeny Morev 并列署名。