首頁設計怎麼做？抓住第一印象的價值主張與首屏規劃

訪客進到你的網站，通常只會給你很短的時間判斷「這裡有沒有我要的東西」。首頁設計的任務，就是在這短短幾秒內回答三個問題：你是誰、你能幫我什麼、我接下來該點哪裡。可惜很多企業首頁的第一屏，只有一張大大的形象照，配上一句「用心服務，追求卓越」，訪客看完還是不知道這家公司在做什麼。

這篇文章整理 Nielsen Norman Group（NN/g）多年的首頁可用性研究，搭配我們替台灣企業規劃首頁的經驗，說明首屏怎麼安排、價值主張怎麼寫、首頁每個區塊的順序，以及最常見的設計錯誤。

為什麼首頁這麼重要？

首頁往往是訪客認識一家公司的第一站。NN/g 的首頁原則也提到，使用者在網站裡迷路時，常會回到首頁重新找方向；即使是從搜尋引擎直接進入內頁的人，也會靠首頁來理解這家公司。對 B2B 企業來說，潛在客戶在聯絡之前多半會先看看官網，確認公司是否可靠。

另一個關鍵發現來自 NN/g 對網頁停留時間的分析：使用者在進站最初約 10 秒最容易離開，若能撐過約 30 秒，往往會停留更久。NN/g 據此建議，網站必須在前 10 秒內清楚傳達價值主張。

換句話說，首頁不是放公司歷史的地方，而是一個分流站：讓不同需求的人，最快找到自己要去的地方。

首屏（above the fold）：最貴的版面

「首屏」指的是不用捲動就能看到的畫面。早期網頁設計有「重要的東西都要擠在首屏」的說法，後來又出現「使用者都會捲動，首屏不重要」的反論。NN/g 2018 年的眼動研究給了比較平衡的答案：

• 使用者約 57% 的瀏覽時間在首屏，約 74% 在前兩個畫面高度內
• 相較 2010 年研究的約 80%，首屏比重下降，代表使用者確實比以前更願意捲動
• 但首屏仍是注意力最集中的區域，最高優先的內容與主要行動按鈕應放在這裡

首屏應該包含什麼？

1. Logo：NN/g 建議放在左上角，讓人一眼確認在哪個網站
2. 清楚的主標語：一句話說明你做什麼、為誰做
3. 一句補充說明：差異化或主要好處
4. 一到兩個主要行動按鈕：例如「免費估價」「加 LINE 諮詢」
5. 看得到的主選單
6. 與業務真實相關的圖片：產品、團隊、施工現場，而不是隨處可見的圖庫照片

小心「假底部」

NN/g 提醒，滿版的大圖或極簡設計，常讓使用者誤以為頁面已經結束，這稱為「假底部（false floor）」。解法是讓下一個區塊的標題或卡片稍微露出在首屏下緣，暗示下面還有內容。

價值主張怎麼寫？

價值主張要回答訪客心中的問題：「為什麼要選你，而不是別家？」NN/g 建議用使用者的語言，說清楚你的差異，避免空泛的歡迎詞或行話。

一個好用的公式

我們幫【誰】＋解決【什麼問題】＋用【什麼方式／有什麼不同】

寫完後做個簡單測試：把主標語拿給不認識你公司的朋友看五秒，請他說出你們在做什麼。說不出來，就要再改。更多文案技巧可以參考網站文案與 UX Writing。

首頁由上而下的區塊規劃

首屏之後，首頁的每個區塊都應該幫訪客往前走一步。以下是適合多數台灣服務業的區塊順序，可依產業調整：

1. 首屏：主標語、補充說明、主要 CTA
2. 服務項目入口：用 3–6 張卡片列出主要服務，每張直接連到服務頁
3. 為什麼選我們：三到四個具體差異，最好有數字或證據，而不是形容詞
4. 案例或作品：放真實案例縮圖，NN/g 建議用具體內容範例代替抽象描述
5. 客戶評價與信任元素：Google 評論、合作品牌、認證，延伸閱讀見網站信任元素
6. 服務流程：從諮詢到完成的步驟，降低第一次合作的不安
7. 常見問題：回答價格、時間、地區等最常被問的問題
8. 最後一次行動呼籲：再放一次 CTA 與聯絡方式
9. 頁尾：地址、電話、LINE、營業時間、社群連結、隱私權政策

