網站選單設計怎麼做？分類命名、手機操作與測試方法

先列出訪客要找的資料，再決定選單項目

整理選單前，先寫下訪客來網站最可能做的幾件事。服務型企業可能是確認服務範圍、查看相關作品、了解合作方式，以及提出詢問。這些事情會決定主要入口應該放什麼，順序又該怎麼排。

不要直接把公司組織圖搬到網站上。訪客想知道設備能不能維修，未必知道該找技術部、客服部還是業務部。用「維修服務」當入口，會比「技術中心」更容易預期內容；部門資訊可以留在頁面裡說明。

用現有問題判斷哪些入口值得保留

可以從客戶常問的問題、業務寄給客戶的資料，以及網站已提供的內容開始。例如，業務每次洽談都要補寄合作流程，表示這項資訊值得放在容易找到的位置。如果一個入口很少被點，也要先確認是不是名稱看不懂，不能只憑點擊少就刪掉。

把每個候選項目寫成「訪客想找什麼 → 應該到哪一頁」。例如「想知道能否承接企業官網 → 網站建置服務介紹」。如果連團隊自己都無法指出目的地，就先整理內容，再決定是否放進選單。

網站還在規劃階段時，可以先依網站建置前準備清單整理主要目標和頁面。服務內容還沒整理清楚時，先補齊說明，再決定要放在哪個入口。

選單名稱要讓人猜得到點進去會看到什麼

名稱可以保留品牌語氣，但主要資訊仍要說清楚。「專業服務」「作品案例」「關於我們」雖然常見，讀者卻容易理解。若只寫「探索可能」「精彩旅程」「品牌能量」，訪客就得逐一點進去，才知道哪裡有需要的資料。

用字也要看實際內容。「最新消息」適合活動、公告和近況；若裡面主要是長期可閱讀的知識文章，使用「知識文章」或更明確的主題名稱，會比較貼切。不能因為某個名稱聽起來有質感，就把性質不同的內容全部放進去。

不必把所有名稱都改得很長。上層可以用簡短類別，下層再說明具體服務。重點是同一層的分類方式要一致：不要把「企業客戶」「網站設計」「我們的堅持」並排當成同一組服務分類，讓人同時猜對象、服務和品牌理念。

讓選單名稱和頁面標題接得起來

訪客點了「網站維護」，進站後卻只看到「讓品牌持續前進」，可能會以為自己走錯地方。頁面可以有品牌標語，但也應清楚標示網站維護的內容。選單、主標和頁面說明使用相近用詞，讀者比較容易確認位置。

若網站面向以中文為主的客群，不要只為視覺效果而把重要入口全部改成英文。需要中英並列時，也要檢查手機寬度下是否擁擠、換行後是否仍看得懂。文字與品牌語氣的整理方法，可參考品牌語調指南。

頁面變多時，用分類和總覽頁整理

主要選單要放幾項，取決於內容和訪客需要。可以先挑出最常需要的入口，其他內容放到相關分類或頁尾，再用實際任務檢查是否找得到。為了硬湊某個數字，把毫不相關的內容放進同一類，反而增加理解負擔。

以一間提供品牌、網站和內容服務的工作室為例，最上層可以安排「服務項目、作品案例、知識文章、關於我們、專案詢問」。服務項目底下再列出三類服務；訪客若還不確定適合哪一種，可以先進服務總覽，閱讀各類的簡短說明。

總覽頁應該幫助選擇，而不是只有一排名稱。每類服務補上一句適用情境，就能解釋差異。例如「網站建置」說明適合新站或改版需求，「網站維護」說明現有網站的更新與日常管理；實際提供哪些服務，仍依企業內容填寫。

同一份內容可以有多個入口，但不必複製多個頁面

合作流程可能出現在主要選單，也可能從服務頁連過去。只要兩者都指向同一份完整說明，就方便維護。若為了不同入口複製內容，日後只改其中一頁，反而容易讓客戶看到互相矛盾的版本。

