登陸頁面設計是做什麼的？

登陸頁面不是首頁。首頁服務多種意圖。登陸頁面只贏取一個意圖：

一個產品 → 一個受眾 → 一個主要行動。

此技能分為兩部分。A 部分決定頁面說什麼以及如何結構。B 部分是不可協商的視覺系統。先完成 A 部分再觸碰 B 部分。

適用範圍

適用於所有網頁 UI 工作：登陸頁面、行銷網站、元件、儀表板、原型與設計審查。當此處規則與框架預設值衝突時，以此檔案為準。當使用者的明確提示與規則衝突時，以使用者為準。

**配套技能。**若要升級現有網站而非建立新網站，請使用 redesign-existing-projects（github.com/elayadesign/redesign-skill）。它會診斷通用模式，並針對每個具體值參考此檔案。

A 部分 - 策略與結構

A1. 初始需求收集

在設計或撰寫之前蒐集以下項目。僅詢問缺少的部分，且一次批次提出，而非逐一發問。

目的

唯一的主要行動是什麼？（試用、示範、購買、候補名單、下載）
產品是什麼，他們確切得到什麼？
什麼算一次轉換？（點擊、註冊、購買）

受眾與背景

理想客戶檔案（ICP）是誰？
他們想解決什麼問題？
前三大異議，即為何他們今天不轉換
流量來源：廣告、搜尋、社交、電子郵件
訪客到達時已經知道什麼？

證明與素材

證明點：標誌、推薦證言、數字、案例研究
螢幕截圖、示範影片、產品 GIF
保證、退款條款、取消條款

限制條件

品牌語氣：休閒或專業
設計方向：極簡編輯風格、趣味 3D、玻璃 UI
是否以行動裝置優先？

如果使用者無法回答，則做出合理假設，用一行說明，然後繼續。不要拖延建置。

A2. 頁面結構

首屏上方（必填）

標題，結果加上受眾
副標題，說明如何達成並增加具體性
主要行動呼籲（CTA），明確動詞加上他們得到的東西
一個證明信號：標誌條列、統計數字或短推薦證言
英雄視覺：產品截圖或影片，或強而有力的插圖

中段（論證） 6. 問題到解決方案，一個區段 7. 效益，三到五個，以成果為導向 8. 運作方式，三個步驟 9. 社會證明：推薦證言或案例研究

底部（異議處理） 10. 常見問題（FAQ），六到十二個問題 11. 風險逆轉：試用、隨時取消、保證 12. 最終行動呼籲，與頂部相同

在中段論證的某處強制加入 B11 的標語揭示區段，通常在英雄區段之後或效益之後。

A3. 佈局選擇

選擇一種並說明原因。

類型	使用時機
A. 經典英雄加區段	產品可從英雄截圖中理解。最常見。
B. 長篇故事	需要教育並克服懷疑。
C. 極簡轉換頁	高意圖流量（發送給已知用戶的電子郵件），或短產品如下載、候補名單。
D. 比較頁	搜尋意圖包含替代方案（「X vs Y」、「最佳選擇」）。通常與 SEO 頁面搭配。

A4. 轉換規則

**訊息與來源匹配。**若流量來自廣告，在英雄區段鏡像廣告標題，並保持相同的承諾與視覺調性。

**讓下一步明確。**唯一的主要行動呼籲。切勿在首屏上方放置競爭性的行動呼籲。

**先寫效益。**功能是它做什麼。效益是這對他們意味什麼。

要具體。

❌ 「節省時間並簡化流程」
✅ 「將每週報告時間從 4 小時縮短至 15 分鐘」

**降低風險。**至少選擇一項：免費試用、免費方案、無需信用卡、隨時取消、退款保證。

**將異議視為一個區段，而非註腳。**對於高摩擦的產品，將常見問題移至較前位置。將證明直接放在它所支持的聲明旁邊。

A5. 文案撰寫

標題公式

「{結果} 無需 {痛點}」
「專為 {受眾} 打造的 {類別}」
「在 {時間} 內交付 {成果}」

**副標題。**一到兩句。說明它是什麼以及為誰而設。

**行動呼籲。**動詞加上他們得到的東西。絕對不要用「了解更多」或「提交」。使用「開始免費試用」、「預約示範」、「取得清單」。

**效益項目符號。**粗體顯示效益，然後是證明或細節。範例：更快迭代 - 一鍵產生三種佈局變體。

