茶葉網站常常陷在兩種極端：一種堆滿產地、工藝和等級術語，新手看完更不知道怎樣選；另一種只有幾張漂亮的茶園照片和一個價錢。顧客真正想知道的其實很簡單：這款茶是甚麼味道？適合甚麼時候喝？買回去怎樣沖？
這篇拆解 Foundax 案例庫中的 YEXU 野序。它是一個虛構的日常原葉茶品牌，有山芽綠茶、雲白白茶、日暖紅茶三款茶。它的做法是：用山野攝影建立品牌感，再把「選茶」和「沖茶」直接做成網頁上的互動。
茶葉網站難在哪裏
- 風味很難說清。 「嫩栗香」「回甘」這類詞，對新手沒有參照。
- 門檻感強。 太多儀式和術語，會令想試試的人卻步。
- 沖法決定體驗。 同一款茶，水溫和時間不對，味道就差很遠，但沖法往往只寫在包裝背面。
- 產地故事容易空泛。 茶園照片很美，卻和「我該買哪款」沒有關係。
所以野序的設計目標是：把喝茶講得輕鬆一點：先幫訪客選出今天想喝的那一口，再教他好好沖一杯。
設計概念：把山野，留在日常
品牌主張是「一葉，一水，一刻」：不為喝茶多做一套儀式，只在日常中為自己多留片刻。首屏是一杯在自然側光中的茶湯，而不是茶園全景，先把畫面落在「你手邊的這一杯」；山野攝影放在第二幕，負責講茶的來處。
視覺語言：苔綠、米白與一枚朱紅
整體是溫暖的米白紙色，文字用深苔綠，朱紅只用在關鍵按鈕和小印章式的標記上。三款茶各有自己的茶湯色，切換茶款時，風味圖表和沖泡插畫跟着換色。
- 米白紙色
#F5F2E9頁面底色 - 深苔綠
#28362A標題、內文與主按鈕 - 朱紅
#A43725關鍵按鈕與印章式標記 - 山芽茶湯
#87974C綠茶的風味與沖泡配色 - 雲白茶湯
#BD963B白茶的風味與沖泡配色 - 日暖茶湯
#A85D29紅茶的風味與沖泡配色
| 用途 | 字體 | 原因 |
|---|---|---|
| 標題 | 思源宋體、宋體 | 帶書卷氣的宋體，適合慢下來的語氣 |
| 內文與介面 | 蘋方、微軟雅黑 | 配方數字、價錢和按鈕需要清楚易讀 |
四個招牌時刻
山野
茶的來處
大幅山野攝影隨捲動連續推進，文案在畫面中交接，講「由一片葉，到你的一杯茶」。
選茶
今天，想喝甚麼
三款茶並排陳列，點選後顯示一句性格描述、風味關鍵詞和「鮮明、輕柔、輕盈」這類強弱刻度。
沖法
就按你的口味來
選擇熱泡或冷泡、拖動濃淡，茶葉克數、水量和水溫隨之變化。
計時
讓時間，泡出一點甜
「12 秒看一泡」加速示範整個過程，「真實計時」按實際時間倒數，沖茶時可以直接用。
六幕頁面分鏡
01
首屏：把山野，留在日常
側光中的一杯茶湯和幾片茶葉，標題和一個「尋找你的那一口」入口。畫面先落在日常的一杯，而不是遙遠的茶園。
02
山野：山野有序，日子有茶
晨霧中的茶園隨捲動推進，文案在畫面中交接。它講來處和氛圍，但不當作產地證明。
03
選茶：今天，想喝甚麼
三個茶罐錯落陳列，各自配一句性格：清鮮、柔和、醇甜。點選一款，下方的風味描述和刻度隨之切換。
04
沖法：就按你的口味來
倒茶的照片旁是配方面板：熱泡或冷泡、濃淡滑桿，以及 3 g、200 ml、85 °C 這樣具體的數字。
05
計時：讓時間，泡出一點甜
杯子插畫跟着計時慢慢變色。示範模式 12 秒看完一泡，真實計時則陪你沖好手上這一杯。
06
選購：把喜歡的，帶回家
三款茶可以切換，日常罐和分享裝兩種選擇，價錢和「查看並選購」按鈕緊貼在一起，進入商品頁完成購買。
誠實地寫風味和沖法
風味因人而異，所以頁面在風味刻度下寫明「風味描述供選茶參考，每個人的感受都不同」；冷泡配方旁也寫了清潔容器、全程冷藏、盡快飲用的提示。案例中的配方是示範例子，商家接入時用自己的真實參數替換即可。
山野攝影只負責氛圍，不當作產地證明；案例圖片由 Foundax 團隊用圖像生成工具製作，品牌字和關鍵中文由頁面文字排版，而不是燒進圖片中。
由體驗到下單
三款茶的日常罐和分享裝都是 Foundax 中的真實商品，選購區的價錢和圖片來自商品資料，加入購物車、優惠、結帳、訂單和售後都使用平台原生功能；配方偏好只是體驗狀態，不會寫進訂單。開啟「減少動態效果」時，頁面保留完整內容，只去掉入場和捲動動畫，這也符合 W3C WCAG 2.2 對動畫可關閉的建議。想了解這部分功能，可以看 Foundax 功能介紹。
可以直接借鏡的清單
- 首屏落在「手邊的一杯」，產地故事放在第二幕。
- 用一句性格加幾個關鍵詞描述風味，再配一個強弱刻度。
- 把沖法做成可調整的配方，而不是包裝背面的一行小字。
- 給計時器一個快速示範模式，讓訪客在幾秒內看懂整個過程。
- 風味、配方和產地照片都要寫明它們的界限。
- 體驗之後馬上接上規格選擇和選購入口。
常見問題
茶葉網站一定要做沖泡工具嗎？
不一定，但沖法是影響體驗最大的因素之一。即使不做互動，也建議在每款茶的頁面寫清楚茶葉量、水量、水溫和時間。
冷泡配方可以直接用嗎？
案例中的冷泡配方是示範例子。正式網站應該使用商家自己驗證過的參數，並寫清衛生和保存提示。
野序是真實品牌嗎？
不是。YEXU 野序是 Foundax 團隊製作的虛構品牌案例，案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 野序案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。