購物車 UI 系統

購物車 UI 系統 是做什麼的？

目的

購物車 UI 系統為直接面對消費者（DTC）及多渠道電子商務的購物車提供了一個可存取、高轉換率的視覺與結構框架。作為商品探索（PDP）與結帳完成之間重要的交易橋樑，購物車必須優雅地處理訂單更新、促銷提示、交叉銷售以及即時運送進度指標。

系統化的設計方法解決了標準購物車的摩擦點——例如更新商品時發生的意外版面位移（CLS）、難以辨識的商品摘要、行動裝置上隱藏的互動控制項、不易存取的數量選擇器，以及缺乏通往結帳的清晰心理路徑。此系統確保一致的樣式、流暢的微互動、版面穩定性，以及嚴格遵守 WCAG AA 無障礙規範。

使用案例

• 電子商務與直接面對消費者（DTC）入口網站： 使用持續性迷你購物車與專用結帳審查的高流量零售平台。
• B2B 與批發型錄訂單： 具有表格清單、多 SKU 選擇器與快速新增工具的批量訂購工作檯。
• 服務與體驗預訂引擎： 組織多日票券、預約、租賃附加項目或活動通行證。
• 軟體、SaaS 與數位商品捆綁器： 在最終付款結帳前，彙總授權、服務附加項目和訂閱層級。

何時不該使用

• 單一商品或一鍵結帳： 對於跳過購物車直接進入結帳的平台（例如 PDP 上的 Apple Pay），請使用 checkout-flow-optimization 與 product-detail-layout-system。
• 主要商品瀏覽： 若要展示商品卡片或清單結果，請使用 card-ui-system 與 filter-and-sort-system。
• 並排商品比較： 若要比較不同的方案或產品功能，請使用 comparison-matrix-system 或 pricing-table-ui-system。
• 批量商品 CSV 訂購： 對於高度專業化的表格管理輸入面板，請使用 data-table-ui-system。

輸入

1. 電子商務設計 Token： 全域字體比例、品牌色彩調色盤（主要 CTA、警示紅、成功綠）、流體間距比例與表面陰影高度。
2. 商品 SKU 後設資料： 圖片長寬比規則、標題限制、變體字串（例如「顏色：曜石黑 / 尺寸：L」）、單價與特價/折扣狀態。
3. 物流與邏輯設定： 免運門檻、優惠券代碼規則、運費估算與數量限制。
4. 交叉銷售型錄資料： 根據目前購物車商品對應的推薦，以填充衝動購買模組。
5. 行動裝置檢視區邊界： 裝置尺寸、觸控點擊目標指南與環境安全區域限制。

輸出

1. 滑出式迷你購物車抽屜（側邊滑出面板）： 用於快速購物車總覽與行動優先快速結帳的元件級網格藍圖。
2. 專用購物車頁面（全頁網格）： 用於深入審查的空間性兩欄式佈局（主購物車清單 + 訂單摘要側邊欄）。
3. 購物車明細列架構： 單一列中關於間距、佈局、互動式數量控制項與刪除元素的詳細規格。
4. 免運費與促銷進度條： 顯示即時回饋與動態訊息門檻的空間佈局。
5. 無障礙路由與螢幕閱讀器規格： 關於焦點陷阱、鍵盤 Tab 順序、巡迴 tabindex、aria-live 宣告與觸控目標規則的詳細指南。

---

工作流程

1. 定義空間機制：迷你購物車抽屜 vs. 專用購物車頁面

一個優化的設計必須根據螢幕尺寸與情境支援兩種高影響力的視覺格式：

• 迷你購物車抽屜（桌機與行動裝置）： 從右側滑入，在桌機上覆蓋螢幕右側 400px–460px 的寬度，在行動裝置上則覆蓋 100% 的螢幕寬度。它疊加在主檢視區之上，背後帶有半透明背景（background: rgba(0,0,0,0.5)）。使用彈性佈局將抽屜劃分為三個固定區域：
  • 頁首（固定高度）： 購物車標題（含數量）、關閉按鈕（✕）與免運費進度追蹤器。
  • 可滾動的明細清單（Flex grow/自動滾動）： 已新增商品的清單（overflow-y: auto;）。
  • 頁尾（固定高度，吸附底部）： 小計、稅金/運費通知、促銷訊息與突出的結帳 CTA。
• 專用購物車頁面（桌機 >1024px）： 使用不對稱的兩欄式佈局網格：
  • 左欄（佔比 60–65%）： 包含整潔、靠左對齊的購物車明細清單檢視（類似表格），包括批量移除操作與空狀態。
  • 右欄（佔比 35–40%）： 容納固定的訂單摘要卡片（position: sticky; top: var(--header-height);），包含小計計算、預估運費、優惠券代碼輸入、動態付款徽章以及主要結帳按鈕。

