bear2u/my-skills

著陸頁設計指南 V2

概述

此技能可協助建立獨特且高轉換率的著陸頁，結合了：

• 經過驗證的轉換框架：來自 DESIGNNAS 的 11 項必備元素，確保高轉換率
• 卓越的設計品質：大膽的美學選擇，打造難忘的品牌體驗
• 生產就緒的代碼：基於 Next.js 14+、ShadCN UI、TypeScript，並進行效能優化

核心理念：著陸頁必須說服訪客轉換，同時讓他們記住你的品牌。通用、範本化的頁面兩者都做不到。此技能確保你的著陸頁既功能有效，又視覺出眾。

何時使用此技能

當使用者要求以下內容時，請使用此技能：

• 建立著陸頁、行銷頁面或產品頁面
• 基於 Next.js 或 React 的推廣網站
• 需要將訪客轉換為客戶並同時脫穎而出的頁面
• 具有卓越設計品質的專業行銷頁面
• 避免通用「範本」美學的著陸頁
• 既優化轉換又令人難忘的品牌體驗

設計思考：在編碼之前

在實施任何著陸頁之前，承諾採用一個與品牌和產品一致的大膽美學方向：

1. 理解脈絡

• 目的：這個產品解決什麼問題？目標受眾是誰？
• 品牌個性：這個品牌是俏皮、專業、奢華、極簡、大膽、還是技術型？
• 行業：這個行業期望什麼視覺語言（或者我們應該打破它）？
• 差異化：是什麼讓這個品牌難忘？訪客會記住的「一件事」是什麼？

2. 選擇一個美學方向

選一個極端的方向並完全投入。範例：

極簡 & 精緻

• 極致乾淨的佈局，大量的留白
• 具有大尺度對比的高級排版
• 單色或有限色盤（最多 2-3 種顏色）
• 細膩的微互動，優雅的過渡
• 範例：奢侈品、專業服務、高階 SaaS

大膽 & 極繁

• 豐富、複雜的視覺層次
• 動態動畫和滾動效果
• 漸層網格、紋理和重疊元素
• 高對比的鮮豔色盤
• 範例：創意機構、娛樂、年輕品牌

復古未來主義

• 懷舊元素結合現代執行
• 幾何圖案、霓虹點綴
• 故障效果、掃描線、顆粒紋理
• 具有特色的等寬或展示字體
• 範例：遊戲、科技新創、創意工具

有機 & 自然

• 柔和、流暢的形狀和漸層
• 自然啟發的顏色（大地色、粉彩）
• 模仿自然運動的平滑動畫
• 圓角、柔和的陰影
• 範例：健康、永續發展、食品

編輯 & 雜誌風格

• 強烈的字體層級結構
• 打破網格的不對稱佈局
• 大型、有影響力的圖像
• 大膽使用留白和負空間
• 範例：內容平台、媒體、教育

粗野主義 & 原始

• 非傳統的佈局、刻意「醜陋」
• 系統字體或刻意基本的排版
• 高對比、有限的顏色
• 最小或無動畫
• 範例：藝術、時尚、反建制品牌

關鍵：選擇一個清晰的方向。大膽的極繁主義和精緻的極簡主義都有效——關鍵是意圖性，而非強度。以精確和一致性執行你選擇的方向，貫穿所有 11 個元素。

3. 定義你的設計系統

在編碼之前，定義這些核心決策：

字體選擇

• 展示字體：選擇有特色且令人難忘的（不要用 Inter、Roboto、Arial 或系統字體）
  • 考慮： Space Grotesk、Clash Display、Cabinet Grotesk、Syne、DM Serif Display、Zodiak、Fraunces、Archivo Black、Unbounded、Outfit
  • 或者明智使用 Google Fonts： Playfair Display、Crimson Pro、Libre Baskerville、Epilogue、Plus Jakarta Sans
  • 永遠不要收斂於常見選擇——在不同專案間變化字體
• 正文字體：精緻、可讀的選擇，能與展示字體互補
  • 考慮： DM Sans、General Sans、Switzer、Geist、Manrope、Karla、Work Sans
• 比例：建立清晰的層級結構（例如，H1： 4rem → H2： 3rem → H3： 2rem → Body： 1rem）

色彩盤

• 主導色：你的主要品牌色（60% 使用率）
• 強調色：用於 CTA 的高對比色（10% 使用率）
• 中性色盤：灰色或大地色（30% 使用率）
• 背景策略：純色、漸層、紋理還是圖案？
• 定義為 CSS 變數以保持一致

動態策略

• 頁面載入：使用 animation-delay 對英雄區元素進行交錯顯示
• 滾動互動：淡入、視差或觸發式動畫？
• 懸停狀態：微妙的縮放、顏色轉變或戲劇性的變形？
• CTA 動畫：按鈕如何在不令人厭煩的情況下吸引注意力？

