加入好友

為什麼同一個產品可以做 10 種不同銷售頁?|Strategy、Component 與 Variant 的設計邏輯

上一篇我整理了 Product Input、Brand DNA 和 Page Plan 的差別。

做到那裡之後,我腦袋裡立刻又冒出另外一個問題:如果產品資料不能亂改,Brand DNA 也要維持一致,那同一支產品,怎麼可能真的做出 10 張不同的銷售頁?

難道所謂的「10 種版本」,最後只是:第一版紫色。第二版藍色。第三版換一張 Hero 圖。第四版把按鈕從左邊移到右邊。

如果只是這樣,那其實不叫 10 種銷售頁。

那比較像是:同一張頁面換了 10 件衣服。

而這不是我想做 Tina-Sales-Page-Generator 的目的。

我真正希望的是:同一支產品,可以因為不同受眾、不同情境、不同銷售切入角度,而說出完全不同的故事。

做到這裡之後,我才開始真正接觸到幾個很重要的觀念:Strategy、Hero、Component、Page Rhythm、Variant。

也是從這一篇開始,我終於比較明白:為什麼「同一個產品做 10 個版本」,真正難的不是叫 Codex 再生成 9 次。

真正難的是:怎麼讓這 10 次真的不一樣。

先講結論:產品可以不變,但「說服人的方法」可以改

上一篇我們把 Product Input 和 Brand DNA 分開之後,有一件事情就很清楚了。

今天如果還是同一支 Dosha 靚白防曬精華乳 SPF50,產品本身的真實資料不會因為版本不同就改掉。

SPF50 還是 SPF50。產品圖片還是同一支產品。可以說的產品事實還是那些。

不能亂補的 PA、抗水、抗汗、長效時數,也不會因為換一個版型就突然變成可以說。

Brand DNA 也是一樣。

Dosha 不會因為 V03 就突然變成年輕搞笑品牌,也不會因為 V07 就開始用恐嚇式文案。

產品沒有變。品牌沒有變。那什麼東西可以變?

答案就是:Strategy,也就是這一張頁面準備用什麼方法說服人。

Strategy 是什麼?我現在把它理解成「這次從哪個角度賣」

Strategy 這個字我剛開始看到的時候,也覺得有點抽象。

後來我把它翻成最簡單的中文,就是:「這一次準備從哪個角度講這支產品?」

例如同樣是一瓶防曬。

    • 可以從「每天出門前的生活習慣」切入。
    • 也可以從「為什麼日常通勤仍然需要防曬」切入。
    • 可以先講產品帶來的品牌質感。
    • 也可以先問一個問題:「為什麼有些防曬擦起來讓人不想每天用?」
    • 甚至也可以完全不先談問題,而是直接做成像雜誌專題一樣的 Editorial 頁面。

產品都沒有變。但是讀者進到頁面的第一個感受,就完全不同。

所以我現在會把 Strategy 理解成:同一份 Product Input,選擇不同的銷售敘事入口。

Strategy 改變的是「為什麼現在要繼續看」

訪客進到一張銷售頁,不會因為我們很辛苦做了網站,就乖乖從第一個字看到最後一個字。

第一屏其實就在回答一件事:「這跟我有什麼關係?」

所以不同 Strategy,其實是在替不同的人設計不同入口。

      • 有些人吃情境。
      • 有些人吃專業資訊。
      • 有些人先看品牌。
      • 有些人先看問題。
      • 有些人必須先被教育,才會理解產品價值。

所以一支產品,本來就不一定只有一種賣法。

我們替同一支 Dosha 防曬規劃的 V01~V10

做到這裡之後,我們沒有再用「幫我多做幾個漂亮版本」這種方式。

而是直接替 V01~V10 各自設定不同的主要 Strategy。

目前我們規劃的方向如下:

