美妝網站最難的一步，往往不是首屏，而是選色號。屏幕有色差，色號名稱常常只是一串編號，顧客很難判斷一支唇釉塗在自己臉上是甚麼樣子。選不準，就只能放棄，或者買回去再退。
這篇拆解 Foundax 案例庫中的 Tinted Hours 色時。它是一個虛構的唇頰彩妝品牌，有六支唇釉、四色頰膏和兩個套裝。它的做法是：把「選色號」這個購物動作，變成整個網站的故事。
美妝網站難在哪裏
- 屏幕色差。 同一個顏色，在不同屏幕上看起來不一樣，單靠色塊很難判斷。
- 色號名稱太抽象。 「#03」「玫瑰豆沙」這類名字，說明不了它適合甚麼場合。
- 看不到上臉效果。 管身圖說明不了質地、透明度和疊塗後的樣子。
- 選項多，難決定。 色號越多，訪客越容易在選擇中迷失。
所以色時的設計目標是：給每個色號一個容易記住的理由，再用多種方式把同一個顏色講清楚。
設計概念：用一天中的時刻為色號命名
色時的六支唇釉按一天中的時刻命名，由清晨的「06:40 晨霧」到深夜的「23:40 夜海」。光在一天中不斷變化，臉上的顏色也可以跟着變。這樣，色號名稱不再是編號，而是一個使用場景：早上上班用哪支，晚飯約會用哪支，一看就明白。
網站把這個概念貫徹到底：頁面頂部有一個時鐘，隨着捲動由 06:40 走到 23:40，頁面底色也在相鄰時刻之間漸變。訪客往下讀，就像走過了一天。
色板：六個時刻，六組顏色
每個時刻有一個唇釉顏色和一個頁面底色。唇釉顏色取自商品照片的實際顏色，所以頁面上的色點和管身中的液體一致。
- 06:40 晨霧
#C29088清透玫瑰；頁面底色 #E7E5E2 - 10:15 杏光
#E29372暖杏色；頁面底色 #F4E6D6 - 13:30 暖石
#AB6C57赤陶裸色；頁面底色 #E9DCCB - 17:50 落霞
#D25449珊瑚紅；頁面底色 #F0C3AE - 20:05 葡萄酒
#662430深酒紅；頁面底色 #3B2230，文字轉為淺色 - 23:40 夜海
#5D2B45藍調莓紫；頁面底色 #141A28
字體的分工：
| 用途 | 字體 | 原因 |
|---|---|---|
| 英文標題與色號名稱 | Cormorant Garamond，正體與斜體 | 美妝雜誌感，斜體用在引言和色號名稱 |
| 時刻與價錢 | IBM Plex Mono | 時間戳是品牌記號，等寬數字令時鐘和價錢對齊 |
| 中文 | 系統宋體（標題）、系統黑體（內文） | 不載入大體積中文字體，保住首屏速度 |
四個招牌時刻
時鐘
一天在捲動中走過
頁面頂部的時鐘隨捲動由 06:40 走到 23:40，背景在相鄰時刻的底色之間漸變。開啟「減少動態效果」時，背景按時刻直接切換。
長廊
六個色號依次登場
色號區段被固定，六個時刻的商品圖橫向滑入，每張都配時刻、色號名稱和一句日記式描述。
質地
滴落、試色、疊塗
三張微距圖分別講述刷頭帶起的一滴、紙上六道試色和手臂上的兩色疊塗，回答「上臉是甚麼樣」。
選色
點一下，整頁跟着變
在選購區點選色號，唇部特寫、商品圖和頁面底色一起切換到那個時刻。
六幕頁面分鏡
01
首屏：每個時刻，都有它的顏色
晨霧中的石台上立着一支唇釉，品牌名稱和標語留在左側的空白處。時鐘由 06:40 開始走，這就是整個網站的節奏。
02
時刻：六個時刻，六個色號
六張商品圖橫向依次滑入，背景跟着時刻漸變。到 20:05 之後，頁面轉入夜色，文字變成淺色。
03
質地：第一層，是透的
紙上的六道試色和手臂上的疊塗，用兩種方式展示同一組顏色，彌補單一色塊的不足。
04
選購：選你的時刻
大幅唇部特寫配六個色號圓點。點選後圖片和底色一起變化，再進入商品頁選購，價錢和庫存來自商品資料。
05
頰膏：同一個時刻，也在臉頰上
四色頰膏和唇釉使用同一套色調，給出「同一時刻」的唇頰配搭，再延伸到日間和夜間兩個套裝。
06
尾聲：一天的最後一個小時
夜色水面上的唇釉收束故事，同時交代送貨、退貨和客服，讓最後的疑慮在離開前得到解答。
商品圖怎樣保持一致
六個色號要像同一支產品，商品圖的一致性比單張好看更重要。色時的做法是先定下一支唇釉管的標準圖，之後每個色號都只改液體顏色和背景，管身、角度和光線保持不變；唇部特寫也是先定一張，其餘色號只改唇色。案例中的圖片由 Foundax 團隊用圖像生成工具按這個方法製作。
如果你用實拍，也可以沿用同樣的原則：同一部相機、同一個角度、同一套燈光，一次拍完所有色號。
由選色到下單
色號在 Foundax 中是真正的商品規格，而不只是幾個 SKU：詳情頁的色號選擇、價錢和庫存都來自商品資料。套裝可以直接加入購物車，優惠碼 HOURS15 在結帳時計算滿減。
選色區也考慮了無障礙：選中的色號會以大字顯示時刻和名稱，每個色號圓點也帶有「17:50 落霞」這樣的讀屏標籤，而不是只靠顏色區分。W3C 的 WCAG 2.2 也要求顏色不能是傳達資訊的唯一方式。想了解商品與規格功能，可以看 Foundax 功能介紹。
可以直接借鏡的清單
- 為色號建立一套容易記住的命名方式，例如時刻、場合或心情，而不是編號。
- 用三種方式講同一個顏色：商品圖、試色和上臉特寫。
- 讓選色成為頁面的主角：點選色號時，圖片和頁面氛圍一起變化。
- 商品圖先定型再批量製作，確保所有色號看起來是同一支產品。
- 選中的色號要顯示文字名稱，色點也要有讀屏標籤，不只靠顏色區分。
- 用套裝和配搭建議，幫選擇困難的訪客作決定。
常見問題
色號應該做幾個？
能講清楚分別的數量就夠了。色時只有六支唇釉，每一支對應一個時刻；與其做二十個相近的顏色，不如讓每個顏色都有明確的使用場景。
屏幕色差怎樣處理？
無法完全消除，但可以用多種參照減少誤判：管身中的液體、紙上的試色、手臂疊塗和唇部特寫，以及「適合甚麼光線」的文字描述。
色時是真實品牌嗎？
不是。Tinted Hours 色時是 Foundax 團隊製作的虛構品牌案例，案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 色時案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品、圖片和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。