文章分類和文章目錄則負責不同的事。分類幫讀者在多篇文章之間找主題；目錄讓他跳到同一篇的段落。公司主要選單不需要放上每篇文章，也不必把單篇文章的小標全部變成全站入口。

若一定要連續展開好幾層才能找到服務，可以先問：中間那一層是否真的幫助選擇？也許改成可閱讀的總覽頁，再列出細項，比在狹窄的浮動選單裡一路追著滑鼠更容易使用。

下拉選單要分清楚「前往頁面」和「展開項目」

同一個「服務項目」名稱，如果點一次會前往頁面，旁邊又有下拉內容，就容易讓訪客搞不清楚該怎麼操作。規劃時先決定：這個名稱是連結、展開按鈕，還是兩個分開的控制。

一種做法是把文字連到服務總覽，旁邊另外放有清楚說明的展開按鈕；另一種是讓整個上層項目只負責展開，並在下拉內容裡提供「查看全部服務」。兩種方式都要把點擊範圍分清楚，不能讓人必須猜哪一小塊才會打開選單。

不要只做滑鼠移上去才出現的效果

手機沒有滑鼠懸停，因此下拉項目必須能透過點按展開。桌面也要讓鍵盤使用者到得了每個入口。當滑鼠從上層移向下層時，選單若經過一小段空隙就立刻消失，也需要調整。

展開與收合最好有明確狀態，例如箭頭方向改變，並在程式中提供相應的展開資訊。前往其他頁面的項目使用真正的連結；只負責開關的地方使用按鈕，製作人員也較容易安排正確的鍵盤行為。

這些細節可以在畫面設計階段就註明。只交一張展開後的設計稿，沒有說明如何打開、如何關閉，以及點擊上層名稱會發生什麼，開發時就容易各自猜測。

手機選單要能打開、看完，也能順利關閉

手機畫面較小，可以把主要選單收進按鈕，但按鈕仍要容易辨認。只有三條線的圖示不一定適合每一種客群；可以搭配「選單」文字，再確認字體和點按範圍足夠清楚。

打開後，重要入口的名稱與順序應和桌面相互對應。手機可以採用不同排版，卻不應把主要服務藏到另一組難以理解的分類裡。訪客在兩種裝置之間切換時，才不必重新學習一次網站。

實際拿手機從頭操作一次

• 打開選單後，能否清楚看見關閉方式？
• 展開一個分類時，會不會誤觸旁邊的連結？
• 項目超出畫面時，能否捲動到最下面？
• 關閉後，是否回到原本閱讀的位置？
• 旋轉螢幕或放大文字後，重要入口是否被遮住？

如果選單蓋住整個畫面，就要特別確認背景頁面不會在背後亂捲，關閉按鈕也不會被固定工具列遮住。若只是展開一小塊區域，則要檢查它是否蓋住正在閱讀的標題，並能用清楚的方式收合。

固定在上方的導覽列也需要控制高度。Logo、雙語名稱和多排按鈕全部堆在一起，可能讓手機只剩很小的閱讀區域。應先保留辨識品牌和操作選單所需的內容，其他說明放回頁面。

用鍵盤檢查選單，確認每個入口都能操作

把滑鼠放到一旁，從頁面頂端用 Tab 鍵移動，觀察目前選到哪個按鈕或連結。焦點應該看得見，也要按照合理順序移動；如果按了好幾次都找不到位置，就請製作人員檢查焦點樣式和順序。

展開按鈕應能用 Enter 或空白鍵操作；一般連結以 Enter 前往目的地。下拉選單開啟後，試著進入其中的項目，再關閉並回到可預期的位置。依選單型態，也應檢查 Escape 關閉等操作。

