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