Divi 價目表設計教學：服務業者必學的定價展示

不少高單價服務業者會猶豫是否在網站上公開價目，擔心複雜服務被簡化成價格比較。是否公開仍要看服務能否標準化、法規與銷售流程；但只寫「來電洽詢」，也可能增加訪客判斷是否適合的成本。

核心重點：Divi 的 Pricing Table 模組不只用來列價格，也能協助訪客判斷方案是否符合需求與預算。這篇文章會從定價心理、欄位邏輯、視覺層次、手機排序一路談到按鈕去化路徑，並附上一份 30 分鐘價目表健檢清單。

重心會放在「為什麼這樣排」，至於「點哪一個按鈕」就交給介面教學，因為 Divi 的操作介面在 Divi 主題終極指南裡已經講得很完整。模組會不會幫你接單，關鍵從來在你懂不懂客人盯著那三欄時腦袋裡在算什麼，跟你會不會按按鈕關係不大。

價目表不是報價單，是一台預先篩選機器

很多人把價目表當成實體報價單的數位版，想著「就把方案、內容、價錢寫上去嘛」。這個出發點就錯了。報價單是你已經跟客人接觸之後才遞出去的文件，對方已經有一定的意願；價目表出現在客人還不認識你的那一刻，它的工作是把陌生訪客分成兩群：有預算而且意圖明確的人，以及只是逛逛的人。

當你把這個功能想清楚，很多設計爭議就會自動消失。例如「要不要秀價格」「要不要列細項」「要不要放比較表」，答案全部指向同一個原則：讓有預算的人愈快判斷「這家在我範圍內」愈好，讓沒預算的人愈快知道「這家不適合我」愈好。兩種人都要被照顧，但你要爭取的是前者。

這也是為什麼藏價格可能是一個昂貴的決定。當已經鎖定區域與服務類型的潛在客戶只看到「來電洽詢」，可能因為無法先確認預算範圍而離開。至少提供起步價、區間或影響報價的條件，通常比完全不提供線索更有助於篩選。這類詢問流程的漏接，可參考 網站沒人詢問的拆解思路。

「列價錢」跟「做決定」是兩件事

換句話說，客人在看你的價目表時，他不是在做「這個服務值多少錢」的判斷，他是在做「我要選哪一個方案」的判斷。這兩件事看起來像，其實完全不同。前者是絕對評估，後者是相對評估，而人類對相對評估的判斷速度遠快於絕對評估。

單一方案只適合選擇本來就很單純的服務；若方案確實有層級差異，並列選項能讓訪客做相對比較。不過三欄不是保證轉換的公式，方案數仍要配合實際產品、受眾與測試結果。你在 CTA 設計的底層心理會看到同一個邏輯：清楚交代選項與下一步，可降低決策時的不確定感。

三欄背後的定價邏輯：入門、招牌、溢價

服務業的價目表結構可簡化成一個三層模型：入門款、招牌款、溢價款。這不是新鮮事，但絕大多數人只抄了「三欄」這個表象，沒想過每一欄在整張表裡扮演的戰略角色。

欄位	戰略角色	定價區間	內容策略
入門款	降低接觸門檻，建立可信度	略低於市場均價，但不能賠本	只放核心交付項目，刻意拿掉「誘惑升級」的配備
招牌款（視覺推薦）	主力方案，也是你希望多數合適客戶選的	依成本、價值與市場定位設定	放齊目標客戶最常需要的內容
溢價款	讓招牌款顯得划算，順便接住頂端客	明顯高一階	加進限定、客製、優先權等非價格價值

這張表裡較容易被忽略的一格是「溢價款讓招牌款顯得划算」。較高價的選項可能形成價格錨點，讓其他方案更容易比較；但若溢價款只是刻意湊數、內容沒有真實價值，也可能傷害信任。是否保留應以實際銷售與點擊資料判斷。

入門款的角色同樣要小心拿捏。它的定價不能低到讓你做到虧本，內容也要能獨立解決一個明確需求，而不是故意做成難以使用的版本。招牌款則應清楚說明多付的費用換到哪些價值。

兩欄跟四欄，什麼時候才該用

三欄是常見的服務方案結構，但不是唯一解。當服務只有「做或不做」兩種本質，例如單一諮詢或單一健檢，兩欄可能更乾淨。四欄以上會增加比較負擔；若確實有四個以上方案，可先顯示主力方案，再提供完整比較或客製方案入口。

Divi Pricing Table 模組：每個欄位在做什麼

