公司網站設計版面怎麼排？導覽列與首頁區塊順序的決策指南

作者｜瞻新資訊　陳俊鳴顧問（資深SEO顧問・搜尋流量與銷售漏斗規劃）

設計稿寄過來了，你看了三分鐘，覺得哪裡怪，但講不出來。

於是你回了一句「感覺再大氣一點」。設計師改了顏色跟字級，第二版寄來，還是怪。來回三輪之後兩邊都有點累，最後多半是一句「就這樣吧」收場。

問題通常不在美感。大部分的版面爭議，其實是因為沒有人先講清楚「這個畫面要幫訪客完成什麼事」，所以每個人只能憑感覺評論。

這篇不談公司網站要花多少錢、有哪些類型、怎麼挑廠商——那些我們在〈公司網站怎麼規劃？費用、類型、頁面與選擇標準一次看懂〉整理過了。這篇要處理的是下一關，也是中文資料裡最少人講清楚的一關：版面到底該怎麼排，以及為什麼是這樣排。

公司網站設計最常見的失敗，是把首頁做成型錄

先講結論：首頁不是型錄，是分流器。

型錄的邏輯是「把我有的東西都秀出來」。所以很多公司網站的首頁長這個樣子：一張輪播大圖、公司簡介兩百字、六個服務項目排成兩排、最新消息三則、合作夥伴 Logo 一整列、最後放一個地圖。什麼都有，看起來很豐富。

問題是，來到你首頁的人不是同一種人。有人是看到名片來查你是不是真的公司；有人是 Google 搜尋掉進來，根本不知道你是誰；有人是老客戶要找電話；有人是同業來看你在幹嘛。這幾種人要的東西完全不一樣，而首頁的工作不是同時滿足他們，是在幾秒內把他們分別送到對的地方。

這就像百貨公司的一樓。一樓不會把全館的東西都擺出來，它擺的是樓層導覽、電梯，跟一兩個最能代表這棟樓的品牌。你要買什麼，它告訴你上幾樓——首頁做的是同一件事。

判斷你的首頁有沒有在做分流，方法很簡單：打開首頁，遮住 Logo，問自己「一個完全不認識這家公司的人，看完第一屏，知道要往哪裡點嗎？」 如果答案是「他要先滑一下才知道」，那這個首頁還在當型錄。

先回答一個問題，首頁的第一屏才排得出來

在動任何版面之前，有一個問題一定要先有答案。這個網站要幫公司完成哪一件事？

不是「三件事」，是「哪一件最重要」。常見的候選有四種：

網站的主要任務	成功長什麼樣	第一屏該做的事
取得詢問	表單送出、電話撥出	一句話講清楚你解決什麼問題，加一個明確的下一步
建立信任（客戶已經知道你，來查證）	停留、看完關於我們與案例	把最能證明「我們是真的」的東西放前面
支援既有客戶	找到文件、聯絡窗口、服務條款	把查詢入口放在最顯眼的位置
招募人才	投遞履歷	把工作環境與職缺入口拉到前面

大部分中小企業的答案是第一種或第二種。但這兩種的第一屏長得完全不一樣——取得詢問要的是「我懂你的問題」，建立信任要的是「我們是真的、而且做得不錯」。

排不出第一屏，通常不是設計問題，是這個問題還沒有答案。

有了答案之後，第一屏的公式其實很單純，三個元素：你是誰／你解決什麼／下一步點哪裡。

實際寫出來的差別是這樣的：

• 沒有答案的版本：「專業．創新．值得信賴」＋一張辦公室照片
• 有答案的版本：「幫中小企業把老舊的內部作業搬上系統，平均三到六個月上線」＋「看我們怎麼做」

左邊那句話，任何一家公司都可以用；右邊那句話，只有你能用。如果你的標語換成同業的名字也完全成立，那句標語就沒有在工作。

導覽列該用訪客的話命名，不是用公司的組織圖

