專案背景

客戶為台南在地服裝品牌（線上＋門市）。改版前的網站在手機端字級偏小、圖片比例不一致、結帳流程層級過深，導致行動端跳出率偏高、下單轉換不理想。

主要痛點

• 行動端導覽層級過深，找商品成本高
• 商品圖尺寸不一，列表掃視效率差
• 結帳流程冗長，折扣／運費規則不清晰

我們的做法（RWD 策略）

1）Mobile First：先為手機把路鋪好

從 拇指可及區 設計主導覽與關鍵 CTA（加入購物車／直接購買），提高主動操作率；重整資訊層級，讓「分類 → 篩選 → 商品卡」的動線更短、更直覺。

2）商品卡與圖片比例統一

統一採用 4:5 比例 商品圖，列表以兩欄栅格呈現；卡片上直接露出關鍵尺寸與色票、到貨狀態，減少點進細頁的反覆行為。

3）快速結帳與免註冊下單

結帳步驟縮短為 1. 收件資料 → 2. 付款方式 → 3. 確認，支援免註冊下單與行動支付；折扣顯示改為即時計算，避免使用者猶豫。

4）速度與可用性

• 啟用圖片延遲載入與 WebP，首頁 LCP 下降至 2.3s
• 字級與行距依裝置大小調整，確保可讀性
• 語意化標記與 ARIA，提升無障礙等級

「把逛街的感覺帶到手機上」—— 我們以「掃視速度」為核心，重構從列表到結帳的每一步。

成果數據（上線 60 天）

• 行動端轉換率 +27%
• 行動端平均停留時間 +22%
• 購物車放棄率 -18%
• 回訪率 +18%

專案重點

對服裝品牌而言，RWD 不是把版面「縮小」就好，而是以行動使用情境為起點，從導覽、商品展示、結帳到速度，形成一條可被持續優化的導購路徑。