一套為製作加工廠設計的 Demo Case：前台整合品牌網站、產品型錄與詢價入口，後台則用 Google Sheet 維護商品資料，讓小型團隊也能用很低的營運成本持續更新網站。
背景與問題
這個 Demo Case 的對象是一間製作加工廠。它需要的不是完整購物車電商，也不只是單頁形象網站，而是一個介於品牌門面、產品目錄與業務詢價之間的網站系統。
加工廠的產品資訊通常會持續變動：品項、分類、規格、圖片、描述、可供應狀態，都可能隨著業務需求調整。如果每次更新都要進入複雜後台，或交由工程端處理，網站很快會變成難以維護的展示品。
這次的設計重點，是讓前台看起來像精緻品牌電商，日常維護卻接近試算表。團隊只要整理 Google Sheet，就能管理產品型錄，讓網站保持可更新、可瀏覽、可詢問的狀態。
核心洞察
加工廠網站最重要的營運問題，通常不是畫面能不能做得漂亮，而是產品資料能不能長期被穩定管理。
對許多製造與加工型團隊來說，Google Sheet 已經是日常營運的一部分。報價、品項、分類、備註、規格與內部溝通，往往都從表格開始。與其要求團隊換一套陌生 CMS，不如把既有工作方式變成網站資料來源。
這讓網站不只是品牌門面，也是一個輕量的產品營運系統。前台負責建立信任與展示質感，Google Sheet 則負責維持資料更新的節奏。
解法與產品概念
產品型錄以清楚分類承接瀏覽需求，前台像電商，後台則保留 Google Sheet 的維護彈性。Spoke 被設計成一套品牌型錄網站。網站前台包含首頁、產品列表、產品詳情、分類篩選與聯絡詢價入口。訪客可以像瀏覽電商一樣查看品項，也能在感興趣的產品頁面直接聯繫業務。
後台則以 Google Sheet 作為資料管理方式。產品名稱、分類、規格、描述、圖片與狀態可以集中整理在表格裡，網站再將這些資料轉換成可瀏覽的產品頁面。這種做法讓加工廠不需要額外學習複雜系統，也能維持產品型錄的更新節奏。
Design Direction / Visual Language
視覺方向採用高對比、低飽和、偏科技感的語言。深色首頁搭配大型產品名稱、模糊自行車影像與玻璃質感導覽元件，讓品牌更接近高性能產品網站，而不是傳統工廠型錄。
產品列表頁改用大面積留白與清楚分類，讓使用者能快速理解產品結構。分類按鈕保留電商瀏覽習慣，但沒有加入過度複雜的購物流程。
產品詳情頁使用左右分欄：左側是產品名稱、簡短描述、聯絡按鈕與技術規格，右側放置產品圖。這種配置適合製造業產品，因為它同時處理了兩件事：讓產品看起來有價值，也讓規格資訊容易被業務或採購快速閱讀。
Key Features
產品詳情頁將產品說明、規格與聯絡入口收斂在同一頁，符合 B2B 詢價情境。
網站內容維護被設計成接近日常表格管理。團隊可以透過 Google Sheet 更新品項、分類、規格與描述，減少登入後台、填寫複雜欄位或等待工程更新的成本。
這對加工廠很重要，因為產品資料常常來自業務、設計、採購或生產端。使用表格作為資料入口，可以讓不同角色都用熟悉的方式參與維護。
產品型錄與品牌網站整合
網站不是把產品列表硬塞進形象頁，而是讓品牌敘事與產品瀏覽共存在同一套結構裡。首頁建立品牌感與技術感，產品型錄負責讓訪客快速找到品項，產品詳情頁再承接規格與詢價需求。
這讓網站可以同時服務兩種使用者：第一次認識品牌的人，以及已經有採購需求、想直接確認品項與規格的人。
分類篩選讓產品架構更清楚
產品列表頁提供分類切換，讓加工廠能依照產品線整理資料。對產品項目會逐步增加的網站來說，分類系統比單純的作品展示更重要。它讓網站未來能持續擴充，而不會因為品項增加變得難讀。
詢價導向的產品詳情頁
產品詳情頁沒有被設計成傳統購物車頁，而是以聯絡業務作為主要行動。這符合加工廠與 B2B 型產品的購買情境：使用者通常需要確認規格、數量、客製需求或報價條件，才會進入下一步。
因此，頁面重點不是快速結帳，而是讓產品資訊足夠清楚，並把有興趣的訪客導向業務聯繫。
高質感前台降低製造業網站的廉價感
這次視覺不是用常見工廠網站的資訊堆疊方式，而是借用高端運動產品與科技品牌的表現手法：大字級、深色背景、玻璃質感元件、產品特寫、精簡導覽。
這能幫助加工廠在第一眼建立更好的品牌信任，尤其當產品本身具有精密加工、零件製造或高性能用途時，網站質感會直接影響客戶對供應能力的想像。
Results / Design Value
這套 Demo Case 整合了三個設計價值。
- 營運變簡單：商品資料集中在 Google Sheet，日常更新不用依賴複雜後台。
- 品牌感提升：網站從傳統型錄轉為具有高質感視覺敘事的品牌入口。
- 詢價流程更直接：使用者可以從產品列表進入詳情，再透過聯絡按鈕和業務接上，減少從瀏覽到詢問之間的阻力。
對小型或中型製造團隊來說，這是一個剛好的網站規模：足夠像品牌，足夠像電商，也足夠容易維護。