這一項大概是投報率最高、最少人做、又完全不用花錢的改善。

很多公司網站的導覽列，是照公司內部的分法排的：「產品中心」「解決方案」「行業應用」「服務支持」。這幾個詞公司內部天天在講，所以看起來很自然。但訪客不是你的同事，他腦袋裡沒有這套分類。

實際上會發生的事是：他點「解決方案」，看到的是產品；點「行業應用」，看到的又是產品，只是換了個排法。點兩次都沒找到他要的，就走了。

導覽列的命名原則只有一句：用訪客會講的話，不是用你們內部會講的話。

內部術語式命名	訪客語言式命名
產品中心	我們做什麼 ／ 服務項目
解決方案	你遇到的問題 ／ 常見需求
行業應用	我們服務過的產業
服務支持	客戶支援 ／ 常見問題
企業社會責任	關於我們

至於「導覽列該放幾個項目」，網路上流傳各種數字，但那些數字多半找不到原始出處，所以這裡不給你一個數。比較可靠的判準是：每一個項目都要有人真的會點，而且點進去要看得到跟項目名稱相符的東西。 一個放了八個項目但有五個沒人點的導覽列，跟一個放了四個項目但每個都有人點的導覽列，後者比較好。

一個很實際的檢查方式：把導覽列的文字抄下來，拿給一個不認識你公司的朋友看，問他「你覺得點進去會看到什麼？」他猜不出來的那幾個，就是要改的。

首頁區塊的順序，其實是在回答訪客的五個問題

首頁往下滑的過程，其實是一場沉默的問答。訪客心裡會依序冒出五個問題，你的區塊順序如果剛好對上，他就一路往下看；對不上，他就走了。

那五個問題大致是：

1. 你是誰、你做什麼？（第一屏）
2. 你懂我的問題嗎？
3. 你怎麼做的？
4. 憑什麼相信你？
5. 那我現在要做什麼？

對應到區塊，就是：主視覺與一句話定位 → 痛點或需求情境 → 服務或做法說明 → 案例、數據、客戶、資歷、媒體報導 → 行動呼籲與聯絡方式。

很多公司網站的順序是這樣：主視覺 → 公司沿革 → 服務項目 → 最新消息 → 合作夥伴。你會發現「公司沿革」跑到第二位，但訪客的第二個問題不是「你們哪一年成立的」，而是「你懂不懂我的問題」。把沿革放在第二位，等於在對方還不確定要不要聽你講話的時候，先講了三十年的公司歷史。

沿革不是不能放，是位置錯了。它屬於第四個問題「憑什麼相信你」，放在案例旁邊剛剛好。

還有一個常被忽略的細節：「最新消息」放在首頁，只有在你真的會更新的時候才有用。 一個停在兩年前的最新消息區塊，傳達出來的訊息不是「我們很活躍」，是「這家公司可能沒在營運了」。如果沒有把握每個月更新，就不要放在首頁。

F 型閱讀不是版面範本，是你要對抗的預設行為

這一節要修正一個在中文圈流傳很廣、但確實是誤讀的說法。

Nielsen Norman Group（NN/g）在 2006 年公布過一項眼動實驗，發現使用者瀏覽網頁時的視線常呈現 F 型：先橫向掃過上方一條、再橫向掃過稍低的一條、最後沿著左側往下。這個結論後來被大量引用，但引用的方式常常是錯的——很多人把它解讀成「所以版面要排成 F 型」。

NN/g 自己在後續文章裡澄清過這是誤解：F 型是使用者在「內容沒有被好好處理」時的預設掃描行為，它是一種你要去對抗的現象，不是一個你該模仿的版面形狀。

這個差別很重要。F 型之所以出現，是因為畫面上沒有任何東西幫讀者判斷哪裡重要，所以他只好用最省力的方式亂掃。對抗它的方法不是把重點排成 F，而是：

