首頁設計怎麼做？6個關鍵讓訪客10秒內留下來

首頁設計的核心工作只有一件：在訪客離開之前，讓他看懂「你是誰、能幫他解決什麼問題、下一步該按哪裡」。研究顯示，訪客對網頁的第一印象在 50 毫秒內形成，去留大多在進站後 10 秒內決定——首頁不是公司簡介的電子版，而是一場以秒計算的說服。本文整理首頁設計的 6 個關鍵：10 秒價值主張、首屏配置、品牌識別、跨裝置相容、載入速度與行動引導。

多米諾資訊科技從業超過 20 年、網頁設計作品累積 465 件，首頁是每個專案花最多回合討論的一頁。以下把我們實際規劃首頁的方法整理成 6 個關鍵與 10 題檢核清單，您可以拿來設計新首頁，也可以直接檢查現有首頁。首頁之外的整站標準，另見〈專業網站的 7 個關鍵要素〉。

一、首頁設計為什麼重要？訪客只給您 10 秒

訪客用 50 毫秒形成對網站的第一印象，再用大約 10 秒決定要不要留下來——首頁設計的成敗，就發生在這前 10 秒。加拿大卡爾頓大學 Lindgaard 團隊 2006 年發表於《Behaviour & Information Technology》的實驗證實，受測者只看 50 毫秒（0.05 秒）就能對網頁形成穩定的好惡判斷，而且這個判斷與長時間觀看後的評價高度一致——訪客還沒讀任何一個字，就已經替您的網站打了第一次分數。

第一印象之後是去留決定。Nielsen Norman Group 分析 20 萬餘個網頁、超過 20 億筆停留時間的研究指出：離開機率在進站後的前 10 秒最高；但只要訪客願意停留超過 30 秒，往往就能繼續停留 2 分鐘以上。這就是首頁的「黏著性」——首頁的任務，是把 10 秒變成 30 秒，再把 30 秒變成一次詢價。

二、動手設計前，先回答三個問題

首頁做不好，多數時候不是美感問題，而是動筆前沒想清楚：要給誰看、要他做什麼、拿什麼證明自己。不論您打算自己設計，還是與網頁設計公司合作，先把下面三個問題的答案寫下來，後面每個設計決定都會變簡單。

1. 首頁的主要訪客是誰？新客戶、老客戶回訪、還是經銷通路？不同對象要看的東西不同：新客戶要「你是誰、可不可信」，老客戶要「最新方案與聯絡入口」。首頁只能有一個主要對象，其他對象用明確的入口分流。
2. 您最希望訪客做的「一件事」是什麼？詢價、來電、購買、還是留下資料？這個首要行動決定首屏放什麼按鈕、整頁動線往哪裡收。什麼都想要的首頁，通常什麼都得不到。
3. 手上有哪些素材能證明自己？商標原始檔、實績照片、客戶見證、認證或得獎紀錄。素材不足就先補素材——沒有證據支撐的「專業形象」，訪客一眼就能分辨。

我們在專案的第一次會議上，客戶最常問的是「首頁要放多少東西才夠？」我們的回答通常相反：先決定可以拿掉什麼。首頁不是倉庫，是櫥窗——這三個問題的答案，就是取捨的依據。

三、讓訪客看懂：10 秒價值主張與首屏配置

首頁的第一屏不該是歡迎詞，而是答案：你是誰、能幫什麼、下一步按哪裡。前兩個關鍵解決同一件事——讓訪客在最短時間內「看懂」。

關鍵一：10 秒內講清楚「你是誰、能幫什麼」

訪客抵達首頁的那一刻，倒數就開始了。最有效的作法是在首屏放一句話的價值主張，句式可以套用「我們替（誰）解決（什麼問題）」——例如「替台灣中小企業打造帶得來詢價的形象網站」，就比「歡迎光臨」「深耕產業多年」具體得多。

「關於我們」頁面仍然重要，但它是補充資料，不是第一句話。訪客願意點進「關於我們」，通常是因為首屏那句話已經先讓他看懂了。檢驗方式很簡單：請一位非同行的朋友看您的首頁 10 秒，然後請他說出「這家公司是做什麼的」——說不出來，就是價值主張不及格，跟設計美不美無關。

關鍵二：最重要的資訊放在首屏（above the fold）