2. 設計購物車明細列架構

購物車中的每一列都代表一個微小的層級結構。在一個 100% 寬度的容器內，使用 CSS Flexbox 或 Grid 標準化佈局流程：

+-------------------------------------------------------------+
| [縮圖]       [商品標題]                         [刪除 X]    |
| (64x64px)    尺寸：M / 顏色：藍色                            |
|                                                             |
|              [-] [ 1 ] [+]                     [價格]       |
|              （數量輸入）                       $120.00      |
+-------------------------------------------------------------+

• 商品縮圖： 使用具有 border-radius: var(--radius-s) 與 object-fit: cover; 的緊湊固定長寬比容器（64x64px 至多 96x96px）來錨定。確保備用文字存在且具描述性（例如 alt="海軍藍羊毛外套"）。
• 後設資料堆疊： 包含以下項目的標準垂直佈局：
  • 標題：粗體、中性深色，連結至 PDP。
  • 變體屬性：淺灰色、較小字型（例如 12px/0.75rem）。
  • 單價：若為單一商品則較不明顯，但若數量 > 1 則需強調。
• 可存取的數量選擇器： 確保按鈕大於一般文字。將數值輸入框包裹在平坦的視覺邊框中。
  • 減少按鈕（-）、數量輸入框（文字或數字）、增加按鈕（+）。
  • 確保當數量為 1 時，減少按鈕會轉變為可見的垃圾桶刪除圖示，表示點擊它將從購物車中移除該商品。
• 列價格： 對齊列的右下角。如果商品有折扣，請將原始劃掉的價格以淺灰色顯示，緊鄰有效的特價（以高對比度的紅色或品牌粗體顯示）。
• 刪除按鈕： 放置在列的右上角。使用明確的 aria-label="從購物車中移除 [商品名稱]" 以防止螢幕閱讀器僅朗讀「按鈕」或「X」。

3. 建立免運費與促銷進度引擎

透過給予使用者關於物流目標的即時回饋，鼓勵更高的平均訂單價值（AOV）：

• 視覺進度條： 使用水平容器（height: 8px），兩端為圓角，樣式為淺灰色，當使用者的小計接近目標時，使用明亮的強調色（例如綠色、藍色）從左到右填充。
• 動態微文案： 在進度條上方或下方撰寫清晰、以行動驅動的訊息：
  • 低於門檻時： 您還差 $15.00 即可享有 免運費！[再加購]
  • 超過門檻時： 🎉 恭喜！ 您已解鎖 免運費！
• 佈局位置： 將進度引擎放置在迷你購物車抽屜和主要購物車頁面的最頂端，使其在摺疊上方保持可見。

4. 最佳化結帳 CTA 與訂單摘要頁尾

結帳錨點是購物車體驗的焦點。確保它讀起來像一個堅實、值得信賴的區塊：

• 計算清單： 使用具有清晰點線引導或對齊網格的鍵值清單佈局，呈現小計、已套用的折扣（綠色文字並帶有促銷代碼徽章，例如 SUMMER20 [x]）、預估運費（或「結帳時計算」）以及最終的預估總計。
• 主要結帳按鈕： 高對比度、全寬（100%）、粗體排版。點擊時必須顯示清晰的載入指示器（例如將標籤文字「安全結帳」轉換為旋轉圖示），以防止重複點擊。
• 支援的付款徽章： 直接在結帳按鈕下方放置灰階或標準色彩的付款圖示徽章（Visa、Mastercard、Amex、PayPal、Apple Pay、Klarna），以建立信任。

5. 建立響應式流體佈局適應

購物車在行動裝置上被大量使用。以極高的精確度設計斷點：

• 迷你購車行動覆蓋層： 在視口寬度 <768px 時，強制迷你購物車橫跨 100vw。將關閉觸發器明確放置在一個大型、易於點擊的左上角或右上角目標。
• 購物車頁面明細列堆疊： 在行動視口上，水平列會摺疊：
  • 商品縮圖和標題並排。
  • 數量選擇器和價格摺疊到標題下方，數量靠左對齊，價格在同一水平軸上靠右對齊。
• 固定行動結帳抽屜： 在行動購物車頁面上，實作一個固定的底部頁尾，將小計和結帳 CTA 安全地固定在瀏覽器 UI 元素上方，並利用 padding-bottom: env(safe-area-inset-bottom);。

6. 建立鍵盤焦點路由與 ARIA 即時觸發器

