網站 VSL 標準（olaceo 方法）

網站 VSL 標準（olaceo 方法） 是做什麼的？

v1.0.0，2026 年 10 月 25 日。根據 olaceo.com 的參考程式碼及其測量日誌撰寫，非憑記憶。以下每個數字若非：

• 已測量：直接從參考程式碼或參考建置的驗證日誌中複製，就是
• 標記為 UNVERIFIED（未驗證）：一個目標、外部聲明，或尚未測量的數值。請勿向客戶引用這些數值作為事實。

隨此標準一同提供的檔案（路徑相對於此檔案）：

• reference/tokens.css：真實的 token 區塊（淺色與深色）、基礎字型、網格、按鈕、輸入欄位、主視覺、膠囊按鈕與過場動畫。
• reference/motion.js：真實的彈簧、橡皮筋、速度、滑動投影與 VSL 不可跳過程式碼。
• templates/client-intake.md：步驟 1 用的可填寫客戶資料收集表。

核心理念（請先閱讀此部分）

1. 一個訪客、一個任務、一個下一步。 每位進入網站的人只有一個目標。網站的工作是用一次點擊辨識出他們是哪種人，然後只顯示能推動該訪客前進的內容。摩擦是敵人。
2. 安靜的前端，運作中的機械後端。 表面是留白、一種字體、一個強調色，以及真實的照片或影片。智慧功能（分流、不可跳過播放器、追蹤、CRM）是隱形的。
3. 證據，而非主張。 不允許虛構的統計數據、標誌、推薦證言、稀缺性提示或倒數計時器。如果證據不存在，該區塊就保持隱藏，或是在常見問題（FAQ）中說明「尚未有，我們也不會捏造」。建置過程會因違禁聲明而失敗。
4. 每個人都能在某處獲得有價值的結果。 沒有死胡同，也沒有拒絕用語（「不適合」、「不符合資格」）。尚未準備好的訪客會獲得免費路徑。
5. 動態像液體，而非玻璃。 移動遵循物理定律（彈簧、速度、橡皮筋）。它永遠不是為了裝飾，並且始終尊重使用者的減少動態效果設定。想像水匯入水窪的狀態，而非玻璃。
6. 經過測量，而非目測。 對齊、版面偏移、掉幀與折線位置，在宣布完成之前，都必須以像素（px）和毫秒（ms）進行測量。

它為何有效（心理學角度）：

• 入門口的自我選擇。 人們信任一個能叫出他們名字的頁面。「你是哪一種人？」讓訪客自行進行區隔，因此之後的每個字都能對一個人說話。這也只需要一次點擊，而非一個表單。
• 價值先於要求。 H1 標題明示 ICP 想要的結果（時間、金錢、他們缺乏的技能），而非服務。兩位 VSL 漏斗實踐者這樣說：Haynes 說「清楚且直接地陳述你的提案內容及其對象」；Iles 說「專注於結果，而非服務」。
• 更少的選擇，更多的行動。 每個頁面只有一個主要行動呼籲（CTA）。次要路徑是安靜的文字連結，永遠不是第二個按鈕。
• 冷靜 = 可信賴。 克制（留白、一種強調色、輕量級大字體）給人高端且自信的感覺。雜亂給人急迫的感覺。這是來自參考建置的設計判斷。UNVERIFIED（未驗證）為可測量的轉換效果。
• 透過觀看產生投入。 VSL 無法向前跳過，因此 CTA 會遇到聽完整個論點的人。結束畫面會直接放置 CTA。

---

步驟 1. 客戶資料收集：誰會進來、他們想要什麼、什麼阻礙他們

在任何像素之前完成此步驟。與客戶一起填寫 templates/client-intake.md。

針對每個 ICP，寫下：

• 他們自己的說法，他們會如何在名片上描述自己。olaceo 的案例：「我經營一家公司」/「我用 AI 開發」。
• 目標：他們來此要達成的唯一結果。業主購買的是結果（「省錢、省時、賺錢」），而非工具。
• 主要異議：他們會離開的原因。開發者：「我會開發，但面對銷售電話就卡住」。業主：「我不知道 AI 能為我的生意解決什麼問題」。
• 他們需要的證據：僅限你實際擁有的真實證據。
• 下一步：針對該 ICP 的單一行動（預約通話、開始導覽、購買、下載）。
• 價格規則：顯示或隱藏。olaceo 的商業漏斗顯示「無價格」（「我們在報價前會先診斷」），由建置過程強制執行。