版本 主要 Strategy 主要頁面感受
V01 Scenario Story + Single Big Idea 從日常生活情境進入,再收斂到一個核心概念
V02 Premium Brand + Single Big Idea 高級、留白、品牌感較強
V03 Education 先教讀者理解問題,再帶到產品
V04 Problem Solution + Single Big Idea 先提出困擾,再呈現解決方向
V05 Scenario Switch + Scenario Story 用多種生活情境快速切換,增加代入感
V06 Single Big Idea + Premium Brand 一句強核心概念主導整頁
V07 Editorial + Premium Brand 像品牌雜誌或專題頁
V08 Process + Education 用流程、步驟帶讀者理解產品價值
V09 Diagnostic + Problem Solution 先讓讀者判斷自己的需求,再導向解法
V10 Seasonal Event + Scenario Switch 季節情境強、畫面感強、適合活動型呈現

看到這張表時,我才真的感覺:這不是 10 個版型,而是 10 種「說這支產品的方法」。

V01:Scenario Story,先讓人進入生活

第一版就是我們最早完成的方向。

它不是第一屏就直接寫:「Dosha 靚白防曬精華乳 SPF50,防止曬傷曬黑。」

而是先從一個很日常的瞬間進去。

最後我們用了:每天出門前,留一點時間給日常防曬。

這一句沒有非常強烈的促銷味。但是它很符合 Dosha 的 Brand DNA。

也是把防曬放回「每天生活的一個動作」。

所以 V01 的 Strategy 並不是先賣功能,而是先讓人產生:「對,我每天真的會遇到這個情境。」這就是 Scenario Story 的作用。

V02:Premium Brand,不急著說很多,而是先建立價值感

第二種方向則完全不同。

如果我們走 Premium Brand,就不應該把第一屏塞滿很多功能與說明。

高級感通常不是「資訊很多」。

反而常常來自:留白、節奏、圖片比例、文字字數與內容取捨。

所以 Premium Brand 版的 Hero,可能只有一個主畫面、一句核心文字、一段很短的 Supporting Copy。

它不急著解釋所有東西。

而是讓讀者先感覺:「這是一個有自己世界觀的品牌。」

所以同樣的防曬商品,用 Premium Brand Strategy 時,整個閱讀節奏就會和 V01 完全不一樣。

V03:Education,先教懂,再讓產品出場

Education 是我覺得很適合 SEO 人思考的一種 Strategy。

因為我們本來就在做內容行銷。

很多消費者其實不是不知道商品,而是不知道:為什麼需要它?什麼時候該用?怎麼選?自己是不是這個需求?

所以 Education 型銷售頁不會一開始就一直推產品。

它可能先回答:通勤到底需不需要防曬?

SPF 是什麼?為什麼每天都使用,比偶爾擦很多更重要?等讀者開始理解這個主題,產品才自然接進來。

這時候商品不再像「突然插進來的廣告」。

而比較像:前面問題的下一步解決方案。

V04:Problem Solution,先把痛點說出來

Problem Solution 是很經典的銷售頁策略。

但我覺得這一類最容易寫過頭。

如果沒有 Brand DNA 控制,很容易變成:「妳的肌膚正在被紫外線摧毀!」「再不防曬就來不及了!」

這就完全不像 Dosha。

所以 Problem Solution 並不等於製造恐懼。也可以只是把真實問題講清楚。

例如:「防曬買了很多,卻總是因為太黏而懶得擦?」這就是問題。

後面才接:如果日常防曬要真的每天使用,使用感本身也是重要條件。

這樣同樣可以做 Problem Solution,但語氣仍然保持品牌一致。

V05:Scenario Switch,一口氣讓讀者看見很多自己的生活

Scenario Switch 很適合手機版。

因為它可以很快。

例如:早上通勤、午休外出、假日逛街、旅行散步、戶外活動。

每個情境可能只有一張圖片加一句短文。

使用者一路滑下來,會不斷看到:「這個我也有。」「這個也是我的生活。」

這種頁面的核心不是大量文字,而是快速代入。

所以 Hero、圖片比例、Section 長度,都會跟 Education 型頁面完全不一樣。

V06:Single Big Idea,一整張頁只圍繞一件事

