不管你喜歡不喜歡，漢堡圖標(biāo)反正已經(jīng)是大勢所趨了。今年無數(shù)的網(wǎng)站將這個(gè)小元素納入到界面中來，成為頁面導(dǎo)航的重要組成部分。不過漢堡圖標(biāo)并不是今年唯一的導(dǎo)航設(shè)計(jì)趨勢。全屏導(dǎo)航、底部導(dǎo)航等許多設(shè)計(jì)手法都是網(wǎng)頁設(shè)計(jì)師們的心頭好。今天這篇文章將會(huì)對今年所流行的10個(gè)導(dǎo)航設(shè)計(jì)趨勢進(jìn)行總結(jié)，記得收藏喲。

1、全屏導(dǎo)航

當(dāng)導(dǎo)航是整個(gè)網(wǎng)頁設(shè)計(jì)的核心的時(shí)候，頁面會(huì)是怎么樣的?只要合理地策劃整合，全屏導(dǎo)航其實(shí)是一種非常有效的技術(shù)，用戶可以更加便捷地切換到不同的頁面，內(nèi)容成為更加觸手可及的東西。

全屏導(dǎo)航式頁面可以做的非常明顯，也可以以更加微妙的方式呈現(xiàn)出來。用戶是否真的非得清楚地意識到它是導(dǎo)航呢?并不一定，如果你設(shè)計(jì)的夠合理，用戶會(huì)在無意識間充分運(yùn)用起它的導(dǎo)航功能。

2、底部導(dǎo)航

絕大部分的導(dǎo)航會(huì)置于網(wǎng)頁的頂部，這也是最常見的方式。頂部的導(dǎo)航符合用戶的閱讀習(xí)慣，也符合通常的網(wǎng)頁設(shè)計(jì)的邏輯。

不過這種導(dǎo)航設(shè)計(jì)最好是常駐于底部，避免用戶迷失，方便定位也易于回到首頁。

3、垂直導(dǎo)航菜單

打破常規(guī)設(shè)計(jì)的手法有很多，其中之一就是將導(dǎo)航菜當(dāng)設(shè)計(jì)成縱向的。垂直的導(dǎo)航設(shè)計(jì)并不是簡單的將橫向變?yōu)榭v向的就成，你需要結(jié)合內(nèi)容重新思考整個(gè)網(wǎng)站的布局和空間的使用。

最流行的兩種這類排版，一種是使用漢堡菜單的隱藏式的導(dǎo)航菜單，另外一種使用的是固定的側(cè)邊欄來承載菜單。

第二種菜單的有趣之處在于，它為網(wǎng)站設(shè)計(jì)提供了一種新的視覺設(shè)計(jì)可能性。同時(shí)，這種導(dǎo)航在小屏幕上可以做成懸停隱藏式的，需要的時(shí)候點(diǎn)擊顯示。

4、無導(dǎo)航模式

有些規(guī)模較小的網(wǎng)站會(huì)選擇使用無導(dǎo)航的輕量級框架來設(shè)計(jì)網(wǎng)站，這里需要的注意的是，這類網(wǎng)站通常是單頁網(wǎng)站。這種設(shè)計(jì)其實(shí)是可行的，尤其是用作預(yù)告、預(yù)覽或者介紹功用的時(shí)候。

如果你的網(wǎng)站包含諸多頁面，其實(shí)并不推薦這種設(shè)計(jì)，盡管有的網(wǎng)站還真就是這么做的，并且做的不錯(cuò)。Quincy Requin & Associes 的Q&A頁面就是這么設(shè)計(jì)的，每個(gè)問題鏈接到一個(gè)獨(dú)立的頁面。這種功能的獨(dú)特性使得這種設(shè)計(jì)顯得并不突兀。

5、滑出菜單

滑出式導(dǎo)航菜單已經(jīng)流行了一陣子了，這種設(shè)計(jì)讓移動(dòng)端的頁面設(shè)計(jì)體驗(yàn)更加優(yōu)秀，當(dāng)用戶打開頁面的時(shí)候第一眼看到的會(huì)是主要的內(nèi)容而非菜單，給用戶更好的第一印象。耳熟能詳?shù)臐h堡圖標(biāo)在這種場合下出鏡率也非常之高。

當(dāng)然，這種滑出菜單的設(shè)計(jì)也可以非常靈活的運(yùn)用在大屏幕上，響應(yīng)式全屏滑出導(dǎo)航也可以給人愉悅的體驗(yàn)，畢竟很少有桌面網(wǎng)頁會(huì)享有如此“移動(dòng)端”的設(shè)計(jì)福利。

6、巨型菜單

這種大型的導(dǎo)航菜單設(shè)計(jì)在幾年前有短暫的流行，并且大多運(yùn)用在擁有大量細(xì)分內(nèi)容的企業(yè)站點(diǎn)。由于這種導(dǎo)航菜單的設(shè)計(jì)并不適宜于移動(dòng)端的顯示，因此并未大規(guī)模流行。不過現(xiàn)在設(shè)計(jì)師開始重新考慮這種巨型菜單在今天使用的可能性。

