网页销售设计
构建能够销售产品的网站的艺术。这不是营销策略、文案或 A/B 测试基础设施——而是将访客转化为客户的设计模式、视觉系统和交互技术。
核心原则：最好的销售设计是隐形的。访客不会想“这是在向我推销。”他们会想“这正是我需要的。”每一个像素、每一次滚动揭示、每一个社会认同的放置，要么建立信任和渴望，要么削弱它们。没有中立地带。
何时使用
适用于：
- 设计需要将访客转化为注册/购买的着陆页
- 构建具有有效层级架构的定价页面
- 放置和设计社会认同（客户评价、logo、案例研究）
- 制作能获得点击的 CTA 按钮（大小、颜色、文案、位置）
- 构建长格式销售页面（问题-激发-解决 滚动序列）
- 添加信任信号（安全徽章、保证、真实人脸）
- 创建交互式产品演示和功能导览
- 构建“惊艳时刻”——滚动触发的揭示、前后对比
- 审计现有页面的转化设计弱点
请勿用于：
- 文案撰写和消息策略 → 使用 product-appeal-analyzer 或文案技能
- A/B 测试实施 → 使用 frontend-developer
- 付费广告创意 → 使用市场营销技能
- UX 摩擦审计 → 使用 ux-friction-analyzer（互补——两者都运行）
- 通用网页设计 → 使用 web-design-expert
- 支付/订阅实施 → 使用 webapp-paywall-implementation
滚动驱动销售页面蓝图
现代长格式销售页面遵循一个心理弧线。每个部分都有其职责。跳过某个部分，页面就会流失访客。
8 部分结构
┌─────────────────────────────────────────────┐
│ 1. HERO — 承诺 + 身份信号 │ ← 0-5 秒
│ "这是为像我这样的人准备的" │
├─────────────────────────────────────────────┤
│ 2. LOGO BAR — 社会认同捷径 │ ← 5-10 秒
│ "受我认识的名字的信任" │
├─────────────────────────────────────────────┤
│ 3. PROBLEM — 痛点确认 │ ← 10-30 秒
│ "他们理解我的处境" │
├─────────────────────────────────────────────┤
│ 4. AGITATE — 不作为的后果 │ ← 30-60 秒
│ "这比我想象的更糟" │
├─────────────────────────────────────────────┤
│ 5. SOLUTION — 产品作为解决方案 │ ← 1-2 分钟
│ "这是它的工作方式 + 演示" │
├─────────────────────────────────────────────┤
│ 6. PROOF — 深度社会认同 │ ← 2-3 分钟
│ "真实的人，真实的结果" │
├─────────────────────────────────────────────┤
│ 7. PRICING — 报价架构 │ ← 3-4 分钟
│ "清晰的价值，显而易见的选择" │
├─────────────────────────────────────────────┤
│ 8. FINAL CTA — 紧迫感 + 保证 │ ← 决策点
│ "零风险，立即行动" │
└─────────────────────────────────────────────┘
逐节实现
第 1 节：Hero（5 秒判决）
Hero 决定了访客是留下还是离开。每个元素都必须赢得其像素的位置。
布局模式——汇合式 Hero：
function HeroSection() {
return (
<section className="hero">
{/* 简介标签——轻声传递可信度 */}
<p className="hero-eyebrow">受 2,400+ 个工程团队信任</p>
{/* 标题——一个承诺，以利益为导向 */}
<h1 className="hero-headline">
数小时内发布功能，<br />而非数周
</h1>
{/* 副标题——用一句话解释如何做到 */}
<p className="hero-subheadline">
由 AI 驱动的自动化工作流，将您的待办事项
转化为已部署的代码——经过审查、测试并准备就绪。
</p>
{/* CTA 群——主要 + 低承诺次要 */}
<div className="hero-cta-cluster">
<a href="/signup" className="cta-primary">
免费开始构建
</a>
<a href="/demo" className="cta-secondary">
观看 2 分钟演示
</a>
</div>
{/* 视觉证明——产品运行中，而非截图 */}
<div className="hero-visual">
<video autoPlay muted loop playsInline>
<source src="/demo-clip.mp4" type="video/mp4" />
</video>
</div>
</section>
);
}
.hero {
padding: 5rem 2rem 4rem;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.hero-eyebrow {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
margin-bottom: 1rem;
}
.hero-headline {
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
margin-bottom: 1.25rem;
}
.hero-subheadline {
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.6;
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto 2rem;
}
.hero-cta-cluster {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
顶尖公司的不同做法（Stripe, Linear, Vercel, Notion）：
- Stripe：动画渐变背景，感觉生动而非装饰。通过微交互展示产品能力——当你滚动时，产品自我演示。
- Linear：暗色模式，暗示“为严肃的构建者打造的动力工具。”零视觉浪费。设计本身就是产品承诺——速度和精确性。
- Vercel：以排版为主导的 Hero，用一行字定义了整个产品。CTA 是“开始部署”而非“注册”——行动导向。
- Notion：展示产品工作状态，而非截图。Hero 本身就是一个小型演示。
第 2 节：Logo Bar（信任捷径）
4-6 个可识别的 logo。不是 20 个。数量稀释价值；质量验证一切。
function LogoBar() {
return (
<section className="logo-bar">
<p className="logo-bar-label">
受以下团队信任
</p>
<div className="logo-bar-logos">
{logos.map(logo => (
<img
key={logo.name}
src={logo.src}
alt={logo.name}
className="logo-bar-logo"
/>
))}
</div>
</section>
);
}
.logo-bar {
padding: 2rem 2rem;
text-align: center;
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
}
.logo-bar-label {
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-tertiary);
margin-bottom: 1.25rem;
}
.logo-bar-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
}
.logo-bar-logo {
height: 28px;
opacity: 0.5;
filter: grayscale(1);
transition: opacity 0.2s, filter 0.2s;
}
.logo-bar-logo:hover {
opacity: 1;
filter: grayscale(0);
}
设计规则：
- 默认使用灰度 logo（减少视觉噪音，矛盾地增加可信度）
- 所有 logo 具有相同的视觉高度（28-32px），无论原始比例如何
- 5 个 logo 是甜蜜点——少了感觉稀疏，多了感觉杂乱
- 标签在上方（“受信任”，“被以下团队使用”），而非下方
- 如果没有可识别的 logo，改用指标：“2,400+ 个团队”、“10M+ 次部署”
第 3 节：Problem（痛点确认）
访客必须感到被看见。这个部分验证他们的挣扎。
模式：三痛点网格
function ProblemSection() {
return (
<section className="problem-section">
<h2 className="section-eyebrow">听起来很熟悉？</h2>
<div className="pain-grid">
<PainCard
icon={<ClockIcon />}
title="数周浪费在审查周期上"
description="PR 提交后停滞数日。上下文丢失。工程师在等待批准时，
在各个特性之间切换上下文。"
/>
<PainCard
icon={<AlertTriangleIcon />}
title="Bug 仍然会漏掉"
description="人工审查能捕捉风格问题，但捕捉不到逻辑漏洞。
那些导致生产环境出问题的事情依然会出问题。"
/>
<PainCard
icon={<TrendingDownIcon />}
title="交付速度停滞不前"
description="更多的工程师，相同的产出。流程开销的增长速度
快于团队规模的增长。"
/>
</div>
</section>
);
}
设计规则：
- 使用访客的语言，而非产品的术语
- 最多 3 个痛点（更多会稀释影响力）
- 图标应强化情感，而非装饰
- 这个部分应让访客点头，而非退缩——共情，而非恐惧
第 4 节：Agitate（不作为的成本）
这一节提高赌注。不是通过恐惧——而是通过清晰阐明问题实际造成的成本。
模式：后果级联
展示不断升级的后果：浪费的时间、损失的资金、错失的机会、被侵蚀的团队士气。尽可能使用真实数字（“平均每个团队每周在代码审查上浪费 14 小时”）。
设计方法：较暗的背景，稍微紧凑的排版，可选的动画计数器显示累积的浪费。这个部分在视觉上比问题部分“更沉重”——这是解决方案到来之前的低点。
第 5 节：Solution（产品作为解决方案）
情感上的转折点。页面从问题转向可能性。
模式：带滚动触发揭示的功能展示
function SolutionSection() {
return (
<section className="solution-section">
<h2>这是它的工作方式</h2>
<div className="feature-showcase">
{features.map((feature, i) => (
<FeatureRow
key={feature.id}
reverse={i % 2 === 1} /* 交替布局 */
title={feature.title}
description={feature.description}
visual={feature.visual} /* 视频、动画或交互 */
/>
))}
</div>
</section>
);
}
function FeatureRow({ reverse, title, description, visual }) {
const ref = useRef(null);
const isVisible = useIntersectionObserver(ref, { threshold: 0.3 });
return (
<div
ref={ref}
className={`feature-row ${reverse ? 'reverse' : ''}`}
style={{
opacity: isVisible ? 1 : 0,
transform: isVisible ? 'translateY(0)' : 'translateY(2rem)',
transition: 'opacity 0.6s ease, transform 0.6s ease',
}}
>
<div className="feature-text">
<h3>{title}</h3>
<p>{description}</p>
</div>
<div className="feature-visual">
{visual}
</div>
</div>
);
}
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
padding: 4rem 0;
}
.feature-row.reverse {
direction: rtl;
}
.feature-row.reverse > * {
direction: ltr;
}
.feature-text h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.feature-text p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-text-secondary);
}
@media (max-width: 768px) {
.feature-row {
grid-template-columns: 1fr;
gap: 2rem;
}
.feature-row.reverse {
direction: ltr;
}
}
什么让这个卖得出去：
- 交替布局防止滚动单调
- 视觉元素是交互式或动画的——而非静态图像
- 每个功能被表述为一种利益（“交付速度提升 3 倍”）而非一种能力（“自动化 CI/CD”）
- 滚动触发的揭示创造了发现时刻——页面在他们阅读时“展开”
- 3-5 个功能最多。超过这个数，你就是在罗列，而非销售。
第 6 节：Proof（深度社会认同）
客户评价、案例研究、指标。这是怀疑死去的地方。
function ProofSection() {
return (
<section className="proof-section">
<h2>团队通过我们交付更快</h2>
{/* 指标栏——硬数字 */}
<div className="metrics-bar">
<Metric value="73%" label="更快的审查周期" />
<Metric value="2.4x" label="每周更多部署" />
<Metric value="89%" label="更少的生产环境 Bug" />
</div>
{/* 精选推荐——一个包含人脸的有力引述 */}
<blockquote className="featured-testimonial">
<img src="/testimonials/sarah.jpg" alt="Sarah Chen" />
<div>
<p className="quote">
“我们从一个月的发布频率变成了每天发布。
团队现在实际上很享受审查过程。”
</p>
<cite>
<strong>Sarah Chen</strong>
<span>工程副总裁, Acme Corp</span>
</cite>
</div>
</blockquote>
{/* 推荐网格——社会认同的广度 */}
<div className="testimonial-grid">
{testimonials.map(t => (
<TestimonialCard key={t.id} {...t} />
))}
</div>
</section>
);
}
.metrics-bar {
display: flex;
justify-content: center;
gap: 4rem;
padding: 3rem 0;
}
.metric-value {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
}
.metric-label {
font-size: 0.9375rem;
color: var(--color-text-secondary);
margin-top: 0.5rem;
}
.featured-testimonial {
display: flex;
gap: 2rem;
align-items: flex-start;
padding: 2.5rem;
background: var(--color-surface-elevated);
border-radius: 1rem;
border: 1px solid var(--color-border-subtle);
margin: 3rem 0;
}
.featured-testimonial img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.featured-testimonial .quote {
font-size: 1.25rem;
line-height: 1.6;
font-style: italic;
margin-bottom: 1rem;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
社会认同层次结构（从强到弱）：
- 具名人物 + 照片 + 公司 + 职位 + 具体结果（“Sarah Chen, 工程副总裁, Acme Corp. 将上市时间缩短了 40%”）。
- 具名人物 + 公司（“——某公司某员工”）
- 仅公司名（“——Acme Corp”或“受 Acme 信任”）
- 匿名角色（“一位工程副总裁说...”）
- 通用指标（“89% 的用户...”）
- 没有社会认同（只有产品宣称）
目标：至少 1 个来自层次 1 的推荐（来自实际网站客户的真实高价值引用），至少 3-5 个来自层次 2-3。
第 7 节：Pricing（报价架构）
定价页面转化。并非关于降价——而是关于减少决策疲劳并构建价值框架。
模式：三分栏 + 推荐方案
function PricingSection() {
return (
<section className="pricing-section">
<h2>简单、透明的定价</h2>
<p className="pricing-subtitle">
按需付费，或节省更多。所有方案均包含 14 天免费试用。
</p>
<div className="pricing-tiers">
{pricingTiers.map(tier => (
<div
key={tier.name}
className={`pricing-card ${tier.recommended ? 'recommended' : ''}`}
>
{tier.recommended && <p className="recommended-badge">最受欢迎</p>}
<h3 className="tier-name">{tier.name}</h3>
<p className="tier-price">
<span className="price">${tier.price}</span>
<span className="period">/月</span>
</p>
<ul className="tier-features">
{tier.features.map((feature, i) => (
<li key={i}>{feature}</li>
))}
</ul>
<a href="/signup" className="cta-primary">
开始使用
</a>
</div>
))}
</div>
</section>
);
}
.pricing-section {
padding: 5rem 2rem;
text-align: center;
}
.pricing-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 960px;
margin: 3rem auto 0;
}
.pricing-card {
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-subtle);
border-radius: 1rem;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pricing-card.recommended {
border-color: var(--color-primary);
box-shadow: 0 4px 24px var(--color-primary-alpha);
transform: scale(1.05);
}
.recommended-badge {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary);
letter-spacing: 0.05em;
margin: 0;
}
.tier-name {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-secondary);
margin: 0;
}
.tier-price .price {
font-size: 3rem;
font-weight: 800;
line-height: 1;
}
.tier-price .period {
font-size: 1rem;
color: var(--color-text-tertiary);
}
.tier-features {
list-style: none;
padding: 0;
text-align: left;
}
.tier-features li {
padding: 0.5rem 0;
font-size: 0.9375rem;
color: var(--color-text-secondary);
}
.tier-features li::before {
content: "✓";
color: var(--color-primary);
margin-right: 0.5rem;
}
@media (max-width: 768px) {
.pricing-card.recommended {
transform: none;
}
}
定价页面设计规则：
- 正好 3 个方案。更少（2 个）导致决策困难（“我应该选哪个？”）。更多（4+ 个）导致认知过载。3 是理想的权衡集。
- 推荐方案（中间栏）：将默认选择框定在社会认同内。永远不要将最便宜的方案设置为默认。将推荐方案突出显示——更高的边框对比度、微妙的阴影、视觉提示。
- 定价锚定：最昂贵的方案使得推荐方案感觉在相比之下“便宜”。如果可能，包括一个“企业版”方案，其价格提供锚定——即使很少有人选择它。
- 订阅年付：如果按月显示价格，在旁边显示年付价格（每月价格更低）。例如，“$29/月，或 $290/年（节省 2 个月）”。
- 特征比较：在方案间使用对勾和破折号，使差异清晰可见。不要让人们猜测哪个方案包含什么。
第 8 节：Final CTA（决策点）
这是说服的最终重述。并非全新的争论——而是迄今为止所说一切的重新包装。
模式：风险逆转 + 紧迫感 + 最终行动
function FinalCTA() {
return (
<section className="final-cta">
<h2>准备好交付更快吗？</h2>
<p className="cta-description">
加入 2,400+ 个团队，他们已经在改变构建和发布软件的方式。
</p>
<div className="cta-cluster">
<a href="/signup" className="cta-primary cta-large">
免费开始使用
</a>
</div>
<div className="trust-signals">
<span>无需信用卡</span>
<span>·</span>
<span>14 天免费试用</span>
<span>·</span>
<span>随时取消</span>
</div>
</section>
);
}
.final-cta {
padding: 6rem 2rem;
text-align: center;
background: var(--color-surface-elevated);
}
.final-cta h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
margin-bottom: 1rem;
}
.cta-description {
font-size: 1.25rem;
color: var(--color-text-secondary);
max-width: 500px;
margin: 0 auto 2rem;
}
.cta-large {
font-size: 1.125rem;
padding: 1rem 2.5rem;
}
.trust-signals {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-tertiary);
}
将访客推向点击的设计规则：
- 风险消退：保证（“30 天退款保证”）、免费试用（“14 天免费试用”）、免费入口（“永远免费”）。风险越高，采用率越低。
- 紧迫感：真实而非人为。限时促销有效，但过期时间必须真实。就绪原因的替代品：“限时优惠：前 100 名加入可节省 20%”或“名额限制：加入 500 名已试用工程师”。
- 行动导向的 CTA 文案：“开始使用”，“部署”，“开始构建”，“启动我的试用”。避免文案如“提交”、“注册”、“了解更多”。
- CTA 尺寸：CTA 按钮应与其重要性相匹配。它是页面上最重要的交互元素。使其足够大，但不能过于主导。
- 视觉层级：按钮应脱颖而出。使用高对比度的颜色，充足的留白，清晰醒目的字体。
- 信任信号：在 CTA 旁边或下方包含信任信号，以减少购买焦虑。示例：“受 10,000+ 家公司信任”，“SOC 2 Type II 认证”，“银行级加密”。
超越模板：高级转化技术
CTA 优化
CTA 不仅仅是一个按钮。它是一个决策点。
CTA 位置规则：
- 上部折叠 CTA：并非预期每个人都会点击。它在用户心中设定了期望。
- 上下文 CTA：在相关特征或证明旁边放置次要 CTA。
- 粘性 CTA：对于较长的页面，当页面滚动到底部时，一个固定的底部栏 CTA 能捕捉仍然犹豫的访客。
- 退出意图 CTA：检测鼠标向浏览器 Chrome 的移动并触发一个模式——包含 CTA 的超强报价。
CTA 文案心理学：
- 低承诺：“免费开始” vs “购买现在”。低承诺 CTA 将风险感知从“我花钱了”转变为“我只需要尝试”。
- 利益驱动：“开始构建” vs “提交”。第一个暗示产出；第二个暗示文书工作。
- 行动动词：使用强有力的行动动词：构建、创建、启动、发现、解锁、加入。
- 第一人称 vs 第二人称：测试两者。“开始我的免费试用”有时优于“开始免费试用”。第一人称增加所有权和承诺感。
CTA 设计：
- 大小：比其他所有按钮都大。至少比周围文字大 50%。
- 颜色：互补色（对品牌色调采用 60-30-10 规则。CTA 应该是 10% 高亮色）。
- 形状：胶囊状（border-radius: 999px）或稍微圆角（border-radius: 8px）。完全方形的按钮不太容易点击。
- 悬停状态：悬停时颜色变深或添加阴影。微妙的动效表明按钮正在“回应”交互。
滚动触发动画
关于销售页面动画的关键事实：60% 的用户滚动，但只有 20% 的用户在没看到动画的情况下点击。 动画化元素的点击率提高 2x-3x。
什么应该动画化：
- Hero 视觉：载入时的微妙渐入效果。
- LOGO BAR 中的 Logo：按顺序逐个淡入。
- 功能行：如解决方案部分所示，通过 IntersectionObserver 实现基于滚动的触发。
- 证明卡片：滚动时从底部弹出，延迟级联。
- 定价方案：从底部滑入，推荐方案稍后滑入以引起注意。
- 最终 CTA：背景从部分到完全的渐变过渡。
性能规则：
- 仅使用 GPU 加速属性：opacity、transform（translate、scale、rotate）。
- 避免动画化 width、height、top、left 等属性。
- 使用
will-change: transform, opacity在需要动画化的元素上。 - 对大量元素组使用
requestAnimationFrame或 CSS 动画，而非 JS 驱动循环。 - 劣势：动画可能感觉缓慢或卡顿。使用 Easing 函数（ease-out、ease-in-out）创造平滑体验。
信任信号架构
整个页面上的信任信号应分布系统性地：
- 头部/导航：导航栏中的安全徽章或“受 X 个团队信任”标签。
- Hero：关于 Hero CTA 下方的“受 Y 个客户信任”、“SOC 2 认证”或“GDPR 合规”。
- 问题/激发：共情 + 专家感。
- 解决方案：案例研究、产品演示、特征亮点。
- 证明：深度社会认同——推荐、指标。
- 定价：保证（退款、安全付款）。
- Footer：联系信息、法律文件、认证。
常见错误
- 太多 CTA：每个页面应有单一主要 CTA 和 1-2 个次要 CTA。在 5 个地方说“点击这里”会混淆决策。
- Weak Social Proof：通用 logo 行（“受 Acme, BetaCorp, GammaInc 信任”——这些是不可识别的名字）几乎和完全没有信任一样糟糕。使用可识别的 logo 或真实用户指标。
- 信息过载：用 12 个特征、4 个方案和 6 个推荐来过度设计页面会压垮用户。只用足够多来消除反对意见。
- 忽略移动端：超过 60% 的转化发生在移动设备上。如果页面未为移动端优化，您将在转化上亏损。
- 不一致的品牌：页面应与其余网站看起来和感觉相同。在销售页面中使用完全不同的设计语言会破坏信任。
- 过度承诺：如果产品不能交付承诺，即使是最好的销售页面也无关紧要。在页面正文中设定正确的期望。
有用工具
用于测试和验证
- Hotjar / Microsoft Clarity：热图显示用户滚动的位置和点击的位置。查看用户在哪里离开以及他们不交互的部分。
- Google Analytics：转化漏斗展示用户在哪一步离开。
- Unbounce / Instapage：用于快速 A/B 测试销售页面变体的着陆页构建器。
- VWO / Optimizely：高级 A/B 测试和转化优化平台。
设计资源
- Dribbble / Behance：获取销售页面设计的灵感。搜索“着陆页 UI”、“定价页面设计”。
- Figma / Sketch：用于线框图和原型设计的工具。
- Unsplash / Pexels：高质量免版税图像。
- Logo.dev：团队 logo 资源。
- UI 库：Tailwind UI、Radix UI、Shadcn UI、Mantine——可定制的组件。
关键要点
- 设计销售，而非产品。每个元素应服务于说服和消除反对意见。
- 先解决怀疑，再提供报价。 社会认同、信任信号和保证减少了决策焦虑。
- 空间胜于混乱：留白使 CTA 等重要元素脱颖而出。
- 测试一切：CTA 文案、位置、颜色、大小、动画——所有事都应通过测试来验证。
- 保持一致性：品牌、语气和视觉风格应贯穿整个页面。
- 移动端优先：超过 60% 的转化发生在移动端。始终为移动端设计。
- 单页焦点：每个页面应有一个目标。如果页面试图销售多种事物，它可能什么都卖不出去。
- 使用动画：动画化关键元素能吸引注意，创造期待并提升参与度。
- 保持简单：越少越好。每个部分、每行文字、每张图片应服务特定目的。
- 确保一致性：确保从 Hero 到 Footer 的叙述逻辑流畅。不要留下用户未解答的问题。