定價表格 UI 系統
目的
定價表格 UI 系統提供一套方法論，用於設計定價層級的視覺與結構組織。它確保使用者能輕鬆比較方案、理解價值差異，並在沒有認知負擔的情況下選擇合適的選項。此系統專注於層級的空間排列、功能的階層結構，以及支援購買決策的互動功能（例如帳單切換器）。
使用案例
- 為 SaaS 應用程式設計訂閱方案網格。
- 結構化分層服務（例如，代理商套裝方案）的產品組合。
- 為實體產品組合建立比較矩陣。
- 在跨產品公司中標準化定價佈局。
- 實作在手機上仍能保持脈絡的響應式定價「卡片」。
何時不應使用
- 單一產品電子商務： 對於沒有競爭層級的單一商品，請使用
product-page-optimization。 - 純企業自定義報價： 如果每個價格都是「聯絡我們」，請專注於潛在客戶表單設計。
- 純資料比較： 若需比較 10 個以上項目的技術規格，請使用
data-table-ui-system。 - 動態/拍賣定價： 當價格由競標或即時市場波動決定時。
輸入
- 方案層級： 每個層級的名稱、價格和目標受眾。
- 功能清單： 一份全面的功能列表，並按優先級分類。
- 帳單週期： 月繳與年繳的選項及相關折扣。
- 主要目標方案： 哪個方案是「金髮姑娘」或「最佳價值」選項？
- 品牌風格代幣： 來自父系統的間距、排版和顏色比例。
輸出
- 定價網格結構： 層級卡片的定義（標頭、價格、功能、CTA）。
- 帳單切換規格： 用於在不同付款條件之間切換的設計。
- 功能比較邏輯： 定義功能如何跨層級顯示、隱藏或摘要的規則。
- 層級突出策略： 用於強調推薦方案的視覺方法。
- 響應式堆疊計劃： 網格如何適應行動裝置視口。
工作流程
1. 結構化層級解剖結構
將 visual-hierarchy-system 應用於個別定價卡片：
- 標頭： 方案名稱和簡短價值主張（例如，「適用於成長中的團隊」）。
- 價格區塊： 貨幣、金額和時間間隔（例如，「/月」）。確保金額是最突出的元素。
- 功能列表： 最重要的 5-7 項功能。
- CTA： 一個高對比度的按鈕，用於選擇方案。
2. 設計「錨定」層級（突出顯示）
識別主要方案並使其在視覺上佔主導地位：
- 高度： 使用微妙的陰影或邊框使其「凸顯」。
- 顏色： 為標頭或 CTA 按鈕使用品牌色。
- 徽章： 添加「最受歡迎」或「最佳價值」的緞帶/徽章。
- 比例： 與相鄰卡片相比，略微增加此卡片的高度。
3. 建立帳單邏輯
設計用於在帳單週期之間切換的機制（例如，月繳 vs. 年繳）：
- 切換器： 使用清晰的開關或分頁界面。
- 折扣提示： 在年繳選項附近清楚陳述節省金額（例如，「省 20%」）。
- 情境定價： 確保切換開關時，卡片中的價格會立即更新。
4. 管理功能比較
組織功能以防止「文字牆」：
- 主要功能： 將獨特的價值驅動因素列在頂部。
- 功能分組： 如果列表很長，將相似功能分組（例如，「支援」、「安全」）。
- 勾號 vs. 文字： 對於二元功能（是/否）使用圖示，對於限制（例如，「最多 10 個使用者」）使用文字。
- 「顯示全部」連結： 對於複雜的層級，保持卡片簡潔，並在下方提供一個連結到完整的比較表格。
5. 定義響應式堆疊
規劃網格在小螢幕上如何收合：
- 水平滾動 vs. 垂直堆疊： 在手機上，垂直堆疊層級以確保可讀性。
- 固定標頭： 對於垂直堆疊，考慮使用一個固定列，讓使用者捲動功能時，方案名稱和價格仍保持可見。
- 方案比較模式： 在手機上，如果垂直堆疊太長，允許使用者「滑動」切換不同層級以進行水平比較。
- 容器查詢： 對於層級卡片本身，偏好使用容器查詢而非視口中斷點，因為定價網格通常嵌入在不同寬度的上下文中（例如，首頁區塊 vs. 完整的定價頁面）。
決策規則
- 三層級的力量： 三個層級（例如，基本版、專業版、企業版）是減少選擇麻痺的最佳數量。
- 價格顯著性： 價格應該是僅次於「最佳價值」徽章的第二顯著元素。
- 一致的 CTA： 所有層級的 CTA 按鈕應位於相同的垂直位置（通常對齊卡片底部）。
- 「無隱藏條款」規則： 始終在價格附近顯示帳單頻率（例如，「每月 $29，按年計費」）。
- 二元清晰度： 對於包含的功能，使用清晰、高對比的勾號；對於排除的功能，使用淡化的「X」或直接省略，以避免負面視覺干擾。
限制
- 無障礙性： 切換器必須可透過鍵盤操作，並透過
aria-checked或aria-pressed公開其狀態。價格文字必須滿足 WCAG AA 對比度（4.5:1），所有互動目標（切換器、CTA 按鈕）必須滿足 WCAG 2.2 24x24px 最小目標尺寸（2.5.8）。 - 響應式： 定價卡片決不能有固定寬度；它們應在
responsive-grid-system內是流動的。 - 貨幣支援： 設計應考慮不同的貨幣符號長度（例如，「$10」對比「1,000 kr」），並使用邏輯 CSS 屬性（
margin-inline、padding-inline），以便佈局能正確適應 RTL 語言環境。
常見失敗模式
- 功能過載： 在單張卡片中列出 20 多項功能，使其無法快速瀏覽。
- 隱形切換器： 帳單週期切換開關太小，使用者沒有意識到他們可以獲得折扣。
- 「浮動 CTA」： 按鈕未跨卡片對齊，使網格看起來雜亂無章。
- 模糊定價： 直到結帳時才說明價格是按使用者計算還是固定費用。
- 缺乏層級區分： 方案看起來非常相似，使用者不知道該選擇哪一個。
驗證標準
- 層級之間存在清晰的視覺層次（推薦層級已突出顯示）。
- 價格是僅次於層級名稱的最顯著元素。
- 帳單切換器清晰可見，並能即時更新價格。
- 每張卡片的功能限制在最重要的 5-7 項。
- CTA 按鈕在網格中的所有卡片上水平對齊。
- 行動裝置檢視時，卡片會垂直堆疊或提供可存取的滑動模式。
- 所有互動元素（切換器、按鈕）都可透過鍵盤操作。
- 價格和徽章的對比度符合 WCAG AA 標準。