登陸頁面設計

概述

打造既會轉換又會讓人著迷的登陸頁面。此技能結合以轉換為導向的結構與獨特的視覺設計，在一個 AI 充斥的世界中創造出脫穎而出的頁面。目標：創造出價值 50-100 美元、你會自豪地銷售的頁面。

強制執行：氛圍探索 (請先執行此步驟)

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

目標：即使針對相似的產品，也不應該有兩個登陸頁面看起來一樣。

氛圍探索流程

向使用者提出這些問題，然後綜合出一個獨特的方向。不要只是將答案映射到預設結果。

步驟 1：收集背景資訊（詢問這些）

問題 1：這個品牌會是哪個現實世界的地點或物件？

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

問題 2：人們在最初 3 秒內應該感受到的「一種」情緒是什麼？

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

問題 3：選擇兩種意想不到的影響來碰撞：

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

問題 4：這個頁面絕對不能被誤認為什麼？

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

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

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

色彩發明（不要使用記住的調色盤——從地點/物件中衍生）

問題 1 的那個現實世界地點/物件中存在哪些顏色？
提取 3-4 種感覺與該參考相符的顏色
全新發明特定的十六進位色碼——不要重複使用以前專案的色碼
為你的調色盤取一個富有聯想力的名字（不是「藍色和橘色」，而是「午夜雜貨店」或「鏽帶早晨」）

字體發明（讓語氣與碰撞相符）

在那個地方，文字聽起來會是什麼樣子？
找一個體現問題 3 之碰撞的顯示字體
不要預設使用你常用的選擇——用全新的眼光瀏覽 Google Fonts
考慮：粗細、寬度、對比、特色

佈局發明（從物理空間衍生）

問題 1 的那個地方是如何組織空間的？
是狹窄還是寬敞？網格狀還是有機的？垂直還是水平？
有什麼意想不到的佈局選擇能體現問題 3 的碰撞？

動畫發明（與情緒相符）

問題 2 的情緒是如何移動的？
平靜 = 幾乎察覺不到。充滿活力 = 動態。細緻 = 緩慢而從容。
哪一個「一個」標誌性動畫定義了這個頁面？

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

在編寫程式碼之前，明確地寫下這個：

氛圍名稱：[發明一個 2-3 個字的名稱]
參考：[問題 1 的地點/物件]
情緒：[來自問題 2]
碰撞：[來自問題 3]
反模式：[來自問題 4]

色彩：
- 主色：[十六進位色碼] - [為什麼選這個顏色]
- 次要色：[十六進位色碼] - [為什麼]
- 背景色：[十六進位色碼] - [為什麼]
- 強調色：[十六進位色碼] - [為什麼]
- 調色盤名稱：[富有聯想力的名字]

字體：
- 顯示字體：[特定字體名稱] - [為什麼它適合]
- 內文字體：[特定字體名稱] - [為什麼]
- 特色：[描述這個聲音]

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

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

萬用牌：
- 一個「不符」但能令人難忘的意外細節

步驟 4：新鮮度檢查

在繼續之前，確認：

我沒有重複使用我過去 3 個專案的十六進位色碼
我沒有預設使用我「舒適」的字體（檢查：我是否正在使用 Inter？Nunito？Space Grotesk？如果是，找其他的）
問題 3 的碰撞在我的選擇中實際可見
沒有人會將此頁面誤認為我之前的登陸頁面
我包含了一個連我自己都感到驚訝的萬用牌

氛圍探索範例

問題 1 - 地點/物件：「一個尖峰時段的日本車站」

問題 2 - 情緒：「自信」

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

問題 4 - 絕對不能誤認為：「冥想應用程式、任何異想天開的東西、新創科技兄弟」

生成的氛圍規格：

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

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

字體：
- 顯示字體：Darker Grotesque - 自信，稍微緊湊，歐式邊緣
- 內文字體：Noto Sans JP - 乾淨實用，受交通啟發
- 特色：權威但不冷淡。清晰。有方向性。

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

動畫：
- 程度：微妙但精確
- 標誌性動畫：元素從側面滑入，像進站的火車——水平、流暢、時機精準

萬用牌：
- 一個元素使用了織物質感的覆蓋層——高級訂製服的碰撞

靈感啟發器（當卡在問題 1 時）

反收斂規則

不能記憶色碼 - 從參考中新鮮生成顏色，不要回憶「我常用的藍色」
必須輪換字體 - 不能在連續的專案中使用相同的顯示字體
碰撞必須可見 - 如果某人看不到問題 3 中的兩個影響，就再努力一點
萬用牌是強制的 - 每個氛圍都需要一個「不符」但能使其獨特的元素
給它命名 - 未命名的氛圍會變得平庸。有名字的氛圍才有個性。

快速背景問題（極簡版）

