個人化 B2B 網站的設計模式

個人化改變訪客看到的內容；設計模式則決定一年後您是否還能維護這些變更，或最後變成一個沒人敢動的網站。一個有二十個結構良好版本的網站，比只有五個臨時拼湊版本的網站更好經營。如果底層網站結構需要先調整，請從我們為採購委員會撰寫的 B2B 網站設計指南開始。

大多數 B2B 網站在設計時並沒有考慮個人化。它們被打造成單一體驗，個人化內容是事後才硬加上去的。這種做法在兩三條規則時還行得通，到了二十條就會崩潰。本文介紹能讓您系統化做個人化的設計模式，從主視覺區塊到個別內容區塊都涵蓋。

主視覺區塊個人化模式

主視覺是大多數 B2B 團隊開始做個人化的地方，也是最容易過度建置的地方。請挑選能完成任務的最低成本做法。

模式 1：文案替換（最省力）

版面、圖像與 CTA 按鈕維持不變，只更改標題與副標題文字。這是最簡單、也最容易測試的模式，因為您把變數限縮在訊息上。

以一家資安公司為例的示意：

預設：「保護您的企業免受現代威脅」
醫療業區隔：「符合 HIPAA 規範、保護病患資料的資安防護」
金融服務區隔：「為金融機構提供 SOC 2 認證的防護」

頁面結構不變，您的設計系統完整保留。您只是替換文字字串，因此很容易建立範本並維護。

模式 2：替換內容區塊（中等工作量）

替換整個主視覺內容區塊（標題、副標題、輔助圖片和 CTA），同時保持相同的版面網格。主視覺容器固定不變，內容則是可互換的模組。Google 的回應式多媒體廣告在廣告上應用了同樣的概念：您提供素材，系統依版位組合版面。

將主視覺區塊建構成接受 props 的元件：headline、subheadline、imageUrl、ctaText、ctaLink。每個個人化版本就是一組不同的 props。版面 CSS 只需定義一次，變動的是內容。

當不同分眾需要不同圖像時，這個模式很有效。製造業分眾可能看到工廠現場圖像，SaaS 分眾則看到儀表板截圖。視覺效果比只換文案更強，維護成本也還在可控範圍。

模式3：版面版本（投入最高）

不同分群看到完全不同的主視覺版面。也許企業訪客看到附影片 Demo 與「安排通話」CTA 的主視覺，而中小企業訪客看到較簡潔、附「開始使用」CTA 與產品截圖的主視覺。

只有在不同區隔的買家旅程差異大到同一版面無法同時服務時，才使用這個模式。大型企業買家通常一開始就需要信任訊號與真人互動；中小企業買家則想要速度與自助服務。兩者差異夠大，足以使用不同版面。

取捨在於：每個版面版本都需要獨立的維護、測試和響應式設計工作。最多限制在兩到三個版面版本。

社會認同替換

社會認同通常是我們在主視覺之後的第一個建議，因為它不需要新文案，只需要更好的挑選。當醫療業買家看到其他醫療公司的標誌，以及一位醫療業 CTO 的推薦語時，傳達的訊息是「和您一樣的公司都在用」。來自不相關產業的通用標誌牆，傳達的訊息就少得多。

從一開始就把社會認同區塊設計成可替換的：

標誌列

建立一個接受標誌物件陣列的標誌列元件。每個物件包含圖片、公司名稱和選填的產業標籤。為了個人化，請為每個產業區隔維護獨立的標誌陣列。預設使用跨所有產業最具辨識度的標誌。在製作元件原型時，標誌產生器可以為設計稿產生暫用標誌，讓您在客戶核准使用真實標誌之前就能測試版面。

實務上的限制：每個分眾至少需要四個標誌，才能讓標誌列看起來有說服力。如果您只有兩家願意展示標誌的醫療業客戶，標誌列會顯得單薄。在客戶群成長之前，可以用產業相關的認證或合作夥伴徽章補足。