空間方法

• 佈局風格：居中對稱？不對稱且動態？打破網格？
• 間距系統：緊湊密集？寬敞通風？
• 區塊流程：傳統堆疊？對角線？重疊？

11 項必備元素框架

每個有效的著陸頁都必須包含這 11 項必備元素。這些基於 DESIGNNAS 經過驗證的高轉換率著陸頁框架。

每個元素有兩個要求：

1. 功能要求（用於轉換）——必須包含
2. 設計卓越性（用於記憶性）——必須獨特且美觀

逐元素設計指南

1. 帶關鍵詞的 URL

功能： SEO 優化、描述性的 URL 結構 設計： 不適用（SEO 焦點）

2. 公司標誌（頁首）

功能： 品牌標識顯著放置（左上角） 設計卓越性：

• 考慮頁面載入時的動畫標誌
• 固定頁首，帶有平滑滾動過渡
• 不同滾動狀態的標誌變體
• 頁首背景： 透明 → 帶背景模糊的實色
• 與你的展示字體選擇相匹配的導航排版

3. SEO 優化的標題和副標題（英雄區）

功能： 帶關鍵詞的清晰價值主張 設計卓越性：

• 排版： 使其巨大且難忘（4rem-6rem+）
• 在此使用你的獨特展示字體
• 考慮使用漸層文字、輪廓文字或文字陰影以增加衝擊力
• 使用交錯淡入動畫顯示標題文字（animation-delay）
• 副標題大小應為標題的 50%，使用不同的粗細或字體
• 透過換行和間距增加視覺節奏

4. 主要 CTA（英雄區）

功能： 英雄區中的主要行動呼籲按鈕 設計卓越性：

• 使其不可能被忽略： 大小、顏色對比、位置
• 避免無聊的矩形： 考慮藥丸形狀、獨特邊框或幾何形狀
• 加入微互動： 懸停縮放、陰影擴展、顏色轉變
• 考慮具有主要/次要層級的雙 CTA
• 吸引眼球的入場動畫（標題後延遲）
• 加入視覺提示： 箭頭、圖示或脈動效果

5. 社交證明（英雄區）

功能： 評論、評分、用戶統計 設計卓越性：

• 數字應該巨大並在載入時動畫顯示（計數效果）
• 帶有漸層背景或微妙邊框的統計卡片
• 重疊圓圈中的客戶頭像
• 帶有自訂樣式的星級評分（非預設的黃色星星）
• 「曾亮相於」標誌，帶有適當的間距和透明度處理
• 考慮輪播的評價或動畫化的社交證明轉盤

6. 圖片或影片（媒體區塊）

功能： 產品/服務的視覺展示 設計卓越性：

• 關鍵： 永遠不要使用佔位符或通用圖片
• 帶有裝置模型（筆電/手機框架）的產品截圖
• 增加深度： 陰影、反射、3D 傾斜效果
• 考慮： 浮動截圖、視差滾動效果、影片背景
• 滾動時圖片顯示動畫（淡入、滑入）
• 對於影片： 自訂播放按鈕設計、環境背景光暈
• 網格佈局： 不對稱、重疊或便當盒風格

7. 核心優勢/功能

功能： 3-6 個帶圖示的關鍵優勢 設計卓越性：

• 圖示： 自訂設計或精心挑選（不要用通用線條圖示）
• 考慮： 漸層填充、懸停時動畫圖示、3D 風格插圖
• 卡片設計變化： 玻璃態、新擬物態、漸層邊框、微妙陰影
• 用戶滾動至此區塊時的交錯動畫
• 不對稱佈局，取代無聊的三欄網格
• 背景元素： 微妙圖案、漸層或裝飾性形狀
• 排版： 使用你的展示字體的功能標題，粗體且突出

8. 客戶評價

功能： 4-6 個帶照片的真實評論 設計卓越性：

• 照片處理： 帶有漸層邊框或獨特形狀的圓形頭像
• 卡片背景： 微妙漸層、磨砂玻璃或提升陰影
• 引號： 超大尺寸、裝飾性或自訂樣式
• 佈局： 瀑布流網格、轉盤或交錯垂直排列
• 評分星星： 與品牌色盤匹配的自訂顏色
• 懸停效果： 提升、擴展或發光
• 客戶姓名和頭銜： 精緻排版

9. 常見問題區塊

功能： 5-10 個常見問題，使用手風琴式 UI 設計卓越性：

• 手風琴動畫： 平滑展開/折疊，帶有緩動效果
• 圖示： 自訂 V 形或加/減號，帶有旋轉效果
• 問題上的懸停狀態
• 排版： 問題使用粗體或不同字體粗細
• 考慮： 桌面版雙欄佈局，並排問答對
• 背景： 與前一個區塊的微妙顏色轉變
• 間距： 手風琴項目內的寬敞內距

