3 秒法則是真實的

眼球追蹤研究一再確認：訪客在決定「繼續讀還是離開」這件事上，平均只花 3–5 秒。

這幾秒鐘，他們的目光停留在哪裡？基本上是首頁的第一屏——也就是不需要捲動就能看到的區域。

這個區域做對了，訪客願意繼續往下看。做錯了，他們按上一頁，流量白費。

第一屏必須回答的 3 個問題

不管你的品牌是什麼行業，訪客在第一屏潛意識中想知道的是：

① 這是什麼地方？（你是誰、做什麼）

② 這跟我有什麼關係？（這對我有用嗎）

③ 我接下來要做什麼？（下一步）

設計和文案一起，要在 3 秒內把這三個問題都回答清楚。

第一屏的 6 個核心元素

元素 1：導覽列（Navbar）

導覽列的設計原則：

  • 選項不超過 5–6 個（太多讓人不知道從哪裡進入）
  • 最重要的行動（諮詢、購買）用對比色按鈕凸顯
  • 品牌 Logo 放在左上角，點擊後回到首頁
  • 手機版要有清楚的漢堡選單

常見錯誤： 導覽列過度設計，讓人不確定哪個是可以點的。

元素 2：主標題（Hero Headline）

這是第一屏最重要的文字，訪客的眼睛幾乎一定會先停在這裡。

好的主標題的標準：

  • 清楚說明你能幫誰解決什麼問題
  • 不超過 15 個字（手機版尤其重要）
  • 避免空洞的形容詞（「優質」「專業」）

弱標題： 「讓您的品牌更專業，讓您的網站更出色」

強標題： 「30 天讓你的台灣品牌有一個真正帶客的官網」

元素 3：副標題（Subheadline）

在主標題下補充說明，讓有興趣的人進一步確認他來對了：

  • 2–3 句話說明你的做法或差異化
  • 語氣要延續主標題，不要突然換風格

元素 4：主視覺（Hero Visual）

你的第一屏需要一個主視覺元素，可以是：

  • 產品或服務的照片（最直接，讓訪客「看到」你提供的東西）
  • 使用情境的照片（展示使用你服務后的理想狀態）
  • 團隊照（適合重視「人」的品牌，例如諮詢、教練）
  • 設計插圖（適合品牌感強、不適合用照片的情況）

原則： 主視覺要呼應你的文案，而不是隨便放一張「看起來不錯的」圖。

元素 5：主要 CTA（Call to Action）

一個清楚、明顯的主要行動按鈕：

  • 位置在主標題附近，一眼可以看到
  • 文字告訴訪客做了這件事會發生什麼（而不只是「送出」）
  • 顏色要與背景有足夠對比

好的 CTA 文字：

  • 「預約免費 30 分鐘諮詢」
  • 「看我們做過哪些品牌官網」
  • 「取得報價方案」

元素 6：社會認同信號（Social Proof Signal）

在第一屏的某個角落放一個快速的信任建立元素：

  • 「已服務 60+ 台灣品牌」
  • Google 評分（⭐ 4.9 / 5）
  • 合作客戶的 Logo 條

這讓初次訪客在最短時間內感到「這個品牌是真實可信的」。

常見的第一屏設計錯誤

錯誤 1：自動播放的影片或動畫佔滿第一屏

訪客進來看到一段裝飾性影片自動播放，找不到任何文字資訊。這是典型「設計師覺得很酷，但訪客不知道要做什麼」的設計。

錯誤 2：太多 CTA

「聯絡我們」「查看方案」「了解更多」「立即購買」四個按鈕同時出現在第一屏——每個都想要，結果訪客什麼都不點。

黃金原則：第一屏只有一個主要 CTA。

錯誤 3：文字被背景遮蔽

深色圖片上放深色文字，主標題完全看不清楚。對比度不夠是最容易影響第一印象的技術問題。

錯誤 4：手機版第一屏的主標題被截掉

桌機版設計完美，但手機版第一屏只顯示出主標題的一半。超過 60% 的台灣訪客用手機瀏覽，手機版第一屏比桌機版更重要。

A/B 測試第一屏的方法

如果你有流量，可以用 A/B 測試驗證不同設計的效果：

Google Optimize（現已停止）→ 替代工具：Hotjar、VWO、或直接用 Next.js 的 A/B 測試方案

最值得測試的變數：

  • 主標題文字（兩個不同版本）
  • CTA 按鈕顏色和文字
  • 有 vs 沒有主視覺圖片

每次只改一個變數，才能判斷哪個改動帶來了效果。