【網頁行銷課堂⑩】掌握導航欄設計全攻略，為網站用戶體驗加分不少!

在大眾觀念中，導航欄無非就是「Logo+文字(或含圖標)鏈接」堆砌而成的Bar，因此無需多花心思設計。

但……這樣設計很容易削減導航欄應有的作用。

導航欄的本質就是告知用戶當前的所在位置，並指引他們到達目標頁面的快速通路。換言之，導航欄設計必須基於網站的層級結構，同時遵循用戶的瀏覽習慣，以確保用戶毫不費力地找到並管理介面信息，達到有效的傳遞。

▌ 導航欄的選擇：頂部導航欄or側邊導航欄



業界一直都有談論「該選擇頂部導航欄還是側邊導航欄」的問題，而不少設計師都有自己的一套結論。但在實際操作中，這個問題其實並沒有絕對的答案，更多是根據實際情況而定。

1. 側邊欄導航更易於瀏覽

Eyetrac荷蘭國際集團的研究表明：用戶習慣於使用「F」路徑瀏覽網站。這意味着，左側導航欄的可用性相對比頂部導航欄更高，方便用戶快速且有效地訪問網站。

2. 頂部導航欄更節省空間

數據顯示，側邊導航欄佔據的空間是同樣內容量頂部導航欄的三倍。這主要是因為側邊欄導航欄往往需要考慮橫向標題、搜索功能等模塊的加入，因而直接縮窄頁面內容的空間。

3. 側邊導航欄支持客製化導航結構

當網站信息架構涉及較多菜單條目時，側邊導航欄可顯示的條目內容將是頂部導航欄的一倍之多，甚至可將分層的二級菜單直接呈現，以及滿足日後增加條目的需要。

4. 頂部導航欄適合做「超級菜單」

如果側邊導航欄採用懸停激活抽屜式下拉菜單，可能會遮蓋部分介面內容，展開時更會佔據大量空間;但使用頂部導航欄不僅可以一次性容納超多條目的下級菜單，還為產品的展示和廣告留存足夠多的空間。

▌ 掌握這些導航欄設計技巧，為網站用戶體驗加分不少!



導航欄作為用戶進入網站後的一個指引牌，其好壞將直接影響整個網站的用戶體驗，還讓用戶對網站的產生負面印象。因此，掌握這些導航欄設計技巧，才能避免網站好不容易累積的好印象全部付之東流。

a. 加入顯眼的搜索框

在訪問網站過程中，不少用戶會透過「搜索」的方式來篩選網站信息，確保「搜索框」融入到主導航欄中並出現於每個頁面上。一來，方便用戶更快、更直接地獲取想要信息;二來，對加強網站用戶體驗、提升用戶留存率等帶來不少好處。

b. 導航欄的條目佈局

基於「系列位置效應」，即當用戶回憶一系列項目時，往往更容易記起排在最前面和最後面的內容，但容易忽略中間的內容。在設計導航欄過程中，應該盡量將權重最高的條目或元素放置導航欄的開頭位置，以吸引用戶注意力並引導點擊。

c. 長滾動頁面使用懸浮導航

對於長滾動頁面而言，使用懸浮導航設計有助用戶在任何時候都可以輕鬆自然地與網站進行交互，並延長他們在網站中的停留時間。

▌ 小心這些導航欄設計陷阱，避免間接影響網站轉換



陷阱一：菜單選項太多

如果用戶需要花費很長時間來瀏覽導航欄中的菜單選項，這將導致他們無法快速且準確地進行選擇，甚至出現「放棄瀏覽網站」的念頭。

陷阱二：菜單沒有足夠選項

菜單選項太多，容易影響用戶的選擇;同樣，菜單沒有足夠選項，則會導致用戶難以理解及無法找到想要的功能，繼而失去耐性並放棄瀏覽網站。

陷阱三：使用漢堡包導航

漢堡包導航設計最大的問題在於「需要點擊後才呈現菜單」，這很容易導致用戶在網站中「迷路」。當用戶無法找到想要的內容或功能，便會開始胡亂點擊或滑動，並且逐漸產生煩躁的情緒。

陷阱四：重製導航交互規則

用戶在訪問網站過程中往往已經習慣某些元素或icon的位置、呈現方式及操作方式，不尋常的導航規則雖然看起來非常有創意，但會打破他們習以為常的交互規則，大大增加他們的學習成本。

陷阱五：沒有向用戶顯示當前位置

導航欄如果能夠隨時顯示用戶當前所在的位置，有助讓用戶更輕易地掌握網站的整體結構，方便他們採取下一步操作，同時避免在瀏覽網站過程中可能出現的不必要猜測。

總體來說，一個優秀的導航欄設計需要兼備實用性和美感，確保給用戶提供舒適流暢的網站體驗。如果導航欄設計不合理，將嚴重損害網站的用戶體驗，更會間接影響網站轉換率和用戶留存率!


香港網頁提供一站式數碼營商方案服務，包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務，全方位滿足客戶的業務需要，歡迎隨時聯絡我們，香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk