當前位置:首頁 >  站長 >  網(wǎng)站運營 >  正文

創(chuàng)意導航菜單最新趨勢分析 告訴你為啥別人的菜單才好看(含6個實用例子)

 2017-09-21 15:38  來源: A5企業(yè)專欄   我來投稿 撤稿糾錯

  域名預訂/競價,好“米”不錯過

個性化元素確實可以讓網(wǎng)站更加有創(chuàng)意,但是不管一個網(wǎng)站多么有創(chuàng)意,沒有良好的用戶體驗都是難以穩(wěn)住顧客群的。而導航菜單是決定網(wǎng)站用戶體驗和可用性的重要因素之一,有效的導航菜單能夠讓用戶以最簡單、最方便的方式達到網(wǎng)站的不同頁面,快速獲取自己想要的信息,優(yōu)化用戶的體驗。從搜索引擎的角度來看,導航菜單欄也是它們比較看重的元素之一,因為它上面布局了產(chǎn)品頁面或其他網(wǎng)站頁面的導向鏈接,是整個網(wǎng)站回流的核心位置。一個糟糕的導航菜單會讓用戶體驗不舒服,用戶流失,更談不上轉(zhuǎn)化率、銷量了。

所以,怎樣做出一個吸人眼球且有效的導航菜單尤為重要。今天小飛主要介紹一下導航菜單設計應該遵循的基本原則,網(wǎng)站常見的幾種導航菜單樣式,以及相應的栗子,希望大家可以通過這些栗子更好理解不同導航菜單的樣式,做出更優(yōu)秀的導航菜單。

導航菜單設計的基本原則:

1. 位置恰當

導航菜單在網(wǎng)站上的位置十分重要。根據(jù)美國一項眼球追蹤設備研究得出,用戶對網(wǎng)頁的瀏覽視線是呈"F"型(即網(wǎng)頁瀏覽注意力"F"現(xiàn)象),這是說用戶在瀏覽網(wǎng)站時更容易注意到網(wǎng)站的上方和左側(cè),這也是為什么用戶體驗優(yōu)化要求網(wǎng)站設計時將最重要的信息放在網(wǎng)頁的左上方。因此為了更能吸引用戶的注意力,我們應該將導航菜單放在網(wǎng)站的上方或左側(cè),占據(jù)有利的位置。

2. 簡潔明了

一個有效網(wǎng)站導航的關鍵就在于簡單明了。就算網(wǎng)站的內(nèi)容分類五花八門,涉及多個鏈接,也不要讓用戶覺得復雜。做到這點我們需要先建立好網(wǎng)站的信息框架,將網(wǎng)站內(nèi)容有邏輯的串聯(lián)起來,再決定導航菜單的樣式。如果你不太確定目標用戶的喜好或邏輯思考方式,可以借助一些測試技巧比如焦點團體法和卡片分類法。在這小飛簡單的介紹一下這兩種用戶測試方法,焦點團體法是指組織特定的用戶針對特定的話題進行非正式的討論,以獲得用戶對某項話題的認知和理解,卡片分類法是指將一副卡片(每張卡片上有詞匯或圖片),讓特定用戶根據(jù)自己的喜好進行排序,獲取用戶的真實想法??偠灾?,這兩種方法都是為了獲取用戶對于網(wǎng)站的看法,更好的服務于用戶,終極目標都是給用戶提供良好的體驗。

網(wǎng)站的信息框架已經(jīng)構(gòu)建好,所有內(nèi)容都已按邏輯順序進行分類,就大功告成了?No,導航菜單的文本措辭也要簡潔明了,這樣才能發(fā)揮導航菜單的效用。在選擇菜單文本時,我們應該使用清晰、簡單易懂的文本,盡量用最簡單的方式表達傳遞信息。盡量使用用戶熟悉的詞語,千萬不要自己發(fā)明創(chuàng)造一個詞來顯示我們的創(chuàng)造力,讓用戶覺得困惑不解絕對不是一個好主意。

3. 合理配色

導航菜單的配色也很重要,顏色的運用可以讓它更有效,更方便用戶操作,比如,當前頁面所對應的按鈕可以相應地變成灰色。我們還可以使用不同顏色突出網(wǎng)站內(nèi)容的不同分類,不過要注意菜單項和文本的顏色是否相近,避免因為顏色相近造成的文本顯示不清,信息的傳遞在網(wǎng)站中始終是很重要的。另外,導航上配色的應用從某種程度上來說也代表著網(wǎng)站的個性化品質(zhì),決定著網(wǎng)站的風格和格調(diào)。

