品牌網站設計指南：6 個決定與行業案例

套用範本，可以令網站很快「看起來不錯」。但令訪客記住一個品牌、願意下單的，往往是圍繞商品本身作出的幾個設計決定：首屏先講甚麼，哪裏值得做互動，顏色留給誰，賣點用規格講還是用場景講，體驗怎樣接上購物車或查詢。

這篇整理了 Foundax 案例庫背後的設計方法。每一個決定都配有可以直接打開體驗的案例；分行業的完整設計拆解，會陸續收錄在本頁底部。

1. 找出商品價值出現的那一刻

每類商品都有一個「價值出現的時刻」。首屏最好直接展示它，而不是一張放在哪裏都成立的品牌大圖。

燈具

開燈之後

燈的價值在亮起來以後才看得見。HUSH 暮間的首屏是一張關燈狀態的空間照片，訪客可以自己把燈亮起。

香氛

氣味的意象

氣味無法在屏幕上傳達。SEN 留息以無花果、液滴、水花和切割玻璃，把一支香水的氣味轉化成畫面。

鍵盤

結構與手感

STRATA 層岩把鍵盤一層層拆開，再讓訪客直接打一段字，令「手感」變得可以體驗。

工業材料

規格與交付

採購關心的是材料、品質與交付周期。MERIDIAN 衡原把這些資訊排在查詢入口之前。

STRATA 層岩 · 機械鍵盤品牌網站拆解 3D 鍵盤、切換配色、試着打字，讓產品細節成為可操作的體驗。體驗網站

2. 只做一兩個招牌互動

互動的數量很容易失控。更好的做法是先問：哪一個互動最能證明商品的價值？Tinted Hours 色時的互動選色、HALF 半塊的掰開曲奇、間序 INTERVAL 的平面圖與照片聯動，都只服務一個目的。選定之後，其餘區塊保持安靜，讓招牌時刻更突出。

3. 讓視覺語言為商品服務

配色和字體不是獨立的「品牌裝飾」，而是用來突出商品的。

HUSH 暮間：石灰白和灰橄欖壓低整體飽和度，只有燈光是暖色，商品自然成為頁面上最亮的東西。
PACEFORM 逐程：螢光黃和超大字標題，直接傳達速度感。
SEN 留息：大面積留白和緩慢的捲動節奏，呼應香氛的克制。
毛茸日常 FLOOF DAYS：線筆小狗塗鴉，令寵物用品店有手作的溫度。

SEN 留息 · 香氛品牌網站無花果、液滴、水花與切割玻璃，隨捲動展開一段極簡香氛敘事。體驗網站

4. 用場景講賣點，而不是只列規格

規格說明「是甚麼」，場景說明「對我有甚麼用」。FOLDWILD 折野讓同一個背包穿過街角、林道和海岸，收納能力在場景中自然出現；YEXU 野序以冷熱沖泡配方和計時器，取代一段關於「風味」的形容詞。

場景圖也要真實、比例正確。Baymard Institute 在 2017 年的可用性研究發現，42% 的用戶會嘗試透過商品圖片判斷商品的整體大小，所以商品被放大到失真的場景圖反而會誤導判斷。

5. 讓體驗接上交易或查詢

品牌頁做得再好，如果按下「加入購物袋」之後好像換了一個網站，前面的體驗就斷了。零售品牌要讓選購、購物袋、結帳和售後延續同樣的視覺；B2B 和服務型品牌，例如 MERIDIAN 衡原，則要讓查詢表單出現在資訊講清楚之後。

MERIDIAN 衡原 · 工業原材料品牌官網由銅、鋁、鋅的材料目錄與交付說明，走到清晰的採購查詢入口。體驗網站

Foundax 的案例都使用平台原生的商品、訂單、優惠和表單功能，設計只負責讓這些頁面保持一致。詳細功能可以看 Foundax 功能介紹。

6. 示範和規格都要誠實

氛圍示意要寫明是示意，看不到的結構不要虛構，商品規格以真實資料為準。誠實不會削弱設計，反而讓訪客更願意相信頁面上其餘的內容。

案例設計拆解

按行業整理的完整拆解，包括配色、字體、分鏡和交易銜接：

HUSH 暮間 · 家居燈具品牌網站在空間照片中開燈、調節光感，再由居家場景走到選購。體驗網站

所有案例都可以在網站案例中直接體驗。

常見問題

品牌網站和一般電商範本有甚麼分別？

範本解決的是「有一個能賣貨的頁面」，品牌網站解決的是「為甚麼選你」。分別通常不在頁面數量，而在首屏講甚麼、哪裏做互動、視覺如何突出商品，以及體驗能否一路延續到下單。

預算有限時，應該先把設計投放在哪裏？

先投放在首屏和商品展示：找出商品價值出現的時刻，用真實場景和正確比例的圖片講清楚它。互動和動效可以之後再加。

這些案例是真實品牌嗎？

不是。案例庫中的品牌都是 Foundax 團隊製作的虛構品牌，用來展示不同行業網站的設計方法。案例中的購物和訂單都是示範，不會真正扣款或出貨。

可以直接用案例開始建立自己的網站嗎？

可以。在任何案例中選擇「以此範本開始」，註冊後會以該案例為起點建立網站，再換上你自己的商品、圖片和品牌內容。