Landing Page Design

概覽

打造既能轉換又能吸引目光的登陸頁面。此技能結合了以轉換為核心的結構與獨特的視覺設計，創造出在 AI 充斥的世界中脫穎而出的頁面。目標：創造價值 50-100 美元、你會引以為傲且願意販售的頁面。

必做：氛圍探索（請優先執行此步驟）

在撰寫任何程式碼之前，你必須先執行氛圍探索流程。 這不是一個查詢表——這是一個能每次產生獨特美學方向的創意提示。

目標：即使產品很類似，也沒有任何兩個登陸頁面看起來應該一模一樣。

氛圍探索流程

向使用者詢問這些問題，然後綜合出一個獨特的方向。不要只是將答案對應到預設選項。

步驟 1：收集脈絡（詢問這些問題）

Q1：這個品牌會對應到哪一個真實世界的地點或物品？

不是「什麼產業」——而是一個實際、具體的東西。凌晨兩點的東京便利商店。祖母的廚房。野獸派的停車場。珊瑚礁。747 的駕駛艙。馬拉喀什的跳蚤市場。1970 年代的錄音室。

Q2：人們在前三秒鐘應該感受到的「一個」情緒是什麼？

選擇一個：平靜。充滿活力。好奇。受信任。愉悅。印象深刻。叛逆。懷舊。靈感。有趣。精緻。受歡迎。好奇。自信。

Q3：選擇兩個非預期的影響進行碰撞：

範例：「醫療包裝 + 滑板圖形」、「試算表 + 街頭藝術」、「豪華飯店 + 龐克雜誌」、「NASA 任務控制中心 + 幼稚園」、「日本便利商店 + 維多利亞圖書館」

Q4：這個頁面絕對不該被誤認為是什麼？

列出 2-3 個要主動避免的具體事物。「一個加密貨幣項目」、「一個健康應用程式」、「銀行做的東西」、「任何有紫色漸層的東西」

步驟 2：創造美學（不要查詢——創造）

根據這些答案，透過決定以下事項來創造一個獨特的氛圍：

色彩創造（不要使用記住的色板——從地點/物品中衍生）

Q1 的那個真實世界地點/物品中存在哪些顏色？
萃取出 3-4 種對該參考而言感覺真實的顏色
發明全新的特定色碼——不要重複使用之前專案的色碼
為你的色板取一個引人共鳴的名字（不是「藍色和橘色」，而是「午夜小賣店」或「鏽帶早晨」）

字體設計創造（將聲音與碰撞相匹配）

在那個地方，文字聽起來會是什麼樣子？
找到一個體現 Q3 碰撞的標題字型
不要預設使用你常用的選擇——用全新的眼光瀏覽 Google Fonts
考慮：字重、字寬、對比、獨特性

佈局創造（從實體空間衍生）

Q1 的那個地方裡，空間是如何組織的？
是狹窄還是寬敞？網格狀還是有機的？垂直還是水平的？
哪個非預期的佈局選擇能夠體現 Q3 的碰撞？

動態創造（與情緒匹配）

Q2 的情緒是如何移動的？
平靜 = 幾乎察覺不到。充滿活力 = 動態。精緻 = 緩慢而謹慎。
哪一個「單一標誌性動態」定義了這個頁面？

步驟 3：撰寫你的氛圍規格

在開始編碼之前，明確地寫出這個：

氛圍名稱：[發明一個 2-3 個字的名稱]
參考：[來自 Q1 的地點/物品]
情緒：[來自 Q2]
碰撞：[來自 Q3]
反模式：[來自 Q4]

色彩：
- 主色：[色碼] - [為什麼是這個顏色]
- 次要：[色碼] - [為什麼]
- 背景：[色碼] - [為什麼]
- 強調色：[色碼] - [為什麼]
- 色板名稱：[引人共鳴的名稱]

字體設計：
- 標題：[特定字型名稱] - [為什麼適合]
- 內文：[特定字型名稱] - [為什麼]
- 特質：[描述這種聲音]

佈局：
- 密度：[稀疏/平衡/密集]
- 形狀：[銳利/圓潤/有機/混合]
- 標誌性元素：[一個非比尋常的佈局選擇]

動態：
- 程度：[靜止/細微/適中/動態/混亂]
- 標誌性動畫：[一個定義此頁面的特定動畫]

驚喜元素：
- 一個不符合「套路」但能讓它令人難忘的非預期細節

步驟 4：新鮮度檢查

在繼續之前，確認：

我沒有重複使用過去 3 個專案的色碼
我沒有預設使用我「舒適圈」的字型（檢查：我是否使用了 Inter？Nunito？Space Grotesk？如果是，請找別的字型）
Q3 的碰撞在我的選擇中是可見的
別人不可能將此頁面誤認為是我之前的登陸頁面
我包含了一個連我自己都感到驚喜的驚喜元素

