網站導航的細節設計左右著使用者體驗好壞，不管你的網站頁面設計得再漂亮，使用者體驗不在，自然也留不住瀏覽者的注意力。從你的網站視覺吸引力、佈局，再到文本的運用都是使用者體驗的一環，要達到美觀與功能之間的平衡，才稱得上是一個好網站。
而在這些眾多的考量因素，決定網站使用者體驗成敗的就是—— 網站導航設計 ，網站導航欄扮演著引領瀏覽者的角色，不管是解答問題、行動呼籲、認知強化、再行銷，這些都是導航欄設計實際能為用戶達成的。接下來，讓我們更深入了解網站導航設計的重要性，以及其設計隱藏的關鍵技巧。
什麼是網站導航？為什麼它很重要？
當你在電商網站消費，好不容易決定好要購買哪一些產品，卻發現找不到結帳按鈕，你會有什麼樣的感受？網站導航就像實體店面的消費路線一般，從門口到櫃台，需要怎麼說服消費者購買？產品要怎麼擺放？有什麼誘因可以再提升購買金額？結帳櫃台應該要在哪裡，才能讓消費者找得到？
這當中的細節規劃就是網站導航設計應該要做到的，像是用戶進到網站應該走過哪些流程？如果從不同的節點進入網站，有沒有辦法順利瀏覽整個網站？有哪些重要的頁面是大多數用戶需要的？使用者點擊習慣會讓他們願意點擊哪個形式的按鈕或文字？
良好的網站導航設計可以帶你避開這些細節可能衍生的困擾，讓網站導航設計成為你降低跳出率的秘密武器。網站流量與轉換也會因為網站導航設計的順暢運作，而有持續提升的趨勢存在。
【 延伸閱讀 】網站佈局規畫不踩雷？這9種網站版面設計了解一下
網站導航欄類型有哪些？
網站導航設計大多是以連結指向內部所有頁面，組織成一個連結平均的樹狀圖，但在規劃階段會因為訊息量揭露的多寡，以及資訊深度與廣度的安排，產生不一樣的導航欄設計，以下是網站導航欄常見的設計類型：
- 水平導航欄
水平導航欄顧名思義會出現在網站的最上端，使用起來十分直觀，能協助用戶迅速地找到相關頁面。從你曾瀏覽過的網站，應該會發現水平導航欄已經是網站佈局的標準配備，無論是一頁式或多頁式網站，都習慣性運用水平導航欄為網站佈建瀏覽體驗。
【 延伸閱讀 】網站設計要選一頁還是多頁式？網站設計到底該如何選擇才對？
- 下拉式導航欄
假設網站擁有龐大的資料量待揭露，導航欄設計就會考慮到資訊量的深度與廣度，在一定的階層佈局中，運用下拉式導航欄將主要頁面與其子頁面平均分配，滿足大資料量需求的同時，顧及使用者體驗與網路爬蟲的索引流程。
【 延伸閱讀 】還在等Google索引頁面？5招主動出擊優化SEO
- 漢堡選單
漢堡選單較蔚為人知的名稱又叫「三條線選單」，通常會出現在行動裝置的介面中，節省介面空間外，也比較不會影響行動網站瀏覽。由於使用者習慣養成，近幾年也有人將其應用於一般網站之中，不過使用者體驗相比評價較為兩極。
- 側邊欄
帶有側邊導航欄的網站，在畫面呈現就像書本目錄一般，適合少且固定頁面量的網站運用，例如：藝術品介紹、品牌形象展示…等，藉由放置在左側或右側的導航欄設計，迅速引導用戶到指定頁面。
- 頁腳導航欄
過往網站養成的使用者習慣，使得用戶會直覺地到頁腳尋找相關的連絡資訊，以及社群媒體連結。網站在規劃導航欄時，正會藉此將曝光度不高，卻必須揭露於網站的資訊，製作成頁腳導航欄作為頂端導航欄的補充項。
網站導航設計的10個重要關鍵
網站導航欄設計的選擇會因訊息量與視覺需求，而有不一樣的搭配，就算是競業的網站，導航欄設計也可能不同。而真正會去影響使用者體驗的關鍵，就是這些導航欄的細節設計，細節會體現導航欄的核心價值，並很大程度控制使用者體驗的好壞。
不過導航欄的細節關鍵其實並不難達成或發掘，只要持續猜測用戶的下一步是什麼、需要什麼，反饋於自身操作流程去縮減、增加，就能創造最完整的使用者體驗。下面就來看這些已被列為重要關鍵的網站導航細節設計吧！
使用站點地圖規劃導航欄
無論是自架網站或找網頁設計公司處理，在架設網站之前都需要經歷多場名為「網站結構」的頭腦風暴，將網站實際需要的頁面列出，例如：關於我們、產品介紹、服務項目、聯絡我們、隱私權條款、免責聲明、Cookie政策之類的頁面。
就頁面需求還會應用站點地圖，更進一步的劃分主要頁面與次要頁面，以舉例的頁面來說，站點地圖就會如圖所示。這種做法可以協助你釐清，那些頁面之於用戶的重要層級，同時也能確保站點地圖的深度與廣度，能讓網路爬蟲順利讀取。
導航欄位應該反映網站目標
你的目標將取決於即將架設的網站類型。在決定站點地圖的層次結構前，應該就你列出的頁面優先找出「能引導用戶完成你所制定行為」的項目，像電商網站最終希望消費者完成的是消費行為，所以導航欄會有購物車、促銷訊息出現；形象網站需要獲取顧客資料便以陌生開發，欄位就會有連結到問卷或社群的選項。
頁面的層次結構要以導引為目的去設置，才能讓所有的資訊發揮最大的效用。不然想像一下，最上端的導航欄如果列的順序是：隱私權條款、免責聲明、Cookie政策、新聞與媒體，用戶一進到網站不能立即獲得應有的資訊，網站瀏覽意願隨即會發生什麼問題，大家應該都能猜得到。
尊重使用者習慣
網站視覺設計不管是破而後立的大膽獨特，亦或是中規中矩的復古經典都能有其大放異彩的一面，但之於導航設計可就不是這麼一回事，使用者體驗以訊息可以順利傳遞為前提，追求的是清晰直覺、好操作，特立獨行的導航欄設計反而會讓用戶迷失在網站瀏覽之中。
並消費會有從眾現象，使用者體驗亦是。使用者習慣養成不容易，想做第一個吃螃蟹的人，除非你有破釜沉舟的決心，願意去花時間分析、測試，否則歸根究底這些都僅是體驗的其中一環，為了其去提倡連結文字應該要是綠色，或導航欄只該出現在頁腳，實際意義並不大甚至還會造成使用者體驗無法連貫。
讓導航欄固定在視線內
讓用戶一路滾動到正上方，只為了找到導航欄跳轉到下一個頁面，絕對會是使用者體驗大忌，不管下方是否有頁腳導航或回到頂部的設計，可以理解希望用戶完整瀏覽的用心，但並非每一瀏覽者都是初次進入網站，或有耐心瀏覽完整個網站，讓導航欄固定於視線內，不但跳轉頁面變得方便，同時也可以縮短那些迫切形成轉換的用戶旅程。
上述的網站導航欄類型，除去頁腳導航欄不建議這麼做外，其餘固定於用戶視線內的好處是遠大於壞處的。
限制導航欄的連結數量
根據George Miller《神奇的數字：7±2：我們信息加工能力的局限》，人們對於單詞記憶的廣度大約是7個單位，過多的選擇會一定程度干擾用戶瀏覽、購買的意願。爾後也有數據顯示年輕人的記憶廣度已縮短成4個單位。
不過實際與你提供幾個選擇給用戶無關，更重要的是你如何在減少決策步驟下，去組織網站頁面的訊息結構。訊息爆炸的世代瀏覽網站期待的，絕不會是如字典般的厚重，而是像懶人包的簡潔有力，用最少選擇、獲取最完整的資訊，才更符合現代使用者體驗的期望值。
增加網站搜索欄
有了網站搜索欄，就算用戶不熟悉網站操作流程，也能直覺地從搜索欄輸入關鍵字找到需要的內容。如果你有仔細觀察其他網站，應該也會發現網站搜索欄位置有一定講究，例如：要在導航欄的附近、應該要突顯放大鏡圖示、每一頁面都需具備…等等，做到在使用者體驗中不搶眼，但用戶需要使用時又能第一時間輕鬆找出的存在。
網站搜索欄是看似簡單，實則承包使用者體驗重要環節的細節設計，如同使用者習慣段落說明的，導航設計最終是為引導用戶獲得正確的資訊、做出實際行動，而網站搜索欄的存在能為瀏覽者迅速略過不感興趣的內容，細數導航功能設計中也只有網站搜索欄能達成此目標。
導航文案直覺清晰
導航是用來指引從一點出發到達另一點的技術的總稱，因此與導航有關的所有文字都應該契合大多數人的直覺反應，以能立即產生認知判斷為主，而不是使用需要思考文字意涵的各種行業術語、簡稱，或只有部分人理解的微文案。並且直覺清晰的導航文案，也能讓頁面在語言轉換更為順利。
以下是常見的導航文字與其對應英文：
| 關於我們 | About, About Us |
| 產品 | Products |
| 服務 | Service |
| 聯絡我們 | Contact, Contact Us |
運用Logo連結回首頁
當Logo連結回首頁的使用者習慣培養起，導航欄內的首頁設置就顯得可有可無，因此現在的網站越來越少「回首頁」或「主頁」的欄位設計，就連頁腳導航欄也時常會應用一個小型Logo作為回首頁的連結。
不過Logo連結的具體位置仍會隨著設計需求，而有些微變化，如以下圖片所示：
讓用戶清楚知道目前所在頁面
用戶在連結子頁面獲得相關資訊時，網站導航若能適時提供頁面路徑圖，也就是麵包屑設計，讓用戶能清楚地知曉目前所在頁面，用戶就能根據路徑決定下一個瀏覽目的地，而不需要重返首頁或返回上一頁再做一次路徑點擊。
麵包屑設計相較返回鍵的好處在於：
- 讓網路爬蟲更清楚了解頁面與頁面的關係，提升網站SEO分數。
- 在搜尋結果頁能有更清晰的表現方式，便於用戶了解其分層邏輯。
- 可以降低用戶的跳出率，提高網站易用性。
確保導航欄在所有頁面的相同位置
讓使用者可以從任何頁面導航到他們想要的頁面，是網站架設、設計的基本準則之一。因為不是所有的用戶都會從首頁進入網站，可能會從銷售的著陸頁、聯絡頁面，或部落格中的某一篇文章進到網站內進行瀏覽，讓這些頁面在相同的位置擁有同樣的導航欄設計，便能有效延伸用戶的瀏覽意願。
同時在著陸頁、聯絡頁面以及部落格文章中，也能應用錨點文字串接相關資訊頁面，在導航欄連結之外，提供用戶更多與入站頁面相關的更多內容。
成熟的網站導航設計，為你的使用者體驗加分
總體來說，網站架設都需要面對兩道關卡，首先是搜尋引擎的索引，當搜尋引擎認為你有排名的價值，你的網站才會出現在搜尋結果中，接著便是來自用戶的檢驗，一個使用者體驗不好，也沒有足夠誘因的網站，往往在幾個回合的互動之下，就會透漏不好的信號給搜索引擎，因此在擁有一定的排名優勢下，網站的使用者體驗可謂重中之重。
從上述的結論，我們也可得出網站導航設計便是左右這一切的重要關鍵，不管最終的網頁視覺設計呈現如何，網站導航欄與上述的十個細節設計，都應該出現在你的網站設計之中，這樣才能讓你的使用者體驗趨近成熟完整，無論是什麼類型的用戶，都能操作自如地在你的網站擷取所需資訊。