創(chuàng)意十足的導航菜單設計

一提到網(wǎng)站導航菜單設計樣式,小飛相信大家腦海中第一個浮現(xiàn)就是水平導航菜單。水平導航菜單是最經(jīng)典、最簡單的設計樣式,它也是"資歷"最久的,經(jīng)過時間的檢驗歷久彌新,很多大型公司網(wǎng)站仍在使用這一樣式,比如谷歌、百度等搜索引擎的網(wǎng)站。但是要是比較導航設計的創(chuàng)意性的話,水平導航菜單可能要顯得平淡許多了。所以今天小飛帶大家看看其他一些有效、別出心裁的導航菜單設計。

垂直導航菜單

垂直導航菜單也算是比較經(jīng)典的導航菜單設計樣式,它是相對于水平菜單而言的,主要將菜單項放在網(wǎng)頁的左側(cè)或右側(cè)。小飛在前面也聊過垂直導航菜單在網(wǎng)站設計中的優(yōu)缺點,大家如果感興趣的話可以看一下《在網(wǎng)站中應該使用垂直導航菜單嗎? 》。下面是垂直導航菜單的一個栗子(將菜單放在網(wǎng)站的右側(cè)):

下拉菜單

就網(wǎng)站設計而言,下拉菜單比較好的一個選擇,因為它可以幫助保持網(wǎng)站布局的簡單、干凈。不過,小飛建議不要使用多于兩級的下拉菜單,因為多于兩級的下拉菜單常常會讓用戶覺得內(nèi)容很多,會讓網(wǎng)站看上去很混亂。還有,下拉菜單中的菜單項也不要超過10-12個,這也是為了遵循導航菜單應簡潔明了的準則。下面是一個比較糟糕的栗子:二級菜單下面還有三級菜單,嚴重的影響了網(wǎng)站設計的美感。

超大導航下拉菜單

超大導航下拉菜單的設計是高容量鏈接網(wǎng)站的典型解決方案。這種類型的導航菜單通常分門別類,將網(wǎng)站中的所有欄目都一一呈現(xiàn)出來,可以讓用戶一目了然。超大導航下拉菜單尤其適合電子商務的網(wǎng)站,因為這種形式的導航常常可以充當一個銷售員的角色,用來推銷著網(wǎng)站中最暢銷的產(chǎn)品,或者最流行的欄目。

隱藏式菜單

隱藏式菜單,顧名思義,隱藏各種導航選項。提到隱藏式菜單,大多數(shù)人都會想起漢堡圖標(見下圖)。隱藏式菜單可以節(jié)約網(wǎng)站的空間,保持網(wǎng)站的簡約,讓用戶將更多的注意力幾種在網(wǎng)站的重要信息上比如網(wǎng)站內(nèi)容、圖片或者視頻。而且,這種隱藏式的菜單在小屏幕的移動設備上受到廣泛的歡迎,因為移動用戶可以在空間不夠用的時候點擊圖標將導航頁面隱藏起來。

全屏導航菜單

這種類型的導航菜單經(jīng)常需要由一個按鈕或鏈接觸發(fā),比如漢堡圖標。在未點擊按鈕或鏈接之前,網(wǎng)站只顯示背景圖片或幾行文字,用戶可以全身心的關注這些內(nèi)容,而在點擊之后,占據(jù)整個屏幕的菜單欄就會出現(xiàn)。這在移動設備上看來可能不夠驚喜,但是通過電腦屏幕顯示時,這種設計方式新穎十足,很能夠吸發(fā)用戶的好奇心。

單一選項菜單

這種類型的導航菜單和長滾動條的網(wǎng)站結(jié)合在一起常會產(chǎn)生讓人意想不到的結(jié)果,它也可以作為進入網(wǎng)站不同頁面的的入口。單一選項菜單時指網(wǎng)站的主頁面上只有一個菜單項,比如下圖中的"EXPLORE YOUR DESERT",它的魅力在于減少給用戶提供的選擇,可以通過僅有的信息給用戶留下強烈而深刻的第一印象,更加直接的引導用戶。因為只有一個菜單項,如果用戶愿意點擊繼續(xù),這意味著他們有很大的可能性持續(xù)瀏覽下去。通常,這種菜單形式常用在主頁面的元素上,比如標題、標語、圖片或行為引導按鈕上。不過我們在應用這種設計方式時千萬要記住,任何新的設計都需要一定的測試,目標用戶能夠接受的導航菜單才是適合的。

導航菜單的重要性不言而喻,今天小飛已經(jīng)介紹了幾種很有創(chuàng)意的導航菜單設計,看完你對自己網(wǎng)站的導航有什么新的想法嗎?如果覺得有比較適合自己的網(wǎng)站的導航樣式可以大膽嘗試一下,不過記?。翰灰獮榱藙?chuàng)新而創(chuàng)新,不要為了創(chuàng)意而犧牲了網(wǎng)站的可讀性??靵砥痫w頁自助建站平臺()做一個網(wǎng)站吧!

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關標簽
起飛頁建站

相關文章

  • 響應式網(wǎng)站中優(yōu)化用戶體驗的7個關鍵點

    隨著移動設備的不斷興起,響應式設計越來越受到大眾的喜愛,站長們在搭建網(wǎng)站時也更加傾向于選擇響應式網(wǎng)站。不過,大多數(shù)站長們都認為既然響應式網(wǎng)站可智能根據(jù)設備屏幕大小呈現(xiàn)不同的展示效果,那就不用再對移動端的網(wǎng)站進行手動調(diào)整了。其實這種看法是片面的,響應式網(wǎng)站雖然自身具備一定的特質(zhì),但有時PC端網(wǎng)站和移動

  • 盤點2017年最受歡迎的10個商城范例:我們從中可以得到哪些啟示?

    在電商和線上購物快速發(fā)展的今天,擁有一個商城網(wǎng)站很是必要,關于試水獨立商城的好處大家可以瀏覽《有了淘寶京東,為什么還要自建商城網(wǎng)站?》查看。但是,搭建商城網(wǎng)站并不簡單,慶幸的是目前市面上涌現(xiàn)了不少建站平臺,起飛頁自助建站平臺就是其中一個,各位商家可以借助起飛頁輕松搭建出一個好看、實用的商城網(wǎng)站。不過

    標簽:
    起飛頁建站
  • 讓首頁背景動起來是怎樣一種感覺?8張圖告訴你真相!

    現(xiàn)在越來越多的設計師開始在網(wǎng)頁中使用循環(huán)視頻作為背景,這種現(xiàn)象的出現(xiàn)主要有兩個原因。一方面,移動設備性能不斷完善,網(wǎng)速越來越快,用戶能夠且有條件在移動設備上瀏覽視頻背景的網(wǎng)站;另一方面,隨著HTML5技術的發(fā)展,很多主流瀏覽器的視頻標簽都支持循環(huán)(Loop)屬性,網(wǎng)頁上單個或一系列視頻短片的循環(huán)播放

    標簽:
    起飛頁建站
  • 缺乏靈感?給你8個值得每天學習的頂尖設計網(wǎng)站

    網(wǎng)站設計是一種藝術,它離不開靈感和創(chuàng)意。但靈感與創(chuàng)意的涌現(xiàn)是需要碰撞、需要時機的,大多數(shù)設計師都不可能每時每刻都靈感爆棚。當您缺乏設計靈感時,不妨看一看下面這些網(wǎng)站,它們都收錄了豐富的素材,都有許多獨立設計師上傳的優(yōu)質(zhì)作品,沒準這些設計就能讓你眼前一亮,獲得一些想法或啟發(fā)。趕緊和小飛一起看看這8個值

    標簽:
    起飛頁建站
  • 目前為止用戶體驗度最好的表單:浮動標簽式的表單

    在當今這個互聯(lián)網(wǎng)時代,填寫表單對用戶來說就是家常便飯,在網(wǎng)站進行注冊登錄時、在網(wǎng)上購物時,都免不了填寫表單這一環(huán)。表單是網(wǎng)頁設計中重要的組成部分之一,在獲取用戶信息方面發(fā)揮著不可或缺的作用,它是用戶和網(wǎng)站的一種互動形式,這種形式的互動越順暢,網(wǎng)站的用戶轉(zhuǎn)化率就越高。這也是為什么許多站長們一直在研究如

熱門排行

信息推薦