Web Sales Design

Web 銷售設計

打造能銷售的網站工藝。不是行銷策略、不是文案撰寫、不是 A/B 測試基礎設施——而是真正將訪客轉變為客戶的設計模式、視覺系統與互動技術。

核心原則：最好的銷售設計是隱形的。訪客不會想「這是在向我銷售」。他們會想「這正是我需要的」。每一個像素、每一次滾動揭露、每一個社會證明位置，不是在建立信任與渴望，就是在侵蝕它們。沒有中立地帶。

---

使用時機

適用於：

• 設計需要將訪客轉換為註冊/購買的著陸頁
• 建立具備有效階層架構的定價頁面
• 放置與設計社會證明（見證、標誌、案例研究）
• 打造能被點擊的行動呼籲按鈕（大小、顏色、文案、位置）
• 結構化長頁面銷售頁（問題-激化-解決的滾動序列）
• 加入信任信號（安全徽章、保證、真人臉孔）
• 建立互動式產品展示與功能導覽
• 打造「驚嘆時刻」——滾動觸發的揭露、前後對比
• 稽核現有頁面的轉換設計弱點

請勿用於：

• 文案寫作與訊息策略 → 使用 product-appeal-analyzer 或文案撰寫技能
• A/B 測試實作 → 使用 frontend-developer
• 付費廣告素材 → 使用行銷技能
• UX 摩擦稽核 → 使用 ux-friction-analyzer（互補技能——兩者並行）
• 一般網頁設計 → 使用 web-design-expert
• 付款/訂閱實作 → 使用 webapp-paywall-implementation

---

滾動驅動的銷售頁藍圖

現代長頁面銷售頁遵循一套心理弧線。每個區段都有自己的任務。跳過一個區段，頁面就會流失訪客。

八段式結構

┌─────────────────────────────────────────────┐
│  1. 英雄區域——承諾 + 身份信號              │  ← 0-5 秒
│     「這是為像我這樣的人設計的」            │
├─────────────────────────────────────────────┤
│  2. 標誌列——社會證明捷徑                   │  ← 5-10 秒
│     「我認識的品牌都在用」                  │
├─────────────────────────────────────────────┤
│  3. 問題——承認痛苦                         │  ← 10-30 秒
│     「他們了解我的處境」                    │
├─────────────────────────────────────────────┤
│  4. 激化——不行動的後果                     │  ← 30-60 秒
│     「這比我想像的還糟」                    │
├─────────────────────────────────────────────┤
│  5. 解決方案——產品即解答                   │  ← 1-2 分鐘
│     「這是運作方式 + 展示」                 │
├─────────────────────────────────────────────┤
│  6. 證明——深度社會證明                     │  ← 2-3 分鐘
│     「真人，真實結果」                      │
├─────────────────────────────────────────────┤
│  7. 定價——方案架構                         │  ← 3-4 分鐘
│     「清晰價值，顯而易見的選擇」            │
├─────────────────────────────────────────────┤
│  8. 最終行動呼籲——急迫感 + 保證            │  ← 決策點
│     「無風險，立即行動」                    │
└─────────────────────────────────────────────┘

各區段實作

區段 1：英雄區域（五秒定生死）

英雄區域決定訪客是留下還是離開。每個元素都必須為自己的像素負責。

佈局模式——匯聚式英雄區域：

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>

      {/* 行動呼籲群組——主要 + 低承諾次要 */}
      <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：以字型為主的英雄區域，一行文字就框定了整個產品。行動呼籲是「開始部署」而非「註冊」——行動導向。
• Notion：展示產品正在運作，而非螢幕截圖。英雄區域本身就是一個微型展示。

區段 2：標誌列（信任捷徑）

4-6 個可辨識的標誌。不要 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);
}

設計規則：

• 預設為灰階標誌（減少視覺噪音，反而增加可信度）
• 所有標誌視覺高度相同（28-32px），無論原始比例
• 5 個標誌是最佳數量——少了感覺空虛，多了感覺擁擠
• 標籤放在上方（「受...信賴」、「受...團隊使用」），而非下方
• 如果沒有可辨識的標誌，改用指標：「2,400+ 團隊」、「1,000 萬+ 次部署」

區段 3：問題（承認痛苦）

訪客必須感覺自己被看見。這個區段驗證他們的掙扎。

模式：三痛點網格

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="錯誤還是會漏掉"
          description="手動審查只會抓到風格問題，而非邏輯錯誤。
            會讓正式環境掛掉的東西仍然會讓它掛掉。"
        />
        <PainCard
          icon={<TrendingDownIcon />}
          title="交付速度停滯不前"
          description="更多工程師，同樣產出。流程開銷的成長
            速度快於團隊規模。"
        />
      </div>
    </section>
  );
}

設計規則：

