一個(gè)好的用戶(hù)體驗（UX）是導航設置的關(guān)鍵。用戶(hù)依賴(lài)直觀(guān)的導航設計探索品牌網(wǎng)站有價(jià)值的信息，并作出購買(mǎi)決定。

很多讓人摸不到頭腦的導航，則讓用戶(hù)迷茫最終導致關(guān)閉網(wǎng)站。UX專(zhuān)家通過(guò)了解消費者的行為習慣，通過(guò)數據分析，判斷設計師在設計導航時(shí)應該匹配哪些元素，提升用戶(hù)在網(wǎng)站中的停留時(shí)間。設置合理的導航設置為無(wú)線(xiàn)端和PC端提升用戶(hù)體驗，從而提升業(yè)務(wù)成交量。

一致性是關(guān)鍵

在一個(gè)方案中，導航的一致性是關(guān)鍵，導航需要在每一個(gè)頁(yè)面乃至整個(gè)網(wǎng)站保持一致性。

混亂的導航會(huì )導致網(wǎng)站的混亂，用戶(hù)不應該為了尋找導航而感到頭疼，焦慮。無(wú)論選擇什么類(lèi)型的導航，您必須優(yōu)先考慮“一致性”。

主要體現在以下幾個(gè)方面：

1. 菜單應該出現在每一頁(yè)，不要讓用戶(hù)被困在一個(gè)頁(yè)面上沒(méi)有出路。如果菜單的選項存在多個(gè)層級，用戶(hù)可以看到網(wǎng)站的多層次結構。

2. 讓每一個(gè)菜單項在操作的方式上保持一致。如果用戶(hù)在操作某項時(shí)，用了某一個(gè)操作方式，那么在操作其他導航時(shí)，也應該用相同的操作方式。

3. 導航上設置的元素，應該直觀(guān)的。網(wǎng)站設計的元素,是讓用戶(hù)產(chǎn)生直接的聯(lián)想。例如，我們設置一個(gè)箭頭“↓”，意味著(zhù)用戶(hù)能夠理解這是下來(lái)菜單的意思。合理的元素設計，能夠幫助用戶(hù)在導航上了解到，他們能在網(wǎng)站上該如何操作，能夠從網(wǎng)站上了解到什么內容。

“大腦依靠線(xiàn)索來(lái)激活記憶，從而檢索有價(jià)值的信息，而非通過(guò)記憶?！?/p>

在使用導航時(shí)，用戶(hù)應該依靠線(xiàn)索識別，而非記憶。

當你在設計元素時(shí)保持一致，越來(lái)越多的用戶(hù)了解元素代表的意義，這將讓用戶(hù)瀏覽網(wǎng)站時(shí)感到容易，從而體會(huì )到設計者從用戶(hù)的角度出發(fā)，讓用戶(hù)有更好的用戶(hù)體驗。

清晰、簡(jiǎn)潔的標簽

導航不是發(fā)揮你幽默的地方，也不需要將過(guò)多的內容在導航里展現出來(lái)。用戶(hù)依賴(lài)菜單的原因是——用戶(hù)能夠快速、準確的通過(guò)菜單在網(wǎng)站中找到訪(fǎng)問(wèn)的目的。它不需要發(fā)揮幽默感，也無(wú)需用復雜的設計，對用戶(hù)的視覺(jué)造成沖擊。

菜單標簽應該保持簡(jiǎn)單、清晰和簡(jiǎn)潔。大多數網(wǎng)站在不同的地方，使用一個(gè)相同的詞匯作為標簽，是有原因的。用戶(hù)將會(huì )更容易的熟悉菜單里的每一個(gè)選項，能夠快速的和產(chǎn)品產(chǎn)生聯(lián)系。他們知道標簽的意思,當他們選擇一個(gè)菜單選項更容易明白，能達成怎樣的目的。

1.替代漢堡菜單

“漢堡”菜單圖標，是三個(gè)疊加在一起的水平線(xiàn)。設計師最初使用它,因為它能夠節約較小的手機屏幕空間。

還記得2014年移動(dòng)網(wǎng)站設計中，著(zhù)名的“漢堡菜單討論事件”嗎?

許多手機端網(wǎng)站，仍然使用實(shí)用的漢堡菜單，因為這是大多數手機用戶(hù)習慣的菜單方式，用戶(hù)能夠下意識的找到菜單。

然而，今天許多設計師正在尋找和使用漢堡菜單的替代品,如:

○ 選項卡

○ 可滾動(dòng)導航

○ 底部導航

○ 顯示更多選項

○ 內聯(lián)列表標題

○ 分段控制

很多網(wǎng)站在替代“漢堡菜單”上，取得了成功。特別是那些少量的選項，許多設計師達成了共識：將導航顯示出來(lái)，將內容展現出來(lái)。

可滾動(dòng)導航菜單的例子

有時(shí)候這是不容易實(shí)現的，特別是在手機屏幕較小的空間里，展示多個(gè)菜單選項，而適當的展現出來(lái)一小部分的內容，則容易被接受。

菜單樣式的選擇往往取決于你將要展示的內容數量，和你的用戶(hù)群體。

例如，年紀大的用戶(hù)群體，能夠接受固定展示的菜單欄，而難以接受，將內容隱藏起來(lái)的漢堡菜單。嘗試不同的菜單格式，找到一個(gè)能夠讓用戶(hù)群體容易接受的，可以達到提高轉化的目的。