首屏（above the fold）是指不滾動頁面就能看到的第一個畫面，概念借自報紙——最重要的頭條，永遠放在報紙摺痕之上。網頁也一樣：Nielsen Norman Group 2018 年的眼動研究顯示，使用者把 57% 的瀏覽時間花在首屏，74% 花在前兩屏——愈往下，注意力衰減愈快。

這不代表頁面不能做長，而是重點不能只靠滾動才看得到。我們的配置原則是：首屏必須同時出現三樣東西——一句話價值主張、主要服務或產品的入口、一個明確的行動按鈕；形象大圖可以用，但圖上或圖旁一定要有說明文字。也別忘了手機：行動版的首屏比電腦小得多，只放得下一到兩個訊息，優先序要排得更狠。

四、讓訪客信任：品牌識別與跨裝置相容

首頁的信任感，一半來自看得見的品牌一致，一半來自看不見的技術體質。關鍵三與關鍵四，分別處理這兩半。

關鍵三：商標與品牌識別全站一致

商標（Logo）是品牌識別的起點。首頁左上角放置清晰的商標，是訪客辨認「我來對地方了」最快的方式；還沒有商標的企業，建議先與平面設計師或網頁設計公司合作完成，再進入網站設計。

檔案格式在 2026 年也該更新觀念：網頁上優先使用 SVG（向量格式，任何尺寸都清晰）或透明背景的 PNG，照片類素材用 WebP 壓縮；AI、EPS 這類向量原始檔請務必留存，供印刷與後續延伸使用——網頁和印刷用的是不同格式，但源頭要是同一份原始檔。

品牌識別不只商標。配色、字體、圖像風格的一致，決定訪客「記不記得住」；公司名稱、地址、電話（NAP）與 Google 商家檔案、社群帳號一致，則同時影響本地搜尋與 AI 搜尋對品牌實體的辨識。適度使用符合品牌調性的圖像與裝飾可以強化認同感，但一致性永遠比裝飾的多寡重要。

關鍵四：每個裝置、每個瀏覽器都能正常瀏覽

相容性測試的對象，是訪客實際使用的瀏覽器，不是設計師自己用的那一台。依 StatCounter 2026 年 7 月統計，全球瀏覽器市占為 Chrome 68.22%、Safari 16.47%、Edge 5.37%、Firefox 3.34%——早年必測的 IE 已於 2022 年 6 月由微軟正式除役，不必再為它妥協設計。

比瀏覽器更關鍵的是裝置：同一份 StatCounter 統計顯示，全球網站流量已有 53.37% 來自手機——行動版不是「另外做的版本」，而是超過半數訪客實際看到的主網站。目前的主流作法是 RWD（Responsive Web Design，響應式網頁設計）：同一套網站依螢幕寬度自動重排，維護一套內容、網址統一對 SEO 友善，我們的〈RWD 響應式網頁設計服務〉即採此作法。上線前的最低標準：手機實機加上 Chrome、Safari、Edge 三大瀏覽器各實測一輪。

五、讓訪客留下並行動：載入速度與明確的下一步

速度決定訪客等不等得到您的首屏，行動引導決定他看完之後去哪裡——這兩個關鍵直接決定首頁能不能把流量變成詢價。

關鍵五：主要內容 2.5 秒內出現

Google 以 Core Web Vitals（網站使用體驗核心指標）量測網頁體驗，其中 LCP（Largest Contentful Paint，最大內容繪製）衡量主要內容出現的速度，官方及格線是 2.5 秒以內。首頁常見的拖慢元兇：未壓縮的形象大圖、自動播放的影片背景、堆疊過多的外掛與追蹤碼。

檢測不用花錢：把網址貼進 Google 的 PageSpeed Insights，就能看到行動版與電腦版的實測數據與具體改善建議。速度只是網站上線前該驗的其中一項，完整的技術檢核清單可參考〈SEO網頁設計〉整理的 15 個驗收項目。

關鍵六：給訪客明確的下一步

首頁黏著性的真正來源，不是把訪客困在首頁，而是每一屏結束都有去處：往服務頁、往案例、往詢價。行動引導（CTA）的三個原則：整頁只有一個首要行動，其他都是次要；按鈕文字寫具體動作，「取得報價」「看設計作品」優於「了解更多」；聯絡或詢價入口在每一頁都要一鍵可達，不能只藏在頁尾。

