卖机械键盘的网站，最难讲的是「手感」。轴体、定位板、减震、键帽材质，这些决定手感的东西大多藏在键帽下面；参数表写得再全，访客也很难把「Gasket 结构」「3.5 mm Poron」变成手指上的感觉。
这篇拆解 Foundax 案例库里的 STRATA 层岩。它是一个虚构的机械键盘品牌，主张是「每一层都为手感存在」。和多数用照片讲故事的品牌站不同，STRATA 让一个用 CSS 写成的 3D 键盘模型贯穿全站：它会被剖开、换色，还能被访客敲响。
机械键盘网站难在哪
- 手感看不见。 决定手感的结构都在键帽下面，照片只能拍到外观。
- 参数门槛高。 触发压力、行程、轴体类型，对新手来说只是一串数字。
- 声音是卖点，却很难展示。 不同轴体的声音差别很大，文字几乎描述不了。
- 配色多，图片贵。 每种配色、每个角度都要拍一遍，图片量和加载负担都很重。
STRATA 的设计目标是：让访客在网页上「摸到」这把键盘：看见内部结构，听见按键声音，亲手打几个字。
设计概念：一层一层，为手感而造
键盘由外壳、电路板、减震垫、定位板、轴体、键帽六层叠成，像岩层一样一层压一层。品牌名「层岩」和三种以岩石命名的配色（玄武岩、砂岩、地衣）都来自这个概念。
关键决定是用 CSS 3D 写一个真正的键盘模型，而不是用图片：分层永远对齐，配色可以实时切换，也不占图片流量。照片只负责氛围和质感，产品结构交给模型。
视觉语言：深色工作台与一点信号橙
页面以深色为主，像夜里只亮着台灯的工作台；每种配色在换色章节里接管画面一段时间。信号橙只用在 Esc 键、减震层和关键数字上。
- 墨
#1F201E主背景，深色工作台的底色 - 纸
#EDEAE4浅色章节，例如轴体对比 - 信号橙
#E2572B只用于 Esc 键、减震层和关键数字 - 玄武岩
#2A2B29深灰外壳的配色 - 砂岩
#CFC2AC暖米色外壳的配色 - 地衣
#7E8A72灰绿外壳的配色
| 用途 | 字体 | 为什么 |
|---|---|---|
| 标题 | Space Grotesk | 紧字距的几何无衬线，有工业产品的精确感 |
| 强调词 | Instrument Serif 斜体 | 每个标题最多一个词，例如 Built in layers，给理性的页面一点温度 |
| 参数 | JetBrains Mono | 行程、压力、层编号和价格用等宽字，方便对比 |
五个招牌时刻
扫描
照片变成模型
一道光带从键盘上扫过，经过的地方，照片换成 3D 模型，随后模型抬起、倾斜到等轴视角。
剖开
六层逐层分离
模型沿纵深方向分成六层，每层出现时配一行说明和参数；往回滚动，层层合拢。
手感
三种按法
切换线性、段落、静音轴体时，轴心颜色、压力曲线和声音一起变化。声音由浏览器实时合成，没有音频文件。
打字
来，打几个字
访客用自己的键盘输入，屏幕上对应的键被按下并发出所选轴体的声音；手机上可以直接点按。
换色
三种岩石
背景在三种岩石微距之间切换，键盘模型实时换上新配色，选好后直接进入预选了该配色的商品页。
六幕页面分镜
01
首屏：一层一层，为手感而造
俯拍的橡木桌面上放着键盘、杯子、笔记本和耳机。桌上物件同时提供了尺寸参照，访客一眼就能判断这把 75% 键盘有多大。
02
扫描：从照片到模型
桌面暗下去，只剩键盘。光带扫过之后，照片换成可以倾斜、拆开的 3D 模型，这是「看见内部」的开始。
03
剖开：六层，一次敲击
六层依次分离：1.5 mm PBT 键帽、3 / 5 针热插拔轴座、开槽铝定位板、3.5 mm Poron 减震、三模电路板和 CNC 铝外壳，每层一句说明。
04
手感：三种按法
浅色章节里，大幅轴体图配压力与行程曲线。切换轴体，曲线重绘，点「按一下」就能听到对应的声音。
05
打字：来，打几个字
全宽的俯视模型跟着访客的键盘输入按下发声，上方显示打出的字和速度。这是让人停留最久、也最想下单的一段。
06
配色：三种岩石
每种配色配一张岩石微距背景，键盘模型实时换色，左侧的「选这个配色」按钮打开商品页，并预先选好这个配色。
性能与无障碍：模型比图片更轻
因为键盘是代码画出来的，换色、剖开和打字都不需要额外图片，首屏图片量也更容易控制。开启「减少动态效果」时，首屏保持静态的桌面构图，剖开章节直接显示分层后的最终状态，所有说明和购买按钮完整可用。这与 W3C WCAG 2.2 对动画可以关闭的建议一致。
桌面上的杯子、笔记本和耳机也不只是装饰。Baymard Institute 的研究发现，42% 的用户会试图通过商品图判断商品的整体大小，熟悉的日常物件正好是现成的比例尺。
从体验到下单
配色在 Foundax 里是真正的商品规格：键盘、键帽组和桌垫都有玄武岩、砂岩、地衣三种配色，轴体包有线性、段落、静音三种类型。换色章节的按钮会打开预选了该配色的商品页，后面接上原生的购物车、结账和订单。想了解商品与规格功能，可以看 Foundax 功能介绍。
可以直接借鉴的清单
- 产品的价值藏在内部时，想办法把内部展示出来，比如拆解、剖面或分层。
- 能用代码画的产品结构，就不要用一堆图片拼：对齐更准，换色更快，加载更轻。
- 声音、手感这类难以描述的卖点，尽量让访客亲自试一下。
- 首屏的道具同时充当尺寸参照。
- 参数配一句人话：「1.5 mm 厚 PBT，不会打油」比单独一个数字更好懂。
- 体验里做的选择（比如配色）要带进商品页，不要让访客重新选一次。
常见问题
3D 模型会不会拖慢网站？
STRATA 的模型用 CSS 3D 写成，不需要加载 3D 引擎或模型文件，换色和剖开也不用额外图片，比为每个配色、角度准备照片更轻。
手机上也能体验吗？
可以。手机上剖开章节的说明改为在模型下方依次出现，打字体验改为点按屏幕上的键，放大镜改为点按图片。
STRATA 是真实品牌吗？
不是。STRATA 层岩是 Foundax 团队制作的虚构品牌案例，案例中的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 STRATA 案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品和品牌内容。更多行业的设计方法，可以看 品牌独立站设计指南。