案例卡片

同樣的原則也適用於首頁或產品頁面上的案例預覽。把案例卡片設計成可重複使用的元件：主圖、公司名稱、產業標籤、一句話成果，以及完整案例的連結。依訪客的分群替換顯示的卡片。

有一個設計決策要及早做：個人化案例研究應該取代預設卡片，還是放在前面（先顯示，接著才是一般案例研究）？放在前面比較保險，因為訪客仍能看到您最廣泛的佐證，而最相關的內容會最先出現。

導覽個人化

大多數團隊會個人化頁面內容，卻不動導覽列。不過導覽列出現在每個頁面上，因此在那裡做一點小變化，就會在整個工作階段中跟著訪客。

動態資源連結：將一般的「資源」下拉選單換成產業專屬項目。醫療業訪客看到「HIPAA 法規遵循指南」與「醫療業客戶案例」；金融科技業訪客看到「SOC 2 文件」與「金融服務 ROI 計算機」。
導覽列中的個人化 CTA：主導覽的 CTA 可以依區隔變化。大型企業訪客看到「聯繫業務」，中小企業訪客看到「查看方案」，已經造訪過價格頁的回訪者則看到「開始設定」。
醒目區塊：為與訪客客群相關的導覽項目加上低調的強調。如果是製造業公司造訪，就在產品下拉選單中突顯「製造業解決方案」。不要為此使用「New」標記；它不是新的，回訪者會發現。

提醒一句：不要改變導覽結構本身。依區隔搬動項目或隱藏區塊會造成混淆，尤其對記得東西在哪裡的回訪訪客更是如此。請個人化導覽項目內的內容，而不是導覽架構。

可替換區塊的內容區塊架構

把頁面視為一系列可各自替換的內容區塊。每個區塊有固定的介面（尺寸、間距、字級）和可變的內容。如果您的網站已經使用元件庫，大部分都已具備；您只需要讓內容來自資料，而不是寫死在程式中。

設計區塊介面

每個內容區塊都應符合標準規格：

固定尺寸：容器的寬度與高度限制由頁面版面決定，而不是由內容決定。這能避免個人化內容破壞頁面流程。
字級規範：標題使用 H2，內文使用段落，項目符號使用標準清單樣式。任何版本都不應加入非標準字級。
間距規則：內距與外距由區塊容器控制，而非內容。這能確保無論區塊填入什麼內容，視覺節奏都保持一致。
內容限制：為每個文字欄位定義字元上限。「標題：最多 60 個字元。說明：最多 150 個字元。」這能避免個人化內容溢出容器。

區塊類型

建立一套涵蓋您個人化需求的標準區塊類型庫：

文字 + 圖片區塊：左右分欄版面，一側是文案、另一側是圖片。最常用於功能亮點與效益說明。
數據區塊：幾個以大字呈現的關鍵指標，搭配說明文字。依客群替換指標，例如對大型企業呈現正常運作時間，對中小企業呈現一般設定時間。只使用您能佐證的數字；懷疑的買家首先檢查的就是數據區塊。
推薦見證區塊：引言、出處，以及選擇性的公司標誌。一個區塊，多種內容版本。
比較區塊：功能比較或前後對照呈現。內容會變，但版面固定。
CTA 區塊：標題、輔助文字和按鈕。依區隔替換訊息與導向目的地。

當您需要新的個人化區塊時，可以用現有的模組組合，而不是從頭設計，因此新版本會變成內容工作，而不是設計與工程工單。

產業專屬設計範例

以下範例為示意：B2B SaaS 首頁如何運用上述模式，針對三個產業區隔做出變化。

醫療產業分群

