见证与引述系统
目的
见证与引述系统提供了一个系统化的设计和空间框架，用于定性的客户见证和客户引述。它并非将社交证明视为事后补充，而是建立结构、排版和引用规则，最大化视觉可信度和真实性，同时确保完全的无障碍性。它弥合了原始用户生成评价（由 review-and-rating-system 处理）与高度策划的营销证明点之间的差距。
使用场景
- 着陆页： 放置突出的客户成功引述以支持主要和次要 CTA。
- 服务/产品详情页： 集成上下文相关的客户引述，直接解决常见的痛点或异议。
- 案例研究中心与成功故事： 设计概括客户故事主要成果或 ROI 的英雄拉引。
- 关于我们和团队页面： 展示来自创始人、关键合作伙伴或员工的引述。
- 企业销售资料： 组织来自高级客户代表（VP、总监、C 级高管）的高影响力引述。
何时不使用
- 定量反馈列表： 对于高流量、用户生成的评价（例如 500 条独立的 1 到 5 星产品评价），请改用
review-and-rating-system。 - 数据表格/产品属性网格： 用于展示硬性规格属性，请改用
property-and-attribute-system或data-table-ui-system。 - 主要页面内容： 见证应支持而非取代主要产品信息或核心价值主张。
- 法律免责声明和服务条款： 对于需要严格、非叙述性处理的具有法律约束力的文本。
输入
要设计一个有效的见证或引述组件，需要以下信息：
- 引述内容： 见证的实际文案，理想情况下经过提炼，简洁且专注于单一关键成果或收益。
- 作者身份： 个人姓名、职位和公司。
- 视觉资产： 高分辨率头像、公司 Logo（首选 SVG）、或可选的视频/音频链接。
- 使用环境： 特定页面和位置（例如英雄焦点、多卡片网格、侧边栏拉引）。
- 信任标记： 可验证的详细信息（例如原始案例研究链接、“已验证客户”状态、或像 G2/Trustpilot 这样的第三方平台 Logo）。
输出
应用此系统将产生：
- 结构规格： 为引述文本、引号、头像、姓名、标题、Logo 和信任标记定义了相对的布局位置。
- 布局组合：
- 单一焦点： 适用于英雄位置的高影响力、全宽或半宽布局。
- 见证网格/卡片： 用于展示多个见证的非对称或结构化卡片网格。
- 行内拉引： 紧凑、侧对齐的引述，集成到长篇编辑内容中。
- 语义标记蓝图： 标准化 HTML 结构，使用
<figure>、<blockquote>和<figcaption>确保正确的屏幕阅读器解析。 - 排版层次规则： 关于字重、行高、样式（限制斜体滥用）以及引述与引用元数据之间缩放对比的指南。
工作流
1. 审查和组织引述结构
每条见证包含三个不同的区域，必须在 DOM 和样式表中进行组织：
┌─────────────────────────────────────────────────────────┐
│ [1] 引述容器（使用语义化 blockquote） │
│ "自从部署 SentryFlow 以来，我们的审计准备开销 │
│ 减少了 80%。" │
├─────────────────────────────────────────────────────────┤
│ [2] 引用区域（使用语义化 figcaption） │
│ (👤 头像) 张三 │
│ SentryCorp 合规副总裁 │
├─────────────────────────────────────────────────────────┤
│ [3] 信任/验证标记 │
│ (✓ 已验证客户) [SentryCorp Logo] │
└─────────────────────────────────────────────────────────┘
- 引述： 核心定性陈述。长度限制在 2-3 句话（约 40-60 个单词）。
- 引用： 作者姓名、职位和组织。
- 视觉锚点： 头像或品牌 Logo，用于吸引眼球并增加人情味。
2. 选择空间布局模式
根据信息密度和视觉优先级，选择以下布局之一：
-
焦点英雄模式：
- 适用场景： 高影响力着陆页或案例研究英雄区。
- 布局： 居中对齐或 50/50 水平分割。使用大尺寸、高对比度的排版（
--text-xl或--text-xxl）。 - 使用： 每个页面区域仅使用一个焦点见证，以防稀释效果。
-
见证卡片网格：
- 适用场景： 专门的“社交证明”区域或“客户反馈”区块。
- 布局： 2 列或 3 列响应式网格。
- 使用： 当有 3 到 6 条高质量引述时最佳。利用不同的高度（或 Bento 式排列）让页面显得更自然。
-
行内拉引：
- 适用场景： 在长篇案例研究、文章或博客文章中。
- 布局： 缩进边距、左侧边框高亮、浮动或嵌入段落列内。
- 使用： 为了打断密集的文本块并突出高价值客户引述。
3. 建立排版层次
为确保可扫描性（用户会先扫描再阅读）：
- 引述样式： 避免将整个引述设置为纤细、浅灰色的斜体。将超过几个单词的文本块全部斜体会降低可读性。相反，应使用常规字体样式，搭配稍大的字号（
--font-size-lg）或富有表现力的展示型衬线字体，并设置为高对比度的中性色。 - 直接引述指示： 使用 CSS 伪元素（
::before/::after）渲染装饰性引号，或在引述块后面放置一个大尺寸、低透明度的背景引号。切勿在文本中硬编码文字"引号，以免屏幕阅读器重复朗读。 - 引用对比度： 作者姓名应加粗（
font-weight: 600），其角色/公司应使用柔和的次要颜色（color: var(--text-muted)）和较小的字号（--font-size-sm）进行样式设置。
4. 集成信任与验证指示器
为消除“假见证”的怀疑：
- 真实视觉素材： 始终优先使用真实的专业头像，而非通用头像、库存插图或空白占位符。
- Logo 集成： 将客户的公司 Logo 与其职位并排放置，以借用品牌权威性。
- 验证徽章： 若引述来自已验证的第三方来源（例如 G2、Capterra），请包含一个表明来源的小型品牌图标。
5. 应用响应式适配
配置流式调整和堆叠规则：
- 移动端折叠： 所有水平（50/50 分割）焦点见证必须在视口小于 768px 时折叠成单个垂直列，将视觉头像/Logo 放在引述文本下方，以保持价值陈述的突出性。
- 网格布局转换： 多列见证网格必须过渡到移动端的单列堆叠。除非实现触摸滑动轮播，否则不要强迫用户横向滚动浏览小卡片。
- 轮播控件（如果使用）： 轮播滑块模式必须支持标准触摸手势、键盘方向键（
左/右），并且如果自动播放（强烈不推荐），需包含高度可见的暂停/播放控件。
6. 确保 WCAG AA 无障碍
- 语义结构： 始终将整个组件包裹在
<figure>元素中。将引述文本包裹在<blockquote>中，将引用信息包裹在<figcaption>中，其中包含用于作者职位或公司的<cite>。 - 颜色对比度： 测试所有元素。引述文本和作者引用必须保持至少 4.5:1 的对比度。装饰性元素（如巨大的背景引号）必须具有低对比度，或通过
aria-hidden="true"对辅助技术隐藏。 - 键盘与焦点： 如果见证位于选项卡面板或滑块中，所有控制指示器（圆点、箭头）必须具有高度可见的
:focus-visible轮廓，并满足触摸目标最小值。
决策规则
布局选择矩阵
| 内容数量 | 目标位置 | 优先级 | 推荐模式 |
|---|---|---|---|
| 1 条关键引述 | 英雄区 / 主要 CTA | 高 | 焦点英雄（居中/大尺寸） |
| 3–6 条引述 | 功能 / 证明区域 | 中 | 见证卡片网格（非对称或 Bento） |
| 6 条以上 | 客户成功中心 | 高密度 | 分类标签网格 或 截断加载更多卡片 |
| 编辑文案 | 案例研究正文 / 博客 | 上下文相关 | 行内拉引（缩进、左侧强调边框） |
头像与 Logo 优先级
- 优先使用头像： 当人的情感联系至关重要时（B2C、个人教练、创作者平台、个人消费类应用）。
- 优先使用公司 Logo： 当企业信誉和机构权威性是主要驱动因素时（企业 SaaS、B2B 服务、工业产品）。
- 同时使用两者： 当向高价值 B2B 利益相关者推广时，具体的买方角色（例如 CTO）及其公司品牌都具有巨大分量。
约束条件
- 无障碍：
- 语义标记：
<figure>、<blockquote>、<figcaption>、<cite>。 - 对比度：所有可读文本的最小对比度为 4.5:1。
- 屏幕阅读器：通过 CSS 或
aria-hidden="true"隐藏装饰性引号伪元素。 - 焦点：焦点绝不能被困在或遮挡在滑块中。
- 语义标记：
- 响应式：
- 移动端容器绝对宽度约束：切勿超过
100vw。 - 滑块控件的触摸目标：最小 24x24px（WCAG 2.2 SC 2.5.8），推荐 44x44px。
- 文本换行：长名称或标题必须优雅换行，不能裁剪。
- 移动端容器绝对宽度约束：切勿超过
- 视觉层次：
- 在焦点布局中，引述文本大小必须至少为主体文本大小的 120%。
- 保持装饰性引号为低透明度（例如
opacity: 0.1至0.2），以防止它们与文本冲突或重叠。
常见失败模式
- 「斜体墙」错误： 斜体会降低阅读速度并增加认知负荷。将 100 个单词的引述全部设置为斜体、低对比度的灰色文本，必然导致用户完全跳过它。
- 匿名与库存元素： 归因于“张先生”或配有明显库存照片的引述看起来是假的，会严重损害网站信誉。
- 「过度装饰」陷阱： CSS 引号过大且对比度过高，以至于遮挡了实际引述的首字母或尾字母，或在移动视口中与发言者的头像重叠。
- 横向滚动锁定： 强制移动用户横向滑动以阅读见证，且没有溢出视觉指示器（例如半露的卡片）或可访问的回退圆点指示器。
- 美观优先于无障碍（语义化 Div 汤）： 使用任意的
<div>嵌套来构建见证，而不用标准语义标签，阻止屏幕阅读器将这段内容宣布为引述。
验证标准
- 语义标记： HTML 使用
<figure>作为包装器，<blockquote>用于文本，<figcaption>用于署名详情。 - 对比度验证： 引述文本、发言者姓名和发言者标题的对比度至少达到 4.5:1。
- 响应式过渡： 焦点布局在视口
< 768px时垂直堆叠，多列网格折叠为 1 列。 - 排版可读性： 引述正文设置为正常/罗马字体样式，避免长段斜体。
- 无硬编码引号字符： 使用装饰性 CSS 背景模式或带
content: ""和样式的伪元素（::before/::after）来渲染引号，或对屏幕阅读器隐藏。 - 等比例间距： 引述正文和引用块之间的间距使用一致的相对变量（例如
margin-top: var(--space-m)）。 - 视觉真实性： 署名包含可验证的凭证（全名、职位、公司或 Logo），并避免使用占位图形。