ARCA 義大利皮件
以極簡版面與生活情境影像呈現皮件質感，整合分類選購、商品篩選、收藏與購物袋，並規劃銜接 Shopify 的結帳流程。
- 電商網站
- UI / UX 設計
- 前端開發
- Shopify 串接
- 01
專案背景
ARCA 以義大利皮件與配件為主題，網站收錄肩背包、托特包、斜背包等系列，結合商品展示與品牌內容，建立一致的線上選購體驗。
- 02
規劃重點
面對多種包型、色彩與材質，網站需要同時呈現商品細節、協助訪客縮小選擇範圍，並讓品牌內容自然銜接商品瀏覽。
- 03
設計構想
以生活情境影像建立第一印象，再透過分類入口、系列展示與商品頁引導深入瀏覽，讓品牌敘事與選購路徑相互連結。
- 04
視覺與體驗
以大字標題、細線網格與留白建立清楚的閱讀層級，搭配皮件實拍呈現輪廓與材質，讓商品成為版面的焦點。
- 中英文字體搭配，建立品牌識別
- 生活情境主視覺與商品分類入口
- 串聯穿搭企劃與品牌文章
- 05
功能實作
以模組化前端組織商品、收藏與購物袋介面，加入分類、顏色、材質及價格篩選，並以 Shopify 串接程式銜接商品資料與結帳入口。
- 六大選購分類與商品排序
- 收藏清單與購物袋管理
- Shopify 商品及結帳串接
- 頁面搜尋摘要與結構化資料設定
- 06
作品呈現
本作品呈現品牌首頁、商品選購、內容企劃與購物流程的前端實作。展示重點為視覺設計與系統整合；實際交易流程仍需配合商店設定與上線驗證。
畫面選讀
SCREENS
01首頁主視覺CARRY WHAT MATTERS影像與標題左右對半，中間不留過場。右下角壓上佛羅倫斯的經緯度與「PAGE 01 / 10」——整個首頁用編號串起十個段落，像翻一本型錄而不是捲一個網頁。
02分類選購SHOP BY CATEGORY托特、肩背、斜背、手提、後背、配件六個入口，每一個都用穿搭情境照而非商品去背圖。買包的人先想的是「背起來什麼樣子」，不是包本身長怎樣。
03品牌哲學DESIGN PHILOSOPHY在兩段商品牆之間插入一則品牌宣言，讓瀏覽有換氣的地方。圖說寫明取景與產地（MADE IN ITALY），把敘事和商品資訊掛在一起。
04商品列表與篩選SHOP & FILTER十六件商品，四個篩選維度：顏色、材質、價格區間，加上四種排序。左欄常駐、右側即時更新，不重新載入頁面；右上角的「ITEMS // 16」隨條件改變。
05商品頁PRODUCT PAGE顏色、尺寸、數量之外，還顯示「目前庫存：8 件」——這個數字直接來自 Shopify，不是寫死的。規格、配送與退換貨收在可展開的三段裡，不干擾購買動線。
06品牌誌JOURNAL植鞣革的製程、一只包五年的舊化軌跡、佛羅倫斯老匠人。內容企劃跟商品放在同一條動線上，讓「為什麼值這個價」有地方被回答。
下一個專案