規則：

• 參考案例為 2 個 ICP。路由器上超過 3 個入口會稀釋分流效果。UNVERIFIED（未驗證）（判斷，未經測試）。
• 如果你無法用一句話描述一個 ICP 的目標，你就還不能為他們建置頁面。停下並提問。

步驟 2. 入口分流（路徑為「/」的路由器）

特性：首頁是一個路由器。一個問題和每個 ICP 一個大卡片。沒有主視覺文案牆，沒有導覽選單。

參考建置（路由器頁面及其樣式；自 2026 年 10 月 24 日起在 olaceo.com 上線）：

• H1 = 文字標誌加上一行命名兩個目標受眾的文字（「為企業主和銷售它的開發者打造的、會賺錢的 AI。」）。螢幕閱讀器會將其作為真實文字讀取。
• 問題：「你是哪一種人？」（小寫、安靜）。邊距爲 56px 0 18px。
• 卡片：橫向 2 張，每張 340px，間距 16px，高度 200px，圓角半徑 22px，邊框 rgba(18,24,32,.09)。箭頭圓盤 44px。懸停時上移 -2px；點擊時縮放至 .985。
• 行動版：寬度 420px 以下顯示為 1 欄，卡片高度 108px。
• 每張卡片是一個純粹的 <a href>。它無需 JavaScript 即可運作。
• 記住的選擇：localStorage 中的 ola_path。回訪時會顯示「歡迎回來」，最後選擇的卡片會有一個安靜的「繼續」標籤。
• 從不自動重新導向。 原因：每個頁面上的標誌都連結到「/」，因此自動路由會困住任何選錯入口的人。
• 直接連結（廣告、電子郵件、PDF）會直接導向 ICP 頁面，絕不經過路由器。
• 會員會在卡片下方有一個安靜的文字連結（「已經是會員了嗎？登入」）：13px、#6B7580、44px 觸控目標。
• 載入器：僅使用 CSS 的 h1 文字標誌動畫。執行時間為 1.78 秒，同次會話回訪時為 0.4 秒，而減少動態效果設定則為一次 0.4 秒的淡入效果。無額外請求，CLS（累計版面配置位移）爲 0。
• 離開：跨文件檢視過場動畫，僅用於從路由器到路徑頁面：淡出 0.3 秒，淡入 0.5 秒 cubic-bezier(.22,1,.36,1)。
• 頁尾：一排安靜的次要連結（免費指南、預約、關於、隱私權、條款）。
• JSON-LD：Organization、Person、WebSite，加上一個包含每個路徑 hasPart 的 WebPage。

在參考建置上測量：選項、文字標誌和問題居中誤差在 0.02px 以內；垂直堆疊居中誤差為 0.000px；路由器測試套件 39/39。

步驟 3. 每個 ICP 的路徑：直接通往價值

每個 ICP 頁面都遵循相同的主軸：標題、影片、一個行動。

1. 頂欄標題：對象是誰，用白話說明。例如「給企業主」。
2. H1：結果。12 個字或更少。
3. 引言：一行。說明你如何交付。
4. VSL：大且置中（步驟 3a）。
5. 一個 CTA 直接在影片下方，從載入時就可見，沒有延遲顯示。CTA 下方的小字消除恐懼：「免費。30 分鐘。無簡報。」
6. 證據直接放在主視覺下方：誠實的內容（「我們交付了什麼」）。
7. 然後只放能回應異議的內容，順序如下：問題（用他們自己的話）、你發現或做了什麼、運作方式（3 個步驟）、提案階梯、常見問題（FAQ，包含直接的成本答案），以及一個滿版關閉式 CTA，重複相同的單一行動。

參考順序：

• /business：主視覺 VSL、我們交付了什麼、問題（4 個）、審計發現了什麼（6 項，編號）、運作方式（導覽、診斷、建置）、階梯、FAQ、關閉式 CTA（替代文字連結至免費網站檢查）。
• /builders：主視覺 VSL、#book（內嵌行事曆，「選擇時間。」）、對象是誰、關於創辦人、FAQ。

規則：

