Tea Struck 電商網站

本次改版的核心挑戰，在於如何在「百年底蘊」與「數位體驗」的拉扯間尋找完美的平衡點。TeaStruck 承載著自 1901 年累積的製茶工藝，網站不應僅是銷售貨架，更需成為傳遞品牌靈魂的數位殿堂。因此，首要任務是透過視覺語彙，將抽象的「謙卑腰桿」精神與現代美學的激烈撞擊具象化，打破傳統茶行過於老派的框架，建立起符合誠品等級的國際視野與高端印象。 如何在打造沈浸式視覺、強化品牌心佔率的同時，確保購物動線的流暢與資訊的易讀性，在感性的文化敘事與理性的銷售邏輯中，找到那個精準的共存點。

TeaStruck 的網站設計，是對品牌核心「溫潤的現代東方美學」的一次細膩數位延伸。我們摒棄傳統數位介面常見的高飽和度色彩與銳利純白，轉而向內探索，提取源自茶湯、器物與庭園的「大地色系」，將時間的痕跡轉化為網頁的色彩語言。在視覺引導上，我們以「利休」的深苔綠構築空間的靜謐基調，佐以「飛石」的質樸灰階與「黑樂」的極致純粹，鋪陳出如庭園路徑般安定的瀏覽節奏；細節處則點綴象徵工藝溫度的「茶筅」色澤，模擬竹器經年累月後的溫潤光輝。這層層堆疊的色彩層次，搭配沈穩的暖米白底色，不僅消弭了長時間瀏覽的視覺疲勞，更讓使用者在點擊頁面的瞬間，彷彿雙手捧著一杯剛沖好的熱茶，感受到一股內斂而高級的沈浸式溫暖。

為了具象化品牌「百年底蘊」與「現代生活」的激烈碰撞，我們在 Layout 經營上導入了「雜誌化（Editorial）」的編排思維。打破傳統電商死板的格線限制，運用非對稱的構圖與大膽的留白哲學，創造出宛如翻閱精品刊物的視覺節奏。這份「呼吸感」讓資訊與影像不再擁擠，而是優雅地引導使用者的視線，讓瀏覽網頁的過程本身就是一種享受。

排版策略上，我們刻意讓象徵書法傳承的「直式書寫」與代表數位邏輯的「橫式閱讀」在畫面中交錯對話。搭配貫穿頁面的細緻流線元素——象徵南投茶山的稜線與茶香流動的軌跡，整體設計在老派靈魂與當代極簡間取得精準平衡，完美詮釋了 TeaStruck 作為連結過去與未來的橋樑，那份謙卑而自信的職人精神。

針對商品列表與詳細頁，我們進行了大幅度的「減法設計」。舊版網站呈現傳統批發型錄式的密集排版，資訊層級破碎且色彩干擾強烈，容易讓使用者在選購時迷失焦點。 改版後，我們導入了「藝廊策展」的佈局思維。在產品總覽頁，透過大面積留白與統一的視覺規範，將產品包裝視為藝術品般展示，大幅降低視覺雜訊，讓不同系列的茶款一目瞭然。而在產品詳細頁，則重塑資訊架構，將繁瑣的規格參數轉化為清晰的條列式呈現，搭配優雅的襯線字體與明確的購買動線，不僅提升了閱讀舒適度，更有效引導使用者順暢地完成購買決策。

為了降低年輕世代與海外客群在面對眾多茶種時的選擇焦慮，我們開發了直觀的「茶品比較模組」功能。 考量到非專業品茗者往往難以單憑茶名判斷風味差異，此功能允許使用者將感興趣的茶款加入比較清單。在簡潔清爽的比較視窗中，系統會將「產區」、「口味」、「價格」等關鍵決策指標並排呈現。透過結構化的資訊對照，原本抽象晦澀的茶葉特性變得具體且易於評估，不僅減少了使用者在不同頁面間反覆跳轉的認知負擔，更如同數位侍茶師般，精準引導消費者在理性比較後，自信地找出最符合自身偏好的茶品。

為了避免繁雜的結帳步驟打斷使用者的購物體驗，我們將結帳流程收斂為清晰的三步驟：購物車、填寫資料、確認訂單。 透過頂部簡約的進度條（Stepper），使用者能隨時掌握當前狀態，降低對未知流程的不安感。視覺上延續品牌的暖米白與大地綠，去除所有不必要的廣告與干擾元素，確保從選茶到結帳的體驗一氣呵成，降低使用者在購物流程中的負擔，也進一步在設計上提升訂單的轉換率。