登陸頁面設計 是做什麼的？
登陸頁面不是首頁。首頁服務多重意圖。登陸頁面只為一個意圖而存在：
一個提案 → 一個受眾 → 一個主要行動。
此技能分為兩大部分。Part A 決定頁面要說什麼以及如何建構。Part B 是不可妥協的視覺系統。在觸及 Part B 之前，請先完成 Part A。
適用範圍
適用於所有網頁 UI 相關工作：登陸頁面、行銷網站、元件、儀表板、原型以及設計審查。當此處的規則與框架預設值衝突時，以此檔案為準。當使用者的明確提示與規則衝突時，以使用者為準。
輔助技能。若要升級現有網站而非建置新網站，請使用 redesign-existing-projects（github.com/elayadesign/redesign-skill）。它會診斷通用模式，並將每個具體值的決定委派給此檔案。
PART A — 策略與結構
A1. 需求訪談
在開始設計或撰寫文案之前，先收集以下資訊。只詢問缺失的部分，且一次批量詢問，而非逐個問題提問。
目的
- 一個主要行動是什麼？（試用、示範、購買、等候名單、下載）
- 提案是什麼？他們具體能得到什麼？
- 什麼算是一次轉換？（點擊、註冊、購買）
受眾與背景
- 理想客戶檔案（ICP）是誰？
- 他們試圖解決什麼問題？
- 三大異議：他們今天為什麼不轉換？
- 流量來源：廣告、搜尋、社群、電子郵件
- 訪客到達時已經知道些什麼？
證明與素材
- 證明要點：標誌、推薦、數字、案例研究
- 螢幕截圖、展示影片、產品 GIF
- 保證、退款條款、取消條款
限制條件
- 品牌語氣：休閒或專業
- 設計方向：極簡編輯風格、俏皮 3D、玻璃 UI
- 是否以行動裝置優先？
如果使用者無法回答，請做出合理假設，用一句話說明，然後繼續進行。不要讓建置停滯。
A2. 頁面結構
首屏上方（必備）
- 主標題：成果加上受眾
- 副標題：說明方法並增加具體性
- 主要行動呼籲（CTA）：明確的動詞加上他們得到的東西
- 一個證明信號：標誌條、數據或簡短推薦
- 英雄區塊視覺：產品截圖或影片，或強而有力的插圖
頁面中間（論證） 6. 問題到解決方案：一個區塊 7. 好處：三到五項，以成果為導向 8. 運作方式：三個步驟 9. 社會證明：推薦或案例研究
頁面底部（異議處理） 10. 常見問題（FAQ）：六到十二個問題 11. 風險消除：試用、隨時取消、保證 12. 最終行動呼籲（CTA）：與頂部相同
在頁面中間的論證部分，務必包含 B11 中強制性的標語展示區塊，通常緊接在英雄區塊之後或好處區塊之後。
A3. 佈局選擇
選擇一種並說明原因。
| 類型 | 使用時機 |
|---|---|
| A. 經典英雄區塊加分區段 | 產品可透過英雄區塊截圖理解。最常見。 |
| B. 長篇故事 | 需要教育受眾並克服懷疑。 |
| C. 極簡轉換頁面 | 高意圖流量（發送給已知使用者的電子郵件），或短提案如下載或等候名單。 |
| D. 比較頁面 | 搜尋意圖包含替代方案（「X 與 Y 比較」、「最適合」）。通常與 SEO 頁面搭配使用。 |
A4. 轉換規則
使訊息與來源匹配。 如果流量來自廣告，請在英雄區塊中鏡像廣告的主標題，並保持相同的承諾和視覺基調。
讓下一步驟顯而易見。 一個主要行動呼籲（CTA）。切勿在首屏上方放置互相競爭的 CTA。
先寫好處。 功能是它做些什麼。好處是這對他們意味著什麼。
要具體。
- ❌ 「節省時間並簡化流程」
- ✅ 「將每週報告時間從 4 小時縮短為 15 分鐘」
降低風險。 至少選擇一項：免費試用、免費方案、無需信用卡、隨時取消、退款保證。
將異議視為一個區塊，而非附註。 對於高摩擦力的提案，將常見問題（FAQ）區塊提前放置。將證明直接放在其所支持的聲明旁邊。
A5. 文案撰寫
主標題公式
- 「{成果} 而無需 {痛點}」
- 「專為 {受眾} 打造的 {類別}」
- 「在 {時間} 內交付 {結果}」
副標題。 一到兩句話。說明它是什麼以及為誰而設。
CTA。 動詞加上他們得到的東西。絕不使用「了解更多」或「提交」。請使用「開始免費試用」、「預約示範」、「獲取核對清單」。
好處要點。 好處以粗體顯示，然後是證明或細節。範例：更快的迭代 — 一鍵生成三種佈局變體。
注意：B1 中的文案規則仍然適用。句子內無連字符號，無孤兒詞。
A6. 建置順序
逐區塊進行，按此順序：
- 英雄區塊
- 好處
- 運作方式
- 證明
- 常見問題
- 最終 CTA
切勿在每次迭代時重建整個頁面。逐區塊進行可保持控制，並使差異（diff）易於審查。
A7. SEO 與 AEO
不要索引 僅用於廣告活動的頁面或具有高度時效性的提案。使用 noindex 或將它們放在未索引的路徑後面。
要索引 常青提案以及搜尋意圖與承諾相符的頁面。添加清晰的標題和 Meta 描述、來自首頁和功能頁面的內部連結，以及以問答形式呈現的常見問題（FAQ）區塊以利 AEO。如果合適，請添加 FAQ Schema。
A8. 常見陷阱
- 首屏上方有太多 CTA
- 模糊的價值主張：「簡化」、「優化」
- 一大串功能列表但無成果說明
- 證明被埋在頁面底部
- 破壞可讀性的行動版佈局
- 無明確的下一步
PART B — 視覺系統
每個視覺值都必須透過這些規則來決定，而非臨時發明。
B1. 字體排版
字型
使用： Geist、Manrope、Geist Mono、Poppins。
絕不使用： Inter、Roboto、Arial、Open Sans、Helvetica。
絕不在介面中任何地方使用斜體字型。
每個網站僅使用一種字體。 除非提示明確要求，否則不要搭配兩種字型。僅在功能上需要等寬字體來呈現程式碼、數據或數字型 UI 時，才允許將 Geist Mono 與主要字型一起使用。
絕不使用超粗字重（900 / black）。上限為 Semibold 或 Bold。
文案規則
文字中無連字符號。 請勿在內文、標題或標籤中使用 -。改寫該詞句。
無孤兒詞。 最後一行絕不能只有一個詞。在標題上套用 text-wrap: balance，在內文上套用 text-wrap: pretty。
字級
始終將字型大小解析為 Tailwind 的預設字級尺度。切勿保留任意值，包括 text-[19px]、font-size: 22px 或 1.4rem。
如果現有大小未精確落在某個級距上，則將其對齊到下方最接近的級距，同時考量其大小和配套的行高。
| Class | 大小 | 行高 |
|---|---|---|
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），semibold。 - 較小的頁首按鈕：
text-sm（14px），semibold。
B2. 間距
僅使用這些值。沒有中間值，也沒有範圍外的值。
| Token | 值 |
|---|---|
| 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 用語陳腔濫調。 切勿使用「Elevate」、「Seamless」、「Unleash」、「Next Gen」、「Game changer」、「Delve」、「Tapestry」或「In the world of」。
- 標題使用句子大小寫（Sentence case），而非所有單字都大寫（Title Case On Everything）。
- 使用主動語態。 「We could not save your changes」，而非「Mistakes were made」。
- 成功訊息中無驚嘆號，錯誤訊息中也無「Oops！」。直接陳述：「Connection failed. Please try again.」
- 每個人使用獨特的頭像，以及多變的部落格文章發表日期。
B9. 狀態
每個互動元素都附帶其完整的狀態集：
- Hover — 背景變化、輕微縮放或位移
- Active —
scale(0.98)或translateY(1px)以提供物理回饋 - Focus — 可見的焦點環。無障礙性要求，非可選項。
- Loading — 形狀類似真實佈局的骨架載入器，而非圓形轉圈動畫
- Empty — 一個組合好的「開始使用」視圖，絕非空白面板
- Error — 內聯且具體。絕不使用
window.alert()。
無無效連結。指向 # 的按鈕要嘛已連結，要嘛在視覺上已停用。必須在導覽中標示目前頁面。
B10. 交付要求
那些容易被遺忘而讓頁面感覺不完整的東西：
- 頁尾的隱私權政策和服務條款連結
- 自訂的品牌化 404 頁面
- 用於電子郵件格式和必填欄位的客戶端表單驗證
- 為鍵盤使用者提供的跳至內容連結
- 在管轄區要求時的 Cookie 同意
- 品牌化的 Favicon
<title>、Meta description、og:image和社交分享標籤- 每個有意義圖片的替代文字（Alt text）
- 語意化 HTML：
<nav>、<main>、<article>、<aside>、<section> - 從每個頁面返回的方式
B11. 標語展示區塊（必備）
每個登陸頁面都包含一個大型字型區塊，用於陳述核心好處或標語，與英雄區塊分開。它位於頁面較下方，作為一個獨立的時刻，而非直接堆疊在英雄區塊之下。
文案
- 至少兩行文字。
- 一個好處陳述或標語，使用 A5 的語氣撰寫，而非一個通用的區塊標題。
字體排版
- 大小為
text-4xl到text-6xl，視行數而定，遵循 B1 的字級尺度。 - 最大寬度像英雄區塊一樣設定上限，以便在 B5 規定的有意義處換行。
動畫
- 文字從一個微妙的柔和色調開始，約為主題基本文字顏色的 25% 到 35% 不透明度。
- 隨著區塊滾入視圖，每個單詞按照閱讀順序，從該柔和色調獨立過渡到完整的文字顏色。
- 單詞在越過觸發線時逐個激活，而非整個區塊同時翻轉。過渡使用 B7 中的自訂緩動曲線，絕不使用線性淡入淡出。
- 使用每個單詞的
IntersectionObserver實現，或透過requestAnimationFrame節流的單一滾動監聽器。切勿使用未節流的滾動事件。