氛圍探索範例

Q1 - 地點/物品：「尖峰時刻的日本車站」

Q2 - 情緒：「自信」

Q3 - 碰撞：「交通標誌 + 高級訂製服」

Q4 - 絕不被誤認為：「冥想應用程式、任何俏皮的事物、創業兄弟科技」

產生的氛圍規格：

氛圍名稱：新宿 Runway
參考：尖峰時刻的日本車站
情緒：自信
碰撞：交通標誌 + 高級訂製服
反模式：沒有柔和漸層、沒有俏皮插圖、沒有圓潤友善的形狀

色彩：
- 主色：#1a1a1a - 車門的黑色
- 次要：#f5f5f0 - 月台混凝土，磨損平滑
- 背景：#fafaf8 - 螢光燈下白色的光
- 強調色：#e60012 - JR 線的紅色，引人注目
- 色板名稱：「月台邊緣」

字體設計：
- 標題：Darker Grotesque - 自信、略為緊湊、歐式風格
- 內文：Noto Sans JP - 乾淨的實用性，受交通標誌啟發
- 特質：權威但不冷漠。清晰。引導性的。

佈局：
- 密度：豐富但有組織 - 如同車站地圖
- 形狀：銳利，但帶有刻意為之的圓角例外（像火車車窗）
- 標誌性元素：強烈的水平帶狀區域，像火車時刻表一樣劃分頁面區塊

動態：
- 程度：細微但精準
- 標誌性動畫：元素從側邊滑入，如同進站的火車 - 水平、流暢、時機精準

驚喜元素：
- 一個元素使用類似織物的紋理疊加 - 來自高級訂製服的碰撞

靈感起點（當 Q1 卡住時）

反趨同規則

不記憶色碼 - 從參考對象新鮮地產生顏色，不要回想「我常用的那個藍色」
字型輪換是必需的 - 不能在連續的專案中使用相同的標題字型
碰撞必須顯現 - 如果別人無法從中看到 Q3 的兩個影響來源，請更加努力
驚喜元素是強制性的 - 每個氛圍都需要一個「不搭調」但能讓它獨一無二的元素
為它命名 - 未命名的氛圍會變得普通。有名字的氛圍才具有身份。

快速脈絡問題（最小化版本）

如果使用者只說「幫我做一個登陸頁面」而沒有提供任何脈絡，請詢問：

「能夠捕捉這個品牌能量的『一個』地點或物品是什麼？」
「應該以哪種情緒為主？」
「這東西『絕對不該』看起來像什麼？」

然後根據這三個答案綜合出一個氛圍。

必做：文案策略（與氛圍探索同時進行）

與氛圍探索「並行」執行。 氛圍探索提供視覺。文案策略提供文字。在開始撰寫任何程式碼之前，這兩者都必須完成。

轉換方程式

每個文案決策都源自於此：

購買率 = 渴望 - (勞力 + 困惑)

提高渴望 → 清楚且具體地溝通價值
降低勞力 → 簡潔、易於掃讀的結構、明確的下一個行動
降低困惑 → 清楚地說明它是什麼，讓按鈕不容錯過

如果你在文案決策上卡住了，請問：「這會提高渴望，還是降低勞力/困惑？」

步驟 1：異議發現

在撰寫任何一個標題之前，先找出購買異議。詢問使用者：

「是什麼差點阻止了你的客戶購買？」 「為什麼非客戶還沒有購買？」

常見的異議類別：

「我沒有時間/技能來做這個」
「這個對我的特定情況沒用」
「以我得到的東西來說太貴了」
「我對這個還不夠信任」
「我不了解這個東西實際上是做什麼的」

寫下前三大異議。這些將驅動你的標題鉤子、功能文案和行動呼籲（CTA）的框架。

步驟 2：標題公式

每個主標題都遵循：價值主張 + 鉤子

價值主張必須通過這個試金石：

如果訪客「只看見標題」而沒有看見其他內容，他們會確切知道你賣的是什麼嗎？

❌ 「改善你的工作流程」（企業廢話 — 改善什麼工作流程？） ❌ 「生產力的未來」（什麼具體內容都沒說） ✅ 「一小時內送達的雜貨」（具體、實在、清楚） ✅ 「以視覺方式設計網站 — 無需撰寫程式碼」（做了什麼 + 處理了主要異議）

鉤子是以下兩種型別之一：

類型 A — 大膽、具體的宣稱（引發好奇心）：

「將部署時間從 4 小時縮短到 12 分鐘」
「上個月有 10,000 個團隊加速出貨」

類型 B — 處理異議（移除頭號購買障礙）：

「無需信用卡」（處理信任異議）
「可與你現有的工具搭配使用」（處理轉換成本異議）
「5 分鐘即可完成設定」（處理努力異議）

使用你在步驟 1 中找到的頭號異議來選擇鉤子類型。

步驟 3：副標題規則

副標題只做兩件事：

解釋產品是什麼（如果標題著重在效益）
解釋這個大膽的宣稱是如何做到的（如果標題宣稱了某件事）

最多：1-2 個句子。保持輕快。如果你需要三個句子，表示你的標題做得還不夠。

步驟 4：功能文案結構

每個功能都要有明確的三個元素：

元素	規則
功能標題	僅需簡短的價值主張。要直白。 ❌「賦能你的團隊」 ✅「即時協作」
功能段落	簡潔的描述 + 處理「一個」關鍵異議。如果需要，連結到詳細資訊 — 不要有文字牆。
功能圖片	展示使用中的產品。對於軟體：GIF > 螢幕截圖 > 抽象藝術。對於實體商品：使用情境 + 做工細節特寫。

每個功能都應與主標題的主要價值主張相關聯。功能不是隨機的——它們是你在頁面頭版（above the fold）所做宣稱的證據。

步驟 5：行動呼籲（CTA）文案

CTA 必須延續主標題的敘事，而不是使用通用文案。

❌ 「開始使用」/「要求示範」/「註冊」（懶惰、脫離上下文） ✅ 「尋找附近的美食」（延續外送敘事） ✅ 「開始設計」（延續設計工具敘事） ✅ 「查看你的省下了多少錢」（延續財務敘事）

CTA 按鈕的文字應該感覺像是閱讀標題之後的自然下一句。

步驟 6：社會證明策略

如果你有知名的客戶/媒體報導：

在跑馬燈中展示標誌 — 製造錯失恐懼症（FOMO）（「每個人都已經知道這個了」）
強調令人印象深刻的指標（客戶數量、處理的金額等）

如果你還沒有知名的社會證明（冷啟動）：

向 3-5 家知名公司提供免費使用權，然後展示他們的標誌
使用帶有真實姓名和照片的具體推薦（即使是來自 Beta 測試者）
顯示總體統計數據（「已有 500+ 個團隊使用」比空白的標誌列更好）
如果有任何媒體報導、播客或電子報提及，考慮使用「As seen in」

不要造假。一個空白的社會證明區域比完全沒有還糟。

步驟 7：多重受眾分流

如果你的產品服務於不同的人物誌（例如個人 vs. 團隊、開發者 vs. 設計師）：

在頁面頂部附近添加一個**「選擇你自己的冒險」**元素，將訪客分流到相關區塊。範例：

切換標籤：「給開發者」/「給設計者」
分割式主視覺：「我是 [角色 A]」/「我是 [角色 B]」
從主視覺連結到不同的登陸頁面

如果他們有不同的需求，不要強迫所有人通過同一個漏斗。

文案策略規格

將這個與你的氛圍規格一起寫出來：

前三大異議：
1. [異議] → 在以下部分處理：[標題/功能/CTA]
2. [異議] → 在以下部分處理：[標題/功能/CTA]
3. [異議] → 在以下部分處理：[標題/功能/CTA]

標題：
- 價值主張：[你賣的東西，具體描述]
- 鉤子類型：[大膽宣稱 / 處理異議]
- 完整標題：[實際的文字]
- 試金石測驗：光看這個就有人知道我們賣什麼嗎？[是/否]

副標題：[1-2 個句子 — 它是什麼 + 這個宣稱如何運作]

CTA 文字：[標題敘事的延續]

受眾：[單一 / 多人格]
- 如果是多受眾：[我們如何分流他們]

50% 法則

將 50% 的時間花在主視覺區域（Hero Section）上。 它是社交媒體的封面圖片、第一印象、鉤子。將主視覺區域搞定之後，其他部分就能順暢展開。

區塊構成（從上到下）

1. 主視覺區域（主要焦點）

成敗的關鍵。必須包含：

標題：來自你文案策略規格的價值主張 + 鉤子（見上文）。必須通過試金石測驗——如果某人只看見這個，他們會知道你賣的是什麼嗎？
副標題：解釋它是什麼 + 這個宣稱如何運作。最多 1-2 個句子，保持輕快。
CTA 按鈕：標題的敘事延續（不是「開始使用」——請參閱上面的 CTA 文案規則）。可選次要 CTA。
社會證明：標誌跑馬燈、推薦或信任徽章。如果是冷啟動，請參閱上面的社會證明策略。
視覺元素：產品照片、插圖或動畫背景

主視覺變化形式：

分割佈局（文字在左，視覺在右）
置中搭配浮動元素
滿版背景搭配疊加文字
不對稱搭配裝飾性元素

2. 功能/效益區

展示產品能做什麼。每個功能需要三個元素：標題（簡短的價值主張，沒有「賦能/革新」

落地頁設計 — Vibe Discovery + 去 AI 味