推薦與引言系統
目的
推薦與引言系統為質性客戶推薦與客戶引言提供一套系統性的設計與空間框架。它並非將社會證明視為事後補救，而是建立結構、排版與引用規則，以最大化視覺可信度與真實性，同時確保完整的無障礙性。它填補了原始使用者生成評論（由 review-and-rating-system 處理）與高度策劃的行銷證明點之間的鴻溝。
使用案例
- 登陸頁面： 在主要與次要行動呼籲旁放置顯眼的客戶成功引言。
- 服務/產品詳細頁： 整合與上下文相關的客戶引言，直接解決常見的痛點或反對意見。
- 案例研究中心與成功故事： 設計總結客戶故事主要成果或 ROI 的英雄式拉頁引言。
- 關於我們與團隊頁面： 顯示創辦人、主要合作夥伴或員工的引言。
- 企業銷售資料： 結構化來自高知名度客戶代表（副總裁、總監、高階主管）的高影響力引言。
何時不應使用
- 量化回饋列表： 對於大量使用者生成的評論（例如 500 則 1 至 5 星產品評論），請改用
review-and-rating-system。 - 資料表格/產品屬性網格： 對於顯示硬性規格屬性，請改用
property-and-attribute-system或data-table-ui-system。 - 主要頁面內容： 推薦應支援而非取代主要產品資訊或核心價值主張。
- 法律免責聲明與服務條款： 對於需要正式、非敘事性處理的嚴格法律約束文字。
輸入
為設計有效的推薦或引言元件，需要以下資訊：
- 引言內容： 推薦的實際文案，理想上應精煉為簡潔且聚焦於單一關鍵成果或效益。
- 作者身分： 個人姓名、職稱與公司。
- 視覺素材： 高解析度頭像、公司標誌（偏好 SVG），或可選的影片/音訊連結。
- 使用情境： 特定的頁面與放置位置（例如 Hero 重點區、多卡網格、側邊欄拉頁引言）。
- 信任標記： 可驗證的細節（例如原始案例研究連結、「已驗證客戶」狀態，或 G2/Trustpilot 等第三方平台標誌）。
輸出
套用此系統會產出：
- 結構規格： 為引言文字、引號、頭像、姓名、職稱、標誌與信任標記定義相對佈局位置。
- 佈局組成：
- 單一重點區： 適用於英雄區域的高影響力全寬或半寬佈局。
- 推薦網格/卡片： 用於顯示多則推薦的非對稱或結構化卡片網格。
- 內嵌拉頁引言： 整合到長篇編輯內容中的緊湊、側邊對齊引言。
- 語意標記藍圖： 使用
<figure>、<blockquote>與<figcaption>的標準化 HTML 結構，以確保正確的螢幕閱讀器解讀。 - 排版層級規則： 關於字重、行高、樣式（限制斜體濫用）以及引言與引用中繼資料之間比例對比的指引。
工作流程
1. 審計並結構化引言架構
每個推薦包含三個不同的區域，必須在 DOM 與樣式表中結構化：
┌─────────────────────────────────────────────────────────┐
│ [1] 引言容器（含語意 blockquote） │
│ 「自從部署 SentryFlow，我們的審計準備 │
│ 工作量減少了 80%。」 │
├─────────────────────────────────────────────────────────┤
│ [2] 引用區域（含語意 figcaption） │
│ (👤 頭像) 王小明 │
│ 法遵副總裁，SentryCorp │
├─────────────────────────────────────────────────────────┤
│ [3] 信任/驗證標記 │
│ (✓ 已驗證客戶) [SentryCorp 標誌] │
└─────────────────────────────────────────────────────────┘
- 引言： 核心質性陳述。將長度限制在 2–3 句（約 40–60 字）。
- 引用： 作者姓名、職稱與組織。
- 視覺錨點： 人像頭像（頭像）或品牌標誌，用以吸引目光並使引言更具人性。
2. 選擇空間佈局模式
根據資訊密度與視覺優先級，選擇以下佈局之一：
-
重點英雄模式：
- 時機： 高影響力登陸頁面或案例研究英雄區域。
- 佈局： 置中對齊或 50/50 水平分割。大型、高對比排版（
--text-xl或--text-xxl）。 - 用法： 每個頁面區段僅放置一個重點推薦，以避免稀釋效果。
-
推薦卡片網格：
- 時機： 專屬的「社會證明」區段或「客戶怎麼說」區塊。
- 佈局： 2 欄或 3 欄響應式網格。
- 用法： 當你有 3 到 6 則高品質引言時最為適用。利用不同的高度（或 Bento 風格排列）使頁面感覺更自然。
-
內嵌拉頁引言：
- 時機： 在長篇案例研究、文章或部落格文章中。
- 佈局： 邊距縮排、左側邊框高亮顯示、浮動或嵌入段落欄位中。
- 用法： 打破密集的文字區塊，並強調高價值客戶引言。
3. 建立排版層級
為確保可掃視性（使用者在閱讀前會先掃視）：
- 引言樣式： 避免將整個引言設定為細體、淺灰色斜體。將超過幾個字的文字區塊斜體化會降低可讀性。相反地，應使用正常字體樣式搭配稍大的尺寸（
--font-size-lg）或富有表現力的顯示襯線字體，並設定為高對比的中性色。 - 直接引言標示： 使用 CSS 偽元素（
::before/::after）來渲染裝飾性引號，或在引言後方放置一個大型、低透明度的背景引號。請勿在文字中硬編碼文字"符號，以避免螢幕閱讀器重複宣告。 - 引用對比： 作者姓名應設定為粗體（
font-weight: 600），其職位/公司則應以較小的字型尺寸（--font-size-sm）和柔和的次要顏色（color: var(--text-muted)）來設定樣式。
4. 整合信任與驗證指標
為對抗「假推薦」的懷疑態度：
- 真實視覺素材： 始終偏好真實、專業的頭像，而非泛用頭像、庫存插圖或空白佔位符。
- 標誌整合： 在客戶職稱旁放置其公司標誌，藉用品牌權威。
- 驗證徽章： 如果引用自經過驗證的第三方來源（例如 G2、Capterra），應包含一個小型品牌圖示以標示來源。
5. 應用響應式調適
設定流體縮放與堆疊規則：
- 行動裝置折疊： 所有水平（50/50 分割）重點推薦在低於 768px 的視口上必須折疊為單一垂直欄，將視覺頭像/標誌置於引言文字下方，以保持價值陳述的顯著性。
- 網格佈局轉換： 多欄推薦網格必須在行動裝置上轉換為單欄堆疊。除非實作觸控滑動輪播，否則不要強迫使用者水平滾動瀏覽小型卡片。
- 輪播控制（如果使用）： 輪播滑塊模式必須支援標準觸控手勢、鍵盤方向鍵（
左/右），並且如果自動播放（強烈不建議），必須包含高度可見的暫停/播放控制。
6. 確保 WCAG AA 無障礙性
- 語意結構： 始終將整個元件包裹在
<figure>元素中。將引言文字包裹在<blockquote>中，並將引用包裹在包含<cite>（用於作者職稱或公司）的<figcaption>中。 - 色彩對比： 測試所有元素。引言文字與作者引用必須維持至少 4.5:1 的對比率。裝飾性元素（如巨大的背景引號）必須具有低對比度，或使用
aria-hidden="true"從輔助技術中隱藏。 - 鍵盤與焦點： 如果推薦位於分頁面板或滑塊中，所有控制指示器（圓點、箭頭）必須具有高度可見的
:focus-visible外框，並滿足觸控目標最小值。
決策規則
佈局選擇矩陣
| 內容數量 | 目標放置位置 | 優先級 | 推薦模式 |
|---|---|---|---|
| 1 則關鍵引言 | 英雄區域 / 主要行動呼籲 | 高 | 重點英雄（置中/大型） |
| 3–6 則引言 | 功能 / 證明區域 | 中 | 推薦卡片網格（非對稱或 Bento） |
| 6+ 則引言 | 客戶成功中心 | 高密度 | 分類分頁網格 或 截斷顯示更多卡片 |
| 編輯內容 | 案例研究內文 / 部落格 | 情境相關 | 內嵌拉頁引言（縮排、左側強調邊框） |
頭像 vs. 標誌優先級
- 使用頭像時機： 人類情感連結至關重要時（B2C、個人教練、創作者平台、個人消費應用程式）。
- 使用公司標誌時機： 企業可信度與機構權威是主要驅動力時（企業 SaaS、B2B 服務、工業產品）。
- 同時使用時機： 向高價值 B2B 利益相關者提案時，其中特定的買家角色（例如技術長）及其公司品牌都具有重大影響力。
限制條件
- 無障礙性：
- 語意標記：
<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 背景模式或偽元素（
::before/::after）搭配content: ""與樣式來渲染，或從螢幕閱讀器隱藏。 - 比例間距： 引言主體與引用區塊之間的間距使用一致的相對變數（例如
margin-top: var(--space-m)）。 - 視覺真實性： 歸屬資訊包含可驗證的憑證（全名、職稱、公司或標誌），並避免使用佔位圖形。