觸屏版
全國服務(wù)熱線:0571-87205688
登錄
注冊
客戶中心
關(guān)注云客
個性化元素確實可以讓網(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)站的可讀性。
教你如何輕松獲取海量長尾關(guān)鍵詞流量
”網(wǎng)站降權(quán)“如何診斷分析以及恢復(fù)排名操作
文章如何偽原創(chuàng) SEO大牛教你如何“原創(chuàng)”網(wǎng)站文章
網(wǎng)站降權(quán)的原因 如何判斷營銷網(wǎng)站是否被百度降權(quán)了?
SEO實戰(zhàn):如何進行網(wǎng)站改版 網(wǎng)站改版注意事項
百度和谷歌在SEO方面的區(qū)別
SEO實戰(zhàn)常用的SEO工具有哪些c
SEO輔助工具,好用的SEO工具整理
搜索引擎如何評判網(wǎng)站的用戶體驗
打造一個品牌站點需要做哪些內(nèi)容
評論(0人參與,0條評論)
發(fā)布評論
最新評論