作品集・電商網站
STRYDE — 運動品牌電商作品
自主開發的技術能力展示・非真實客戶案件
這個作品在展示什麼
同樣是電商,不同品牌調性需要完全不同的視覺語言。這個作品參考國際運動品牌的網站設計, 示範如何用巨幅標語字體、高對比配色與動態實拍照片,做出截然不同於一般選物站的 「能量感」品牌網站——同時保留完整的商品瀏覽與篩選體驗。
設計重點
- 巨幅標語式 Hero——大字體 + 動態黑白實拍,第一眼就傳達品牌調性
- 三格特色說明區塊——圖片疊加文字說明,取代條列式規格表
- 分類導覽卡片——依運動項目分類,每張卡都是獨立場景照
- 商品格狀陳列——去背棚拍風格,搭配紅色特價標籤與清楚的價格對比
互動細節:商品需先選擇尺寸才能加入購物車,選中狀態會立即反白, 分類篩選切換時商品格會即時更新——這些都是實際可以點擊操作的真實互動, 不是靜態設計稿。
技術與架構
Next.js 15 + TypeScript + Tailwind CSS 打造前台;Hono 提供商品/結帳 API; Zustand 管理購物車狀態,並支援「同商品不同尺寸」分開計算的購物車邏輯。 商品圖片與品牌識別皆為原創/授權素材,非真實商標。