個性化元素確實可以讓網(wǎng)站更加有創(chuàng)意，但是不管一個網(wǎng)站多么有創(chuàng)意，沒有良好的用戶體驗都是難以穩(wěn)住顧客群的。而導(dǎo)航菜單是決定網(wǎng)站用戶體驗和可用性的重要因素之一，有效的導(dǎo)航菜單能夠讓用戶以最簡單、最方便的方式達(dá)到網(wǎng)站的不同頁面，快速獲取自己想要的信息，優(yōu)化用戶的體驗。從搜索引擎的角度來看，導(dǎo)航菜單欄也是它們比較看重的元素之一，因為它上面布局了產(chǎn)品頁面或其他網(wǎng)站頁面的導(dǎo)向鏈接，是整個網(wǎng)站回流的核心位置。一個糟糕的導(dǎo)航菜單會讓用戶體驗不舒服，用戶流失，更談不上轉(zhuǎn)化率、銷量了。
所以，怎樣做出一個吸人眼球且有效的導(dǎo)航菜單尤為重要。今天小飛主要介紹一下導(dǎo)航菜單設(shè)計應(yīng)該遵循的基本原則，網(wǎng)站常見的幾種導(dǎo)航菜單樣式，以及相應(yīng)的栗子，希望大家可以通過這些栗子更好理解不同導(dǎo)航菜單的樣式，做出更優(yōu)秀的導(dǎo)航菜單。
導(dǎo)航菜單設(shè)計的基本原則：
1. 位置恰當(dāng)
導(dǎo)航菜單在網(wǎng)站上的位置十分重要。根據(jù)美國一項眼球追蹤設(shè)備研究得出，用戶對網(wǎng)頁的瀏覽視線是呈"F"型(即網(wǎng)頁瀏覽注意力"F"現(xiàn)象)，這是說用戶在瀏覽網(wǎng)站時更容易注意到網(wǎng)站的上方和左側(cè)，這也是為什么用戶體驗優(yōu)化要求網(wǎng)站設(shè)計時將最重要的信息放在網(wǎng)頁的左上方。因此為了更能吸引用戶的注意力，我們應(yīng)該將導(dǎo)航菜單放在網(wǎng)站的上方或左側(cè)，占據(jù)有利的位置。
2. 簡潔明了
一個有效網(wǎng)站導(dǎo)航的關(guān)鍵就在于簡單明了。就算網(wǎng)站的內(nèi)容分類五花八門，涉及多個鏈接，也不要讓用戶覺得復(fù)雜。做到這點我們需要先建立好網(wǎng)站的信息框架，將網(wǎng)站內(nèi)容有邏輯的串聯(lián)起來，再決定導(dǎo)航菜單的樣式。如果你不太確定目標(biāo)用戶的喜好或邏輯思考方式，可以借助一些測試技巧比如焦點團體法和卡片分類法。在這小飛簡單的介紹一下這兩種用戶測試方法，焦點團體法是指組織特定的用戶針對特定的話題進行非正式的討論，以獲得用戶對某項話題的認(rèn)知和理解，卡片分類法是指將一副卡片(每張卡片上有詞匯或圖片)，讓特定用戶根據(jù)自己的喜好進行排序，獲取用戶的真實想法。總而言之，這兩種方法都是為了獲取用戶對于網(wǎng)站的看法，更好的服務(wù)于用戶，終極目標(biāo)都是給用戶提供良好的體驗。
網(wǎng)站的信息框架已經(jīng)構(gòu)建好，所有內(nèi)容都已按邏輯順序進行分類，就大功告成了?No，導(dǎo)航菜單的文本措辭也要簡潔明了，這樣才能發(fā)揮導(dǎo)航菜單的效用。在選擇菜單文本時，我們應(yīng)該使用清晰、簡單易懂的文本，盡量用最簡單的方式表達(dá)傳遞信息。盡量使用用戶熟悉的詞語，千萬不要自己發(fā)明創(chuàng)造一個詞來顯示我們的創(chuàng)造力，讓用戶覺得困惑不解絕對不是一個好主意。
3. 合理配色
導(dǎo)航菜單的配色也很重要，顏色的運用可以讓它更有效，更方便用戶操作，比如，當(dāng)前頁面所對應(yīng)的按鈕可以相應(yīng)地變成灰色。我們還可以使用不同顏色突出網(wǎng)站內(nèi)容的不同分類，不過要注意菜單項和文本的顏色是否相近，避免因為顏色相近造成的文本顯示不清，信息的傳遞在網(wǎng)站中始終是很重要的。另外，導(dǎo)航上配色的應(yīng)用從某種程度上來說也代表著網(wǎng)站的個性化品質(zhì)，決定著網(wǎng)站的風(fēng)格和格調(diào)。
創(chuàng)意十足的導(dǎo)航菜單設(shè)計
一提到網(wǎng)站導(dǎo)航菜單設(shè)計樣式，小飛相信大家腦海中第一個浮現(xiàn)就是水平導(dǎo)航菜單。水平導(dǎo)航菜單是最經(jīng)典、最簡單的設(shè)計樣式，它也是"資歷"最久的，經(jīng)過時間的檢驗歷久彌新，很多大型公司網(wǎng)站仍在使用這一樣式，比如谷歌、百度等搜索引擎的網(wǎng)站。但是要是比較導(dǎo)航設(shè)計的創(chuàng)意性的話，水平導(dǎo)航菜單可能要顯得平淡許多了。所以今天小飛帶大家看看其他一些有效、別出心裁的導(dǎo)航菜單設(shè)計。
垂直導(dǎo)航菜單
垂直導(dǎo)航菜單也算是比較經(jīng)典的導(dǎo)航菜單設(shè)計樣式，它是相對于水平菜單而言的，主要將菜單項放在網(wǎng)頁的左側(cè)或右側(cè)。小飛在前面也聊過垂直導(dǎo)航菜單在網(wǎng)站設(shè)計中的優(yōu)缺點，大家如果感興趣的話可以看一下《在網(wǎng)站中應(yīng)該使用垂直導(dǎo)航菜單嗎? 》。下面是垂直導(dǎo)航菜單的一個栗子(將菜單放在網(wǎng)站的右側(cè))：
下拉菜單
就網(wǎng)站設(shè)計而言，下拉菜單比較好的一個選擇，因為它可以幫助保持網(wǎng)站布局的簡單、干凈。不過，小飛建議不要使用多于兩級的下拉菜單，因為多于兩級的下拉菜單常常會讓用戶覺得內(nèi)容很多，會讓網(wǎng)站看上去很混亂。還有，下拉菜單中的菜單項也不要超過10-12個，這也是為了遵循導(dǎo)航菜單應(yīng)簡潔明了的準(zhǔn)則。下面是一個比較糟糕的栗子：二級菜單下面還有三級菜單，嚴(yán)重的影響了網(wǎng)站設(shè)計的美感。
超大導(dǎo)航下拉菜單
超大導(dǎo)航下拉菜單的設(shè)計是高容量鏈接網(wǎng)站的典型解決方案。這種類型的導(dǎo)航菜單通常分門別類，將網(wǎng)站中的所有欄目都一一呈現(xiàn)出來，可以讓用戶一目了然。超大導(dǎo)航下拉菜單尤其適合電子商務(wù)的網(wǎng)站，因為這種形式的導(dǎo)航常常可以充當(dāng)一個銷售員的角色，用來推銷著網(wǎng)站中最暢銷的產(chǎn)品，或者最流行的欄目。
隱藏式菜單
隱藏式菜單，顧名思義，隱藏各種導(dǎo)航選項。提到隱藏式菜單，大多數(shù)人都會想起漢堡圖標(biāo)(見下圖)。隱藏式菜單可以節(jié)約網(wǎng)站的空間，保持網(wǎng)站的簡約，讓用戶將更多的注意力幾種在網(wǎng)站的重要信息上比如網(wǎng)站內(nèi)容、圖片或者視頻。而且，這種隱藏式的菜單在小屏幕的移動設(shè)備上受到廣泛的歡迎，因為移動用戶可以在空間不夠用的時候點擊圖標(biāo)將導(dǎo)航頁面隱藏起來。
全屏導(dǎo)航菜單
這種類型的導(dǎo)航菜單經(jīng)常需要由一個按鈕或鏈接觸發(fā)，比如漢堡圖標(biāo)。在未點擊按鈕或鏈接之前，網(wǎng)站只顯示背景圖片或幾行文字，用戶可以全身心的關(guān)注這些內(nèi)容，而在點擊之后，占據(jù)整個屏幕的菜單欄就會出現(xiàn)。這在移動設(shè)備上看來可能不夠驚喜，但是通過電腦屏幕顯示時，這種設(shè)計方式新穎十足，很能夠吸發(fā)用戶的好奇心。
單一選項菜單
這種類型的導(dǎo)航菜單和長滾動條的網(wǎng)站結(jié)合在一起常會產(chǎn)生讓人意想不到的結(jié)果，它也可以作為進入網(wǎng)站不同頁面的的入口。單一選項菜單時指網(wǎng)站的主頁面上只有一個菜單項，比如下圖中的"EXPLORE YOUR DESERT"，它的魅力在于減少給用戶提供的選擇，可以通過僅有的信息給用戶留下強烈而深刻的第一印象，更加直接的引導(dǎo)用戶。因為只有一個菜單項，如果用戶愿意點擊繼續(xù)，這意味著他們有很大的可能性持續(xù)瀏覽下去。通常，這種菜單形式常用在主頁面的元素上，比如標(biāo)題、標(biāo)語、圖片或行為引導(dǎo)按鈕上。不過我們在應(yīng)用這種設(shè)計方式時千萬要記住，任何新的設(shè)計都需要一定的測試，目標(biāo)用戶能夠接受的導(dǎo)航菜單才是適合的。
導(dǎo)航菜單的重要性不言而喻，今天小飛已經(jīng)介紹了幾種很有創(chuàng)意的導(dǎo)航菜單設(shè)計，看完你對自己網(wǎng)站的導(dǎo)航有什么新的想法嗎?如果覺得有比較適合自己的網(wǎng)站的導(dǎo)航樣式可以大膽嘗試一下，不過記住：不要為了創(chuàng)新而創(chuàng)新，不要為了創(chuàng)意而犧牲了網(wǎng)站的可讀性?？靵砥痫w頁自助建站平臺（）做一個網(wǎng)站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