如果你的網站有多種客群，例如同時面對一般消費者與企業客戶，NN/g 建議依受眾分組提供不同的入口，讓各自找到自己的路徑。

首頁最常見的五個錯誤

1. 自動輪播 Banner

輪播看起來能放很多訊息，但 NN/g 的首頁原則明確建議避免自動輪播與自動播放影片；自動前進的內容容易被當成廣告忽略，使用者也來不及閱讀或點擊。如果真的有多個重點，改成並排的卡片通常更有效。

2. 太多動畫與特效

視差捲動、文字逐字飛入、Logo 動畫，會拖慢載入速度，也可能讓重要訊息被誤認為廣告。NN/g 建議盡量減少主標語與標題上的動態效果，並提供減少動態的選項。

3. CTA 太模糊

「了解更多」「探索」這類按鈕文字，無法告訴使用者點下去會發生什麼。改成「看冷氣清洗價格」「預約免費丈量」更明確。按鈕設計的細節請看 CTA 行動呼籲按鈕設計。

4. 一進站就跳彈出視窗

訪客還沒看懂你是誰，就被要求訂閱電子報或加入會員，很容易直接離開。NN/g 建議避免彈出視窗與進站動畫頁，Cookie 同意等必要情況除外。

5. 只檢查電腦版

台灣大量使用者以手機瀏覽，手機的首屏更小，主標語過長、按鈕太小、圖片太重，問題都會被放大。首頁設計稿一定要同時看手機版，做法可參考行動優先與 RWD 響應式設計。

首頁設計檢查清單

上線前，對照以下項目逐一確認：

• 不認識公司的人，五秒內能說出你們做什麼
• Logo 在左上角，點擊可回到首頁
• 首屏有明確的主要行動按鈕
• 主選單在電腦版與手機版都容易找到
• 沒有自動輪播、自動播放有聲影片或進站彈窗
• 圖片是真實的產品、團隊或案例
• 服務卡片都能直接連到對應服務頁
• 有至少一種信任證據（評價、案例、認證）
• 頁尾有完整的聯絡資訊
• 手機版首屏的主標語與按鈕沒有被擠到下方
• 首頁載入速度通過 Core Web Vitals 檢查

常見問題

首頁一定要放影片嗎？

不一定。影片能有效展示產品或服務過程，但若自動播放或檔案過大，反而拖慢速度、干擾閱讀。建議用封面圖搭配播放按鈕，讓使用者自己決定是否觀看。

首頁的文字應該多還是少？

要「剛好」。首頁的任務是說清楚定位並引導分流，細節留給服務頁。每個區塊用一個清楚的標題加一兩句說明，比大段文字更容易被掃讀。

首頁要不要放價格？

如果價格是客人最在意、且你們有競爭力，放出「起價」或方案入口能降低詢問門檻。若報價變化大，至少說明計價方式或提供估價入口，避免訪客因為不確定而離開。

首頁改版後要怎麼判斷有沒有變好？

上線前後比較首頁的跳出情形、點擊主要按鈕的比例、從首頁進入服務頁的比例與表單數。建議在 Google Analytics 設定按鈕點擊事件，才有客觀數據可以比較。

結語：首頁是一位稱職的接待員

好的首頁就像一位稱職的接待員：一見面就說清楚公司做什麼、問你需要什麼，然後帶你到對的地方。與其追求炫目的視覺，不如先確保每位訪客都能在幾秒內找到方向。首頁只是整個網站的一環，完整流程可以回到企業官網設計完整指南查看。

如果你的首頁看起來不錯、詢問卻不多，網軍行銷的轉換率優化服務可以協助檢視首屏訊息、行動按鈕與使用者動線，找出讓訪客卡住的地方。

參考資料

• Nielsen Norman Group，Homepage Design: 5 Fundamental Principles：https://www.nngroup.com/articles/homepage-design-principles/
• Nielsen Norman Group，Top 10 Guidelines for Homepage Usability：https://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
• Nielsen Norman Group，Scrolling and Attention：https://www.nngroup.com/articles/scrolling-and-attention/
• Nielsen Norman Group，How Long Do Users Stay on Web Pages?：https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/