• 使用訪客的用語，而非產品的行話
• 最多 3 個痛點（更多會稀釋影響力）
• 圖示應強化情緒，而非裝飾
• 這個區段應讓訪客點頭贊同，而非退縮——同理心，而非恐懼

區段 4：激化（不行動的代價）

這個區段提高賭注。不是用恐懼——而是清楚說明問題實際造成的代價。

模式：後果串聯

展示逐步升高的後果：浪費的時間、損失的金錢、錯過的機會、侵蝕的團隊士氣。盡可能使用真實數字（「平均團隊每週在程式碼審查上耗費 14 小時」）。

設計方法：較暗的背景、稍微緊湊的字型、可選的動畫計數器來顯示持續累積的浪費。這個區段在視覺上比問題區段「更重」——是解決方案到來前的低點。

區段 5：解決方案（產品即解答）

情緒轉折點。頁面從問題轉向可能性。

模式：搭配滾動觸發揭露的功能展示

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：證明（深度社會證明）

見證、案例研究、指標。這裡是懷疑論失效的地方。

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="正式環境錯誤減少" />
      </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;
}

社會證明層級（由強至弱）：

1. 具名人士 + 照片 + 公司 + 職位 + 具體結果（「讓我們部署頻率提升 3 倍的團隊」）
2. 具名人士 + 照片 + 公司 + 職位（「Sarah Chen，Acme Corp 工程副總裁」）
3. 具名人士 + 照片（附模糊職位）
4. 具名人士 + 公司（無照片）
5. 匿名（「一位軟體工程師表示」——效果最差，仍比完全沒有好）

關鍵規則： 永遠在見證中加入具體結果。沒有結果的見證只是「有人喜歡這個東西」。有了結果，它就是「這個東西讓某人成功了」。

區段 7：定價（方案架構）

定價頁面是轉換漏斗中壓力最大的頁面。它必須同時做三件事：

1. 證明價值——每個方案都感覺划算
2. 引導選擇——一個方案明顯是最佳選擇
3. 消除疑慮——無風險，可取消，有保證

模式：三個方案，中間突出

function PricingSection() {
  return (
    <section className="pricing-section">
      <h2>適合各種規模的團隊</h2>

      <div className="pricing-grid">
        <PricingCard
          name="Starter"
          price="$29"
          period="/月"
          features={["5 個專案", "10 萬次 API 呼叫", "電子郵件支援"]}
        />
        <PricingCard
          name="Pro"
          price="$99"
          period="/月"
          highlighted={true}  /* 最受歡迎方案 */
          features={["無限制專案", "100 萬次 API 呼叫","優先支援"]}
        />
        <PricingCard
          name="Enterprise"
          price="客製化"
          period=""
          features={["專屬成功經理", "自訂整合", "SLA 保證"]}
        />
      </div>
    </section>
  );
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: 1rem;
  padding: 2rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.pricing-card.highlighted {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 8px 24px rgba(0,0,0,0.12);
  transform: scale(1.05);
  /* 讓中間方案按比例突出 */
}

.pricing-card.highlighted:hover {
  transform: scale(1.05) translateY(-4px);
}

.pricing-card-price {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin: 1.5rem 0;
}

.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
}

.pricing-card-features li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pricing-card-cta {
  width: 100%;
  padding: 0.875rem;
  text-align: center;
  font-weight: 600;
  border-radius: 0.5rem;
  background: var(--color-primary);
  color: white;
  display: block;
}

.pricing-card.highlighted .pricing-card-cta {
  background: var(--color-primary-dark);
}

@media (max-width: 768px) {
  .pricing-card.highlighted {
    transform: none;
  }
  .pricing-card.highlighted:hover {
    transform: translateY(-4px);
  }
}

定價心理學：

• 吸引力方案：中間方案是預設選擇。讓它比其他方案明顯更好。功能較少的入門方案讓中間方案看起來更划算。功能較多但價格更高的企業方案讓中間方案感覺合理。
• 每年 vs 每月：每月價格旁邊顯示每年價格（「每月 $29 — 每年 $290（省 2 個月）」）。比較觸發立即行動。
• 零不確定性：如果可能，避免「聯繫我們」。如果必須有，請清楚說明何時聯絡。
• 按使用量收費的風險：按使用量收費會讓客戶擔心帳單衝擊。如果使用此模式，請包含使用量限制或上限警報。

區段 8：最終行動呼籲（決策）

頁面的最後機會。訪客已經閱讀了所有內容。現在他們必須決定。

模式：最終行動呼籲區段

