个性化改变的是访客看到的内容。设计模式则决定了一年后您是否还能维护好这些改动，还是会落得一个没人敢碰的网站。一个拥有二十个结构良好变体的网站，比一个拥有五个临时拼凑变体的网站更容易运营。如果底层网站结构需要先调整，请从我们面向采购委员会的B2B 网站设计指南开始。
大多数 B2B 网站在设计时并没有考虑个性化。它们是作为单一体验搭建的，个性化内容是后来硬加上去的。这种做法应付两三条规则还行，到二十条就撑不住了。本文介绍能让您系统化地做个性化的设计模式，从主视觉区域一直到单个内容块。
首屏个性化模式
首屏是大多数 B2B 团队开始做个性化的地方，也是最容易过度建设的地方。选择能完成任务的最省事的模式。
模式1：替换文案（投入最少）
布局、图片和 CTA 按钮保持不变，只修改标题和副标题文字。这是最简单、也最容易测试的模式，因为您把变量限定在了信息上。
以一家网络安全公司为例：
- 默认：“保护您的企业免受新型威胁”
- 医疗细分：“符合 HIPAA 要求的安全保障，守护患者数据”
- 金融服务细分：“为金融机构提供 SOC 2 认证的安全防护”
页面结构不变，设计系统保持完整。您只是在替换文本字符串，这让它很容易做成模板并长期维护。
模式 2：内容模块替换（中等工作量）
替换整个主视觉内容块（标题、副标题、配图和 CTA），同时保持布局网格不变。主视觉容器固定不变，内容是可替换的模块。Google 的自适应展示广告在广告中应用了同样的思路：您提供素材，系统按投放位置组合布局。
把主视觉区块构建成一个接收 props 的组件：headline、subheadline、imageUrl、ctaText、ctaLink。每个个性化变体就是一组不同的 props。布局 CSS 只定义一次，变化的只是内容。
当不同细分需要不同图片时，这种模式效果很好。制造业细分可能看到工厂车间图片，SaaS 细分看到仪表盘截图。视觉冲击力比只替换文案更强，维护成本也可控。
模式3：布局变体（投入最大）
不同细分获得完全不同的首屏布局。比如企业访客看到带视频演示和“预约通话”CTA 的首屏，而中小企业访客看到带“立即开始”CTA 和产品截图的更简洁首屏。
只有当不同细分之间的买家旅程存在根本差异、同一布局无法同时满足时，才使用这种模式。大型企业买家通常需要一开始就看到信任信号并与人沟通；小型企业买家想要速度和自助服务。这两者差异足够大，值得采用不同的布局。
代价是：每个布局变体都需要单独的维护、测试和响应式设计工作。最多限制在两到三个布局变体。
社会认同替换
社会认同通常是我们在首屏之后的首要建议，因为它不需要新写文案，只需要更好地挑选。当医疗行业的买家看到其他医疗企业的 Logo 和一位医疗行业 CTO 的评价时，传达的信息是“和您一样的公司都在用它”。来自不相关行业的通用 Logo 墙则说服力弱得多。
从一开始就把社会认同板块设计成可替换的：
Logo 条
创建一个接收客户标志对象数组的客户标志栏组件。每个对象包含图片、公司名称和可选的行业标签。为实现个性化，为每个行业细分维护单独的标志数组。默认显示在所有行业中辨识度最高的客户标志。在制作组件原型时，可以用标志生成器为样稿生成占位标志，这样在客户批准使用真实标志之前就能测试布局。
一个实际限制：每个细分至少需要四个客户标志，标志栏才显得有说服力。如果您只有两家愿意展示标志的医疗客户，标志栏会显得很单薄。在客户群扩大之前，可以用行业相关认证或合作伙伴徽章来补充。
客户推荐
将客户评价构建为数据对象：引述文字、署名姓名、职位、公司、公司标志、可选头像。将所有评价存放在一个中央库中，并为每条评价标注行业、公司规模和使用场景。由您的个性化引擎为每个细分选择最相关的评价。
优秀的 B2B 客户评价包含具体细节。客户说出入职培训快了多少（用他们自己的数字），胜过一句“产品很棒”。收集行业专属评价时，请客户提供一个他们愿意署名的可衡量成果，并就确切措辞获得书面批准。
案例研究卡片
同样的原则也适用于首页或产品页上的案例研究预览。把案例研究卡片设计成可复用组件：主图、公司名称、行业标签、一句话成果，以及完整案例研究的链接。根据访客所属细分切换显示哪些卡片。
有一个设计决策需要尽早做出：个性化案例研究应该替换默认卡片，还是放在前面（先显示，后面再接通用案例研究）？放在前面更稳妥，因为访问者仍能看到您覆盖面最广的证明，同时最相关的内容排在最前。
导航个性化
大多数团队只个性化页面内容，不动导航。但导航出现在每个页面上，所以在那里做一个小改动，就能伴随访客整个会话。
- 动态资源链接：用行业专属条目替换通用的“资源”下拉菜单。医疗行业访客看到“HIPAA 合规指南”和“医疗行业客户案例”；金融科技访客看到“SOC 2 文档”和“金融服务 ROI 计算器”。
- 导航中的个性化 CTA：主导航中的 CTA 可以根据细分变化。大型企业访客看到“联系销售”，中小企业访客看到“查看套餐”，已经访问过价格页的回访访客看到“开始设置”。
- 突出显示的板块：将与访客细分人群相关的导航项轻微突出。如果来访的是制造企业，就在产品下拉菜单中突出“制造业解决方案”。不要为此使用“新”标记，它并不新，回访者会注意到。
提醒一句：不要改变导航结构本身。按细分群体移动菜单项或隐藏某些板块会造成混乱，尤其是对记得东西在哪里的回访访客。对导航项内的内容做个性化，而不是对导航架构做个性化。
可替换版块的内容模块架构
把页面看作一系列内容板块，每个板块都可以单独替换。每个板块有固定的接口（尺寸、内边距、字号层级）和可变的内容。如果您的网站已经基于组件库运行，大部分工作已经就绪；您只需要让内容来自数据，而不是硬编码。
设计内容块接口
每个内容模块都应符合统一的规范：
- 固定尺寸：容器的宽高限制由页面布局而非内容决定。这可以防止个性化内容打乱页面排版。
- 字体层级：标题使用 H2，正文使用段落样式，项目符号使用标准列表样式。任何变体都不应引入非标准字号。
- 间距规则：内边距和外边距由模块容器控制，而不是由内容控制。这样无论模块中填入什么内容，视觉节奏都能保持一致。
- 内容限制：为每个文本字段规定最大字符数。“标题：最多 60 个字符。描述：最多 150 个字符。”这能防止个性化内容溢出容器。
板块类型
建立一个覆盖您个性化需求的标准模块类型库：
- 文字 + 图片模块：左右分栏布局，一侧为文案，另一侧为图片。最常用于突出功能和阐述价值。
- 数据模块：几个关键指标，配以大号数字和说明文字。按细分人群替换指标，例如向大型企业展示正常运行时间，向中小企业展示典型设置时间。只使用您能证实的数字；持怀疑态度的买家首先检查的就是数据模块。
- 推荐语模块：引语、署名，以及可选的公司 logo。一个模块，多种内容变体。
- 对比模块：功能对比或前后对比展示。内容会变，但布局固定。
- CTA 模块：标题、辅助文字和按钮。按细分替换信息和跳转目标。
当您需要一个新的个性化模块时，可以用现有组件拼装，而不必从零设计，这样新版本就变成了一项内容工作，而不是设计和工程工单。
行业专属设计示例
以下示例仅作说明：一个 B2B SaaS 首页如何运用上述模式，为三个行业细分做出调整。
医疗细分
- 主视觉：替换文案，强调 HIPAA 合规和患者数据保护。副标题提及具体的医疗行业法规。
- 社会证明：Logo 栏展示医疗行业公司（医院、医疗科技初创公司、制药企业）。附上一位医院 CIO 的推荐语。
- 内容块：用展示 EHR 集成和合规检查点的医疗行业专属工作流程，替换通用的“工作原理”部分。
- CTA：用“了解我们的平台如何满足 HIPAA 要求”（带上您的产品名称）替代泛泛的“了解更多”。
金融服务细分
- 首屏：替换文案，以安全、审计就绪和法规合规开篇。标题提及 SOC 2 和金融数据保护。
- 社会认同：Logo 栏展示银行、金融科技公司和保险公司，并附一位金融机构 CISO 的评价。
- 内容模块：数据模块展示正常运行时间、加密标准和您持有的认证，而不是一般的产品指标。
- 导航：“资源”下拉菜单优先展示合规文档和安全白皮书。
制造业细分人群
- 首屏：替换内容块，用工厂/工业场景图片取代通用的办公室照片。标题聚焦运营效率和供应链可见性。
- 社会认同：来自一家制造企业运营总监的评价，强调节省时间和减少差错。
- 内容板块：把以 SaaS 为中心的功能列表替换为制造业专属用例：库存跟踪、质量控制、供应商管理。
- CTA：“查看制造业客户案例”，直接链接到行业专属客户案例页面。
在各版本之间保持品牌一致性
当好几个人持续一年以上创建变体后，网站就会开始走样：按钮样式略有差异、某个标题的语气从未经过审批、一张来自其他图库的素材图片。单个变体没人注意，但访客会注意到这些问题的总和。护栏机制可以防止这种情况。
设计护栏
您的设计系统应规定个性化版本中哪些可以改、哪些不能改：
- 固定元素：标志位置、品牌主色、字体层级、页眉和页脚布局。这些在各变体中始终不变。
- 可变元素：标题、正文、图片、客户评价、CTA 文案。这些元素可以在模块系统的约束范围内自由变化。
- 受约束的元素：强调色（有限的调色板）、图片风格（既定的摄影规范）、图标集（来自经批准的图标库）。这些可以变化，但只能在规定范围内变化。
语气和口吻指南
写一份一页纸的个性化风格指南（而非完整的品牌手册），回答以下问题：
- 我们默认的语气是什么？（例如：“专业但亲切。直截了当，不推销。”）
- 语气如何因细分群体而调整？（例如：“大型企业：更正式，提及合规和规模。小型企业：更随意，强调速度和简便。”）
- 我们一贯使用哪些说法？避免使用哪些说法？
- 与默认信息相比，最大可接受的偏差是多少？
在季度审计中，对照这些准则审查个性化文案。细微的语气偏差会随时间累积。一个今天只是略微偏离品牌调性的变体，一年后会变得面目全非。
视觉质量检查流程
在任何个性化变体上线之前，在三种视口宽度（桌面、平板、移动端）下截图，并与默认体验并排比较。检查以下内容：
- 文本溢出或被截断
- 图片宽高比失真
- 颜色对比度问题（尤其是替换背景图片时）
- 间距不一致
- CTA 按钮的尺寸和位置
尽可能自动化。Playwright 截图比对或 Percy 等视觉回归工具可以在变体上线前标出变体之间的布局差异。变体上线后，像对待其他改动一样测试它们；我们的90天个性化测试路线图介绍了如何安排测试顺序。
您的下一步
对照上面介绍的模块体系审查您现有的网站。找出首页、产品页和价格页中哪些板块已经是独立模块，哪些与周围内容紧密耦合。已经模块化的板块是最快能做个性化的机会；耦合的板块需要先重构，才能可靠地做个性化。从已模块化的部分开始，再逐个板块重构其余部分。模块准备就绪后，Markettailor 的细分功能可以根据行业、规模或您已有的客户名单，决定每家公司看到哪个版本。关于细分人群本身的定义，请参阅能带来转化的企业属性细分。