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