緊跟潮流的五種下拉菜單樣式,讓你的網(wǎng)站就是與眾不同

下拉菜單樣式是懸停式菜單，這種設(shè)計(jì)模式對(duì)于今天的用戶來(lái)說(shuō)已經(jīng)不太起作用了。這個(gè)概念很的操作性過(guò)于繁瑣，并切不總是能夠很好地在小屏的網(wǎng)頁(yè)設(shè)計(jì)中被轉(zhuǎn)換。

設(shè)計(jì)師在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候應(yīng)該充分的考慮用戶的需求（畢竟設(shè)計(jì)最終是要給到用戶手里進(jìn)行檢驗(yàn)的）。作為一個(gè)用戶，肯定希望菜單和導(dǎo)航選項(xiàng)更易于使用，易于理解，并且不會(huì)在幾秒鐘內(nèi)提供比他們想象中更多選項(xiàng)（這可能導(dǎo)致他們無(wú)所適從）。導(dǎo)航菜單應(yīng)與終端設(shè)備無(wú)關(guān)，但是在不同設(shè)備上應(yīng)以相同的方式工作，創(chuàng)建單一體驗(yàn)，跨設(shè)備類型。那么你能做什么來(lái)告別那些下拉菜單呢？這里我們有五個(gè)選擇供你參考。