我們替客戶健檢舊網站時，常見的狀況是：首頁動線只通往「關於我們」與「最新消息」，最想賣的主力服務反而沒有明顯入口——流量都進來了，卻在首頁就散掉。回頭想第二節的問題：您最希望訪客做的那「一件事」，首屏有沒有給他按鈕？

六、首頁上線後：定期更新才留得住排名與 AI 引用

首頁上線是開始，不是結束——「沒壞就不用改」的想法，在 2026 年的搜尋環境已經不成立。搜尋引擎與 AI 搜尋都偏好新鮮、與現況相符的內容：依 ConvertMate 2026 年的統計（轉引自 Omnibound 彙整），30 天內更新過的頁面獲得 AI 引用的機會約為未更新頁面的 3.2 倍。首頁停在幾年前的案例數字與「最新消息」，比沒有內容更傷信任。

實務上不需要天天改版，我們給客戶的節奏建議是：首屏訊息與主打服務每季檢視一次；案例數量、年份這類會過期的數字每半年更新一次；重大服務調整與聯絡方式異動即時修改，並同步更新頁面的最後更新日期。想進一步讓內容被 AI 搜尋引用，可參考我們的〈AEO 行銷服務〉說明。

七、我們最常見到的 5 個首頁設計錯誤

以下 5 個錯誤，來自我們接手網站健檢與改版案的實際觀察，出現頻率由高到低——改版前先對照一輪，比添購任何新功能都有效。

1. 首屏只有形象大圖，沒有一句話說明公司做什麼。畫面很美，但 10 秒內看不懂——這是我們健檢時最常見的失分點，也最容易修：在圖上補一句價值主張與一顆行動按鈕。
2. 想放的東西太多，重點互相打架。輪播塞五張、跑馬燈、彈出視窗齊發，訪客的注意力被切碎，最後一個訊息都沒記住。回到第二節：先決定那「一件事」。
3. 聯絡與詢價入口藏太深。只放在頁尾或內頁的聯絡方式，等於要求訪客「自己找路」。詢價按鈕應該出現在首屏，並固定在每一頁的導覽列。
4. 手機版只是「縮小的電腦版」。字太小、按鈕太密、表格撐破畫面——在流量過半來自手機的現在，這等於把主要入口做壞了。
5. 內容多年未更新。「最新消息」停在幾年前、版權年份還是舊的，訪客會直接懷疑這家公司是否還在營運。

這 5 點聚焦在首頁；整站層級還有一些更基本的地雷（動態網址、缺少 HTTPS 等），我們在〈網站應避免的五種錯誤〉有另一份整理。

八、首頁上線前 10 題檢核清單

設計完成先別急著上線，拿以下 10 題逐題檢查：每題 10 分，哪一題失分，就回頭補對應的關鍵。第 1 題對應關鍵一、第 2 題對應關鍵二、第 3–4 題對應關鍵三、第 5 題對應關鍵四、第 6 題對應關鍵五、第 7–8 題對應關鍵六、第 9–10 題是上線後的基本體質。

1. 請一位非同行朋友看 10 秒，能否說出你是誰、提供什麼？
2. 用手機打開，不滾動能否看到價值主張與行動按鈕？
3. 商標是否清晰（向量或高解析），與名片、社群頭像一致？
4. 公司名稱、地址、電話是否與 Google 商家檔案一致？
5. Chrome、Safari、Edge 與手機實機是否都各測過一輪？
6. PageSpeed Insights 行動版的 LCP 是否在 2.5 秒內？
7. 首屏是否有一個明確的首要行動按鈕？
8. 每往下捲一屏，是否都有可點的下一步（服務、案例或詢價）？
9. 首頁上的數字與訊息（案例數、年份、最新消息）是否為當下狀態？
10. 是否啟用 HTTPS、圖片是否都有替代文字（alt）？

九、首頁設計常見問題

十、結論：好首頁是「看懂→信任→行動」的 10 秒設計

首頁設計的 6 個關鍵，最終都在回答同一個問題：訪客在 10 秒內，能不能看懂你、信任你、知道下一步該按哪裡。10 秒價值主張與首屏配置讓人看懂，品牌識別與跨裝置相容讓人信任，載入速度與行動引導讓人留下並行動——上線之後，定期更新讓這一切持續有效。與其追求更炫的視覺，不如先用第八節的 10 題檢核清單，替自家首頁誠實打一次分數。