談完心理，回到工具。Divi 內建的 Pricing Table 模組，背後其實是一個 Parent（Pricing Tables 容器）加上多個 Child（單一 Pricing Table 欄位）的結構。你要先放容器，再在容器裡新增每一欄，這是新手最常卡住的第一步：很多人直接拉一個 Pricing Table 出來，然後找不到地方加第二欄。

每一欄子模組的關鍵欄位，依重要性可分為三層：

• 決策層（一定要寫好）：Title（方案名稱）、Price（價格）、Currency（貨幣符號與位置）、Button Text 與 Button URL（按鈕文字與連結）。這四項是客人在 3 秒內掃完的資訊。
• 說服層（差異化關鍵）：Subtitle（方案副標，實務上會拿來放一句價值主張，例如「適合剛創業的品牌」）、Content（功能清單，逐條列出）。
• 視覺層（用來引導視線）：Featured 設定（將該欄套用推薦樣式），以及背景、文字與邊框設定。

大多數人把心力花在視覺層，但真正決定轉換的是決策層與說服層。一個寫得精準的方案名稱與副標，勝過任何花俏的邊框。Divi 5 的視覺化編輯介面在這部分做了不少操作體驗的提升，Divi 5 介面的深度解析可以幫你少走冤枉路，這裡就不重複展開。

Featured 那個開關，是整個模組最值錢的設定

每個子欄位都有 Featured 設定（不同版本介面用詞可能不同）。啟用後，該欄會套用 Featured 樣式；若要顯示「最受歡迎」等文字，應在方案名稱、副標或自訂樣式中明確加入，不要假設模組會自動產生角標。通常只突出一個主方案，視覺指引會比較清楚。

實務上常見兩種極端錯誤：一是全部都不開，於是三欄平起平坐，客人沒有預設選項，認知負荷全開；二是每一欄都開，等於沒有推薦，客人反而覺得你在逼銷。記住一個原則：推薦是一種善意，不是壓力，給出唯一的推薦，客人會感謝你幫他做了決定。

設計一張會被點擊的價目表：視覺層次

視覺層次的目的，是讓訪客能快速找到主方案與行動按鈕。要達成這件事，不需要誇張的特效：招牌款在視覺上比左右兩欄重一點、推薦標示清楚但不刺眼、按鈕是整欄視覺重量最高的元素。

「重一點」是什麼意思？它可以是招牌款那一欄稍微高一點（多一行副標或一個角標撐出來的高度）、背景色比左右兩欄深一階、或加一道細邊框。這三招任選一招就夠，疊太多會變成雜訊。Divi 讓你針對 Featured 欄位單獨設定背景與邊框，這正是它該用的地方；把全部欄位都塗得花花綠綠，反而是對這個功能的誤用。

跟「重量」一樣重要但更常被漏掉的，是欄位之間的留白。三欄之間的間距太窄，會讓整張表顯得擁擠、廉價；間距適中、搭配一致的內邊距，整張表會立刻提升一個檔次，這是不花一毛錢就能拿到的質感。實務上的習慣是把欄位內邊距設到至少 24 到 32 像素，欄位之間的水平間距與內邊距保持同一個節奏，讓每一欄像一張獨立的小卡片，呼吸感出來了，方案內容才讀得進去。質感這件事，多半不是靠特效，而是靠留白與一致的節奏撐起來的。

用一個顏色貫穿主方案與按鈕

顏色是最容易被亂用的武器。最常見的失誤，是三欄各用一個顏色，把價目表變成彩虹。正確做法是：全站主色只給招牌款與它的按鈕，入門款與溢價款用中性色（灰、白、淺色邊框）。這樣一來，客人的眼睛會自動被主色吸過去，你完全不用寫「請選這個」這種話。

顏色不只是美學，也牽涉到可讀性。如果你想深入處理配色邏輯，可參考 色彩心理學的實戰拆解與網站配色計畫。價目表的招牌款可以沿用全站主色，但按鈕仍要與卡片背景保持足夠對比，不能只追求色彩一致。

按鈕文字要能預告點擊後會發生什麼。「立即預約」「索取報價」「選擇方案」通常比「了解更多」更具體；實際成效仍應用事件追蹤或測試確認。

價格數字的字體，決定它好不好讀

談完顏色，還有一個常被漏看的細節：價格數字的字體。多數人把價格用跟內文一樣的字體與字級呈現，結果一張價目表裡視覺最搶眼的居然是方案名稱，價格反而被淹沒。正確的層次是：方案名稱最大、價格數字次之但用粗體或較大字級突顯、功能清單回到內文大小。客人掃這張表的第一眼，應該同時接收到「這是什麼方案」與「多少錢」兩個訊號。