• 頁首沒有預約按鈕。 頁首只有文字標誌（以及必要時關於/FAQ 的文字連結）。原因：頂端的第二個 CTA 會與影片競爭。
• 浮動膠囊按鈕，與頁面上的單一 CTA 相對應。它在主視覺 CTA 滾動離開視窗後才出現，並在行事曆、表單、關閉式 CTA 和頁尾上方隱藏（[data-fc-hide]）。它位於底部 20px 加上安全區域的中間。減少動態效果：僅淡入淡出。
• 利基頁面（/for/<slug>）是一個 JSON 檔案，合併在預設 JSON 之上，因此利基頁面只需列出變更的部分。
• 盡可能在同一處預約。CTA 會滾動到內嵌行事曆，而非另一個網站，因此訪客無需離開頁面即可預約。UNVERIFIED（未驗證）在我們自己的流量上測量出提升效果。

3a. VSL 佈局與播放器規則（在 olaceo.com 的 /business 和 /builders 頁面上線）

佈局（程式碼在 reference/tokens.css 中，命名為「置中 VSL 主視覺」）：

• 頂欄標題 tracking .08em，下邊距 14px。
• H1：clamp(40px,3.3vw,56px)/1.05，最大寬度 880px。
• 引言：clamp(17px,1.35vw,19px)，最大寬度 720px，距離 H1 下方 12px。
• 影片：width:min(880px,92vw,calc((100svh - 330px)*16/9))，距離引言下方 22px，圓角半徑 16px，陰影 0 24px 60px -28px rgba(10,30,50,.35)。高度條件確保在較短的筆記型電腦上，CTA 仍位於折線之上。
• CTA：最小寬度 320px，高度 56px。
• 測量結果：在 1440x900 解析度下，影片為 880x495，按鈕位於 y 744-800（在折線內）。在 1280x720 解析度下，影片為 693x390。在 390x844 解析度下，4:5 影片為 358x448，按鈕位於 y 712-768。
• 行動版：H1 32px/1.08，引言 15px。只有在直立手機 (max-width:699px) and (orientation:portrait) 時，才會使用 4:5 檔案。旋轉時，會在同一秒切換檔案。始終使用 object-fit:contain，確保文字永不裁切。

播放器（程式碼摘錄在 reference/motion.js 的 C 部分）：

• 在首次點擊之前：一個靜音的預覽循環，帶有 18px 模糊和 1.1 倍縮放（行動版為 12px 和 1.13 倍），一個靜態標題置於 112px 播放按鈕上方（內圓 92px；行動版為 100/80），以及下方顯示「播放時有聲音」。首次點擊會在 0.42 秒內取消模糊，從 0:00 開始並開啟聲音重新播放，且模糊永不返回。
• 不可向前跳過：maxW 只能透過自然播放增長（每一步小於 1.5 秒）。任何搜尋超過 maxW + 0.3s 的動作都會被彈回。播放速率鎖定為 1。不允許 PiP（子母畫面）、遠端播放、下載或原生全螢幕；iOS 保持內嵌。倒轉和暫停始終允許。按鍵：Space/K 切換，J -10 秒，Left -5 秒，Home；Right 僅能在已觀看部分的內部操作。
• 控制項：播放 2 秒後控制列自動隱藏。按鈕 44px（行動版 48px）。進度條軌道 4px（懸停時 6px），拖曳頭 14px。
• 結束畫面：CTA（已聚焦）加上「再次觀看」。
• 事件：VideoPreview、VideoSoundOn、VideoView25/50/75/100、VideoReplay。
• 畫質：僅在大型高 DPR（裝置像素比）螢幕上，且 mediaCapabilities 報告可流暢解碼時，才提供 4K。如果 4K 失敗，它會在同一秒回退到 1080p，並保持聲音。（已知錯誤模式：回退時靜音。修復：僅在 NotAllowedError 時靜音。）
• 播放按鈕置中：光暈、圓圈和 SVG 共用一個網格儲存格（inset 0, margin auto, 無轉換），且三角形的面積中心向右偏 +0.5px。在 DSF 3 下測量到離中心偏移 0.000px。
• 為何不能跳過：CTA 應該要遇到聽完整個論點的人。為何使用模糊：它表示「這是一個影片，點擊它」，而不會自動播放聲音。
• 目標：VSL 5 分鐘或更短。50% 或更高的播放率和參與度目標來自 Haynes VSL 方法。UNVERIFIED（未驗證）：我們尚未有測量到的播放率。

3b. 表單與摩擦

