你有沒有過這種經驗：點進一個公司網站，想找「服務項目」卻發現選單裡寫的是「解決方案」、「核心價值」、「事業群」，看了三秒鐘還沒搞懂他們到底在做什麼，乾脆關掉走人？
這就是導航選單沒設計好的代價。對中小企業官網來說，導航選單就像實體店面的指標牌——指錯方向、字太多、看不清楚，客戶就直接走出去找別家。Nielsen Norman Group 的眼動追蹤研究指出，使用者進站後平均不到 10 秒就會決定要不要繼續看下去，而導航選單往往是他們視線停留的第一個區塊。
偏偏這個關鍵元素，超過一半的台灣中小企業官網都做得很隨便。不是塞了 10 幾個選項把訪客嚇跑，就是用一些只有自己人聽得懂的內部術語，或是手機版的漢堡選單點開根本看不到重點。今天這篇文章，我們就把導航選單拆開來，從「該放幾個」、「怎麼命名」、「順序怎麼排」一路講到手機版的細節，給你一份可以立刻拿來檢查自家官網的實戰清單。
Photo by Justin Morgan on Unsplash
一、選項數量：5 到 7 個是黃金區間，超過就是災難
心理學上有個「米勒法則」（Miller's Law），人類短期記憶一次最多只能處理 7 ± 2 個項目。套用到網站導航，意思就是：選單超過 7 個，訪客就開始懶得讀；超過 9 個，幾乎沒人會把每個選項都看完。
但很多中小企業老闆會說：「我們服務很多耶，少於 7 個放不下啊。」常見的情況是，問題往往不是「服務太多」，而是「沒分類好」。想像一下：原本導航塞了「產品 A、產品 B、產品 C、產品 D、產品 E、技術支援、案例分享、認證資格、最新消息、關於我們、聯絡我們」共 11 項，光是視覺上就讓人不想細看；如果重新整理成「產品分類（下拉選單包含 A-E）、應用案例、技術服務、關於我們、聯絡我們」5 項，整個選單立刻變得乾淨、好掃視，訪客找路的成本也跟著降下來。
實務上的建議：主選單控制在 5 到 7 個。如果你有大量子分類，用「下拉選單（Mega Menu）」收納，但下拉的層級不要超過兩層——點開下拉後再分一層還可以，但點進去後又跳出第三層，訪客就崩潰了。
二、命名要用客戶的語言，不是你內部的術語
這是台灣中小企業最常見的踩雷區。為什麼？因為老闆和員工每天活在公司的內部詞彙裡，久了會忘記「外人聽不懂」。
幾個我們常看到的反面教材：
- 「解決方案」vs「服務項目」：除非你的客戶是大企業 IT 採購（他們習慣「Solutions」這個詞），不然中小企業 B2B 或 B2C 場景，寫「服務項目」、「我們能幫你」、「產品介紹」會直觀很多。
- 「核心價值」、「企業願景」放在主選單：這些東西該放在「關於我們」的子頁裡，主選單放這個只會稀釋掉真正重要的選項。客戶第一次來不是要看你的願景，是要看你能不能解決他的問題。
- 「事業群」、「事業部」：這是內部組織架構的講法。客戶不在乎你有幾個事業部，他只在乎「你做不做我要的事」。
- 把品牌名直接當分類：例如「ORON Pro」、「ORON Lite」這種命名，除非品牌已經很有名，不然訪客根本不知道誰是誰。
檢查方式很簡單：把你的主選單念給一個完全不認識你公司的朋友聽，請他猜每個選項裡面會放什麼內容。如果他三個有兩個猜不出來，就該重新命名。
三、排序：第一個與最後一個位置最值錢
使用者在掃視水平導航時，視覺焦點集中在「最左邊」與「最右邊」兩個位置，這就是所謂的「序列位置效應」（Serial Position Effect）。中間的選項不是不會被看到，而是被記住的機率最低。
所以排序的邏輯該是：把你最希望訪客點的兩個項目，分別放在最左邊（緊接 Logo）和最右邊（CTA 按鈕的位置）。對多數中小企業來說，這通常是：
左邊第一個：「服務／產品」——客戶來就是要看這個，放第一最直覺。
右邊最後一個：「聯絡我們」或「免費諮詢」——而且最好做成有色彩對比的按鈕樣式，讓它跳出來。
中間的位置依重要性排：通常是「案例」、「關於我們」、「部落格」、「常見問題」。順序沒有絕對標準答案，但有個原則——「客戶最常想找的」放在中間靠左邊；「公司想推但客戶比較少主動找的」（例如部落格、新聞）放靠右一點。
Photo by Amélie Mourichon on Unsplash
四、CTA 按鈕：導航選單裡最該被看到的那一個
導航的最終任務不只是「幫客戶找資訊」，更是「把客戶導向轉換動作」。所以在主選單裡一定要有一個視覺上跳出來的 CTA（Call to Action）按鈕。
三個常見錯誤：
第一，沒放 CTA 按鈕。很多官網的「聯絡我們」就是純文字選項，跟其他項目一樣顏色一樣字體。這等於放棄了主動引導客戶的機會。
第二，CTA 文字寫得太被動。「聯絡我們」雖然標準，但相對沒吸引力。可以視業態改成「免費估價」、「索取報價」、「預約諮詢」、「立即試用」——明確告訴客戶「點下去會發生什麼好事」。
第三，CTA 跟整體配色衝突。CTA 按鈕要醒目沒錯，但不是隨便挑個螢光綠或亮紅色就好。最好的做法是用品牌主色或互補色，並且整個官網只在「重要的下一步」用這個顏色，其他地方都用中性色——這樣這個顏色就會被訓練成「客戶該點的訊號」。
五、手機版漢堡選單的三個致命錯誤
台灣超過 70% 的官網流量來自手機，但手機版導航普遍做得比電腦版隨便。常見三個地雷：
錯誤 1：漢堡圖示太小或沒標籤。蘋果跟 Google 的 UX 指南都建議可點擊區域至少 44x44 像素，但很多手機版漢堡圖示只有 24 像素，手指根本按不準。再加上很多人不知道那個三條線是「選單」，所以建議在圖示下面加「選單」兩個字，或是改用「☰ MENU」這種更明確的形式。
錯誤 2：點開選單後，CTA 不見了。很多手機版漢堡選單只列出純文字連結，把原本電腦版上跳出的「免費諮詢」按鈕弄丟了。其實應該反過來——手機版的 CTA 要做得比電腦版更明顯，因為手機螢幕本來就小，要主動引導才會被點。
錯誤 3：層級太深，要點三下才看到目標頁。手機上每多一層點擊，流失率就增加一截。建議手機版盡量「攤平」——子選單直接展開顯示（用縮排表示層級），而不是要再點一次才展開。當然這會讓選單變長，但長一點沒關係，要點半天才看到東西更糟糕。
Photo by Brennan Burling on Unsplash
六、Sticky 導航與下拉選單，到底要不要用？
這兩個功能很多老闆會問。答案是「看情況」，我們的建議：
Sticky（沾黏）導航：建議用，但要做對。沾黏導航就是滾動頁面時，導航選單會固定在頂部不消失。好處是訪客滾到頁面下方還能隨時切換到其他頁，特別在長頁面（例如服務頁、定價頁）上很有用。注意三件事：第一，沾黏狀態的 Bar 要比初始狀態薄一點，不要佔太多畫面；第二，加一個半透明白底或淡淡的陰影，讓它跟下方內容有層次區隔；第三，手機版可以選擇不沾黏，或用「往上滾才出現、往下滾就隱藏」的智慧型 sticky，避免擋住內容。
下拉選單（Dropdown / Mega Menu）：產品/服務多就用，產品少就不用。如果你只有 3-5 個服務項目，全部寫在「服務」這個頁面的內容區就好，導航上不用下拉。但如果你像綜合代理商有 20 多項產品，那就需要 Mega Menu 來分類展開。設計重點：下拉要有「滑鼠移開後延遲關閉」（避免訪客手稍微滑開就關掉），手機版則建議改成「展開式列表」而不是真的下拉，因為手機沒有 hover。
七、導航設計的最後一道檢查：5 秒測試
所有導航設計完成後，做一個「5 秒測試」。找一個沒看過你網站的人，給他看首頁 5 秒，然後遮住螢幕，問他三個問題：
「這家公司在做什麼？」、「如果你想了解他們的服務，會點哪裡？」、「如果你想聯絡他們，會點哪裡？」
如果三個問題他都能立刻回答，導航就做對了。如果有任何一題他要想超過 5 秒，那個選項就需要重新設計。這個測試成本是零，但比你花錢買各種 UX 工具還準。
結語：導航選單是官網的「方向盤」，不是裝飾品
很多老闆把官網的預算花在首頁 Banner、漂亮的動畫、酷炫的特效，但對導航選單卻覺得「能用就好」。這是本末倒置——首頁再漂亮，訪客找不到他要的東西，3 秒內還是會關掉。
給你一份立即可做的檢查清單：
- 主選單項目控制在 5-7 個，超過就用下拉合併
- 每個選項用「客戶看得懂的詞」命名，避免內部術語
- 最左邊放「服務／產品」、最右邊放醒目的 CTA 按鈕
- CTA 文字要具體（「免費估價」勝過「聯絡我們」）
- 手機版漢堡按鈕不要太小，子選單盡量攤平
- 長頁面用 sticky 導航，但要做得低調不擋內容
- 找局外人做 5 秒測試，回答不出來就是設計失敗
如果你正準備改版官網，或是目前的導航設計常被客戶反應「找不到東西」，建議把這份清單拿出來逐項對照。導航做對了，後面的轉換才有意義；導航做錯了，再強的 SEO 跟廣告把人帶進來也是白搭。