數字本身有個講究：盡量使用支援 tabular figures 的字型，這樣三欄價格的數字寬度一致，比較起來更輕鬆。Divi 可在模組的設計分頁調整字級、粗細與字距；字體配對與排版的基本觀念，可參考 排版設計實戰技巧。把價目頁縮到手機寬度檢查，如果價格數字不容易辨識，就要調整字級或對比。

對比同時牽動可讀性與無障礙。依 WCAG AA，一般文字的對比至少要 4.5:1，大型文字至少 3:1；不能只靠肉眼判斷深色背景配白字一定合格。多數瀏覽器的開發者工具都有對比檢測，可直接確認。

手機版上的價目表：三欄可能變成災難

桌面上的三欄並排，到了手機上往往會被擠成三個窄到難讀的小卡片，或被迫直向堆疊成超長的一長串。無論哪一種，都會破壞你在桌面上精心安排的比較結構。而手機流量有多重要，已經不需要爭論：Statista 的季度統計（2026 年 4 月）顯示，全球行動裝置上網流量在近幾年長期佔整體網站流量的過半比例，而且持續維持高檔。你的價目表如果只在桌面好看，等於只服務一半的客人。

手機版的兩個關鍵調整：第一，欄位要直向堆疊，避免橫向擠壓成窄條；第二，招牌款必須出現在第一個或第二個位置，不要被擠到最下面。很多人沒意識到，Divi 在手機上的堆疊順序，預設跟你桌面上的排列順序一致，所以如果你在桌面把招牌款放中間，到手機它就會卡在入門款下面，客人還沒滑到就先離開了。

解法有兩條路。輕量作法是調整桌面上欄位的排列，讓招牌款落在第一位（桌面視覺上仍可透過背景與角標把它推到中央焦點，但 DOM 順序放前面）。更完整的作法是針對手機單獨控制顯示順序，Divi 的行動版排序技巧可參考另一篇 手機版排序的兩步驟 CSS 解法，原理一模一樣，差別只在你要排序的對象是模組，層級比整個區段小一階。響應式觀念的基礎建議參考 RWD 響應式網頁設計的總論，這裡不重複。

除了排序，Divi 也能針對桌面、平板與手機調整字級、間距、邊框與背景。手機版的方案卡片之間要保留足夠垂直間距，並讓按鈕容易辨識與點擊；實際間距與按鈕寬度應依內容長度、版面和真機測試調整。

把價目表接上「下一步」：按鈕要通往哪裡

價目表的按鈕點下去之後要去哪，這個問題比按鈕本身重要十倍。把按鈕去化拆成三條主流路徑，你依你的服務型態選一條：

服務型態	按鈕通往	適合誰	注意事項
高單價、需客製	聯絡表單或諮詢預約頁	律師、設計師、顧問、室內設計	只詢問此階段必要的資料，避免造成額外填寫負擔
有明確時段、需預約	預約外掛的時段選擇頁	瑜珈、健身房、美容 SPA、診所	串接預約系統，讓客人當下挑時段，省掉留下資料等回電的摩擦
標準化、可線上完成	WooCommerce 的購物車	線上課程、標準化方案、禮券、堂數票	把方案做成虛擬商品，直接結帳，省掉人工報價

判斷要走哪一條，核心問題只有一個：你的服務能不能在客人按下按鈕的那一刻就被完成？能，就走成交型路徑，讓系統接手；不能，就走報價型路徑，用最短的表單接住客人，再由人工接手。判斷錯方向，後面所有設計都會跟著歪。把高客製服務硬套結帳流程，客人會在還不知道要填什麼的那一步放棄；把標準化服務硬塞一個等待回電的表單，等於把已經準備好付錢的客人擋在門外。這條判斷做對，價目表的轉換力才真正有了底。

第一條路最常見，但表單若要求過多非必要資料，可能提高填寫負擔。請依後續聯絡真正需要的資訊設計欄位，並清楚說明資料用途。表單外掛的選擇與串接，可參考 WordPress 表單外掛比較。

第二條路適合能直接開放時段的預約型服務，因為它把「留下資料等回電」換成「自己挑時段」。若服務仍需先審核需求，則應保留諮詢流程。預約系統的選擇可以參考 WordPress 預約外掛的挑選邏輯，重點是確認能否在 Divi 裡穩定嵌入。

第三條路，是把服務方案商品化。WooCommerce 是常見的 WordPress 電商方案（可對照 W3Techs 的市占統計，2026 年 6 月）。當服務方案夠標準化（例如十堂課票券、入門健檢方案、線上課程），可把它做成虛擬商品，讓客人直接結帳。這條路的設計細節可參考 WooCommerce 架設全攻略。

