不管你喜歡不喜歡,漢堡圖標(biāo)反正已經(jīng)是大勢(shì)所趨了。今年無(wú)數(shù)的網(wǎng)站將這個(gè)小元素納入到界面中來(lái),成為頁(yè)面導(dǎo)航的重要組成部分。不過(guò)漢堡圖標(biāo)并不是今年唯一的導(dǎo)航設(shè)計(jì)趨勢(shì)。全屏導(dǎo)航、底部導(dǎo)航等許多設(shè)計(jì)手法都是網(wǎng)頁(yè)設(shè)計(jì)師們的心頭好。今天這篇文章將會(huì)對(duì)今年所流行的10個(gè)導(dǎo)航設(shè)計(jì)趨勢(shì)進(jìn)行總結(jié),并附上精彩案例若干,記得收藏喲。
當(dāng)導(dǎo)航是整個(gè)網(wǎng)頁(yè)設(shè)計(jì)的核心的時(shí)候,頁(yè)面會(huì)是怎么樣的?只要合理地策劃整合,全屏導(dǎo)航其實(shí)是一種非常有效的技術(shù),用戶可以更加便捷地切換到不同的頁(yè)面,內(nèi)容成為更加觸手可及的東西。
全屏導(dǎo)航式頁(yè)面可以做的非常明顯,也可以以更加微妙的方式呈現(xiàn)出來(lái)。用戶是否真的非得清楚地意識(shí)到它是導(dǎo)航呢?并不一定,如果你設(shè)計(jì)的夠合理,用戶會(huì)在無(wú)意識(shí)間充分運(yùn)用起它的導(dǎo)航功能。
絕大部分的導(dǎo)航會(huì)置于網(wǎng)頁(yè)的頂部,這也是最常見(jiàn)的方式。頂部的導(dǎo)航符合用戶的閱讀習(xí)慣,也符合通常的網(wǎng)頁(yè)設(shè)計(jì)的邏輯。
但是置于底部的導(dǎo)航欄更有意思,它的設(shè)計(jì)不再拘泥于頂部導(dǎo)航設(shè)計(jì)的規(guī)程,它可以設(shè)計(jì)得更大,在許多單頁(yè)式頁(yè)面中這種導(dǎo)航的樣式還可以更加自由多樣。
不過(guò)這種導(dǎo)航設(shè)計(jì)最好是常駐于底部,避免用戶迷失,方便定位也易于回到首頁(yè)。
打破常規(guī)設(shè)計(jì)的手法有很多,其中之一就是將導(dǎo)航菜當(dāng)設(shè)計(jì)成縱向的。垂直的導(dǎo)航設(shè)計(jì)并不是簡(jiǎn)單的將橫向變?yōu)榭v向的就成,你需要結(jié)合內(nèi)容重新思考整個(gè)網(wǎng)站的布局和空間的使用。
最流行的兩種這類排版,一種是使用漢堡菜單的隱藏式的導(dǎo)航菜單,另外一種使用的是固定的側(cè)邊欄來(lái)承載菜單。
第二種菜單的有趣之處在于,它為網(wǎng)站設(shè)計(jì)提供了一種新的視覺(jué)設(shè)計(jì)可能性。同時(shí),這種導(dǎo)航在小屏幕上可以做成懸停隱藏式的,需要的時(shí)候點(diǎn)擊顯示。
有些規(guī)模較小的網(wǎng)站會(huì)選擇使用無(wú)導(dǎo)航的輕量級(jí)框架來(lái)設(shè)計(jì)網(wǎng)站,這里需要的注意的是,這類網(wǎng)站通常是單頁(yè)網(wǎng)站。這種設(shè)計(jì)其實(shí)是可行的,尤其是用作預(yù)告、預(yù)覽或者介紹功用的時(shí)候。
如果你的網(wǎng)站包含諸多頁(yè)面,其實(shí)并不推薦這種設(shè)計(jì),盡管有的網(wǎng)站還真就是這么做的,并且做的不錯(cuò)。Quincy Requin & Associes 的Q&A頁(yè)面就是這么設(shè)計(jì)的,每個(gè)問(wèn)題鏈接到一個(gè)獨(dú)立的頁(yè)面。這種功能的獨(dú)特性使得這種設(shè)計(jì)顯得并不突兀。
滑出式導(dǎo)航菜單已經(jīng)流行了一陣子了,這種設(shè)計(jì)讓移動(dòng)端的頁(yè)面設(shè)計(jì)體驗(yàn)更加優(yōu)秀,當(dāng)用戶打開(kāi)頁(yè)面的時(shí)候第一眼看到的會(huì)是主要的內(nèi)容而非菜單,給用戶更好的第一印象。耳熟能詳?shù)臐h堡圖標(biāo)在這種場(chǎng)合下出鏡率也非常之高。
當(dāng)然,這種滑出菜單的設(shè)計(jì)也可以非常靈活的運(yùn)用在大屏幕上,響應(yīng)式全屏滑出導(dǎo)航也可以給人愉悅的體驗(yàn),畢竟很少有桌面網(wǎng)頁(yè)會(huì)享有如此“移動(dòng)端”的設(shè)計(jì)福利。
這種大型的導(dǎo)航菜單設(shè)計(jì)在幾年前有短暫的流行,并且大多運(yùn)用在擁有大量細(xì)分內(nèi)容的企業(yè)站點(diǎn)。由于這種導(dǎo)航菜單的設(shè)計(jì)并不適宜于移動(dòng)端的顯示,因此并未大規(guī)模流行。不過(guò)現(xiàn)在設(shè)計(jì)師開(kāi)始重新考慮這種巨型菜單在今天使用的可能性。
作為大型零售企業(yè)的Target ,目前就采用的這樣的設(shè)計(jì)。這個(gè)巨型菜單的完成度極高,兩級(jí)式的菜單設(shè)計(jì),第一級(jí)常駐于頁(yè)面,第二級(jí)菜單占據(jù)的空間是固定的,這樣一來(lái)看起來(lái)頗為整齊。這樣的設(shè)計(jì)會(huì)讓頁(yè)面看起來(lái)整齊而干凈。
動(dòng)效是近年來(lái)的設(shè)計(jì)重頭戲,而它在導(dǎo)航中得到更多的運(yùn)用也是自然的事情。當(dāng)動(dòng)效融入導(dǎo)航設(shè)計(jì)中的時(shí)候,并不需要過(guò)于復(fù)雜的展現(xiàn)。
漂亮的懸停動(dòng)效,或者利落的跳躍效果,都可以用來(lái)引導(dǎo)用戶。案例中的導(dǎo)航設(shè)計(jì)也非常貼心,導(dǎo)航借助動(dòng)效延展成為彩色的線條,增加用戶點(diǎn)擊的面積。動(dòng)效不僅讓用戶知道他們?cè)谀睦?,而且以更加清晰的方式引?dǎo)他們?nèi)c(diǎn)擊。
小巧微妙的動(dòng)效不僅帶來(lái)不錯(cuò)的視覺(jué)加成,而且為用戶帶來(lái)驚喜,鼓勵(lì)用戶操作,提示用戶界面的邊界。
Pinterest 就是典型,它所使用的卡片式導(dǎo)航幾乎存在于網(wǎng)站的所有角落,清晰直觀,簡(jiǎn)單大氣,幾乎所有用戶都可以在這種導(dǎo)航下找到他們想要的東西。
每個(gè)卡片可以承載一個(gè)特定的種類,也可以容納若干小的分支,這種設(shè)計(jì)自由而充滿延展性,你可以在這樣的網(wǎng)站里面來(lái)回點(diǎn)擊探索一整天。
谷歌的Material Design的逐步推行則讓這種設(shè)計(jì)為大眾所熟知,并且越來(lái)越深入人心。
在絕大多數(shù)用戶對(duì)互聯(lián)網(wǎng)并不熟悉的階段,擬物化的按鈕設(shè)計(jì)是引導(dǎo)大家點(diǎn)擊的重要手段,而隨著網(wǎng)絡(luò)的大規(guī)模普及和扁平化/現(xiàn)代風(fēng)的流行,無(wú)按鈕的文字導(dǎo)航也擁有了越來(lái)越大的市場(chǎng)。
無(wú)按鈕導(dǎo)航和大圖背景配合起來(lái)非常不錯(cuò),這個(gè)時(shí)候無(wú)按鈕導(dǎo)航設(shè)計(jì)足夠簡(jiǎn)單,也具有極強(qiáng)的可讀性,可以和背景形成鮮明的對(duì)比??刂坪梦淖值拈g距,確保用戶有足夠的空間閱讀和點(diǎn)擊。
當(dāng)網(wǎng)站使用單頁(yè)設(shè)計(jì)的時(shí)候,它的導(dǎo)航就是你的手指和鼠標(biāo)。只需要你翻下去,內(nèi)容就會(huì)持續(xù)不斷地到你的眼前。
對(duì)于不含有大量?jī)?nèi)容的網(wǎng)站而言,單頁(yè)式的導(dǎo)航的效果其實(shí)非常不錯(cuò)。這樣的網(wǎng)站只需要簡(jiǎn)單的向下滾動(dòng)操作就可以搞定,用戶也期待滾動(dòng)瀏覽的結(jié)果。不過(guò)這樣的頁(yè)面需要給予用戶足夠的刺激和吸引力,才能鼓勵(lì)他們?yōu)g覽下去,所以請(qǐng)務(wù)必將有趣的內(nèi)容呈現(xiàn)給他們。
下面推薦的5個(gè)網(wǎng)站在導(dǎo)航設(shè)計(jì)上非常有特色,最好打開(kāi)網(wǎng)站仔細(xì)體會(huì)它們的獨(dú)特設(shè)計(jì)。
雖然設(shè)計(jì)師采用了標(biāo)準(zhǔn)的漢堡圖標(biāo)菜單,但是當(dāng)你點(diǎn)開(kāi)圖標(biāo)的時(shí)候,導(dǎo)航會(huì)占據(jù)全屏,非常不錯(cuò)。
你能在這個(gè)網(wǎng)站中找到導(dǎo)航元素么?設(shè)計(jì)師將導(dǎo)航隱藏在視覺(jué)化的故事當(dāng)中,非常不錯(cuò)。
這個(gè)網(wǎng)站完全是一個(gè)信息的迷宮。你的每一次點(diǎn)擊都會(huì)為你展現(xiàn)一組數(shù)據(jù)集,給你不同的選擇??雌饋?lái)它和導(dǎo)航毫無(wú)關(guān)系,但是它真就是個(gè)導(dǎo)航。
這個(gè)網(wǎng)站的導(dǎo)航是隱藏在底部的開(kāi)始按鈕旁邊的三角形當(dāng)中。這種設(shè)計(jì)方式挺特別的,鼓勵(lì)用戶去點(diǎn)擊或者滾動(dòng)。
這個(gè)網(wǎng)站同樣借助導(dǎo)航來(lái)講故事,但是不同于絕大多數(shù)的網(wǎng)站,導(dǎo)航會(huì)以更加獨(dú)特的方式,將你引導(dǎo)到更加有趣的地方。
導(dǎo)航的設(shè)計(jì)多樣而有趣,但是導(dǎo)航如何使用,還是要結(jié)合你的項(xiàng)目的具體特征來(lái)決定的。導(dǎo)航存在的目的是引導(dǎo)用戶、梳理內(nèi)容、強(qiáng)化流程,如果從用戶的角度或者設(shè)計(jì)的目標(biāo)重新思考導(dǎo)航,你會(huì)發(fā)現(xiàn)導(dǎo)航擁有許多可能性。
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)