作為大型零售企業(yè)的Target ，目前就采用的這樣的設(shè)計(jì)。這個(gè)巨型菜單的完成度極高，兩級式的菜單設(shè)計(jì)，第一級常駐于頁面，第二級菜單占據(jù)的空間是固定的，這樣一來看起來頗為整齊。這樣的設(shè)計(jì)會(huì)讓頁面看起來整齊而干凈。

7、動(dòng)畫導(dǎo)航元素

動(dòng)效是近年來的設(shè)計(jì)重頭戲，而它在導(dǎo)航中得到更多的運(yùn)用也是自然的事情。當(dāng)動(dòng)效融入導(dǎo)航設(shè)計(jì)中的時(shí)候，并不需要過于復(fù)雜的展現(xiàn)。

漂亮的懸停動(dòng)效，或者利落的跳躍效果，都可以用來引導(dǎo)用戶。案例中的導(dǎo)航設(shè)計(jì)也非常貼心，導(dǎo)航借助動(dòng)效延展成為彩色的線條，增加用戶點(diǎn)擊的面積。動(dòng)效不僅讓用戶知道他們在哪里，而且以更加清晰的方式引導(dǎo)他們?nèi)c(diǎn)擊。

小巧微妙的動(dòng)效不僅帶來不錯(cuò)的視覺加成，而且為用戶帶來驚喜，鼓勵(lì)用戶操作，提示用戶界面的邊界。

8、卡片式導(dǎo)航選項(xiàng)

Pinterest 就是典型，它所使用的卡片式導(dǎo)航幾乎存在于網(wǎng)站的所有角落，清晰直觀，簡單大氣，幾乎所有用戶都可以在這種導(dǎo)航下找到他們想要的東西。

每個(gè)卡片可以承載一個(gè)特定的種類，也可以容納若干小的分支，這種設(shè)計(jì)自由而充滿延展性，你可以在這樣的網(wǎng)站里面來回點(diǎn)擊探索一整天。

谷歌的Material Design的逐步推行則讓這種設(shè)計(jì)為大眾所熟知，并且越來越深入人心。

9、無按鈕導(dǎo)航

在絕大多數(shù)用戶對互聯(lián)網(wǎng)并不熟悉的階段，擬物化的按鈕設(shè)計(jì)是引導(dǎo)大家點(diǎn)擊的重要手段，而隨著網(wǎng)絡(luò)的大規(guī)模普及和扁平化/現(xiàn)代風(fēng)的流行，無按鈕的文字導(dǎo)航也擁有了越來越大的市場。

無按鈕導(dǎo)航和大圖背景配合起來非常不錯(cuò)，這個(gè)時(shí)候無按鈕導(dǎo)航設(shè)計(jì)足夠簡單，也具有極強(qiáng)的可讀性，可以和背景形成鮮明的對比?？刂坪梦淖值拈g距，確保用戶有足夠的空間閱讀和點(diǎn)擊。

10、單頁滾動(dòng)導(dǎo)航

當(dāng)網(wǎng)站使用單頁設(shè)計(jì)的時(shí)候，它的導(dǎo)航就是你的手指和鼠標(biāo)。只需要你翻下去，內(nèi)容就會(huì)持續(xù)不斷地到你的眼前。

對于不含有大量內(nèi)容的網(wǎng)站而言，單頁式的導(dǎo)航的效果其實(shí)非常不錯(cuò)。這樣的網(wǎng)站只需要簡單的向下滾動(dòng)操作就可以搞定，用戶也期待滾動(dòng)瀏覽的結(jié)果。不過這樣的頁面需要給予用戶足夠的刺激和吸引力，才能鼓勵(lì)他們?yōu)g覽下去，所以請務(wù)必將有趣的內(nèi)容呈現(xiàn)給他們。

結(jié)語

導(dǎo)航的設(shè)計(jì)多樣而有趣，但是導(dǎo)航如何使用，還是要結(jié)合你的項(xiàng)目的具體特征來決定的。導(dǎo)航存在的目的是引導(dǎo)用戶、梳理內(nèi)容、強(qiáng)化流程，如果從用戶的角度或者設(shè)計(jì)的目標(biāo)重新思考導(dǎo)航，你會(huì)發(fā)現(xiàn)導(dǎo)航擁有許多可能性。

河南億恩科技股份有限公司(www.ypdoo.com.cn)始創(chuàng)于2000年，專注服務(wù)器托管租用，是國家工信部認(rèn)定的綜合電信服務(wù)運(yùn)營商。億恩為近五十萬的用戶提供服務(wù)器托管、服務(wù)器租用、機(jī)柜租用、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站托管等網(wǎng)絡(luò)基礎(chǔ)服務(wù)，另有網(wǎng)總管、名片俠網(wǎng)絡(luò)推廣服務(wù)，使得客戶不斷的獲得更大的收益。
服務(wù)器/云主機(jī) 24小時(shí)售后服務(wù)電話：0371-60135900
虛擬主機(jī)/智能建站 24小時(shí)售后服務(wù)電話：0371-55621053
網(wǎng)絡(luò)版權(quán)侵權(quán)舉報(bào)電話：0371-60135995
服務(wù)熱線：0371-60135900