• 一個畫面，最多 3 個欄位（參考案例：名字、電子郵件、公司網站或名稱）。無步驟、無進度條。資格審查在通話中和 CRM 中進行。
• 每個欄位都有正確的 autocomplete、inputmode、autocapitalize、spellcheck=false（必要時），以及 enterkeyhint（下一個、下一個、執行）。Enter 鍵移動到下一個欄位。
• 伺服器端需有蜜罐（honeypot）、同源檢查、大小限制和速率限制。在無 JavaScript 的情況下也能運作（一個真實的 action + method="post"）。
• 按鈕說明動作：「預約我的導覽」。按鈕下方的小字：「我們僅用此資訊來安排您的導覽。不會加入任何清單，也不會發送垃圾郵件。」
• 電話號碼只有在選填，且在獲得承諾後才詢問，並附帶一個獨立且未勾選的 SMS 同意核取方塊，其措辭需經建置過程檢查。
• 歷史背景（原因）：最初建立了一個 8 個畫面的點擊測驗，然後被移除（「不要八次點擊，少於兩分鐘」）。不要建立多步驟測驗。

3c. 文案規則（盡可能強制執行）

• 品牌名稱一律小寫（「olaceo」），即使在全部大寫的頂欄標題中也一樣（使用 <span class="lc">）。對於客戶，請使用其品牌自己的大小寫規則。
• 禁止使用破折號。在利基文案中出現 U+2014 字元會導致建置失敗。
• 當 BIZ_SHOW_PRICES 為 false 時，商業漏斗中不顯示價格。在渲染的 HTML 中出現 $<digit> 會導致建置失敗。
• 利基文案中禁止使用虛構的統計數據、% 聲明、標誌、推薦證言或未發布的產品名稱。建置過程會因這些項目而失敗（bannedProof）。
• 價值優先：H1 中說明結果，引言中說明機制，CTA 下方消除恐懼。
• 直白的語言、簡短的句子、縮寫、第二人稱。olaceo 的開發者頁面使用創辦人的語氣（「各位，……」），絕不使用「bro」（該詞出現在電子郵件中會導致建置失敗）。
• 隱蔽的選擇性：僅使用具體說明，絕不使用「精心挑選」、「被選中」或「獨家」。
• 禁止使用「被駭」聲明：使用「可能」，絕不使用「是」。
• 在教練課程或收入相關頁面上，需有收入免責聲明。

步驟 4. 設計標記：字型、間距、網格、顏色、主題

複製 reference/tokens.css。保留所有非顏色的數值。將顏色替換為客戶的顏色。

排版（原因：一個可變字體系列可保持冷靜並節省一個請求；輕量級大字體看起來更高端）：

• 一個字體家族，自託管的 woff2 可變字體 300-700，font-display:swap，預先載入。備用字體：system-ui, -apple-system, "Segoe UI", sans-serif。
• 內文：400，1.0625rem/1.6。小字：.9375rem。
• H1：粗細 300，clamp(2.625rem,5.4vw,5rem)，行高 1.04，字距 -.03em。
• H2：粗細 400，clamp(2rem,3.4vw,3.125rem)，1.1，-.025em。
• H3：1.25rem，600，1.3，-.01em。
• 標題使用 text-wrap:balance。
• 行長：引言 34ch，內文 60ch，標題段落 38ch。

間距與網格（原因：大的固定韻律 = 冷靜；clamp() 讓一個系統從 320 到 2560 都能適用）：

• 側邊邊距 --m clamp(20px,4vw,64px)。
• 區塊內距 --gap clamp(96px,11vw,168px)。
• 容器最大寬度 1360px。
• 12 欄網格，間距 clamp(16px,2vw,32px)。
• 區塊標題底部邊距 clamp(40px,4.4vw,64px)。
• 斷點：900、700/699 和 560px。
• 圓角半徑：卡片 22px，小元素 16px，操作和輸入欄位為膠囊狀（999px）。
• 觸控目標 44px 或更大。主要按鈕 54px（.btn），在主視覺和表單中為 56px（拇指可及範圍）。
• 導覽列高度 72px（行動版 64px）。

顏色（原因：一個強調色表示「在此行動」；其他所有內容都是紙張上的墨水，加上一個柔和的色調層級）：

• 角色：背景色（白色）、色調層級（mist, mist-2）、文字色（ink, ink-2）、強調色（sky, 懸停色 sky-2, 淺色背景 wash）、線條色。

...

[因內容過長已截斷]