• 把重要的話放在段落開頭，不要藏在中間
• 用小標題把長段落切開
• 重點句用視覺方式標出來
• 用清單取代長句堆疊
• 每一個區塊的第一行就講完那個區塊的重點

同一個機構的另一項研究則量測了注意力在頁面上的分佈：畫面第一屏取得約 57% 的注視時間，第二屏約 17%，剩下約 26% 分散在更下面。 ⚠️ 這是以歐美使用者為對象的研究，不能直接寫成台灣使用者的行為，但它給了一個很有用的比例感：你花在第一屏的心力，應該遠遠超過花在頁面下半部的心力。

實務上的意思是：如果你的設計稿改了五輪，四輪都在改頁面中段的圖片，那你可能改錯地方了。

手機版不是把桌機版砍一半，是重新排序

先給答案：手機版可以改變順序、可以收合、可以簡化，但不應該讓內容整段消失。

這件事同時牽涉兩個層面。

第一個是體驗層面。 手機螢幕窄，桌機上並排的三欄變成上下疊三段，捲動距離會拉長。這時候正確的動作是重新決定「誰排前面」，而不是「砍掉兩欄」。桌機上放在右側的聯絡資訊，在手機上可能要提到最前面（更完整的行動版規劃見手機網站設計怎麼做），因為在手機上打電話比在桌機上容易得多。

第二個是搜尋引擎層面，而這一層常被忽略。 Google 的行動優先索引官方文件講得很直接：Google 使用網站的行動版內容來建立索引與排名，並要求行動版與桌機版的內容應該對等，包含文字、圖片、影片、連結，以及標題、描述、結構化資料等。

把這兩層接起來，結論就很清楚了：手機版藏起來的內容，等於索引裡缺少的內容。 很多公司網站為了讓手機版「乾淨一點」，把服務說明、案例、FAQ 整段隱藏，畫面確實變清爽了，但同時也把這些頁面在搜尋結果上的競爭力砍掉了。

正確做法是分清楚三種處理：

處理方式	對體驗	對索引	什麼時候用
重新排序	好	沒影響	預設做法，優先考慮
收合（手風琴／看更多）	好	內容仍在頁面上，一般沒問題	內容多、但使用者不一定每次都要看
整段隱藏或不載入	看起來乾淨	⚠️ 內容等於不存在	幾乎沒有適用情境

還有一個很基本但常被忽略的手機細節：可以點的東西要夠大。W3C 的 WCAG 2.2 對可點擊目標的最小尺寸有明確規定（24×24 CSS 像素，或以足夠的間距達成等效），這不只是無障礙議題——手指比滑鼠游標粗得多，按鈕太小、間距太密，一般使用者也會按錯。

讓人願意留下來的，是可信度的四個要素

版面排得再順，如果訪客不相信你，一樣不會留下。

可信度聽起來很抽象，但它其實是可以拆開檢查的。NN/g 把網站傳達可信度的方式歸納成四個要素：設計品質、前期揭露、內容完整且即時、與網路上其他資源的連結。 用白話翻譯，加上台灣公司網站的實際對照：

要素	白話意思	公司網站上的具體表現
設計品質	看起來像不像有人在維護	版面整齊、圖片不模糊、沒有排版跑掉、沒有殘留的「測試中」文字
前期揭露	該講的事有沒有主動講	服務範圍、收費方式、交付時間、不做什麼，寫在前面而不是等人問
內容完整且即時	資訊夠不夠、新不新	案例有更新、最新消息不是停在兩年前、聯絡資訊是現在的
與網路的連結	別的地方找不找得到你	有真實地址與統編、有第三方可查的資料、有媒體或協會的公開紀錄

這四項裡面，台灣公司網站最常缺的是第二項「前期揭露」。 很多網站的服務頁只寫「我們提供專業的 XX 服務」，卻不寫服務範圍到哪裡、大概要多久、怎麼計價。網站方的想法通常是「講太清楚會被比價」，但實際發生的事往往相反——看不到範圍的人不會打電話來問，他會直接去看下一家。