一.卡式導(dǎo)航
卡片式，卡片式和更多的卡片式?？雌饋?lái)設(shè)計(jì)師（和用戶）可以從中得到足夠友好體驗(yàn)。那么為什么不讓卡片式成為選的導(dǎo)航/菜單選項(xiàng)呢？
從主頁(yè)上的卡片圖案開始，這是一個(gè)全屏體驗(yàn)時(shí)代。然后，每張卡片將用戶帶到網(wǎng)站的不同部分。這個(gè)想法是如此簡(jiǎn)單直觀，任何用戶都能夠直觀的瀏覽整個(gè)網(wǎng)站流程，輕松找到他們正在尋找的內(nèi)容。
此外，響應(yīng)卡片式設(shè)計(jì)能夠隨后在移動(dòng)設(shè)備的屏幕上“變換到位”，以便跨平臺(tái)的體驗(yàn)相似（用戶會(huì)愛上你的）。
如果你需要混合式設(shè)計(jì)，試著考慮以卡片式的界面作為承載內(nèi)容的“盒子”?；旌喜煌目ㄆ瑯邮健淖?，圖像，視頻，使用戶可以瀏覽整體網(wǎng)頁(yè)設(shè)計(jì)的同時(shí)與多個(gè)元素進(jìn)行交互。上面的katvig做到了一個(gè)很好的范例，結(jié)合多種卡片樣式，顏色和簡(jiǎn)單的動(dòng)畫來(lái)吸引用戶注意特定的元素。
二.粘性菜單
簡(jiǎn)單可用的粘性菜單是幫助用戶瀏覽你網(wǎng)站整體的最簡(jiǎn)單的方法。創(chuàng)建一個(gè)簡(jiǎn)單的菜單結(jié)構(gòu)，只需要幾個(gè)重要元素，并確保粘性元素找到并鎖定到屏幕上的特定位置。
大多數(shù)時(shí)候，這些菜單欄的原始狀態(tài)是大的，然后通過(guò)變換折疊成更小的版本，固定在每個(gè)頁(yè)面上的屏幕頂部。
the bloomberg mayors challenge的網(wǎng)站設(shè)計(jì)在這方面做的很棒。菜單的位置從屏幕中間移動(dòng)到主頁(yè)頂部，以此提供視覺興趣，并粘貼在網(wǎng)站中的其他頁(yè)面。此外，菜單還提供了用戶可能需要的其他一些內(nèi)容，例如社交媒體圖標(biāo)，以便快速訪問(wèn)和快速更改語(yǔ)言。
這種簡(jiǎn)單的解決方案是你可以做的最方便用戶的事情之一。這就是為什么粘性菜單是許多“套餐”網(wǎng)站主題最受歡迎的銷售功能。
三.垂直側(cè)面菜單
這是世界上最受歡迎的兩個(gè)網(wǎng)站（twitter和facebook）中最受歡迎功能，其他許多網(wǎng)站都沒(méi)有利用垂直側(cè)面菜單導(dǎo)航。也許是時(shí)候開始了。
兩個(gè)社交媒體網(wǎng)站在網(wǎng)頁(yè)設(shè)計(jì)中都將重要元素納入到側(cè)欄式導(dǎo)航中。窄立柱樣式可以很好的保存大量簡(jiǎn)單的文本信息，使事情更容易，并且一目了然。
在菜單的位置上，無(wú)論你選擇位于屏幕左側(cè)還是右側(cè)都是可以的（不過(guò)它們各自還是有一些優(yōu)點(diǎn)和缺點(diǎn)的），我會(huì)考慮導(dǎo)航與其他圖像的運(yùn)作方式來(lái)決定最終的位置。網(wǎng)站的其余部分是否需要統(tǒng)一方向拉到一邊或另一邊？主視覺圖像可以引導(dǎo)用戶查看導(dǎo)航嗎？你可以嘗試以一個(gè)大圖片的方式來(lái)思考元素，創(chuàng)造出一個(gè)單一，統(tǒng)一的感覺。
四.滾動(dòng)面板
無(wú)論你多么喜歡滾動(dòng)，使用諸如視差或面板之類的滾動(dòng)效果，只要可以將用戶引導(dǎo)到網(wǎng)站設(shè)計(jì)的不同部分就都是有效的導(dǎo)航方式。雖然我們很多人（包括我自己）在幾年前就提出了滾動(dòng)，但其真正的發(fā)展基于較小的高分辨屏幕設(shè)備的流行，使得這種高可用功能的導(dǎo)航模式重新出現(xiàn)在公眾的視野中。
通過(guò)這種形式，用戶不必滾動(dòng)鼠標(biāo)向下移動(dòng)頁(yè)面，所以你不必急于在第一屏上填充每個(gè)鏈接或信息。將html5作為你的的優(yōu)勢(shì)，構(gòu)建一個(gè)網(wǎng)站，使導(dǎo)航成為用戶身臨其境的體驗(yàn)的一部分（實(shí)際上，用戶甚至可能無(wú)法識(shí)別導(dǎo)航的真實(shí)感覺）。
為了使其工作，你必須做的不僅僅是創(chuàng)建一個(gè)長(zhǎng)鏈接或一堆鏈接。設(shè)計(jì)必然會(huì)帶來(lái)影響，提醒用戶你正在做什么，通過(guò)“屏幕”之間的顏色創(chuàng)建視覺分離，并包含大量可點(diǎn)擊區(qū)域，可以將用戶的下一步操作直接告訴用戶。
如果你擔(dān)心某些用戶可能需要更傳統(tǒng)的網(wǎng)站地圖樣式菜單，請(qǐng)考慮將其放在網(wǎng)站設(shè)計(jì)的底部欄中。你最終會(huì)得到一個(gè)更加流線型的設(shè)計(jì)，并將這些可鏈接的項(xiàng)目保留在單一位置，供偏于傳統(tǒng)的用戶使用。
五.隱藏式漢堡導(dǎo)航
在你陷入“我討厭漢堡包圖標(biāo)”這個(gè)話題之前，重新仔細(xì)想想，無(wú)論你喜歡與否，這個(gè)小小的圖標(biāo)已經(jīng)變成了一個(gè)彈出、擺動(dòng)或者隱藏的菜單符號(hào)了。用戶似乎以及習(xí)慣于這種引用了。雖然許多設(shè)計(jì)師似乎都不喜歡它，但是你可能最終也會(huì)在你的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中使用到它。
所以，放棄抵抗吧。
相反，要努力尋找以及創(chuàng)造出更好的方法將圖標(biāo)整合到整個(gè)導(dǎo)航模式中。對(duì)于現(xiàn)在開放為簡(jiǎn)約的全屏菜單模式，你需要全面地挖掘漢堡包圖標(biāo)，如上面trivium art history在其網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用的一樣。
漢堡導(dǎo)航的訣竅在于簡(jiǎn)單，僅此而已。菜單是粗體的，為用戶提供了幾個(gè)選擇，并且易于在任何設(shè)備上使用?，F(xiàn)在誰(shuí)還需要幾十個(gè)菜單選項(xiàng)呢？大部分用戶將從內(nèi)部的搜索引擎上登陸你的網(wǎng)站或直接輸入你的網(wǎng)址。
總結(jié)
導(dǎo)航模式和菜單風(fēng)格是網(wǎng)站設(shè)計(jì)的一個(gè)不斷發(fā)展的部分，在這里的許多趨勢(shì)比其他地方更慢。這可能是由于設(shè)計(jì)不同風(fēng)格的復(fù)雜性，對(duì)于謹(jǐn)慎的設(shè)計(jì)者來(lái)說(shuō)，它們?cè)诳紤]網(wǎng)頁(yè)設(shè)計(jì)導(dǎo)航樣式的時(shí)候往往考慮的是更加接受的用戶模式，因?yàn)檫@確實(shí)是比較保險(xiǎn)的。
教訓(xùn)是：簡(jiǎn)單的導(dǎo)航往往是更好的。如果你現(xiàn)在仍在使用笨重而且過(guò)于復(fù)雜的下拉菜單的話，那是時(shí)候改變了。

網(wǎng)頁(yè)名稱：緊跟潮流的五種下拉菜單樣式,讓你的網(wǎng)站就是與眾不同
鏈接地址：http://muchs.cn/news/106524.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)