如果使用者只是說「幫我做一個登陸頁面」而沒有提供背景資訊，請詢問：

「哪個地點或物件最能捕捉這個品牌的能量？」
「應該以哪種情緒為主導？」
「這個頁面絕對不能看起來像什麼？」

然後從這三個答案中綜合出一個氛圍。

強制執行：文案策略（與氛圍探索同時進行）

與氛圍探索平行執行。 氛圍探索給你外觀。文案策略給你文字。在開始任何程式碼之前，兩者都必須完成。

轉換方程式

每個文案決策都源於此：

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

增加慾望 → 清楚且具體地傳達價值
減少勞力 → 簡潔、易掃讀的結構、明確的下一步行動
減少困惑 → 清楚說明它是什麼、讓按鈕顯眼

如果你卡在某個文案決定上，請問：「這會增加慾望，還是減少勞力/困惑？」

步驟 1：挖掘障礙

在撰寫任何標題之前，先找出購買障礙。詢問使用者：

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

常見的障礙類別：

「我沒有相關技能/時間」
「這不適合我的特定情況」
「就我所得到的而言，它太貴了」
「我還不夠信任這個」
「我不明白這到底是做什麼的」

寫下前 3 個障礙。它們將驅動你的標題鉤子、功能文案和 CTA 的設計。

步驟 2：標題公式

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

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

如果訪客「只」看到標題而沒有其他東西，他們會確切知道你在賣什麼嗎？

❌「改善你的工作流程」（企業廢話——改善什麼的工作流程？） ❌「生產力的未來」（沒有說出具體內容） ✅「一小時內送達的雜貨」（具體、明確、清晰） ✅「以視覺化方式設計網站——無需編碼」（做什麼 + 處理了主要障礙）

鉤子是以下兩種之一：

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

「將部署時間從 4 小時縮短到 12 分鐘」
「上個月有 10,000 個團隊更快地發布了產品」

類型 B——解決障礙（移除第一號購買障礙）：

「無需信用卡」（處理信任障礙）
「與你現有工具相容」（處理轉換成本障礙）
「5分鐘內完成設定」（處理勞力障礙）

使用步驟 1 中排名第一的障礙來選擇鉤子類型。

步驟 3：副標題規則

副標題只做兩件事：

解釋「什麼是」產品（如果標題是著重在好處）
解釋這個大膽主張是「如何」實現的（如果標題做出了主張）

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

步驟 4：功能文案結構

每個功能都包含三個元素：

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

每個功能都應該連結回主視覺的主要價值主張。功能不是隨機的——它們是你在上方摺頁所做的主張的證據。

步驟 5：CTA 文案

CTA 必須延續主視覺的敘事，而不是通用文案。

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

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

步驟 6：社會證明策略

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

在跑馬燈中顯示標誌——製造 FOMO（「好像每個人都已經知道了」）
強調令人印象深刻的指標（客戶數、處理的營收等）

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

提供 3-5 家知名公司免費使用，然後顯示他們的標誌
使用帶有真實姓名和照片的具體推薦（即使來自 Beta 使用者）
顯示彙總統計資料（「已被 500+ 團隊使用」勝過空白的標誌欄）
考慮使用「曾見於」並附上任何媒體報導、Podcast 或新聞信

不要偽造。空的社會證明區塊比完全沒有還要糟糕。

步驟 7：多重目標受眾分流

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

在頁面頂部附近添加一個「選擇你的冒險」元素，將訪客引導至相關區塊。範例：

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

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

文案策略規格

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

前 3 大障礙：
1. [障礙] → 在以下位置處理：[標題/功能/CTA]
2. [障礙] → 在以下位置處理：[標題/功能/CTA]
3. [障礙] → 在以下位置處理：[標題/功能/CTA]

標題：
- 價值主張：[你賣的是什麼，具體來說]
- 鉤子類型：[大膽主張 / 解決障礙]
- 完整標題：[實際文字]
- 試金石測試：有人能單從這個就知道我們在賣什麼嗎？[是/否]

副標題：[1-2 句話——它做什麼 + 主張如何運作]

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

目標受眾：[單一 / 多重角色]
- 如果是多重：[我們如何分流]

50% 規則

花 50% 的時間在英雄區。 它是社群媒體的封面圖片、第一印象、鉤子。把英雄區做對了，其他一切都會隨之而來。

區塊組成（從上到下）

1. 英雄區（首要重點）

成敗關鍵。必須包含：

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

英雄區變體：

分割佈局（文字左、視覺右）
居中並帶有浮動元素
滿版背景搭配疊加文字
不對稱並帶有裝飾元素

2. 功能/好處區

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

…

[為翻譯而截斷]

diyanto29/crm_worrie

crm_worrie 是什麼？

在你喜歡的 AI 中提問

說明文件