顯示更多選項的例子

2.搜索框

設計菜單欄的功能，不僅僅是為了讓用戶(hù)一目了然，和表達一致性，還需要最大限度的提高網(wǎng)站的實(shí)用性。

YouTube搜索欄

通過(guò)一個(gè)搜索圖標，能夠提高實(shí)用性(搜索欄一般會(huì )用一個(gè)放大鏡的標志)。當用戶(hù)并不十分需要搜索欄，用戶(hù)將直接忽略搜索欄，甚至直接跳失掉。

《紐約時(shí)報》搜索欄

當用戶(hù)找不到自己想要的內容時(shí)，搜索欄就能夠幫客戶(hù)解決問(wèn)題，能夠更直接為用戶(hù)搜索關(guān)鍵詞相關(guān)的內容。如果沒(méi)有搜索欄，會(huì )讓客戶(hù)因為找不到需要的內容，而離開(kāi)網(wǎng)站，所以我們在設置時(shí)，每個(gè)頁(yè)面的搜索欄，都會(huì )在同一個(gè)位置，讓用戶(hù)很明確的知道應該在哪里找到自己想要的內容。大部分用戶(hù)會(huì )在右上角，接近菜單的位置，看到這個(gè)網(wǎng)站的搜索欄。

3.旋轉木馬式菜單

旋轉木馬式菜單已經(jīng)越來(lái)越流行了，網(wǎng)站一般用來(lái)展示定期更新的內容，和最新資訊。

“旋轉木馬式菜單”是指在頁(yè)面最頂部顯示出來(lái)的，網(wǎng)站最近發(fā)布的文章。通常這些資訊會(huì )用縮略圖的形式，以走馬燈的形式來(lái)吸引用戶(hù)的眼球，讓用戶(hù)更容易閱讀到其中的內容。

時(shí)尚旋轉木馬菜單

“旋轉木馬式菜單”的選項卡有時(shí)也是一個(gè)文章的標題，或者一個(gè)簡(jiǎn)單介紹，來(lái)描述這個(gè)版塊主要講什么內容，通常以幻燈片的形式展現，以輕松的方式吸引用戶(hù)點(diǎn)擊鏈接瀏覽。這種菜單欄會(huì )展示最新的內容，并讓用戶(hù)一眼能夠看到該網(wǎng)站的有趣之處，獲取更準確的資訊。

3.大型菜單

而還有一種正在席卷網(wǎng)站設計的導航方式——大型菜單。顯而易見(jiàn)，這種菜單欄的展現方式是占用頁(yè)面大幅的空間。這樣的菜單欄，在資訊類(lèi)的網(wǎng)站被流行起來(lái)。

超級菜單是多級導航網(wǎng)站的理想選擇，與之用十幾個(gè)下拉菜單，讓用戶(hù)看的頭暈眼花，還不如用一個(gè)占據大半個(gè)屏幕的大型菜單來(lái)的直接，用戶(hù)能夠在相應的菜單結構里，更容易找到自己需要瀏覽的內容。

超級菜單的例子

4.固定導航欄

這樣的導航方式，在社交媒體類(lèi)網(wǎng)站和移動(dòng)網(wǎng)站中非常受用。就像Facebook，它的格式是，用戶(hù)可以無(wú)限下拉，伴隨著(zhù)下拉頁(yè)面，用戶(hù)能夠看到不斷更新的內容，直到到達頁(yè)面底部。

動(dòng)動(dòng)大拇指就能無(wú)限下拉的移動(dòng)端用戶(hù)，選擇一個(gè)與網(wǎng)站的功能更匹配的導航，就成了問(wèn)題。這時(shí)，設計師會(huì )選擇一種能夠始終讓用戶(hù)看到的導航欄，方便客戶(hù)在滾動(dòng)頁(yè)面的時(shí)候找到自己需要的內容，這個(gè)時(shí)候，選擇“固定導航欄”就非常有必要了。

固定導航的例子

固定導航欄會(huì )在用戶(hù)向下滾動(dòng)菜單時(shí)，始終保持在頁(yè)面上。這種導航樣式，也被稱(chēng)為“粘性導航”，是最常見(jiàn)的導航欄樣式。

這個(gè)時(shí)候，我們能看到“用戶(hù)”這個(gè)版塊，總是存在在頁(yè)面里，Facebook使用的就是這樣的形式，它讓用戶(hù)能夠在滾動(dòng)頁(yè)面閱讀新資訊時(shí)看到他們的資料。

當你的網(wǎng)站是一個(gè)社交型的網(wǎng)站或社會(huì )新聞類(lèi)網(wǎng)站時(shí)，這樣的導航樣式就非常的適用。

總結

最后，毫無(wú)疑問(wèn)，一個(gè)網(wǎng)站用戶(hù)體驗的好與壞，導航起著(zhù)關(guān)鍵性作用。在PC端和無(wú)線(xiàn)端，不妨用最新的導航趨勢優(yōu)化你的網(wǎng)站，能夠使用戶(hù)有更全面的體驗，更好的提升網(wǎng)站的停留時(shí)間，促進(jìn)業(yè)務(wù)的轉化。

作者：Stephen Moyers

翻譯：肆非