還要提醒一件事：NN/g 的研究也指出，使用者會把官網說法拿去跟第三方評價交叉比對，形成一個整體印象。所以官網把自己寫得越滿，跟外部落差越大時，反而越傷。

這一點在 B2B 特別明顯。一般消費品的購買決策可能幾分鐘就結束，但企業採購通常要經過比較、內部討論、跟主管報告幾個階段，中間會反覆回到你的網站找資料。B2B 網站真正的競爭對手不是別家的視覺設計，是「對方主管問起來的時候，窗口能不能從你的網站上找到答案」。 所以服務頁與案例頁的資訊完整度，實際影響力往往大過首頁的美感。

訪客抵達你的網站之前，搜尋結果已經先講過一次了

這一節是這兩年才需要多出來的，但它已經在改變首頁該怎麼寫。

以前的路徑是：搜尋 → 看到你的標題與描述 → 點進來 → 看首頁。現在多了一段：搜尋 → 先看到一段 AI 生成的摘要 → 決定要不要點。

美國皮尤研究中心（Pew Research Center）在 2025 年 7 月發表的一份瀏覽行為研究量測過這個差異：同意分享瀏覽紀錄的受訪者中，搜尋結果頁出現 AI 摘要時，點擊任一則搜尋結果的比例是 8%；沒有出現 AI 摘要時是 15%。 該研究也發現，2025 年 3 月約有五分之一的 Google 搜尋產生了 AI 摘要，而這些摘要中有 88% 引用了三個以上的來源。

⚠️ 這是以 900 位美國成年人為樣本、2025 年 3 月的瀏覽資料，不能直接寫成台灣的數字，而且 AI 摘要的出現比例本身也一直在變。但它指出的方向對公司網站的版面決策有兩個實際影響：

第一，你的網站有可能是「被摘要引用」而不是「被點進來」。 這代表官網上關於「你是誰、你做什麼、服務範圍到哪」的敘述，要寫得能夠被獨立擷取——一句話講完、主詞明確、不要靠上下文才看得懂。一段需要讀完整頁才理解的自我介紹，在摘要的情境下等於沒有寫。

第二，點進來的人變少，但點進來的人更確定自己要什麼。 他已經看過摘要，帶著更具體的問題來。這時候首頁如果還是那種「專業．創新．值得信賴」的通用開場，落差會非常明顯。

實務上要做的調整不多，主要是三件事：首頁第一屏用一句話講清楚你解決什麼問題（而不是形容詞堆疊）；服務頁把範圍、做法、適用對象寫成可以獨立成立的段落；常見問題頁認真寫，因為那正是摘要最容易取用的格式。想把整個網站的搜尋表現一起顧好，可以接著看網站SEO優化完整指南。

「聯絡我們」只放一個表單，等於把生意往外推

這一節單獨拉出來講，是因為它最容易修，影響又直接。

現在很多公司網站的「聯絡我們」頁只有一個表單，理由通常是「這樣才收得到完整資訊」「不然電話會一直響」。但 NN/g 針對 B2B 網站的可用性研究指出，使用者仍然期待在聯絡頁看到公司地址、電話與電子郵件，不該用表單或聊天機器人把這些取代掉。

原因不難理解。填表單的人，是把主導權交給對方——他不知道你什麼時候會回、會不會回、回的是誰。 對一筆金額不小的 B2B 採購來說，這個不確定感足以讓人先去看下一家。

所以聯絡頁的正確做法是「都給」：

• 表單（給願意留下需求的人）
• 電話（給急的人）
• 電子郵件（給要留書面紀錄、要副本給主管的人）
• 地址與地圖（給要確認你是不是真實存在的人）
• 服務時間與預計回覆時間（給所有人一個心理預期）

最後那一項最常被漏掉，但它其實最便宜：加一句「我們通常會在一個工作天內回覆」，就能把「送出之後石沉大海」的焦慮降下來一大截。

