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