注意：B1 中的文案規則仍然適用。句子內無連字號，無孤兒詞。

A6. 建置順序

按區段逐步建置，順序如下：

英雄區段
效益
運作方式
證明
常見問題
最終行動呼籲

切勿在每次迭代中重建整個頁面。逐步建置可保持控制並讓差異易於審查。

A7. SEO 與 AEO

不要索引僅限廣告的行銷活動頁面或高度時效性的產品。使用 noindex 或將其保留在非索引路徑之後。

要索引常青產品以及搜尋意圖與承諾相符的頁面。加入清晰的標題與中繼描述、來自首頁與功能頁的內部連結，以及以純問題與答案形式呈現的常見問題（適用於 AEO）。若合適，加入常見問題結構化資料。

A8. 常見陷阱

首屏上方有太多行動呼籲
模糊的價值主張：「簡化」、「最佳化」
列出大量功能但無成果說明
證明被埋在底部
行動裝置佈局破壞可讀性
沒有明確的下一步

B 部分 - 視覺系統

每個視覺值都必須透過這些規則來確定，而非臨時發明。

B1. 字體排版

字型

使用： Geist、Manrope、Geist Mono、Poppins。

絕對不要使用： Inter、Roboto、Arial、Open Sans、Helvetica。

介面中任何地方都不得使用斜體字型。

**每個網站只使用一種字型。**除非提示明確要求，否則不要搭配兩種字型。只有在程式碼、資料或需要等寬字型的數字 UI 中，才允許在主要字型旁使用 Geist Mono。

**絕對不要使用超粗體重（900 / 黑色）。**上限為半粗體或粗體。

文案規則

**文案中無連字號。**請勿在內文、標題或標籤中使用 -。改寫該詞組。

**無孤兒詞。**最後一行絕對不能只有一個單詞獨立。對標題使用 text-wrap: balance，對內文使用 text-wrap: pretty。

字級比例

始終將字型大小解析為 Tailwind 的預設字級比例。切勿保留任意值，包括 text-[19px]、font-size: 22px 或 1.4rem。

如果現有大小未精確落在某個級距上，則將其對齊到最接近的下一個級距，同時考慮大小及其配對的行高。

類別	大小	行高
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

請勿在審查中將級距對齊與獨立設定的自訂行高結合。追蹤與行高只能在匹配步驟已提供的值範圍內調整，使兩個規則永遠不會互相衝突。

按鈕類型

主要按鈕：text-base（16px），半粗體。
較小的頁首按鈕：text-sm（14px），半粗體。

B2. 間距

僅使用這些值。其間無其他值，其外也無其他值。

代號	值
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

主要按鈕： 上下內距 8px，左右內距 12px。

B3. 圓角

僅使用 Tailwind 的圓角值。

嵌套圓角公式。當一個形狀位於另一個形狀內部，且兩者之間的間隙小於 32px 時：

內部圓角 = 外部圓角 - 間隙

僅在結果大於 2 時套用此公式。低於此值，則保持內部形狀為直角或不變。

範例：外部卡片為 rounded-2xl（16px），內部內距為 8px，則內部元素獲得 8px 圓角（rounded-lg）。

B4. 邊框與背景

**絕對不要只對卡片的一側套用邊框。**邊框要嘛環繞全部，要嘛完全沒有。
**絕對不要在背景中使用漸層。**背景為純色。

深色模式背景顏色

僅使用以下顏色：

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. 英雄區段

標題顏色

深色主題： 標題文字從左到右漸層，#FFFFFF → #9B9B9B。
淺色主題： 標題文字從左到右漸層，#000000 → #666666。

這是唯一使用漸層的地方，且僅限文字，絕不用于背景。

佈局

標題與副標題都設定最大寬度為 680px。
閱讀標題文案並在有意義的位置插入分行符號。
絕對不要以尷尬地切斷詞組或使句子更難閱讀的方式分行。在思維停頓處分行。

B6. 圖示

使用： Phosphor、Solar 或 Iconamoon。

絕對不要使用： Material Icons、Material Symbols。

B7. 動態編排（流體動力學）

永遠不要使用預設過渡效果。所有動態透過自訂 cubic bezier 曲線模擬真實世界的質量與彈簧物理。

transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

流體島嶼導航

**關閉狀態。**導覽列為浮動玻璃藥丸形狀，與頂部分離：mt-6、mx-auto、w-max、rounded-full。

