ux-landing-page

着陆页技能

此技能的行为方式（请先阅读）

这是一项生成式技能，而着陆页只有一个目标：引导访客完成单一转化目标。常见的失败形式是面面俱到的页面——包含完整的网站导航、多个相互竞争的优惠、含糊的标题、大段文案，以及必须滚动页面才能找到的 CTA——结果是注意力分散，转化无从谈起。（用户大约会在 0.05 秒内形成第一印象，阅读的文案最多约占 20%。）另一个极端则是精美的主视觉区，却没有价值主张，也没有值得信赖的理由。因此，此技能会先确认：

1. 明确单一转化目标和访客来源——这决定页面保留什么、删掉什么。
2. 应用始终适用的核心原则——聚焦单一目标、标题鲜明、价值主张明确、CTA 突出、展示信任信号，并确保快速且响应灵敏。
3. 呈现取决于具体情况的决策（是否删减导航、权益、聊天功能和页面长度），并说明其权衡。

随后，它会交由 ux-aesthetics-audit、ux-heuristics-audit、ux-accessibility-audit、ux-microcopy-audit、ux-dark-patterns-audit 和 ux-mobile-responsiveness-audit 进行验证。

范围与组成（依据 docs/orchestration-policy.md §9）：此技能涵盖着陆页本身，并组合调用更小范围的技能，而不是重新推导其内容。核心子技能（作为页面的一部分构建）：通过 ux-buttons 实现 CTA 按钮机制。下游技能（提供选项，不自动构建）：通过 ux-pricing 实现定价表，通过 ux-login-signup 和 ux-checkout-payment 实现点击后的注册／结账流程。**继承，不重新生成：**如果已有设计系统，就从其设计令牌中获取颜色、字体和间距；只有从头设计时才设置这些内容。

---

第 0 步——设计前明确背景

如果尚不清楚，请先询问；如果在未获答复的情况下继续，请说明假设：

• 单一转化目标是什么？ 注册、购买、预约演示、订阅或下载。一页，一个主要操作——其他一切都从属于它。如果利益相关方提出多个目标，应讨论优先级，而不是设置五个同等重要的按钮。
• 访客是谁，他们对产品了解多少？ 特定领域的受众可以接受（部分）领域术语；普通受众或漏斗上层受众则需要通俗的语言，并在提出转化请求前获得更多背景信息。流量来源（针对某项功能的广告，还是首页）会影响页面需要在多大程度上与吸引访客前来的承诺保持一致。
• 这是营销活动着陆页，还是网站内的页面？ 专门的营销活动页面通常会移除全局导航，以保持聚焦；主站内的页面通常会保留导航，方便用户浏览。这个选择会改变多项默认设置。
• 产品类型与品牌——决定图片风格、语气，以及是否适合使用活泼俏皮的文案。

---

始终适用的核心原则（几乎适用于所有着陆页）

聚焦——围绕单一目标

• 移除所有不支持主要操作的内容。 删除次要优惠、没有传递意义的装饰性图片，以及（营销活动页面上的）全局导航。每个元素都应发挥作用，引导访客完成目标。
• 让文案便于浏览。 每段控制在约 3–4 行，每隔几段添加一个描述性小标题，并先讲重点——用户会快速浏览，而不会逐字阅读。

信息传达——标题 + 价值主张

• 标题要简洁、有吸引力。 标题是赢得约 0.05 秒第一印象的关键；应清晰、切合优惠，并保持简短。避免因追求巧妙而让人看不懂页面内容。
• 在页面靠上位置清楚呈现价值主张。 用清晰的语言（配合辅助视觉）回答三个问题：这是什么？它如何为我带来好处？它如何运作？ 这是简短的产品介绍——用户不应滚动页面才能找到。
• 避免行话。 使用受众熟悉的说法；如果面向专业受众时无法避免使用技术术语，应先解释清楚。行话既影响可读性，也会削弱可信度。

核心诉求——行动号召（CTA）

• 设置一个醒目且无需滚动即可看到的主要 CTA。 使用强调色或对比色，尺寸足够大（目标区域至少为 44×44px），标签使用能明确说明操作的动词（如“开始免费试用”，而不是“提交”）。对于较长的页面，应间隔重复 CTA。
• 如果首屏以下还有内容，请添加滚动提示（例如向下箭头），避免访客误以为页面在主视觉区就结束了。

信任——为何值得相信

• 社会认同。 评价、评分、推荐语、使用数据——人们不想做第一个尝试的人；大多数人信任同行推荐和公开评价。展示真实、具体的证据。
• 品牌权威。 知名客户、合作伙伴或媒体报道的徽标，能让访客相信这项服务确实可靠。

技术细节——必须实际可用

• 适配各种设备——尤其要确保标题和 CTA 在桌面端到手机端都能正常显示，并且易于点击。
• 快速加载——目标是低于约 2.5 秒；页面加载缓慢（尤其是在移动设备上）会导致访客在看到任何内容前就离开。

---

取决于具体情境的决策（展示出来，不要一概而论）

说明每项决策的权衡，并结合步骤 0 给出建议。把所有说服手段都堆上——优惠 + 紧迫感 + 弹窗 + 固定聊天窗口——是失败之举；这会让页面像在强行推销，损害信任。