10. 最終 CTA

功能： 底部的行動呼籲，用於第二次轉換機會 設計卓越性：

• 使其成為英雄時刻： 這是最後機會
• 全寬區塊，帶有戲劇性背景（漸層、圖案或顏色）
• CTA 按鈕比英雄 CTA 更大
• 增加急迫感： 倒數計時器、名額有限、稀缺性指示
• 周圍搭配引人入勝的文案和微型優勢
• 動畫： 視差背景、浮動元素或滾動觸發效果
• 考慮： 電子郵件輸入 + 按鈕組合，用於電子報/候補名單

11. 聯絡資訊/法律頁面（頁尾）

功能： 包含完整資訊和法律連結的頁尾 設計卓越性：

• 多欄佈局，具有清晰的資訊層級
• 社交圖示： 懸停效果（顏色轉變、縮放或旋轉）
• 電子報註冊： 帶有內聯按鈕的樣式化輸入框
• 排版： 較小但仍可讀（14-16px）
• 背景： 比主體更深或不同的顏色
• 與內容的分隔線： 微妙漸層線或裝飾性分隔線
• 底部欄： 版權和法律連結，帶有適當間距

關鍵： 每個著陸頁都必須包含所有 11 個元素。沒有例外。

有關每個元素的詳細說明，請參閱 references/11-essential-elements.md。

設計美學指南

排版卓越性

• 永遠不要使用通用字體： Inter、Roboto、Arial、Helvetica、system-ui
• 展示字體應該是獨特且令人難忘的
• 明智配對： 用展示字體做標題 + 用精緻正文字體做內文
• 戲劇性縮放： 透過大小跳躍建立清晰層級（而非細微差異）
• 字距調整： 為展示字體調整（通常需要更緊的追蹤）
• 行高： 展示 = 1.1-1.2，正文 = 1.6-1.8

顏色與視覺一致性

• 定義 CSS 變數用於所有顏色（保持一致）
• 主導色應貫穿始終（不僅在 CTA 中）
• 強調色必須有足夠的對比度以滿足無障礙性（至少 WCAG AA）
• 避免： 白色背景上的紫色漸層（過度使用的 AI 美學）
• 背景： 使用漸層、網格、圖案或紋理來營造氛圍
  • 漸層網格： 多色平滑漸層
  • 噪點紋理： 微妙的顆粒以增加深度
  • 幾何圖案： 低透明度的點、線或形狀
  • 分層透明度： 重疊的彩色區塊

動態與動畫

• 頁面載入： 一個精心編排的入場，帶有交錯顯示
  • 英雄標題文字依序淡入（animation-delay： 0ms, 100ms, 200ms）
  • 副標題跟隨（delay： 300ms）
  • CTA 最後出現（delay： 500ms）並帶有強調
• 滾動動畫： 區塊在進入視口時淡入
  • 使用 Intersection Observer API 或 Framer Motion 的滾動觸發器
  • 卡片交錯顯示（每個都有遞增的延遲）
• 懸停狀態： 驚喜與喜悅
  • 按鈕： 放大、陰影擴展、顏色轉變
  • 卡片： 提升效果，帶有陰影
  • 圖片： 微妙的縮放或視差
• 效能： 優先使用 CSS 動畫而非 JavaScript
  • 使用 transform 和 opacity（GPU 加速）
  • 避免動畫化 width、height、top、left

空間構成與佈局

• 打破網格： 不要預設使用居中對稱佈局
• 不對稱： 一側較大的文字，另一側視覺元素
• 重疊元素： 為深度分層區塊
• 對角線流動： 區塊之間的斜角分隔線
• 大量留白或受控的密度（選一個並堅持）
• Z 軸思考： 使用陰影、模糊和分層來創造深度

避免通用的 AI 美學

這些模式會讓著陸頁看起來像「AI 生成」且容易被遺忘：

不要：

• ❌ Inter/Roboto/Arial 字體
• ❌ 白色背景上的紫色漸層
• ❌ 每次都完美居中對稱的佈局
• ❌ 通用線條圖示
• ❌ 預設的黃色星級評分
• ❌ 沒有個性的無聊矩形按鈕
• ❌ 沒有視覺趣味的白色背景
• ❌ 千篇一律的三欄功能網格
• ❌ 指著筆電的人們的庫存照片

要：

• ✅ 選擇與品牌個性匹配的獨特字體
• ✅ 致力於獨特的色彩盤（不總是紫色！）
• ✅ 使用不對稱創造意想不到的佈局
• ✅ 設計或挑選有特色的圖示
• ✅ 自訂所有 UI 元素的樣式以匹配美學
• ✅ 添加背景紋理、漸層或圖案
• ✅ 在各區塊間變化佈局
• ✅ 使用產品截圖、自訂插圖或真實攝影

技術棧要求