隱藏的選單項目不應在關閉時仍被逐一選到。如果手機選單採覆蓋全頁的對話框形式，鍵盤操作範圍和關閉後的焦點位置更需要另外設計；這和一般小型下拉選單不同，不能只套同一段程式。

目前所在頁面也應有清楚標示，例如文字樣式或底線，並提供輔助工具可辨識的目前頁面資訊。不能只靠訪客記住剛才點了哪裡。最後仍要搭配實際手機與輔助工具測試，鍵盤能操作只是其中一項檢查。

請不熟悉網站的人找資料，比問「好不好看」更有用

設計完成後，可以找沒有參與製作的人，給他幾個實際任務。不要先告訴他該按哪個分類，也不要用選單上的字眼直接提示答案。觀察他第一個想點的地方、在哪裡停住，以及最後是否找到需要的資料。

這三題是測試方法的範例。實際使用時，換成你的客戶會做的事情，並選擇與客群接近的人。少量觀察可以找出具體問題，但不要把幾個人的結果換算成所有訪客的成功率。

如果大家都先點「資源中心」，卻找不到服務說明，可能需要改名稱或調整分類；如果入口找得到，進去後仍不知道包含哪些工作，就要補頁面內容。先分清楚問題在哪裡，才不會每次都重做整個選單。

找到詢問入口後，也要繼續走到表單送出。選單順利，不代表後面的流程一定正常；欄位與送出提示的檢查，可以接著參考網站聯絡表單設計。

調整選單時，保留好用的入口和原有網址

改選單名稱，通常不需要同時更換頁面網址。如果只是把「解決方案」改成「網站建置」，而頁面內容仍在說明同一項服務，可以保留既有網址，讓原本的收藏和連結繼續使用。

若確實要重整內容，先列出舊入口、新入口和對應頁面。頁面合併、刪除或改網址，需要另外處理轉址與相關連結，不要在選單中拿掉入口後，就當作內容已經處理完了。

選單連結也應使用可讀取的實際網址。只有文字看起來像按鈕，卻完全依賴額外程式才能前往頁面，會讓操作和後續檢查更複雜。完成後請製作人員核對連結標記，再用一般訪客方式逐一開啟，確認沒有導向錯誤頁面。

文章、服務與作品的相關連結可以分散在合適的位置，協助讀者延伸閱讀。主要選單提供全站的重要入口，並不需要承擔所有連結；頁尾、總覽頁與正文可以各自做好分工。

網站選單設計常見問題

選單一定要控制在五項以內嗎？

不用把五項當成固定上限。先確認每個入口的用途和名稱，再看不同螢幕下能否清楚排列。項目很多時，應檢查分類和內容是否重複；項目很少卻名稱模糊，也可能讓人找不到資料。

所有頁面都要放在主要選單嗎？

不需要。主要選單保留常用且重要的入口，詳細內容可以放在總覽頁、相關頁面或頁尾。重要資訊仍應有清楚可走的路徑，不能因為沒放在選單，就變成只有知道網址的人才找得到。

手機版可以和桌面版用不同名稱嗎？

盡量維持一致。手機可縮短補充文字或改變展開方式，但相同目的地最好使用相近名稱。若一定要縮寫，請找不熟悉網站的人確認意思，避免為了塞進畫面而造成新的理解問題。

網站有搜尋功能，就不用整理分類嗎？

仍然需要。搜尋適合已知道要找什麼的人；第一次進站的訪客，可能還不知道服務名稱。分類與總覽可以幫助他認識內容，搜尋則提供另一種找資料的方式，兩者不必互相取代。

先檢查一條最常使用的路徑

可以從「找到服務、查看作品、提出詢問」這條路徑開始。把目前選單名稱、點擊後的頁面，以及手機上遇到的問題記下來，先修正會讓人走錯地方或無法操作的部分。

改完後，再請沒有參與設計的人完成同樣任務。記下他是否選對入口、找到資料，以及在哪裡猶豫，再依這些問題調整名稱或操作方式。