報價型與成交型的根本差別

把這三條路看清楚，你會發現價目表其實有兩種性格：一種是報價型，目的是「讓客人願意開口問」，按鈕通往表單或諮詢；另一種是成交型，目的是「讓客人當下完成交易」，按鈕通往預約或結帳。報價型適合高客單、高客製、需要信任建立的服務；成交型適合標準化、可重複、不需要太多說明的服務。一張價目表不該同時負擔兩種性格，那會讓按鈕去化變得曖昧。先決定你這張表是報價型還是成交型，再回頭設計按鈕與文案，方向會清楚很多。

價目表的位置學：它該長在網站的哪一頁

設計再好的價目表，放錯位置一樣接不到單。常見的三種放法各有適用情境：獨立的「收費標準」或「方案」頁、首頁服務區塊裡的價目區段，以及個別服務頁底部帶上對應方案的報價。三種位置可以並存，但不要把相同區塊散落各頁後分別維護；這不是所謂的「重複內容處罰」，真正風險是資訊不一致，也會讓搜尋引擎難以判斷主要頁面。

獨立價目頁的好處是搜尋意圖集中。會搜「OOO 價格」「OOO 收費」「OOO 費用」這類字詞的人，意圖非常明確，一個獨立、URL 乾淨、標題對應的價目頁，最容易吃到這批流量。這個頁面要做得像一個小型的轉換落地頁：上面放信任元素（服務流程、過往實績、常見問答），中間放價目表，下面放一個明確的下一步按鈕。落地頁的設計原則，Landing Page 轉換優化全攻略有完整拆解，觀念完全通用。

首頁的價目區段，主要任務是讓訪客知道你有透明定價，成交則交給後續步驟。可在首頁放精簡版價目表，例如只顯示主方案或起步價，再連到完整價目頁。個別服務頁底部則適合帶上對應方案。整體頁面層級與版面觀念，可參考 網頁版面設計指南。

服務業常見的 5 個價目表地雷

以下整理五種常見反模式，你可以直接拿來對照自己的價目頁：

地雷	長什麼樣	為什麼傷轉換	怎麼修
1. 完全不秀價格	只寫「來電洽詢」「歡迎報價」	有意願且有預算的客人直接跳走，你只收到一堆比價型的來電	至少秀區間價或起步價，把「電洽」留給真正的客製方案
2. 方案多到五六欄	把所有能想到的組合全列上去	認知負荷爆表，客人選擇癱瘓，乾脆都不選	收斂到三欄主力，其餘用客製方案一句話帶過
3. 沒有任何一欄被推薦	三欄視覺完全平起平坐	客人沒有預設答案，比較成本全部轉嫁到他身上	開啟招牌款的 Featured 設定，整表只推一欄
4. 按鈕連到首頁或毫無目的的頁面	Button URL 亂指	客人點了發現沒下一步，信任瞬間歸零	每個按鈕都要通往一個明確單一的下一步（表單、預約、結帳）
5. 按鈕文案是中性詞	「了解更多」「更多資訊」	沒有行動指向，點擊率明顯偏低	換成明確動詞：立即預約、索取報價、開始方案

如果只能先修一項，可先檢查按鈕是否通往正確頁面。即使暫時不能公開價格，也要讓已經準備好行動的訪客有一條清楚的路。

五種服務業的價目表長相：配置思路

以下五種配置可作為起點，但產業內部仍有差異，實際內容要配合法規、交易方式與客戶決策流程調整。

1. 月子中心與住宿型服務

這類高單價、長天期的服務，價目表的重點在於建立信任與範圍感，線上刷卡反而是次要目標。建議秀天數方案（例如 7 天、14 天、30 天），每一欄對應不同的房型與照護等級，價格用區間標示，按鈕連到預約參觀或諮詢表單。客人要的不是當下成交，是確認「這家在我的預算範圍裡，值得我去看一眼」。

2. 律師事務所與專業諮詢

律師、會計師這類專業服務，價目表的最大爭議點是「能不能寫價」。實務上，多數事務所選擇列「方案組合」，刻意避開直接掛時薪，例如基本諮詢、標準方案、完整委任三欄，價格用起步價標示並註明視案件複雜度。按鈕一致連到預約諮詢表單。這種行業的招牌款通常是中間的標準方案，溢價款放完整委任，入門款放單次諮詢。

3. 室內設計與裝修

