賣機械鍵盤的網站，最難講的是「手感」。軸體、定位板、減震、鍵帽材質，這些決定手感的東西大多藏在鍵帽下面；規格表寫得再全，訪客也很難把「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 案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。