手機版選單把重要頁面藏起來了：行動版導覽設計的十段問答
手機版選單為什麼會讓重要頁面沒人看
手機版選單預設是收合的，訪客要先點開才看得到分類，多數人不會點。重要頁面若只放在選單裡，手機訪客就少了一條路可以到達。解法是把最重要的三到五個入口移到選單之外，放在首屏與頁面內容裡。
以下整理自一場改版檢討會議。對象是一家賣居家收納用品的小型電商，老闆親自參加。問題按當天提出的順序排列，回答略作整理。
問一：桌機版選單很清楚，手機版照搬有什麼問題
老闆問，桌機版上方一排八個分類，滑過去還有下拉選單，為什麼手機不能照做。
桌機的導覽列一直攤在畫面上，訪客不用動作就看得到全部選項。手機寬度放不下，於是整排收進一個三條線的圖示，業界叫漢堡選單。漢堡選單是把導覽項目收合在一個圖示後面、點擊才展開的設計。
收起來之後，訪客看不到網站有哪些分類。看不到就不會想到要找。桌機上靠導覽列帶來的分類頁瀏覽，在手機上會明顯變少。這是版面限制造成的，和選單寫得好不好無關。
問二：漢堡選單裡的連結，搜尋引擎看得到嗎
看得到，前提是連結真的存在於頁面的原始碼裡。多數網站的選單內容在頁面載入時就已經輸出，只是用樣式隱藏起來，這種做法搜尋引擎可以正常讀取。
有問題的是另一種做法。選單內容在訪客點擊圖示之後才向伺服器要資料，載入前原始碼裡沒有那些連結。爬蟲不會去點圖示，於是讀不到。
檢查方法很直接。用 Google Search Console 的網址審查工具測試線上網址，檢視它抓到的頁面原始碼，搜尋某個分類的名稱。找得到就沒事，找不到就要請工程師修改輸出方式。
問三：手機版選單項目比桌機少，會影響排名嗎
會有影響。搜尋引擎目前主要以手機版頁面作為索引與排名的依據，這個做法稱為行動優先索引。手機版選單少放的連結，在搜尋引擎眼中就是全站少了那些連結。
這家電商的桌機版頁尾列了所有子分類與購物說明，手機版為了縮短頁面全部拿掉。結果子分類頁在手機版只剩上層分類頁一個入口。
我們的建議是兩個版本的導覽項目保持一致。手機版可以改變呈現方式，例如把頁尾分類做成可展開的區塊，但連結本身要在。
問四：手機版選單到底該放幾個項目
沒有標準數字。我們用的判斷是第一層不超過訪客一眼能掃完的量，通常是五到七項。超過的部分往第二層放，第二層展開後不要再有第三層。
比數量更重要的是順序與用詞。會議上我們請老闆做了一件事，把 GA4 過去三個月手機訪客瀏覽最多的分類列出來，和選單順序對照。排在選單第六位的分類，瀏覽量其實是第二名。
- 第一層用訪客的說法命名，不用公司內部的產品線代號
- 瀏覽與營收最高的分類排在最上面，不照公司組織或筆畫排序
- 品牌故事、最新消息這類低需求項目往下放或移到頁尾
- 每個項目的點擊區域要夠高，手指不會誤觸相鄰項目
- 有子項目的分類要有明確的展開符號，上層分類本身也要能點進去
最後一點最常被忽略。很多選單點上層分類只會展開子項目，沒辦法進入上層分類頁。這頁在手機上等於沒有入口。
問五：要不要改用底部固定的導覽列
底部導覽列是固定在螢幕下緣的一排圖示，拇指最容易按到。它適合有明確高頻動作的網站，例如電商的首頁、分類、搜尋、購物車、會員。
取捨有三個。它會佔掉一截螢幕高度，內容可視範圍變小。它最多放五個項目，再多就擠。它和瀏覽器自己的工具列、客服對話按鈕、同意視窗容易疊在一起。
對這家電商，我們建議採用，並把分類放進去當第二個圖示。對只有服務介紹與文章的顧問型網站，我們通常不建議。那類網站的訪客沒有重複操作的需求，把重點入口放進頁面內容更有效。
問六：選單之外，還有哪些地方可以放入口
這是整場會議最重要的一題。選單是訪客迷路時的備用工具，主要的導覽應該發生在內容裡。
- 首頁首屏下方放一排主要分類的圖文按鈕，不用點選單就看得到
- 分類頁上方放可橫向滑動的子分類標籤，讓訪客在同層之間切換
- 商品頁與文章頁放麵包屑，顯示目前位置並可回到上層
- 文章結尾放三到五篇同主題文章與對應的產品分類連結
- 頁尾保留完整的分類清單，手機版用可展開區塊呈現
- 搜尋無結果與找不到頁面時，顯示熱門分類而不是空白
麵包屑是顯示目前頁面位於網站哪一層的一行路徑連結。手機版常因為空間不夠被拿掉，其實它佔的高度很小，對訪客與搜尋引擎都有幫助。字太長可以只顯示上一層。
問七：站內搜尋可以取代選單嗎
對商品數量多的網站，站內搜尋的重要性常常超過選單。知道自己要找什麼的訪客，會直接搜尋。
但搜尋取代不了導覽。還不知道要買什麼的訪客需要瀏覽分類來形成想法。再者，站內搜尋結果頁通常不開放索引，它不能替分類頁提供站內連結。
實務上的做法是讓搜尋框在手機版直接可見，不要再收進一個放大鏡圖示裡。然後到 GA4 查看站內搜尋的字詞，訪客反覆搜尋的東西，就是選單與首頁該補上的入口。
問八：全螢幕展開的選單和側邊滑出的選單哪個好
差異沒有想像中大。兩種都能用，關鍵在三個細節。關閉按鈕要明顯而且位置固定。展開後背景頁面不能跟著捲動。展開與收合的動畫要短，不能讓訪客等。
我們比較在意的是選單開啟的速度。有些網站的選單要等一整包程式載入完才能點，網路慢的時候按了沒反應，訪客以為壞了。請在手機上關掉無線網路，用行動數據實測一次。
問九：改了之後怎麼知道有沒有變好
驗收看行為，不看感覺。我們在改動前先記錄一份基準，改動後四週再比一次。
- GA4 裡手機訪客的分類頁瀏覽次數，以及分類頁佔全部瀏覽的比重
- 手機訪客平均每個工作階段瀏覽的頁數
- 選單開啟事件的次數，需要請工程師額外設定事件
- 站內搜尋的使用比例與無結果的字詞數量
- Search Console 裡分類頁在行動裝置上的曝光與點擊
選單開啟次數下降不一定是壞事。訪客在頁面內容裡就找到入口，自然不需要開選單。要一起看的是分類頁瀏覽有沒有上升。
若有條件，改動分兩階段上線。先加首頁與分類頁的入口，觀察兩週，再調整選單本身。兩件事同時改，數據變了也說不出是哪一項的功勞。
問十：這套做法有沒有不適用的網站
有三種。第一種是只有五頁以內的小型形象網站，選單項目少到可以直接攤開在頁首，不需要收合，也就沒有這些問題。
第二種是會員登入後才使用的系統型網站，例如訂位後台或線上課程的學習區。那類介面的導覽邏輯是任務導向，搜尋引擎也不會索引，應該以操作效率為準。
第三種是架在版型固定的開店平台上、無法修改選單結構的網站。這時能做的只剩調整選單順序與命名，並把力氣放在首頁區塊與文章內連結。平台能開放到什麼程度，要先向平台確認，再決定改版範圍。
常見問題
漢堡選單對 SEO 不好嗎
漢堡選單本身沒有問題，只要選單裡的連結在頁面載入時就存在於原始碼，搜尋引擎可以讀取。要避免的是點擊後才載入連結的做法。
手機版選單要放幾個項目比較好
第一層建議五到七項，依訪客實際瀏覽量排序。其餘放第二層，並避免出現第三層。項目命名要用訪客平常會說的詞。
手機版可以比桌機版少放導覽連結嗎
不建議。搜尋引擎主要依手機版頁面來索引與排名，手機版少放的連結等於全站少了那些連結，可改用展開區塊呈現。
底部導覽列適合所有網站嗎
不適合。它適合電商這類有高頻重複操作的網站。以文章與服務介紹為主的網站，把重點入口放進頁面內容通常更有效。
延伸閱讀：SEO 技術優化主題文章、最新新知、行銷案例