**漢堡選單變形。**點擊時，漢堡選單線條流體地旋轉並平移成完美的 X，使用 rotate-45 和 -rotate-45 搭配絕對定位。它們絕對不能直接消失。

**模態展開。**選單以覆蓋全螢幕的遮罩層展開，帶有厚重的玻璃效果：backdrop-blur-3xl bg-black/80 或 bg-white/80。

**交錯遮罩揭示。**展開狀態下的導航連結從隱形盒子淡入並向上滑動，translate-y-12 opacity-0 轉變為 translate-y-0 opacity-100，每個項目交錯延遲 delay-100、delay-150、delay-200，依此類推。

滾動插值

元素在載入時絕不靜態顯示。當它們進入視口時，執行一個輕柔、厚重的淡入上移：

translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

持續時間 800ms 或更長。

對於 JavaScript 驅動的揭示，使用 IntersectionObserver 或 Framer Motion 的 whileInView。絕對不要使用 window.addEventListener('scroll') - 它會導致連續重排並嚴重影響行動裝置效能。

B8. 內容真實性

絕不交付填充內容。以下是頁面是生成而非製作的跡象。

**無假文（Lorem Ipsum）。**撰寫真實的草稿文案。
**無「王小明」。**使用多元、真實的姓名。
無預設品牌如「Acme Corp」、「Nexus」或「SmartFlow」。創造符合情境、可信的名稱。
無整數假數字如 99.99%、50%、$100.00。使用有機數據：47.2%、$99.00、+1 (312) 847-1928。
**無 AI 陳腔濫調。**絕對不要使用「提升」、「無縫」、「釋放」、「次世代」、「顛覆遊戲規則」、「深入探討」、「織錦」或「在這個領域中」。
使用句子大小寫的標題，而非「每個單字都大寫」。
主動語態。「我們無法儲存您的變更」，而非「錯誤已發生」。
成功訊息中無驚嘆號，錯誤訊息中也無「哎呀！」。直接陳述：「連線失敗。請再試一次。」
每個人使用獨特的頭像，以及多樣的部落格文章日期。

B9. 狀態

每個互動元素都帶有完整的狀態組合：

懸停 - 背景移動、輕微縮放或平移
啟用 - scale(0.98) 或 translateY(1px) 以提供實體反饋
聚焦 - 可見的焦點環。可及性要求，非可選。
載入 - 形狀與真實佈局相似的骨架載入器，而非圓形旋轉器
空狀態 - 組合的「開始使用」檢視，絕非空白面板
錯誤 - 內聯且具體。絕不使用 window.alert()。

無死連結。指向 # 的按鈕必須有實際連結或視覺上禁用。當前頁面必須在導航中標示。

B10. 上線要求

那些容易被遺忘、使頁面感覺未完成的事項：

頁尾中的隱私政策與服務條款連結
自訂、品牌化的 404 頁面
用戶端表單驗證，針對電子郵件格式與必填欄位
為鍵盤使用者提供的跳到內容的連結
在管轄區要求時提供 Cookie 同意
品牌化的網站圖示（favicon）
<title>、中繼描述、og:image 與社交分享標籤
每個有意義的圖片都有替代文字（alt text）
語意化 HTML：<nav>、<main>、<article>、<aside>、<section>
從每個頁面返回的方式

B11. 標語揭示區段（強制）

每個登陸頁面都包含一個大型文字區段來陳述核心效益或標語，與英雄區段分開。它位於頁面較下方，作為一個獨立時刻，而非直接堆疊在英雄區段下方。

文案

至少兩行文字。
效益陳述或標語，使用 A5 的語氣撰寫，而非通用區段標題。

字體排版

大小為 text-4xl 到 text-6xl，視行數而定，遵循 B1 字級比例。
最大寬度與英雄區段相同，因此行會在有意義的點斷行（依據 B5）。

動畫

文字以輕柔、柔和的色調開始，約為主體基礎文字顏色的 25% 到 35% 不透明度。
隨著區段滾入視口，每個單詞從該柔和色調逐一轉變為完整文字顏色，按閱讀順序。
單詞在越過觸發線時一個接一個啟動，而非整個區塊同時翻轉。過渡使用 B7 中的自訂緩動曲線，絕非線性淡出。
使用 IntersectionObserver 逐詞實現，或透過 requestAnimationFrame 節流的單一滾動監聽器。絕對不要使用未節流的滾動事件處理器。

在你喜歡的 AI 中提問

說明文件

登陸頁面設計 是做什麼的？