决策	适用情况	应避免 / 调整的情况	默认建议
保留还是移除全局导航	位于主站内的页面（便于用户查找内容）	只有一个目标的推广活动页面，因为导航会让用户离开	根据页面类型决定；如果目标是促成一次转化，就移除会分散注意力的导航
优惠 / 互惠（折扣、免费配送、赠品）	与优惠内容相符的真实激励；互惠原则能促使用户采取行动	虚构的“免费赠品”会损害信任，或优惠与目标无关	提供真实、相关的激励，并保持诚实（→ dark-patterns）
聊天 / 支持小组件	对于需要考虑一段时间的购买，初次访问者可能会有疑问	移动端——固定聊天窗口会遮挡筛选器、CTA 或结账区域，让用户感到烦恼	提供聊天支持；将固定聊天窗口仅用于桌面端
页面长度（仅主视觉区的短页面，或长篇页面）	对于复杂、需要仔细考虑的优惠，长篇页面可用于提供说明和证明	简单、无需过多考虑的操作，却使用长页面	页面长度应与决策复杂度相符；无论长短，都只设定一个目标
社会认同类型（推荐语 / 数据 / 徽标 / 评分）	选择受众最信任且能如实展示的内容	含糊或无法验证的说法（如“深受数千人喜爱”）	具体、真实的证据胜过泛泛的溢美之词
文案风格 / 幽默感	适合该品牌且决策风险较低的情况	严肃或高度依赖信任的领域（金融、医疗），或幽默会模糊价值主张的情况	可以亲切，但绝不能牺牲清晰的价值主张

验证结果（编排）

交接时，请使用每个视角对应的可安装技能 name。只有在安装了该技能时才调用它；如果未安装，此技能自身的核心内容已包含这些规则，因此无需阻塞，直接继续。

生成或修订后，请将结果交给审查视角，而不是直接宣布完成。这些是候选视角——具体采用方式由 docs/orchestration-policy.md 规定，也可以将整个内容交由 ux-design-review 审查。此处，heuristics、microcopy 和 dark-patterns 属于 A 级（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 B 级（可选）——使用现有设计系统时，aesthetics 会被抑制，accessibility 的范围会缩小到使用层面；mobile-responsiveness 仅适用于移动设备。如果用户调用此技能是为了处理某个特定事项，请遵守该范围。

• ux-aesthetics-audit （B 级——可选；使用设计系统时抑制） — 视觉层次是否清晰，是否只有一个明确的焦点（CTA／价值主张），首屏内容是否过于拥挤，节奏是否便于浏览，而非堆砌大段文字。
• ux-heuristics-audit （A 级） — 页面是否兑现了引导用户前来的广告／链接所做的承诺；下一步是否明确；CTA 操作的系统状态是否清晰。
• ux-accessibility-audit （B 级——可选；使用设计系统时缩小范围） — CTA 的对比度和目标尺寸、标题层级、图片替代文本、正文字体的可读性。
• ux-microcopy-audit （A 级） — 标题是否清晰、价值主张的措辞、术语使用、CTA 标签质量。
• ux-dark-patterns-audit （A 级） — 着陆页可能采用的转化施压陷阱：虚假的紧迫感／稀缺倒计时、操纵性或捏造的社会认同、羞辱拒绝选项的确认提示，以及会困住用户的弹窗。说服应当诚实。
• ux-mobile-responsiveness-audit （B 级——可选） — 标题／CTA 在手机上的呈现和触达性、粘性聊天窗口的注意事项、移动端加载速度、点击目标。

如果审查发现冲突（例如，营销团队想要提供三种优惠并加入倒计时），请回到首要任务：一位访客，一项决策——移除任何无助于访客做出决策的内容。

---

常见的正确与错误做法

❌ 不要	✅ 应该
塞入多个优惠、完整导航和大段文字	聚焦一个目标；删掉所有无助于实现目标的内容
用花哨的标题掩盖页面内容	标题清晰简洁，并与优惠相关
将价值主张藏在首屏下方	在醒目位置清楚说明是什么、有什么好处、如何实现
用术语卖弄专业	使用受众熟悉的语言；解释无法避免的术语
使用“提交”这类按钮，或在页面中部放置低对比度按钮	CTA 使用主动动词、强调色、≥44px，且无需滚动即可看到
使用毫无意义的装饰性图库图片	使用能强化信息的情境图片
不给用户信任理由就要求转化	使用真实具体的社会认同和品牌权威
同时堆叠紧迫感、福利、弹窗和移动端粘性聊天窗口	提供诚实的激励；粘性聊天窗口仅限桌面端（→ dark-patterns）
认为首屏就是整个页面	如果首屏下方还有内容，提供滚动提示
发布加载缓慢、仅适用于桌面的布局	使用响应式设计；确保标题和 CTA 在移动端完整显示；加载时间 < ~2.5s
不经检查就发布	交由 aesthetics、heuristics、accessibility、microcopy、dark-patterns 和 mobile-responsiveness 审查

---

参考经验（Uxcel）

• 如何设计能带来转化的着陆页