网站VSL标准（olaceo方法）是做什么的？

v1.0.0，2026年10月25日。根据olaceo.com的参考代码及其测量日志编写，而非凭记忆。以下每个数字要么是：

已测量：从参考代码或参考构建的验证日志中复制，或
标有未验证：一个目标，外部声明，或尚未测量。不要将这些作为事实引用给客户。

与此标准一同提供的文件（路径相对于此文件）：

reference/tokens.css: 真实的令牌块（亮色和暗色）、基础字体、网格、按钮、输入框、英雄区、药丸形和过渡。
reference/motion.js: 真实的弹簧、橡皮筋、速度、投射和VSL禁止快进代码。
templates/client-intake.md: 步骤1使用的可填写信息收集表。

一屏哲学（请先阅读）

一位访客，一项任务，一个下一步。 每个访问者都有一个目标。网站的任务是轻点一下就能确定他们是谁，然后只显示能推动该访客前进的内容。摩擦是敌人。
安静的前台，运转的机器在幕后。 表面是留白、一种字体、一种强调色和真实的照片或视频。智能功能（路由、禁止快进播放器、追踪、CRM）是不可见的。
凭证，而非宣称。 不使用编造的统计数据、标志、推荐语、稀缺性或倒计时。如果证据不存在，该位置保持隐藏，或者常见问题解答说明“尚未达到，我们不会编造任何东西”。构建会在出现禁止的声明时失败。
每个人都能在一个有用的地方退出。 没有死胡同，也没有拒绝性语言（“不适合”，“不符合条件”）。尚未准备好的访客将获得免费路径。
动效是液态的，而非玻璃的。 动效遵循物理规律（弹簧、速度、橡皮筋）。它从不用于装饰，并且始终尊重“减少动效”设置。想象水汇入水坑，而非玻璃碎片。
可测量，而非凭感觉。 居中、布局偏移、帧率和屏幕折叠位置在声称完成之前，均以px和ms为单位进行测量。

为什么有效（心理学角度）：

入口处自我选择。 人们信任能叫出他们名字的页面。“你是哪一个？”让访客自己进行分类，因此之后的每一个字都可以针对一个人说话。而且代价仅需一次点击，而非一个表单。
先给价值，再提要求。 H1标题陈述ICP想要的结果（时间、金钱、他们缺乏的技能），而非服务。两位VSL漏斗实践者这样表述：Haynes，“清晰直接地说明你的提案是什么以及为谁准备”；Iles，“关注结果，而非服务”。
更少选择，更多行动。 每个页面一个主要CTA。次要路径是安静的文字链接，绝不是第二个按钮。
平静=可信。 克制（留白、一种强调色、轻量级大号字体）显得高端且自信。杂乱显得急切。这是基于参考构建的设计判断。作为测量到的转化效果，此项未验证。
通过观看建立承诺。 VSL不能被快进，因此CTA面对的是听过完整论点的人。结束页面直接放置CTA。

步骤1. 信息收集：谁进来，他们想要什么，什么阻止他们

在任何像素设计之前执行此操作。使用 templates/client-intake.md 与客户一起填写。

对于每个ICP，写下：

用他们自己的话命名的名称，他们会在卡片上如何描述自己。olaceo：“我拥有一家企业” / “我使用AI进行构建”。
目标：他们来的唯一结果。业主购买成果（“省钱、省时、赚钱”），而非工具。
主要异议：他们会离开的原因。构建者：“我能构建，但在销售电话时卡壳”。业主：“我不知道AI能解决我业务中的什么问题”。
他们需要的证据：只有你实际拥有的真实证据。
下一步：该ICP的单个动作（预约通话、开始导览、购买、下载）。
定价规则：显示或隐藏。olaceo商业漏斗不显示价格（“我们先诊断，再报价”），由构建强制执行。

规则：

2个ICP是参考配置。路由器上超过3个门会稀释入口分流效果。未验证（判断，未经测试）。
如果你无法为某个ICP的目标写出一句话，你就还不能构建他们的页面。停下来并询问。

步骤2. 入口分流（“/”路由）

功能：首页是一个路由器。一个问题，每个ICP对应一张大卡片。无英雄区文字墙，无导航菜单。

参考构建（路由器页面及其样式；自2026年10月24日起在olaceo.com上线）：

H1 = 文字标志加上一行命名两个受众的文字（“为商业业主和销售AI的构建者打造的AI。”）。屏幕阅读器将其视为真实文本。
问题：“你是哪一个？”（小写，安静）。边距 56px 0 18px。
卡片：2列，每张340px，间隙16px，高度200px，圆角22px，边框 rgba(18,24,32,.09)。箭头圆形44px。悬停时上移-2px；激活时缩放至.985。
移动端：宽度达到420px之前为1列，卡片高度108px。
每张卡片是一个纯<a href>链接。无需JS即可工作。
记住的选择：localStorage ola_path。回访时显示“欢迎回来”，且最后选择的卡片会出现一个安静的“继续”芯片。
从不自动重定向。 原因：每个页面上的标志都链接到“/”，因此自动路由会困住任何选错门的人。
直接链接（广告、电子邮件、PDF）直接指向ICP页面，绝不经过路由器。
会员在卡片下方有一个安静的文字链接（“已是会员？登录”）：13px，颜色#6B7580，44px触控目标。
加载器：基于H1自身文字标志的纯CSS动画。运行1.78秒，同一会话回访时为0.4秒，设置“减少动效”的用户只有一次0.4秒淡入。无额外请求，CLS为0。
退出：跨文档视图过渡，仅用于从路由器到路径：退出 .3s，进入 .5s cubic-bezier(.22,1,.36,1)。
页脚：一排安静的二级链接（免费指南、预订、关于、隐私、条款）。
JSON-LD：Organization, Person, WebSite，以及一个包含每个路径作为hasPart的WebPage。