一個不可存取的購物車會阻礙螢幕閱讀器和僅使用鍵盤的使用者完成購買。

• 迷你購物車焦點陷阱： 當迷你購物車抽屜開啟時：
  1. 立即將焦點觸發到第一個可互動元素（通常是關閉按鈕或頂部商品標題）。
  2. 實作焦點陷阱，防止使用者跳轉到位於背景後面的元素。
  3. 捕捉 Escape 鍵（Esc）以關閉抽屜。將焦點乾淨地返回到最初開啟購物車的觸發按鈕（例如頁首購物車圖示）。
• 動態宣告（aria-live）： 切換數量、刪除商品或套用優惠券時，必須透過一個不可見的 aria-live="polite" 元素立即傳達更新。螢幕閱讀器應宣告：「曜石黑外套數量更新為二。小計更新為兩百四十美元。」
• 焦點環： 避免標準瀏覽器輪廓；在購物車中的所有互動控制項周圍實作一個自訂、高對比度、未裁剪的焦點指示環。

---

決策規則

專用購物車頁面 vs. 迷你購物車抽屜觸發條件

觸發事件	最佳 UX 回應模式	設計理由
使用者從 PDP 新增商品	滑出開啟迷你購物車抽屜	確認成功加入購物車，即時更新小計，提供立即回饋，但讓使用者留在 PDP 上繼續購物。
使用者點擊全域購物車頁首圖示	切換迷你購物車抽屜（若商品數量 > 0）/ 導航至購物車頁面（可選）	快速存取以編輯商品清單，無需載入新頁面。如果型錄非常複雜（例如數百個 B2B 零件），則直接導航至專用購物車頁面。
購物車為空（0 項商品）	顯示行內空狀態與 CTA	不要顯示空白頁面或關閉抽屜，而是呈現清晰的訊息（例如「您的購物車目前是空的」），並附上 3–4 個有針對性、基於類別的主要購物連結。

數量輸入樣式選擇

介面樣式	使用案例應用	設計理由
按鈕步進器 [-] [ 1 ] [+]	DTC、零售、服飾、標準電子商務	行動裝置上最簡單的單擊互動，防止輸入錯誤，簡單的增量操作。
原生文字輸入欄位	大量 B2B 型錄訂購單、批發數量	允許使用者直接輸入較大的任意數字（例如 150），而無需點擊 150 次。
標準選取下拉選單 (數量: 1) v	高價商品、電子產品、單一數量限制訂閱	將購買限制在預設的數量範圍內（例如最多 10 個），並防止未處理的高數量庫存請求。

---

約束條件

• 無障礙（WCAG AA 最低標準）：
  • SC 2.4.7 焦點可見： 購物車抽屜必須在關閉按鈕、標題錨點、步進器和輸入欄位上保持高度可見的焦點輪廓。
  • SC 2.5.8 目標尺寸： 數量增加（+）和減少（-）按鈕、刪除垃圾桶以及促銷移除連結的點擊目標，在桌機上必須至少為 24x24px，在行動視埠上必須至少為 44x44px。
  • SC 1.1.1 非文字內容： 每個圖片必須有清晰的替代文字。空狀態內的裝飾性背景必須被忽略（role="presentation" 或 alt=""）。
• 累計版面位移（CLS）預防：
  • 標準化明細列高度，或在載入狀態期間保留最小的骨架狀態高度。
  • 動態促銷計算不得將結帳 CTA 按鈕推出螢幕外或導致突然的摺疊。
• 動態覆蓋層滾動鎖定：
  • 開啟迷你購物車抽屜覆蓋層時，必須鎖定主要 body 元素的背景滾動（將 overflow: hidden; 套用至 <body>）。這可以防止雙重滾動和跳躍的導航偽影。

---

常見失敗模式

• 幽靈購物車關閉： 關閉抽屜或點擊其外部會完全重置焦點索引，將鍵盤使用者丟回底層頁面的最頂端，迫使他們重新跳轉所有內容。
• 神秘的刪除目標： 將垃圾桶圖示或「X」刪除觸發器設計為未標籤的文字符號，導致螢幕閱讀器輸出「按鈕」或「未標籤按鈕」，使使用者無法修剪其購物車。
• 滯後的更新漂移： 在點擊 + 與更新價格之間允許延遲，而未顯示載入旋轉圖示。如果使用者快速點擊 + 三次，價格會落後於操作，導致總計不準確。
• 被封鎖的行動鍵盤： 將優惠券輸入框置中放在專用購物車頁面上，當行動裝置的鍵盤彈出時，該佈局堆疊可能會完全被遮擋或推出可見螢幕之外。