香水網站有一個避不開的問題：氣味無法透過屏幕傳達。訪客聞不到，只能讀「前調、中調、後調」和一串原料名稱。很多香氛網站於是用大量模特兒大片和光影營造氛圍，卻和這支香本身的氣味關係不大。
這篇拆解 Foundax 案例庫中的 SEN 留息。它是一個虛構的植物調香氛品牌，只有一支無花果淡香精 FIG. 01。它的做法是：不去描述氣味，而是用一組意象把氣味「翻譯」成畫面：一個無花果，凝成一滴透明液體，在水中盪開，最後被收進切割玻璃瓶。
香氛網站難在哪裏
- 氣味無法展示。 屏幕只能傳達畫面和文字，訪客只能靠想像。
- 香調術語抽象。 「青綠木質」「柔木」對大部分人沒有具體感受。
- 氛圍圖容易千篇一律。 模特兒、光影、花瓣，放在哪個品牌上都成立。
- 單品品牌欠缺內容。 只有一支香時，網站很容易只剩一個商品頁。
所以留息的設計目標是：用一段可以跟着捲動的意象，讓訪客「看見」這支香從哪裏來、是甚麼氣質，再把它交到商品頁上。
設計概念：由果實到氣息
整個首頁是一段被固定的長捲動，分成五個章節，每章只有一個畫面和一個動詞：
- From fig to feeling.：一個切開的無花果和一片舒展的葉子，交代原料。
- Extract.：青綠凝成一滴透明液體，講「提取」。
- Unfold.：液滴落進水面盪開，講香氣在皮膚上展開的層次。
- Enclose.：切割玻璃瓶把香液收住，講「保存」。
- 最後，成為你的氣息：瓶身貼上標籤，變成一件可以擁有的東西。
每一章只講一件事，畫面之間用連續的變形銜接，訪客不會在中途迷失。
視覺語言：極簡留白，只留給一件東西
頁面幾乎只有一種底色和一種文字顏色，畫面中央始終只有一個主體：果實、液滴、水花或瓶子。大面積留白和緩慢的節奏，本身就在傳達這支香的克制。
- 霧白
#F1F2EE頁面底色，像一張乾淨的試香紙 - 墨綠
#2C322A標題與內文，比純黑更柔和 - 苔灰
#73796E次要文字與章節標記 - 淺灰綠
#CCD0C7分隔線與進度條
| 用途 | 字體 | 原因 |
|---|---|---|
| 標題與章節動詞 | Libre Baskerville，正體與斜體 | 古典襯線字帶一點植物圖鑑的氣質，斜體用在 Extract、Unfold 這類動詞上 |
| 中文 | 思源宋體、宋體 | 與英文襯線字的氣質一致 |
四個招牌時刻
果實
先交代原料
首屏是一個切開的無花果和一片葉子，英文大字 From fig to feeling 點出整段旅程的方向。
液滴
青綠凝成一滴
無花果淡出，一滴透明液體從畫面上方落下，章節動詞 Extract 以斜體寫在左側。
水花
在一滴之間盪開
液滴落入水面，濺起一圈水冠。水花由 WebGL 即時渲染，而不是一段影片。
成瓶
以光為器
切割玻璃瓶由透明到成形，瓶蓋落下、標籤出現，香氣最終成為一件可以擁有的物件。
六幕頁面分鏡
01
首屏：無花果的另一種存在
畫面中央只有一個無花果和一片葉子。標題、英文大字和一行輕聲的介紹，留出大量空白。
02
提取：把青綠，凝成一滴
無花果退場，一滴透明液體落下。畫面中只剩一個主體，頁面底部的進度條告訴訪客走到了哪一章。
03
展開：一瞬，盪開
液滴落入水面，濺起水冠。它對應香氣在皮膚上展開的層次，是整段旅程中最有動感的一刻。
04
成瓶：以光為器，收住氣息
切割玻璃瓶逐漸成形，瓶蓋懸在上方。清透的香液和切面，把「看不見的」輕輕留下。
05
完成：最後，成為你的氣息
瓶身貼上 SEN / FIG. 01 的標籤，香調寫成「無花果 · 綠葉 · 柔木」，旁邊是進入商品介紹的入口。
06
商品：FIG. 01
大幅瓶身圖配香調、容量和價錢，「選購這縷氣息」進入商品頁；下方還可以重看香氣的誕生。
由體驗到下單
旅程結束後，頁面馬上接上一張完整的商品卡：香調、50 ml 容量和價錢，按鈕進入 Foundax 原生的商品頁、購物車和結帳。下方還有送貨與退換說明，以及一篇關於無花果和青葉的品牌手記。想了解這部分功能，可以看 Foundax 功能介紹。
這類長捲動敘事要照顧不想看動畫的人。開啟「減少動態效果」時，留息把整段旅程收成一屏靜態畫面，商品資訊和購買入口照常可用，這也符合 W3C WCAG 2.2 對動畫可關閉的建議。
可以直接借鏡的清單
- 不描述氣味，而是選一組能代表它的意象：原料、形態、質感。
- 每一章只放一個主體、一個動詞，讓長捲動保持清楚。
- 用留白和節奏表達品牌氣質，比堆疊氛圍圖更有辨識度。
- 用進度條告訴訪客走到哪裏，避免長敘事令人迷失。
- 旅程結束後馬上接上商品資訊和購買入口。
- 為「減少動態效果」準備一個完整的靜態版本。
常見問題
只有一款商品，也值得做這麼長的首頁嗎？
單品品牌更需要內容來建立辨識度。留息的長捲動只有五個章節，看完就直接到商品，不會讓想買的人等太久。
水花效果會不會拖慢網站？
水花由 WebGL 即時渲染，只在香氣旅程中運行；開啟「減少動態效果」或在編輯器中時不會載入這段動畫。
留息是真實品牌嗎？
不是。SEN 留息是 Foundax 團隊製作的虛構品牌案例，案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 留息案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。