設計類服務的價目表，最忌諱只寫「每坪多少錢」這種單一數字，因為它把複雜的服務扁平化，反而引發比價。比較好的做法是列設計階段（例如純設計圖、設計加監工、統包工程），讓客人理解不同方案包含的服務範圍，價格同樣用區間。這個邏輯也適合拿來思考網頁設計費用該怎麼透明呈現，本質都是把抽象的服務拆成可見的範圍。

4. 瑜珈、健身房、美容 SPA

這類預約型服務最適合走第三條路：預約外掛或 WooCommerce 結帳。價目表通常列堂數方案（單堂、十堂、月費），招牌款通常是最划算的十堂或季方案，按鈕直接通往時段預約頁。如果你用 Divi 架這類網站，瑜珈網站設計實戰是現成的範本，價目區塊的配置可以直接參考再調。

5. 補習班、線上課程、知識服務

教育與知識型服務，價目表常用方案是體驗、正課、進階或輔導三欄。這類服務特別適合把方案做成 WooCommerce 虛擬商品，因為它夠標準化、可線上交付。招牌款通常是正課完整版，入門款是體驗或單元試閱，溢價款是含一對一輔導的加值版。按鈕通往結帳頁，讓客人當下完成報名，不必等人工回覆。

當內建模組不夠用：進階與擴充

Divi 的內建 Pricing Table 模組適合一般靜態方案；如果內容要從自訂欄位帶入、需要更複雜的比較樣式或方案切換，就要評估自訂程式或擴充模組。

可先用 Divi 版型庫的價目表區塊當骨架，再依需求評估第三方模組。需要更進階的互動時，可參考 Divi Supreme 模組擴充；基礎的外掛選擇邏輯則整理在 Divi 外掛清單。

有一個進階觀念值得記下來：價目表的欄位數與排列，不該是設計一次就定終身的決定。當你的方案結構或市場反應有變化，重新調整價目表是成本極低、影響極大的動作。建議每季把價目頁的轉換數據（哪一欄的按鈕被點最多、哪一欄從來沒人點）拉出來看一次，讓數據告訴你要不要動招牌款的位置或溢價款的定價。這件事的前提是你的按鈕有埋好事件追蹤，否則你根本看不到這些數字。

可以為每一欄按鈕設定獨立事件名稱，例如 pricing_click_basic、pricing_click_signature、pricing_click_premium，再搭配價目區的可見或捲動事件。不同方案的點擊分布沒有固定的「健康比例」；要連同曝光數、流量來源、後續詢問與成交一起看，才能判斷主方案是否需要調整。

如果要比較不同版本，例如把三欄改成兩欄，請一次只動一個主要變數，並依流量、轉換量與統計信心水準決定測試期間。若同時改欄位數、按鈕文案與配色，就很難判斷是哪個改動造成差異。

你的下一步：30 分鐘價目表健檢清單

講了一整篇，把可執行的部分收斂成一份你今天就能跑完的健檢清單。給自己半小時，打開你的價目頁，對著下面六個步驟逐項檢查：

1. 確認方案結構：你是否剛好有入門、招牌、溢價三欄？招牌款有沒有開啟 Featured、而且整表只有這一欄開？
2. 檢查價格透明度：有沒有寫出至少起步價或區間？還是整頁只剩「來電洽詢」？
3. 看視覺層次：閉上眼再張開，第一眼落在哪一欄？如果沒有落在招牌款，調背景色或角標，直到它「自己跳出來」。
4. 測按鈕去化：每一欄的按鈕點下去，是不是都通往一個明確單一的下一步（表單、預約頁、結帳頁）？有沒有連到首頁或死巷的？
5. 換按鈕文案：把所有「了解更多」「更多資訊」這類中性詞，換成明確動詞（立即預約、索取報價、開始方案）。
6. 開手機看一次：用行動裝置打開價目頁，招牌款是不是在前兩個位置？欄位有沒有被擠成難讀的窄條？

這六步跑完，你不會得到一張完美的價目表，但你會得到一張比今天更會接單的價目表。剩下的優化，交給數據與時間。

價目表的重點，是用清楚、可比較的資訊建立信任。若無法提供固定價格，也可以說明起步價、區間與影響報價的條件；比起反覆強調專業，這些資訊更能幫助訪客判斷下一步。

如果你在 Divi 的整體架站流程上還有不清楚的環節，從 Divi 主題架站全攻略回頭把基礎補起來，再回來打磨價目表，會比硬啃單一模組更有效率。網站是活的，價目表也是，給它時間，它會慢慢長成你最穩的那個接單入口。