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