網站首頁該放什麼？首頁設計結構拆解
把首頁想成一家店的門口。客人從門口走過的那三秒，會決定要不要推門進來。首頁也是一樣——大多數訪客點進來的前幾秒，就在心裡判斷「這家公司在幹嘛、跟我有沒有關係、值不值得繼續看」。判斷出「沒關係」，手指一滑就走了。
問題是，很多老闆做首頁的時候，腦袋裡想的是「我想說的話」：公司沿革、得獎紀錄、老闆的理念。但訪客想知道的是「你能幫我解決什麼問題」。這個落差，就是很多首頁明明塞了一堆內容，轉換率卻很差的原因。我們看過的首頁裡，首屏（第一眼看到的畫面）三秒內講不清楚「你是誰、能幫我什麼」的，跳出率普遍偏高。這篇就把首頁從上到下拆解一遍，告訴你每一塊該放什麼、為什麼這樣排。
一個首頁通常由哪些區塊組成？
一個結構完整的首頁，由上到下大致是：首屏 hero、價值主張、社會證明、服務／產品介紹、次要資訊（關於我們、流程等），最後用 CTA 收尾。這幾塊各有任務，組合起來才能把訪客從「路過」帶到「行動」。
你可以把首頁想成一條動線，從訪客進門那一刻，一路引導他往「採取行動」走。每個區塊都有它存在的理由，不是隨便堆上去的。下面我會一塊一塊拆，但先記住一個大原則：越重要、越能勾住人的東西，放越上面。沒人保證會滑到底，所以別把最關鍵的賣點藏在頁尾。
首屏 hero 區該放什麼，才能三秒抓住人？
首屏要在三秒內回答三個問題：你是誰、你能幫我解決什麼、我下一步該做什麼。具體來說就是一句清楚的主標題（講價值，不是講公司名）、一句輔助說明、一個明確的行動按鈕，再搭配一張相關的主視覺。
首屏（hero section）是整個首頁最值錢的地段，因為它是唯一保證每個訪客都會看到的區塊。這裡最常見的錯誤，是主標題寫成空話——「歡迎光臨」「專業·誠信·創新」「您最好的夥伴」，這些字看了等於沒看，訪客還是不知道你在幹嘛。
好的 hero 主標題要直接講價值。比較一下：
- 不好：「歡迎來到 XX 科技」
- 好：「讓中小企業三天就能上線一個會帶單的官網」
後者一看就知道你做什麼、解決誰的什麼問題。輔助說明（副標）再補一句把細節講清楚，例如目標客群、差異化重點。然後一定要有一個主要行動按鈕（CTA），文案要具體——「免費諮詢」「看作品集」「立即試用」，比「了解更多」有力得多。按鈕的設計跟文案怎麼抓，可以參考網站 CTA 設計原則與轉換優化。
我們幫一家工業設備商改首頁時，原本 hero 大大寫著公司名加一張廠房照，跳出率高達七成多。改成「協助工廠降低 30% 停機損失的自動化檢測方案」加一個「預約現場評估」按鈕後，諮詢表單的填寫量在一個月內成長了約 2.4 倍。內容沒換，只是把首屏從「自我介紹」改成「對訪客喊話」。
價值主張區要怎麼寫，訪客才會留下來？
價值主張區的任務是回答「為什麼選你，而不是別人」。用三到四個重點，講清楚你的差異化優勢，而且要從訪客的好處出發，不是條列你有什麼功能。
過了首屏，訪客如果願意往下滑，代表他有點興趣了，這時價值主張區要趁勝追擊，把「為什麼是你」講清楚。常見做法是用三到四個圖示加短文的卡片，列出核心優勢。
關鍵在於講「好處」而不是「特色」。這兩個差很多：
- 特色（你有什麼）：「我們有 24 小時客服」
- 好處（對他有什麼用）：「半夜遇到問題也有人接，不用乾等到上班」
訪客在意的永遠是「這對我有什麼用」。所以每寫一個賣點，都回頭問一句「所以呢？對客戶來說代表什麼？」，把答案寫出來，才是真正的價值主張。數量上控制在三到四個就好，貪多反而失焦——重點不是把所有優點塞滿，是讓最強的三個被記住。
為什麼首頁一定要放社會證明？
因為人會看別人怎麼選，再決定自己怎麼選。社會證明（客戶見證、合作品牌、案例數據、評價）能借別人的嘴幫你背書，大幅降低訪客的不信任感，這是自己講一百句「我很厲害」都比不上的。
說白了，自己誇自己沒人信，但別人說你好就有用。這就是社會證明的力量。首頁上常見的社會證明有這幾種：
- 客戶見證／評價：真實客戶的一兩句話，最好附上姓名、公司、頭像，越具體越可信。
- 合作品牌 logo 牆：服務過哪些知名客戶，一排 logo 就很有說服力。
- 數據成績：「服務超過 500 家企業」「累積出貨 10 萬件」，數字會說話。
- 媒體報導／獎項／認證：第三方的認可。
擺放位置上，社會證明放在價值主張之後、或穿插在服務介紹附近都不錯，目的是在訪客「動心但還在猶豫」的時候，推他一把。我們實測過，在一個 B2B 服務網站的首頁加上一塊客戶 logo 牆跟三則具名見證，後續的詢價轉換率提升了約 18%。信任元素到底有哪些、怎麼用才自然，Landing Page 信任元素設計裡有更完整的整理。
服務或產品區該呈現多少、怎麼排？
首頁的服務／產品區是「展示櫥窗」，不是「完整型錄」。原則是只放最主要、最賺錢、或最想推的幾項，每項給簡短介紹加一個連往細節頁的入口，讓有興趣的人自己點進去深入了解。
首頁最忌諱的就是想把所有東西一次講完。你有二十項服務，不代表首頁要列二十個——那只會讓訪客眼花，最後一個都記不住。首頁的角色是「分流」：用簡潔的方式讓訪客快速知道你提供哪些主要服務，然後引導他點進對應的內頁看細節。
實務上的做法：挑出三到六項最核心的服務／產品，每項配一個圖示或代表圖、一句話說明、一個「了解更多」的連結。如果品項真的很多，就用分類的方式呈現大類，再讓訪客往下鑽。記住，首頁不需要、也不應該承擔轉換所有產品的責任，它的工作是「給對的人指對的路」。這跟把訪客導向專門的轉換頁是兩回事——首頁要顧及所有來源的訪客，廣告流量則建議搭配專屬的著陸頁，兩者的差異可以看Landing Page 與首頁在廣告投放的差別。
首頁的區塊順序與 CTA 該怎麼安排？
順序上遵循「先抓住、再說服、最後推動行動」的邏輯，CTA 則要重複出現、貫穿全頁。從 hero 開始就放主要 CTA，中段隨著訪客被說服程度提高再適時穿插，頁尾再用一個強力 CTA 收尾，不要讓訪客滑到底卻不知道下一步該做什麼。
區塊順序的底層邏輯其實就是一段說服的過程：
- 抓住（hero）：三秒內讓他知道你能幫他什麼。
- 說服（價值主張 + 社會證明）：告訴他為什麼選你、別人也都選你。
- 展示（服務／產品區）：讓他看到具體能得到什麼。
- 補充（關於我們、流程、FAQ）：解答剩下的疑慮。
- 推動（CTA）：明確告訴他下一步怎麼做。
關於 CTA，最常見的失誤是「整個首頁只有一個按鈕，還藏在最下面」。訪客可能在任何一個區塊被打動，這時手邊就要有行動入口，他才不會「想找你卻找不到入口」。所以 CTA 要重複出現——hero 一個、中段穿插一兩個、頁尾再來一個收尾。當然也別變成滿頁都是按鈕，重點是「在訪客可能想行動的時機點，剛好有個入口在那裡」。
如果你發現首頁訪客很多但行動的很少，問題八成出在動線跟 CTA 的安排上，這時候網站設計的轉換漏斗優化會給你一套有系統的檢查方法。
結語：首頁是動線，不是公布欄
很多人把首頁當成「把公司資訊貼上去的公布欄」，這是最大的誤解。首頁是一條設計過的動線，每個區塊都在替「讓訪客採取行動」這個目標服務。從 hero 抓住人、價值主張說服人、社會證明取信人、服務區指路、CTA 推一把——環環相扣，缺一塊都會漏掉一些人。
如果你正要重做首頁，建議先別急著想「要放哪些內容」，而是先想「我要訪客做什麼動作」，再倒過來安排每個區塊。內容怎麼排得有層次、視覺動線怎麼引導，可以接著看網頁視覺層次與版面配置；而首頁文字的可讀性、字體排版這些基本功，則別漏了網頁字體與中文排版。想把整個網站從規劃到上線的全貌一次掌握，回到網站架設完整指南會最有方向。首頁做對了，後面的每一頁都會更省力。