這是我後來越來越喜歡的概念。

很多頁面做不好,不一定是資料不夠。

反而是:想講的東西太多。

保濕要講、防曬要講、質地要講、品牌要講、成分要講、生活感也要講。

結果最後消費者什麼都看了,卻記不得一句。

Single Big Idea 就相反。它要求整張頁面最後只讓人記住一件事情。其他內容都拿來支撐這個中心。

所以 V06 即使產品資料和其他版本一樣,整張頁面的文案密度與重點排序都會不同。

V07:Editorial,讓頁面像品牌內容,而不是典型商品頁

Editorial 這個方向很有趣。它比較不像一般傳統銷售頁。

反而像:一本線上雜誌、一篇品牌專題、一個 Lifestyle Editorial。

大圖比例可能更高、標題可能更像雜誌標題、文字會比較有節奏。

產品不一定每一段都出現。

如果做得好,讀者會覺得自己正在「看品牌內容」,而不是一直被推銷。

V08:Process,把產品變成生活流程的一部分

Process Strategy 很適合那些需要「怎麼用」才容易理解價值的產品。

例如防曬可以做成:早上保養完成、出門前最後一道防護、通勤、戶外、需要時補擦。

這種頁面不是只講產品本身,而是把產品放進生活流程。

當讀者知道「它應該出現在哪一步」,產品就更容易進入使用者的生活想像。

V09:Diagnostic,先讓讀者判斷「我是哪一種?」

Diagnostic 是我覺得轉換頁面很值得玩的方向。

它不是直接告訴讀者:「你需要這支產品。」而是先讓讀者自己判斷。

例如:你主要是在室內工作?你每天需要通勤?你常常因為防曬黏膩而不想擦?你比較在意清爽使用感?這些問題會讓讀者開始自己對號入座。

等他自己得出:「對,我就是這一類。」

後面再出現產品時,接受度通常就和直接硬推不一樣。

V10:Seasonal Event,讓時間與情境本身成為銷售入口

最後一種是 Seasonal Event。

例如夏天、旅行季、連假、戶外季節。這時候頁面不一定從產品本身開始。

它可以先從:夏天的光、旅行、海邊、通勤流汗、戶外活動開始。

產品是被放進一個當下正在發生的季節情境。

所以這種版本很適合做活動頁、快閃頁或期間限定入口。

但是 Strategy 不同還不夠,Hero 也必須跟著變

做到這裡,我開始發現另一件事情。

如果只是 Strategy 名稱變了,但十個版本 Hero 都長這樣:左邊文字、右邊產品、底下一個紫色按鈕,那還是很容易撞版。

所以除了 Strategy,我們還需要改:Hero。

Hero 就是使用者進頁面第一眼看到的那一大區。不同 Strategy,本來就應該配不同 Hero。

Strategy Hero 可以怎麼不同
Scenario Story 生活照片+一句情境式標題
Premium Brand 單一大產品視覺+大量留白
Problem Solution 問題句直接當主標
Multi Scenario 多張生活情境快速切換
Single Big Idea 一句巨大主張成為畫面核心
Editorial 滿版影像+雜誌式排版

所以 Hero 不是裝飾。

它其實是 Strategy 的第一個具體表現。

Component 又是什麼?就是頁面裡可以組裝的零件

接著就是 Component。

我現在把 Component 想成:銷售頁裡可以反覆組裝的功能零件。

例如:

    • Hero
    • 產品亮點卡
    • 情境圖卡
    • FAQ
    • 產品事實區
    • 數據區
    • 使用流程
    • 情境切換區
    • CTA
    • 品牌故事

這些東西本身可以重複使用。

但不同 Strategy,不應該全部用一模一樣的 Component 組合。

這就像料理一樣。冰箱裡的材料差不多。但是今天要做義大利麵、燉飯還是沙拉,組合方式完全不同。

Component 不同,閱讀體驗才會真的不同

例如 Education 版可能大量使用:知識卡、比較表、步驟說明、FAQ。

