產品詳細資料版面系統 是做什麼的？
目的
產品詳細資料版面系統提供一個標準化、高效能的視覺與空間框架，用於建構電子商務產品詳細頁面 (PDP)。產品詳細頁面是任何電子商務或直接面對消費者 (DTC) 網站的關鍵轉換引擎。它需要在一個統一、易於掃描且完全無障礙的介面中，平衡豐富媒體、多變體配置器、動態定價模型、信任信號與主要行動呼籲 (CTA)。
系統化方法能夠解決常見的設計摩擦點，例如對齊不當的購買網格（「購買框」）、令人困惑的媒體輪播、變體切換時的版面位移 (CLS)、隱藏的行動購買觸發器，以及自訂選擇器上的關鍵無障礙障礙。此系統在行銷呈現與技術實作之間搭建橋樑，確保頁面穩定載入並驅動最高轉換率，同時嚴格遵守 WCAG AA 標準。
使用案例
- B2C 與直接面對消費者 (DTC) 電子商務： 為實體商品、服飾、化妝品或電子產品設計高度精緻的產品頁面。
- 數位產品與訂閱銷售： 在軟體、會員或服務登陸頁面上組織功能亮點、層級選擇器與付款結帳流程。
- 工業與 B2B 型錄頁面： 建構結構複雜、規格繁多的硬體零件頁面，並包含可下載的示意圖與報價生成器。
- 市集詳細資料檢視： 標準化多供應商列表（房地產、旅遊預訂、點對點銷售）的版面網格。
何時不應使用
- SaaS 方案比較登陸頁面： 如需並排比較不同的訂閱方案，請使用
pricing-table-ui-system或comparison-matrix-system。 - 主要產品探索 (PLP)： 如需瀏覽型錄或搜尋結果列表，請使用
card-ui-system及filter-and-sort-system。 - 簡單的潛在客戶捕獲或表單： 如需基本的聯絡表單、電子報或單步驟註冊，請使用
form-design-system。 - 編輯與部落格內容： 如需敘事性故事、電子報或純文字欄位，請使用
article-layout-system。
輸入
- 內容與資產清單： 高解析度產品圖片/影片（長寬比、縮放需求）、規格、評論、價格結構與信譽保證。
- 變體矩陣複雜度： 選項數量（例如顏色、尺寸、材質）以及依賴關係的存在性（例如「L 尺寸僅提供黑色」）。
- 字體排印與間距比例： 相對尺寸比例與流體間距記號（來自
fluid-typography-system及fluid-spacing-system）。 - 層級與色彩記號： 品牌強調色、狀態色調（促銷、警告、缺貨）、表面層級以及啟用/焦點/懸停狀態（來自
accessible-color-system及elevation-and-depth-system）。 - 行動裝置視埠限制： 視埠邊界與裝置瀏海（特別是 iOS 主畫面指示器與瀏覽器選單列）。
輸出
- 雙窗格空間藍圖： 將畫面分割為左側高影響力媒體面板與右側易於掃描的購買配置器面板（購買框）的結構化網格。
- 響應式堆疊與流程規則： 說明版面如何收合為行動裝置最佳垂直堆疊的轉換規格。
- 行動裝置固定購買抽屜： 在行動裝置視埠上、超過主要 CTA 摺疊處時，持續顯示的視埠固定購買列的規格。
- 互動式色樣與選擇器結構： 尺寸按鈕、顏色色樣與數量計數器的元件層級設計。
- Aria live 與鍵盤規格： 清晰的鍵盤頁籤路徑、循環 tabindex、焦點保留以及螢幕報讀器合規的狀態宣告觸發器。
工作流程
1. 建立雙窗格空間版面（桌面 >1024px）
使用 2 欄 CSS Grid 或 Flexbox 佈局來建構桌面檢視，按比例分割：
- 左欄：媒體面板（佔 50–55%）： 顯示高傳真度的視覺產品資產。為防止使用者在長時間滾動時失去購買上下文，請將父欄設置為
align-items: start;，並使媒體容器固定：position: sticky; top: calc(var(--global-header-height) + var(--space-m));。 - 右欄：購買配置器 / 購買框（佔 45–50%）： 容納所有後設資料與交易控制項。將其保持在單一垂直欄中，並建立從上到下讀取的清晰層級。
- 網格間距： 維持寬敞的視覺間距（例如
gap: clamp(24px, 4vw, 48px)），以保持媒體與控制項相互區隔但統一。
2. 設計購買配置器（購買框）的視覺層級
沿著購買框欄套用「F 型」閱讀流程。邏輯性地排列元素：
- 麵包屑與類別指示器： 頂部的小型、低對比文字（例如「商店 > 戶外 > 夾克」）提供上下文。
- 產品標題： 使用
h1的主要標題，樣式為font-size: clamp(1.75rem, 3.5vw, 2.5rem)並使用粗體。 - 社會證明摘要： 星級評分區塊，顯示平均評分與可向下滾動至評論區塊（例如「★ ★ ★ ★ ☆ (128 條評論)」）的活動文字連結。
- 定價引擎區塊： 高度可見的定價。粗體的有效價格、較小的刪除線原價（若在促銷中），以及清晰的彩色促銷徽章（例如「節省 $20」）。立即在下方放置分期付款訊息（例如「或使用 Klarna 支付 4 期，每期 $25」）。
- 變體配置器： 尺寸、顏色色樣或材料。使用一致的標籤標題與間距（例如
margin-bottom: var(--space-m)）。 - 庫存與運送保證： 在變體附近放置微妙的即時庫存警示（例如「● 僅剩 3 件庫存 - 明天出貨」）。
- 主要購買 CTA： 突出、高對比度的「加入購物車」或「立即購買」按鈕，橫跨購買框的整個寬度。
- 信任徽章與退貨政策： 高度可見的圖示/文字群組（例如「✓ 免運費」、「✓ 30 天退貨」），直接置於主要 CTA 下方，以盡量減少購買阻力。
3. 建構左側媒體畫廊
組織圖片以確保導航快速、輕量且保持版面穩定性：
- 主顯示容器： 將活動圖片錨定在一個具有固定長寬比（通常為
1:1正方形或3:4縱向），使用aspect-ratio: 1 / 1; object-fit: cover;的容器中。這可以防止載入尺寸略有不同的圖片時發生累積版面位移 (CLS)。 - 縮圖導航： 在主圖片下方水平堆疊（或垂直堆疊在左側）支援性縮圖。確保活動縮圖具有高對比度邊框與
aria-current="true"。 - 放大/縮小觸發器： 在活動圖片的右下角包含一個微妙的縮放圖示。觸發它將開啟一個全螢幕、可滑動的 modal 燈箱 (
image-gallery-and-lightbox-system)。
4. 建立行動裝置堆疊與行動裝置固定購買抽屜 (<768px)
在行動裝置螢幕上，標準的多欄版面會失效。套用以下適應規則：
- 線性垂直流程： 將頁面收合為單欄堆疊。將媒體畫廊置於最頂端（全寬或略微內縮），緊接著是產品標題、價格、變體配置器、CTA，然後是詳細規格。
- 行動裝置固定購買抽屜： 由於主要 CTA 在行動裝置上會快速滾出螢幕，請實作一個固定於底部的結帳抽屜：
- 當內嵌 CTA 在螢幕上可見時，保持抽屜隱藏。
- 一旦使用者將內嵌 CTA 滾出視線（滾動閾值 > 600px），滑出一個緊湊的固定底部列，包含：[產品縮圖 + 標題]（在小視埠上可選/折疊）、[價格] 以及一個橫跨該列右半部的 [主要加入購物車 CTA]。
- 使用
padding-bottom: env(safe-area-inset-bottom);以尊重行動裝置的滑動區域並防止與系統控制項重疊。
5. 標準化自訂色樣與變體選擇器互動
自訂選擇器（例如顏色圓圈或按鈕矩陣）必須看起來精緻並乾淨地互動：
- 視覺色樣： 顏色圓圈在桌面上必須至少為
32x32px，在行動裝置上為40x40px。活動色樣由一個外部同心邊框環指示（在顏色圓圈與邊框之間留下 2px 的白色間隙）。 - 尺寸按鈕： 使用圓角藥丸輪廓表示尺寸（例如「S」、「M」、「L」）。劃掉並調暗不可用的尺寸（例如透明度
0.4並加上對角線斜線），但保持其可聚焦，以便螢幕報讀器可以宣告「尺寸 S - 缺貨」。 - 動態回饋： 切換色樣時必須即時更新可見的價格、庫存通知與主圖片畫廊，而不需重新整理整個頁面。
6. 設計鍵盤導航與螢幕報讀器無障礙性
自訂配置器是常見的無障礙失敗點。套用以下嚴格指引：
- 語意化色樣選擇： 使用標準的
<input type="radio">包裹在<label>標籤中來實作色樣，樣式上隱藏原生輸入但保持其完全可存取。這保證了原生的方向鍵導航、自動的 radio 分組以及鍵盤焦點狀態。 - Aria Live 宣告： 當使用者選擇色樣或變體時，使用一個隱藏的
aria-live="polite"div 向螢幕報讀器宣告更新（例如「已選擇顏色：深紅色。價格已更新為九十九美元。有庫存。」）。 - 跳過連結與上下文錨點： 確保「評分星級評論」連結具有可見的焦點環，並使用
tabindex="-1"在目標位置將鍵盤焦點平順地向下滾動至評論區塊 (#reviews)。
決策規則
色樣樣式選擇
| 選項數量 | 推薦的 UI 選擇器模式 | 設計理由 |
|---|---|---|
| 2 - 5 個選項（例如紅、藍、綠） | 視覺藥丸按鈕或色樣 | 即時可見性、低認知負荷、易於單擊的目標。 |
| 6 - 15 個選項（例如 10 個鞋子尺寸） | 自適應 Flex 網格矩陣 | 緊湊分組，可整齊地放入購買框欄中，無需長時間滾動。 |
| 16 個以上選項（例如 50 個裝置型號） | 帶搜尋功能的自訂選擇選單 | 防止視覺混亂與令人不知所措的「選擇癱瘓」版面區塊。 |
版面分割（桌面與平板視埠）
- 桌面 (>1024px)： 2 欄網格（左側媒體固定，右側配置器滾動）。
- 平板 (768px - 1023px)： 重新評估欄寬。若變體配置器包含密集的矩陣輸入，則切換為 50/50 分割，或提前將版面收合為單欄堆疊，並使用簡化的左對齊容器。
- 行動裝置 (<768px)： 嚴格的 1 欄堆疊。滾動時觸發活動的「行動裝置固定購買抽屜」。
價格呈現策略
- 促銷呈現： 使用高對比度的紅色或品牌粗體（最小 24px/
1.5rem）呈現活動的促銷價格。在其旁邊使用較低的對比度呈現刪除線原價 (MSRP)，並包含一個緊湊的實心填充藥丸徽章，指示節省金額（例如「節省 $30」或「-25%」），以最大化感知價值。 - 標準呈現： 使用粗體的中性深色/中性淺色（與主要主體標題顏色匹配）呈現活動價格。
限制條件
- 無障礙性 (WCAG AA 最低要求)：
- SC 2.4.11 焦點未被遮蓋： 確保可聚焦的變體藥丸或數量按鈕絕不被固定標頭或行動裝置底部購買抽屜遮蓋。適當地使用全域性的
scroll-margin-top與scroll-margin-bottom。 - SC 2.5.8 目標尺寸： 每個變體選擇器、色樣泡泡與數量增減觸發器（
+/-）必須提供至少 24x24px 且具有清晰間隔的點按目標，而在觸控螢幕上則需 44x44px。 - 對比度 AA： 主要文字、價格與選取的邊框狀態必須維持至少 4.5:1 的對比度。顏色色樣圓圈必須有伴隨的文字標籤（相鄰或作為可存取的 tooltip/螢幕報讀器文字），以防止僅依賴顏色（SC 1.4.1 使用顏色）。
- SC 2.4.11 焦點未被遮蓋： 確保可聚焦的變體藥丸或數量按鈕絕不被固定標頭或行動裝置底部購買抽屜遮蓋。適當地使用全域性的
- 累積版面位移 (CLS) 保護：
- 始終為產品標題、圖片容器與動態通知框預留空間。必須使用骨架狀態 (
skeleton-state-system) 或明確尺寸，以防止在動態評論或庫存計數器載入時內容跳動。
- 始終為產品標題、圖片容器與動態通知框預留空間。必須使用骨架狀態 (
- 動態視埠高度： 行動裝置固定購買抽屜必須尊重環境安全區域 (
env(safe-area-inset-bottom))，以確保實體主畫面滑動按鈕不會與主要結帳 CTA 衝突。
常見失敗模式
- 「錯位購買框」位移： 尺寸或顏色變體按鈕根據產品而有不同的換行，導致主要「加入購物車」CTA 上下跳動。
- 僅依賴顏色的盲點： 使用未標籤的彩色圓圈作為色樣。色盲使用者無法區分綠色與棕色色樣，且螢幕報讀器只會讀出「顏色按鈕」，除非有關聯的明確標籤文字。
- 行動裝置虛擬鍵盤遮擋： 將固定底部列放置在行動裝置螢幕上，當行動裝置虛擬鍵盤展開時，會遮擋或重疊表單欄位，導致使用者被困住。
- 圖片長寬比跳動： 未在主畫廊顯示器中宣告明確的長寬比，導致使用者在切換橫向與縱向產品圖片時，整個版面欄位收縮與展開。
- 雙捲軸鎖定： 將固定左欄設定得太高或讓其溢出，導致左欄在一個小視窗內獨立滾動，並在相鄰位置產生雙捲軸。
驗證準則
- 雙窗格設定： 桌面版面具有固定的左側媒體欄與可滾動的右側購買框欄，並有清晰的 1px 邊框或明確的空白分隔。
- 線性行動裝置級聯： 行動裝置視埠將網格收合為單欄堆疊。
…
[為翻譯內容截斷]