在参考构建上测量：选择、文字标志和问题居中偏差在0.02px以内；堆叠垂直居中偏差0.000px；路由器测试套件39/39通过。

步骤3. 每个ICP路径：直接通往价值

每个ICP页面遵循相同的主干：标题、视频、一个行动。

眉标：为谁准备，用平实的语言。“为商业业主”。
H1：结果。12个词或更少。
导语：一行。你如何交付。
VSL：大尺寸并居中（步骤3a）。
一个CTA直接在视频下方，从加载时可见，无延迟显示。其下的细则消除恐惧：“免费。30分钟。无推销演讲稿。”
英雄区下方的直接证据：只使用诚实的证据（“我们交付了什么”）。
然后是仅回答异议的内容，顺序如下：问题（用他们的语言）、你发现或做了什么、运作方式（3个步骤）、产品阶梯、常见问题解答（包含直接的成本答案）、以及一个全宽收尾CTA，重复该唯一行动。

参考顺序：

/business：英雄区VSL，我们交付了什么，问题（4个），审计发现什么（6个，编号），运作方式（导览、诊断、构建），产品阶梯，常见问题解答，收尾CTA（指向免费网站检查的替代文本链接）。
/builders：英雄区VSL，#book（内联日历，“选择时间。”），为谁准备，关于创始人，常见问题解答。

规则：

头部无预订按钮。 头部仅包含文字标志（必要时加上关于/FAQ文字链接）。原因：顶部的第二个CTA会与视频竞争。
浮动药丸形按钮反映页面上的唯一CTA。仅在英雄区CTA滚动消失后出现，并在日历、表单、收尾CTA和页脚上方隐藏（[data-fc-hide]）。位于底部20px + 安全区域居中。减少动效：仅淡入淡出。
细分页面（/for/<slug>）是一个覆盖默认JSON的JSON文件，因此细分页面仅列出更改项。
尽可能就地预订。CTA滚动到内联日历，而非其他站点，因此访客无需离开页面即可预订。作为我们自己流量上的测量提升，此项未验证。

3a. VSL布局和播放器规则（在olaceo.com的/business和/builders上运行）

布局（代码在reference/tokens.css中的“居中VSL英雄区”）：

眉标字间距 .08em，下边距14px。
H1：clamp(40px,3.3vw,56px)/1.05，最大宽度880px。
导语：clamp(17px,1.35vw,19px)，最大宽度720px，下边距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。仅在竖屏手机上使用4:5文件(max-width:699px) and (orientation:portrait)。旋转设备时在同一秒切换文件。始终object-fit:contain，因此文字不会被裁剪。

播放器（reference/motion.js 部分C中的代码摘录）：

首次点击前：一个带有18px模糊和1.1缩放（移动端12px和1.13）的静音预览循环，一个静态标题覆盖在112px播放按钮（92px内圆；移动端100/80）上，下方显示“播放时有声音”。首次点击在.42秒内取消模糊，从0:00重新开始播放声音，且模糊不再出现。
禁止快进：maxW仅通过自然播放增长（每步小于1.5秒）。任何跳转至maxW + 0.3秒以外的操作将被弹回。播放速率锁定为1。无画中画、远程播放、下载或原生全屏；iOS保持内联。倒退和暂停始终允许。键盘：Space/K切换，J -10秒，左箭头-5秒，Home；右箭头仅在已观看部分内可用。
控制栏：播放2秒后自动隐藏。按钮44px（移动端48）。轨道4px（悬停时6px），拖动手柄14px。
结束画面：CTA（聚焦状态）加“再次观看”。
事件：VideoPreview、VideoSoundOn、VideoView25/50/75/100、VideoReplay。
质量：仅在大尺寸高DPR屏幕上且mediaCapabilities报告支持流畅解码时提供4K。如果4K失败，则在同一秒回退至1080，保持声音。（已知错误模式：回退导致静音。修复：仅在NotAllowedError时静音。）
播放按钮居中：光晕、圆形和SVG共享一个网格单元格（inset 0, margin auto, 无transform），三角形的区域质心向右偏移+0.5px。在DSF 3下测量，偏离中心0.000px。
为何禁止快进：CTA应对听过完整论点的人说话。为何使用模糊：它在不自动播放声音的情况下表明“这是一个视频，点击它”。
目标：VSL 5分钟或更短。50%或更高的播放率和参与度目标来自Haynes VSL方法。未验证：我们尚无测量的播放率。

3b. 表单和摩擦

一屏，最多3个字段（参考：名字、邮箱、企业网站或名称）。无步骤，无进度条。资格确认在通话和CRM中进行。
每个字段获得正确的 autocomplete、inputmode、autocapitalize、必要时 spellcheck=false，以及 enterkeyhint（next, next, go）。回车键移动到下一个字段。
蜜罐字段、同源检查、大小限制和服务器端速率限制。无需JS也能工作（一个真实的 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)。
断点：900px、700/699px和560px。
圆角：卡片22px，小号16px，操作和输入框药丸形（999px）。
触控目标44px或更大。主按钮54px（.btn），英雄区和表单中56px（拇指触及范围）。
导航栏72px高（移动端64px）。

颜色（原因：一种强调色意味着“在此操作”；其他所有内容都是白色背景上的墨水色，加上一层柔和的色调）：

角色：背景（白色），色调步进（mist, mist-2），文字（ink, ink-2），强调色（sky, 悬停 sky-2, wash），线条，

[已截断，待翻译]

网站VSL标准（olaceo方法）