網站設計案例
品牌網站怎樣設計：由商品價值到下單的 6 個決定
首屏講甚麼、哪裏做互動、顏色留給誰、賣點用場景還是規格講、體驗怎樣接上下單。以 Foundax 案例庫的設計方法，拆解品牌網站的 6 個關鍵決定。
閱讀全文
賣燈的網站有一個先天難題：燈真正的價值，出現在開燈之後。顧客買的不是一個燈罩和一支燈桿，而是燈亮起來以後，房間變成的樣子。可是大部分燈具網站只提供白底商品圖和一張規格表，訪客要自己在腦海裏把它放進家中。
這篇以 Foundax 案例庫中的 HUSH 暮間作拆解。它是一個虛構的家居燈具品牌，主角是一盞霧白圓頂的隨身枱燈。以下按頁面順序講解它的設計決定，以及每個決定背後的理由。可以先打開案例，邊看邊讀。
燈具網站難在哪裏
- 商品是光，不是燈身。 白底圖能說明造型，卻說明不了氛圍。
- 使用場景在晚上，拍攝卻多在白天。 很多場景圖把燈拍成一件擺設。
- 規格很抽象。 300 流明、2700K，對大部分人沒有畫面。
- 決定靠感受。 顧客真正想確認的是：這盞燈放在我家的角落，會不會剛好。
所以 HUSH 的設計目標可以寫成一句話：先讓訪客感受到商品改變了空間，再讓他親手決定喜歡的氛圍，最後把這個選擇帶進購物袋。
四個招牌時刻
品牌網站不需要處處都有互動。HUSH 把互動集中在四個時刻，其餘區塊保持安靜。
開燈
一盞燈，改變一個角落
首屏是一張關燈狀態的真實空間照片。亮燈後，燈罩發光、桌面落光和牆面反射分層亮起，底圖本身不換圖、不提亮。
轉場
由獨處到相聚
向下捲動，鏡頭由閱讀角移到露台。一個捲動進度同時控制圖片和文字，向上捲回也能還原。
調光
讓訪客作決定
亮度滑桿和琥珀、暖白兩種光色直接作用在照片裏的光上，三個預設對應讀幾頁書、放慢一下和再坐一會。
接續
體驗不會在按鈕前中斷
調好的光感會出現在選購區，例如「你的光感預覽：琥珀 · 68%」。訪客的選擇沒有在按下購買時遺失。
互動的數量比互動的質素更容易失控。先選出最能證明商品價值的一兩個時刻，再決定其他區塊要不要動。
視覺語言：把顏色留給光
HUSH 的配色刻意壓得很低：石灰白和灰橄欖鋪滿頁面，只有光是暖的。燈亮起來時，頁面上最暖的顏色就是商品本身。
- 石灰白
#EEECE3頁面底色，像一面被枱燈照着的牆 - 灰橄欖
#555C3D品牌色、主按鈕和選中狀態 - 深橄欖
#34392C調光區背景，令光效更突出 - 墨褐
#302F25標題與內文，比純黑更溫和 - 琥珀光
#E7A25B只用在燈光本身，不用於按鈕或裝飾
字體的分工同樣清楚：
| 用途 | 字體 | 原因 |
|---|---|---|
| 標題 | Baskerville、宋體 | 襯線字帶點書卷氣，呼應晚上讀一會書的場景 |
| 內文與介面 | Avenir Next、蘋方 | 無襯線令價格、選項和按鈕保持清晰 |
六幕頁面分鏡
01
首屏：給夜晚，留一點光
真實空間、正常尺寸的燈，第一屏就回答「它放在家中是甚麼樣子」。右下角的開關提示訪客，這盞燈可以亮起。
02
空間：由閱讀角到露台
兩個場景對應兩種用法：一個人看書，兩個人聊天。「隨身枱燈可以帶着走」這個賣點，不寫在規格裏，而是用場景轉換講出來。
03
光感：今晚的光，由你來定
亮度、光色和三個預設。頁面註明這是氛圍示意，不是實測照度，示範效果要誠實。
04
細節：安靜地在場
展開圓頂、觸點和底座三個細節。只講商品圖中真實看得到的部位，不虛構看不到的結構。
05
選購：選一盞，陪你過夜晚
單燈和雙燈組合各有對應的商品圖和價錢，上一步調好的光感偏好也會出現在這裏。
06
尾聲：暮間，小記
大小錯落的生活照片收束故事，文章入口返回對應場景，最後是訂閱。
由體驗到下單：交易部分怎樣銜接
品牌頁做得再好，如果按下「加入購物袋」之後好像換了一個網站，前面營造的氛圍就斷了。HUSH 的選購區、購物袋、訂單和售後都使用 Foundax 原生的商品與訂單功能：價錢和規格來自商品與 SKU 管理，優惠在結帳時計算，訂單可以查詢，退貨可以申請。設計要做的，是令這些頁面延續同樣的顏色、字體和節奏。
如果你的網站有流量卻沒有訂單，可以對照 漏斗裏每個指標都綠了，唯一沒到場的是訂單 排查。想了解這部分功能，可以看 Foundax 功能介紹。
可以直接借鏡的清單
- 找出商品價值真正出現的時刻（對燈來說是開燈），讓首屏展示它。
- 場景圖用真實空間和正常比例，不要為了搶眼把商品放大到失真。
- 互動集中在一兩個能證明價值的時刻，其餘區塊保持安靜。
- 把顏色留給商品：降低品牌色的飽和度，讓商品成為頁面上最亮的東西。
- 訪客在體驗中作出的選擇，要帶進選購區和購物袋。
- 規格和示範要誠實：氛圍示意就寫明是示意。
常見問題
燈具網站一定要做開燈互動嗎？
不一定。開燈互動的前提是有一張好的關燈場景照片，而且願意為它標定光源和照射範圍。如果條件未夠，先做好兩件事更重要：真實空間中的場景圖，以及日間和夜間兩種狀態的對比。
沒有專業攝影，能做到類似效果嗎？
HUSH 的光效建立在一張關燈狀態的場景照片上，再疊加發光、落光和反射三層。換成你自己的照片時，需要重新標定燈的位置和光照範圍；不同燈款的出光方向也要相應調整。它不是為任意照片自動重新打光。
HUSH 是真實品牌嗎？
不是。HUSH 暮間是 Foundax 團隊製作的虛構品牌案例，用來展示燈具與家居品牌網站的一種做法。案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 HUSH 案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品、圖片和品牌內容。