版面要跟同業像，還是要刻意不一樣？

這題的答案分成兩層，而多數爭論都是因為把兩層混在一起想。

第一層：操作方式要跟大家一樣。 Logo 點了會回首頁、導覽列在上面、購物車在右上角、選單在手機上是三條線——這些不是缺乏創意，是使用者已經學會的習慣。改掉它們，你不是在做設計，是在要求每一位訪客重新學一次怎麼用網站。

第二層：內容與說法要跟大家不一樣。 同一個產業的公司網站，服務項目的寫法常常像同一個模子印出來的：「專業團隊」「客製化服務」「一站式解決方案」。這一層才是該努力做出差異的地方。

操作邏輯要熟悉，內容主張要獨特——把這兩件事搞反，是公司網站設計最常見的方向性錯誤。

判斷方法還是那句：把你網站上的文案換成同業的公司名，如果整段還是成立，那段文案就沒有在幫你。

版面對不對，上線後用三個數字檢查

版面好不好，其實不用靠感覺吵。網站上線一段時間之後，有三個數字可以拿來驗證。

前兩個在 Google Search Console。依照 Google 官方說明，曝光是使用者在搜尋結果中看到你網站連結的次數，點擊是實際點進來的次數，平均排名取的是該次查詢中你網站最高名次的平均值。

數字	看什麼	數字不好時，通常是哪裡的問題
曝光高、點擊低	搜尋結果上的標題與描述	不是版面問題，是標題與描述沒講清楚你解決什麼
點擊正常、停留很短	第一屏	進來的人發現「跟我以為的不一樣」，定位或主標語沒對上
有停留、沒有詢問	導覽、可信度、聯絡頁	內容看得下去，但找不到下一步或不夠信任

第三個數字不在工具裡，要自己問：過去三個月接到的詢問，有幾件是從網站來的？他們第一句話問什麼？ 如果每個人第一句都問同一件事（例如「你們有沒有做 XX」「大概多少錢」），那就代表官網沒有把那件事講清楚——客戶重複問的問題，就是你網站缺的那一段內容。

版面調整最務實的做法，是先用這三個數字定位問題出在哪一層，再去改對應的區塊，而不是整個網站重做一次。

上線前的版面自我檢查表

不用每一項都滿分，但每一項都該被問過一次。

定位

• 這個網站要完成的那一件事，寫得出來嗎？
• 第一屏有沒有「你是誰／你解決什麼／下一步點哪裡」三個元素？
• 主標語換成同業名字還成立嗎？（會成立就要改）

導覽與架構

• 導覽列用的是訪客的話，還是公司內部術語？
• 拿給不認識公司的人看，他猜得出每個項目點進去是什麼嗎？
• 每個項目點進去，看到的東西跟名稱相符嗎？

首頁區塊

• 區塊順序有沒有對上訪客的五個問題？
• 公司沿革是不是排太前面？
• 最新消息真的會更新嗎？不會就不要放在首頁。

手機版

• 是重新排序，還是整段隱藏？
• 桌機上有的內容，手機上都還在嗎？
• 按鈕夠大、間距夠嗎？

可信度

• 設計品質、前期揭露、內容即時、外部可查，四項各檢查一次。
• 服務範圍與大致的計價方式，有沒有主動寫出來？

聯絡

• 表單、電話、信箱、地址、服務時間，五樣齊了嗎？
• 有沒有寫「多久會回覆」？

這份清單裡的每一項都不需要重做網站才能改，多數是文案與順序的調整。如果你的網站已經上線一段時間、流量不差但詢問很少，通常問題就落在這份清單裡，而不是在「要不要重做一個新網站」。

如果檢查完發現要動的東西超過一半，那才真的要考慮改版——這時候找一個會先問你「這個網站要完成哪一件事」的團隊，比找一個先問你「你想要什麼風格」的團隊，結果會差很多。

常見問題