多數人設計網站導覽列，想的是好不好看、選單要放幾個項目才不會太擠。Baymard Institute 在 2025 年一輪涵蓋 180 多個歐美主流網站、逾 16,000 筆導覽 UX 評分的大型測試裡發現，58% 的桌機版網站與 67% 的手機版網站，首頁與分類導覽的表現只落在普通到差之間。問題往往不是版面不夠美，而是首頁導覽列設計本身的判斷出了錯：選項藏得太多、順序沒有邏輯、訪客點兩下都還搞不清楚自己在哪一頁。
Nielsen Norman Group 的研究進一步指出，把選單選項收進隱藏式導覽之後，訪客實際點開使用它的機率會明顯下降，連帶讓找到目標內容的成功率跟著滑落。訪客覺得一個網站難用，很多時候源頭不是內容或商品不夠好，而是導覽列先讓他迷失了方向。
這篇要拆的，是導覽列該露多少、選單放什麼、怎麼排序、下拉選單怎麼互動、怎麼讓訪客知道自己在哪裡，還有手機版該怎麼收，不是選單分類邏輯該怎麼規劃，也不是後台實際操作步驟。先從最根本的判斷講起：哪些東西該露出來，哪些可以藏。
導覽列該讓訪客看到多少，藏起來多少？
先建立一個判斷基準，把選單藏起來永遠是有代價的取捨，不是預設選項可以隨便用。Nielsen Norman Group 針對 179 位受測者、6 個網站做的量化測試發現，桌機版把導覽收進漢堡選單後，訪客實際點開使用的比例只剩 27%，大約只有可見式導覽（48%）的一半；把幾個常用項目露出、其餘收合的組合式導覽則是 50%。
代價不只發生在使用率上。用隱藏式導覽的訪客，找到目標內容的成功率比可見式與組合式導覽低了超過 2 成，完成任務所花的時間至少慢 39%，任務難度評分也比可見式高出 21%。這也是為什麼 Nielsen Norman Group 在導覽設計指南裡明確建議，桌機版不要用漢堡選單，螢幕空間夠大，能露出來的選項就該露出來，漢堡選單只是手機螢幕有限之下的「必要之惡」。
手機的情況不太一樣。螢幕就那麼大，把部分選項藏起來確實是不得已的取捨，但不代表你可以照搬桌機那一整包選單塞進漢堡選單，這點留到後面手機那節再展開。另外一個容易被忽略的細節是，如果你的頁面會拉得很長，讓導覽列固定在頁面頂端、不隨著捲動消失，能省去訪客滑到一半又要拉回最上面找選單的麻煩，這也是 Nielsen Norman Group 在指南裡特別點出的建議。
選單放什麼、怎麼命名，都該從訪客的任務出發
導覽列該放哪些連結，判斷基準是訪客通常想完成什麼任務，不是你想特別強調的東西。以服務為主的公司，訪客上網通常想搞懂這家在做什麼、怎麼收費、怎麼聯絡上；有商品販售的網站，訪客想瀏覽品項、看退換貨規則怎麼走；顧問或訂閱制服務，訪客則想先弄懂在提供什麼、看方案內容、看實際案例佐證。找出這幾種高頻任務，才是決定你的導覽列該放哪幾個項目的依據，不是把公司內部的部門或產品線直接照搬上去。
命名上也是同一個原則。連結文字要用訪客看得懂、會用的詞，不要用只有公司內部才懂的術語，也不要用空泛到猜不到內容的字眼，像單純放「資源」「更多」這種標籤，訪客完全猜不到點進去會看到什麼，自然也不會點。Nielsen Norman Group 的導覽設計指南把這條列為基本原則之一：連結文字要清楚、具體，用訪客熟悉的詞彙，不要自創詞、塞入內部術語，也不要用抽象的高層分類籠統帶過。
選單項目怎麼排序，訪客才會先看到重點？
導覽列裡的項目順序不是隨便排就好。Nielsen Norman Group 針對 232 位使用者做的眼動追蹤研究發現，訪客瀏覽網頁時的視線落點大致呈 F 形，先橫向掃過畫面最上方那一整條，接著往下掃一條較短的橫向，最後視線沿著左側往下移動。這個模式在後續的複測裡也一再被驗證，不是單次研究的巧合。
換句話說，訪客的注意力最先落在導覽列的前段，桌機版通常在左側、手機版通常在上方，而且會看得比其他位置更仔細。這也解釋了為什麼多數品牌型、服務型網站習慣把最重要、最想被看到的項目放在導覽列最前面，首頁、核心服務、關於我們這類項目排在前段；聯絡資訊或行動呼籲類的項目則放在最後，那是視線停留較少、但仍會被順帶掃到收尾的位置，剛好適合放看完其他內容之後才會想點的項目。
下拉選單該用「滑過去」還是「點下去」才展開？
這是很多網站容易忽略的互動細節。用滑鼠移過去（hover）觸發下拉選單，在觸控裝置或只靠鍵盤操作的訪客身上完全不管用，他們根本碰不到那個要滑過去才會出現的子選單。Nielsen Norman Group 在導覽設計指南裡建議改用點擊觸發，理由很直接，觸控裝置與鍵盤使用者沒辦法用滑鼠懸停，點擊才能在各種裝置與輸入方式下都穩定運作。
如果堅持要用 hover 觸發，至少要加一段停留延遲再顯示選單，只要沒設好這段緩衝，滑鼠稍微路過就會讓選單瘋狂開合閃爍。Nielsen Norman Group 建議滑鼠靜止 0.3～0.5 秒後才顯示選單，這個閃爍問題並不是理論上的疑慮，Baymard Institute 2025 年的測試裡，61% 的受測網站 hover 下拉選單完全沒有停留延遲設計，訪客的滑鼠只是掃過去就跳出選單，還常常誤觸到旁邊的子分類。子選單旁邊也該搭配箭頭之類的圖示，提示這裡點下去還有更多，不然訪客根本不會發現選單底下還藏著東西可以展開。
沒有標示目前位置，是導覽列最容易被忽略的錯誤
訪客瀏覽到網站深處時，常常需要回答一個問題：「我現在在哪一個分類底下？」這個問題該由導覽列直接回答，做法也不複雜，訪客目前所在的那個主選單項目，用不同顏色、底線或粗細之類的樣式跟其他項目區分開來即可。
這件事的重要性經常被低估。Baymard Institute 2025 年的大型測試發現，高達 95% 的受測網站完全沒有在主導覽標示訪客目前所在的位置，是研究裡最常見的導覽缺失，而且比前一年的 91% 還要更差。Nielsen Norman Group 的導覽設計指南也把「我在哪裡」列為訪客要回答的基本問題之一，不標示目前位置被列為導覽列最常見的錯誤。
就算頁面上已經有麵包屑，也不能省略這一步。很多訪客瀏覽到後面仍然會回頭看主選單，確認自己還在原本以為的分類裡，麵包屑能補足更細的路徑，但沒辦法完全取代主選單的定位功能。
手機版的導覽列，能直接把桌機選單塞進漢堡選單就好嗎？
承接第一節提到的原則，手機螢幕小，藏起部分選項確實是合理的取捨，不過這不代表你可以把桌機版整包選單原封不動塞進漢堡選單就交差了事。Nielsen Norman Group 的實測數據顯示，即使在手機上，隱藏式導覽的使用率仍是 57%，不如部分顯示、部分收合的組合式導覽的 86%，完成任務的速度也慢了 15%。
比較務實的做法，是把訪客最常用的幾個項目直接露出來、不藏進選單，通常抓在 4 個以內，其餘不常用的才收進漢堡選單。可以點擊的區塊大小也不能馬虎，Google 官方的無障礙設計說明建議可點擊區塊至少要有 48×48 像素見方，彼此之間再保留約 8 像素的間距，少了這個尺寸，訪客的手指點兩下都點不準，反而更容易點錯、直接離開。
好的導覽列，訪客根本不會意識到它的存在，只會感覺到很順，找東西沒繞遠路，也沒點錯過方向。這篇一開頭引的 Baymard 數字提醒著一件事，多數網站的導覽表現其實都還在普通以下。回頭看一次你網站首頁的導覽列，選項是不是藏得太多、順序有沒有把重點放在最前面、訪客點進分類頁之後看不看得出自己站在哪個分類底下、手機版是不是隨手把桌機那套選單整包塞進漢堡選單。別等訪客用瀏覽器的「上一頁」按鈕告訴你答案。