定價頁是意圖最強的一頁，卻最少被設計
Nielsen Norman Group 的 B2B 使用性研究講得很直白：價格是使用者在網站上「最需要的第一資訊」，看不到價格的受測者會直接離開，轉去有標價的競爭對手（NN/g: State the Price）。2026 年棘手的不是「要不要標價」，而是方案本身變複雜了——版型決定使用者看不看得懂你在賣什麼。
五個真的在線上的定價頁
- SHOPLINE 台灣：四張卡片配一組「平均月費 ↔ 年繳價格」切換，方案為 NT$40,000／55,000／68,000／88,000（年繳），每張卡掛原價劃線（NT$246,000 折到 NT$88,000），一次性開通費 NT$5,000 與每月 GMV 抽成寫在卡片內，下方接依模組分群的長對照表。「熱門推薦」徽章掛在最高階方案，不是中間那張（方案費用頁）。
- Basecamp：不用功能分級，改用「兩種計價方式」兩張卡——Plus 每人每月 US$15，Pro Unlimited 不限人數 US$299／月（年繳），平衡點約 20 人。問題從「我需要哪些功能」變成「我們有幾個人」。
- Linear：Free／Basic US$10／Business US$16／Enterprise 洽詢，公開頁只給年繳單價，把「省下多少」寫進預設狀態。
- Figma：2025 年把「每個產品各買一種席次」改成 Full／Dev／Collab／View 四種席次（Professional 年繳 US$15／12／3），版型從一維階梯變成「方案 × 席次」二維矩陣（官方說明）。
- Vercel：行銷定價頁與技術參考頁分兩層，Docs 的 Pricing 頁單獨列出 Team seat US$20／月、SAML US$300／月、Observability Plus 每百萬事件 US$1.20、build 每 CPU 分鐘 US$0.0035。行銷頁負責選擇，文件頁負責試算。
設計背後的邏輯：5 個選項是一道門檻
NN/g 的比較表研究指出，人在 5 個以內的選項才會做「補償式決策」（逐項權衡）；一旦超過就退回「非補償式決策」，用單一條件——通常是價格——砍掉其他選項。方案排到第六個，你不是給更多選擇，是把使用者推回只看數字。
第二層是誘餌效應（asymmetric dominance，Huber、Payne 與 Puto 1982 年提出）。Dan Ariely 用《經濟學人》訂閱做的實驗最常被引用：兩個選項時 68% 的學生選較便宜的網頁版，加入「印刷版單買＝網頁＋印刷同價」的誘餌後，84% 轉向組合方案。SHOPLINE 的原價劃線與 Linear 的年繳單價，都是這個錨定機制的變形。
第三層是 NN/g 常被忽略的一條：定價複雜時寧可給「典型情境的範例價」，也不要丟一台計算機——多數價格計算器耗時又容易填錯，只有極少數高度投入的客戶願意填完。
技術成本：工時、DOM、CLS 與 SEO
- 工時：三張卡片的靜態定價頁（含 RWD 與月／年切換）設計加前端約 12–20 小時；加一張 60 列以上、含 sticky 表頭與行動版轉標籤的對照表再吃 16–28 小時；價格要與金流方案自動同步再加 8–16 小時。
- DOM：4 個方案 × 80 列 = 320 個儲存格，節點輕鬆破千，中低階手機的版面計算明顯變慢。這張表通常是定價頁最大的效能負債，不是圖片。
- CLS：月／年切換最常見的錯誤是價格字數改變導致卡片高度跳動。Core Web Vitals 要求 CLS 在第 75 百分位維持 0.1 以下，Google 內部測試指出 0.15 以上會被普遍感知為干擾。解法很便宜：價格容器寫死最小高度，或用 CSS grid 固定軌道。
- SEO：價格用 JS 延後渲染、或藏在「聯絡我們」後面，等於把全站最值錢的一段文字移出索引；AI 搜尋想引用你的價格時，只能引用第三方整理的過期數字。
適合 vs 不適合的行業
| 適合公開方案版型 | 不適合／要改法 |
|---|---|
| SaaS、訂閱制軟體、開店平台 | 完全客製報價的專案型（接案、系統整合、營造） |
| 線上課程、會員制、社群訂閱 | 醫療與醫美（法規限制刊登價格與療程比較） |
| 標準化服務包（維護月費、記帳、清潔） | B2B 大單需分級議價、須簽 NDA 才給價 |
| 健身房、補習班、才藝課程方案 | 原物料與浮動報價（匯率、期貨連動） |
右欄不是不能做定價頁，而是版型要換：三種典型情境的範例價加一個估價表單，比一張假的三欄卡片誠實得多。
怎麼套用到你的網站：六個步驟
- 步驟一：先決定分軸。功能分級、席次分型、用量計費，或 Basecamp 那種計價方式二選一。一張定價頁只能有一個主軸，兩個以上就變矩陣。
- 步驟二：把方案砍到 3–4 個。第五個以後移到「企業方案，洽詢」，這是投報率最高的一步。
- 步驟三：決定預設狀態。預設放你希望多數人買的那個，並把「省下多少」寫在切換旁邊，不要讓使用者自己乘 12。
- 步驟四：卡片只放 4–6 條決定買不買的差異。其餘搬到下方對照表，表頭 sticky，行動版轉標籤或手風琴。
- 步驟五：把隱藏費用寫進卡片內。開通費、抽成、超量計價、最短約期——放腳註等於沒寫，第一次請款就變客訴。
- 步驟六：量 CLS 與逐卡轉換。用 Chrome DevTools 的 Layout Shift Regions 檢查切換時的閃爍，並替每張卡的 CTA 加獨立事件。
上線前自我檢查：
- ☐ 方案數量 ≤ 4（不含企業洽詢）？
- ☐ 切換月／年時卡片高度完全不動？
- ☐ 所有一次性費用與抽成寫在卡片內？
- ☐ 對照表每個方案的欄位都有值？
- ☐ 行動版還能並排比較至少兩個方案？
- ☐ 價格文字在 HTML 原始碼裡就存在？
四個常見錯誤
- 方案越多越貼心。超過 5 個就把使用者推回非補償式決策。想服務更多情境，用一個「依人數／依營收」的推薦器，不要加卡片。
- 「最受歡迎」貼在最貴的方案。這個徽章是社會證明，不是行銷位；實際銷售分布對不上，第一次續約談判就會被拆穿。
- 對照表欄位不一致。NN/g 明講比較表最大的問題不是設計而是內容——缺漏欄位會讓整張表失效，還不如不做。
- 用計算機取代價格。除非客戶已在採購階段，否則計算機是勸退裝置。範例價放第一層，計算機放第二層。
延伸資源
- NN/g — Comparison Tables：欄列規範、sticky 表頭與行動版處理。
- NN/g — State the Price：B2B 該不該公開價格的實證依據。
- web.dev — Cumulative Layout Shift：切換元件造成版面跳動的量測與門檻。
- Vercel Docs — Pricing：用量型定價怎麼分層寫清楚的範本。
常見問題 FAQ
客製化報價的公司，定價頁該怎麼寫？
不要放假的三欄卡片。改成三個典型情境的範例價（例如「五頁形象官網 NT$18 萬起」），加一句變動因素說明，再接估價表單。NN/g 的研究顯示範例價足以安撫還在研究階段的潛在客戶，完全不標價則會直接流失到競爭對手。
三個方案還是四個方案比較好？
以「能不能一眼分辨差異」為準。NN/g 的門檻是 5 個以內才會逐項權衡，3–4 個都安全。該砍的是只差一個次要功能的方案，它不會增加成交，只會增加猶豫。
月繳／年繳切換，預設該顯示哪一個？
顯示你希望多數人買的那個，並把差額寫在切換旁邊。Linear 乾脆只給年繳單價，Basecamp 則同時列出年繳 US$299 與月繳 US$349，讓價差自己說話。
功能對照表在手機上怎麼處理？
不要整張隱藏。可行做法有三種：轉成每個方案一個標籤、轉成手風琴，或限制一次只並排兩個方案。NN/g 提醒標籤與清單無法支撐真正的並排比較，能保留兩欄就盡量保留。
想把定價頁重排一次？
如果你的方案頁是三年前排的、方案已經長到六個、或每次改價都要工程師動手，我們可以幫你重做一版：從分軸決策、卡片與對照表版型，到 CLS 與轉換事件量測，一次交付。歡迎直接聊聊：
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p