Premium Brand 版可能反而減少卡片,增加:大圖、留白、短文字、品牌引言。

Scenario Switch 版則會大量使用:情境圖、短句、左右切換、手機式節奏。

所以同一個 Component 庫可以共用。但是每個 Variant 要選不同組合。

Page Rhythm:這個是我以前最容易忽略的

我以前做網站,很容易把注意力放在:有沒有圖片、有沒有按鈕、Section 漂不漂亮。

可是做多版本之後,我才開始注意:頁面其實有節奏。

這就是 Page Rhythm。

    • 有的頁面節奏很快,每滑一下就是一個短訊息。
    • 有的頁面節奏比較慢,一大張圖片配一小段文字。
    • 有的頁面資訊密度高,有的頁面大量留白。

如果十個版本的 Section 高度、圖片比例、文字長度、卡片數量全部一樣,即使顏色不同,看起來還是同一個網站。

所以真正做 Variant 時:Page Rhythm 也必須變。

Variant 不是換皮,是一整組設計決策

做到這裡,我終於知道 Variant 真正應該代表什麼。

它不是:V01 紫色、V02 綠色、V03 粉色。

Variant 應該是一整組被綁在一起的決策。

例如:

    • 主要 Strategy 是什麼?
    • Hero 用哪一種?
    • Component 選哪些?
    • Page Rhythm 快還是慢?
    • 圖片比例怎麼安排?
    • CTA 出現幾次?
    • 文案密度高還是低?
    • 產品什麼時候出場?

這些東西一起變,才叫真正的 Variant。

什麼可以變?什麼不能變?

做 10 個版本時,這個界線非常重要。

層級 是否可以大量變化
產品名稱 不可亂變
產品事實 不可亂變
Product Truth Lock 不可亂變
Brand DNA 原則上固定
Strategy 可以變
Hero 可以變
Component 組合 可以變
Page Rhythm 可以變
CTA 安排 可以依策略調整

這張表就是我們後來在做多版本時很重要的核心。

該鎖的鎖住,該變的才讓它變。

否則 AI 很容易把「創意」用在錯的地方。

這也解決了我原本的一個大疑問:同產品做 10 版會不會只是浪費?

如果十版只是換色,那當然沒有太大意義。

但如果十版是在測試十種不同的:入口、敘事、閱讀節奏、受眾代入方式。那就不一樣了。

因為我們其實不是在測試:「哪一張比較漂亮?」

而是在測:「這個產品,用什麼說法最容易被理解?」

這才是我覺得多 Variant 真正有價值的地方。

Tina學姐這次最大的體會:頁面變化不是設計問題,而是策略問題

以前我看到不同銷售頁,很容易第一眼只看:顏色、圖片、字體。

現在我開始會先問:這一張是從什麼角度切入?它第一屏想讓人感覺什麼?產品多久才出場?它是先講故事,還是先講問題?它要讀者記住哪一句?CTA 為什麼放在這裡?

這時候我才發現:銷售頁真正的差異,往往不是「長什麼樣」,而是「怎麼帶人走到最後」。

寫在最後:10 個版本不是為了炫技,而是建立一套可以測試的系統

做到 Tina-Sales-Page-Generator 這一步,我已經不太把它想成「AI 幫我做網頁」了。

我比較像是在建立:一套可以替同一支產品測試不同銷售策略的系統。

Product Input 告訴 Codex:產品是什麼。

Brand DNA 告訴它:品牌怎麼說話。

Product Truth Lock 告訴它:什麼不能亂講。

接下來 Strategy、Hero、Component 和 Page Rhythm,才真正負責:「這一版準備怎麼說這個故事。」

這樣做出來的 V01~V10,才不會只是 10 個不同顏色的網站,而會是 10 種真正不同的銷售思考。

我覺得這也是我這次學 Codex 最有意思的地方。

以前做網站,是先想:「這個版面要怎麼排?」

現在我反而開始先問:「我這次到底準備怎麼說服人?」

當這件事想清楚,版面反而只是最後的呈現方式。