主視覺：替換文案，強調 HIPAA 法規遵循和病患資料保護。副標題提及特定的醫療照護法規。
社會認同：標誌列展示醫療相關公司（醫院、醫療科技新創、製藥公司）。附上一位醫院資訊長的推薦見證。
內容區塊：將通用的「運作方式」區塊，替換為醫療照護專屬的工作流程，展示 EHR 整合與法規遵循檢查點。
CTA：「了解我們的平台如何符合 HIPAA 要求」（加上您的產品名稱），取代通用的「了解更多」。

金融服務區隔

主視覺：替換文案，以資安、稽核準備與法規遵循開場。標題提及 SOC 2 與金融資料保護。
社會認同：標誌列展示銀行、金融科技公司與保險公司。附上一位金融機構 CISO 的推薦語。
內容區塊：數據區塊顯示服務正常運作時間、加密標準與您持有的認證，而不是一般的產品指標。
導覽列：「資源」下拉選單優先呈現法規遵循文件與資安白皮書。

製造業區隔

主視覺：內容區塊替換為工廠／工業圖像，而非一般的辦公室照片。標題聚焦於營運效率和供應鏈能見度。
社會認同：一家製造業公司營運總監的推薦見證，強調節省時間與減少錯誤。
內容區塊：將以 SaaS 為中心的功能清單，替換為製造業專屬的使用情境：庫存追蹤、品質管控、供應商管理。
CTA：「查看製造業案例研究」，直接連結到產業專屬的案例研究頁面。

在各版本間維持品牌一致性

當好幾個人持續建立版本一年以上，網站就會開始走樣：按鈕樣式略有不同、某個標題的語氣沒人核可過、某張圖庫照片來自不同的圖庫。單一版本沒人會注意到，但訪客會注意到累積的結果。護欄機制可以避免這種情況。

設計防護原則

您的設計系統應定義個人化版本中哪些可以改、哪些不能改：

固定元素：標誌位置、主要品牌色、字體層級、頁首和頁尾版面。這些在所有版本中都不會改變。
可變元素：標題、內文、圖片、客戶推薦、CTA 文字。這些可以在區塊系統的限制內自由更換。
受限元素：強調色（有限的色盤）、圖片風格（明定的攝影準則）、圖示集（來自核准的圖庫）。這些可以變化，但只能在規範範圍內。

語氣與風格準則

撰寫一頁式的個人化風格指南（不是完整的品牌手冊），回答以下問題：

我們預設的語氣是什麼？（例如：「專業但口語化。直接，不推銷。」）
語氣如何依區隔調整？（例如：「大型企業：較正式，提及法規遵循與規模。小型企業：較輕鬆，強調速度與簡單。」）
我們固定使用哪些說法？避免哪些說法？
與預設訊息相比，可接受的最大差異是多少？

在每季稽核時，依照這些準則檢視個人化文案。微小的語氣偏移會隨時間累積。今天稍微偏離品牌調性的版本，一年後就會面目全非。

視覺品質檢查流程

在任何個人化版本上線前，以三種視窗寬度（桌機、平板、手機）截圖，並與預設體驗並排比較。檢查以下項目：

文字溢出或被截斷
圖片長寬比變形
色彩對比問題（尤其是替換背景圖片時）
間距不一致
CTA 按鈕尺寸與位置

盡可能自動化這項工作。Playwright 的截圖比對或 Percy 等視覺回歸工具，能在版本上線前標記出版本之間的版面差異。版本上線後，就像測試任何其他變更一樣測試它們；我們的 90 天個人化測試路線圖說明了如何安排測試順序。

您的下一步

依上述區塊系統稽核您目前的網站。找出首頁、產品頁與價格頁中，哪些區段已是獨立區塊，哪些與周圍內容緊密綁定。已模組化的區段是最快能做個人化的機會；綁定的區段則需要先重構，才能可靠地個人化。從已模組化的部分開始，再一次一個區段地重構其餘部分。區塊準備就緒後，Markettailor 的客群區隔可以依產業、規模或您已在使用的帳戶名單，決定每家公司看到哪個版本。客群定義本身，請參閱能帶來轉換的公司屬性客群。