function FinalCtaSection() {
  return (
    <section className="final-cta-section">
      <h2>準備好開始更快交付了嗎？</h2>
      <p className="final-cta-subheadline">
        無需信用卡。14 天免費試用。隨時取消。
      </p>

      {/* 主要行動呼籲 */}
      <a href="/signup" className="cta-primary cta-large">
        免費開始
      </a>

      {/* 保證與信任信號 */}
      <div className="trust-signals">
        <span>🔒 256 位元 SSL 加密</span>
        <span>⭐ 4.9/5 來自 2,400 個團隊</span>
        <span>📦 包含 14 天退款保證</span>
      </div>
    </section>
  );
}

.final-cta-section {
  text-align: center;
  padding: 6rem 2rem;
  background: var(--color-surface-elevated);
  border-top: 1px solid var(--color-border-subtle);
}

.final-cta-section h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.final-cta-subheadline {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

.cta-large {
  display: inline-block;
  padding: 1rem 3rem;
  font-size: 1.125rem;
}

.trust-signals {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  flex-wrap: wrap;
}

為什麼最終行動呼籲有效：

• 重複主要行動呼籲：訪客已經滾動很遠了。讓他們再次輕鬆行動。
• 移除風險：最終行動呼籲應該明確表示「沒有風險」——免費試用、保證、輕易取消。
• 信任信號：安全、社會證明與保證是最終的說服因素。
• 單一行動：這個區段只有一個行動。不是「了解更多」或「觀看展示」——是轉換。

---

進階轉換技巧

驚嘆時刻

驚嘆時刻是讓訪客脫口而出「哇」的瞬間。它們讓你的頁面令人難忘且值得分享。

驚嘆時刻的類型：

1. 滾動驅動的變形：文字在滾動時擴大、收縮或變形。Vercel 與 Linear 在英雄區域使用這個效果。
2. 前/後對比：互動式拉動條或自動播放的序列顯示「之前」（痛苦）與「之後」（解決方案）。
3. 資料視覺化：顯示問題範圍的動畫圖表或數字——在訪客觀看時即時反轉。
4. 微型展示：出現在頁面上的小型互動式元件，顯示一個功能——無需點擊導覽。
5. 個人化：根據訪客的來源或行為動態改變內容。「打造更好的 [他們的業界] 網站。」

實作驚嘆時刻的規則：

• 每頁最多 2 個驚嘆時刻。更多會造成麻痺。
• 每個驚嘆時刻都必須與轉換直接相關——不能只是為了酷。
• 必須在手機上運作。手機驚嘆時刻 = 觸控螢幕動畫或全螢幕影片。
• 載入時間永遠不能超過 200 毫秒。使用者不會為了你的驚嘆時刻等待。

轉換設計稽核清單

在發布任何銷售頁面前，完成以下稽核：

英雄區域：

• 主標題是否說明單一、清楚的效益？
• 副標題是否解釋如何達成？
• 視覺內容是否顯示產品正在運作？
• 行動呼籲是否具體且行動導向？
• 上方標題是否低調地建立可信度？

標誌列：

• 是否為 4-6 個可辨識的標誌？（或令人印象深刻的指標）
• 預設是否為灰階？
• 所有標誌是否視覺高度相同？

問題與激化：

• 問題是否使用訪客的用語？
• 是否驗證他們的掙扎？
• 激化是否顯示不行動的真實代價？
• 是否使用具體數字？（如果可能）

解決方案：

• 是否以效益而非功能來表述？
• 是否為 3-5 個功能？（更多 = 列舉，更少 = 可能太少）
• 視覺內容是否為互動式或動畫？
• 佈局是否交替？
• 滾動觸發是否運作流暢？

證明：

• 是否包含至少一個強見證？（有照片、姓名、結果）
• 是否有指標列？（有顯示成果的硬數字）
• 見證網格是否顯示廣度？
• 所有見證是否都有具體結果？

定價：

• 是否有一個明顯的最佳方案？
• 年年選項是否與每月選項一同顯示？
• 是否有明確定義的保證？
• 行動呼籲是否清晰且低恐懼？

最終行動呼籲：

• 是否重複主要行動呼籲？
• 是否有保證？
• 信任信號是否明顯？
• 是否只有一個行動？

---

何時使用其他技能

• 需要 A/B 測試實作 → 使用 frontend-developer
• 需要 UX 摩擦稽核 → 使用 ux-friction-analyzer（此技能專注於視覺轉換設計，而非互動摩擦）
• 需要文案撰寫或訊息策略 → 使用 product-appeal-analyzer 或專門的文案撰寫技能
• 需要全面品牌或一般網頁設計 → 使用 web-design-expert
• 需要付款或訂閱設定 → 使用 webapp-paywall-implementation

此技能是更大轉換設計工具組中的一個鏈結。與 ux-friction-analyzer 搭配使用效果最佳——首先稽核 現有的 UX 摩擦，然後視覺設計以搭配銷售頁面藍圖。且永遠不要忘記：最好的銷售設計是看不見的。