本文轉(zhuǎn)載自百度UEO，作者為@豆豆醬-。導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少的部分，它是網(wǎng)站訪問(wèn)者獲取所需內(nèi)容的快速通道和途徑。

導(dǎo)航讓網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示，并引導(dǎo)用戶毫不費(fèi)力地找到并管理信息。同時(shí)，導(dǎo)航位于網(wǎng)頁(yè)的中上部分，視覺(jué)中心的區(qū)域。在保持其合理的功能作用的同時(shí)，一個(gè)好的導(dǎo)航設(shè)計(jì)，是整個(gè)網(wǎng)頁(yè)設(shè)計(jì)的點(diǎn)睛之筆!

一個(gè)設(shè)計(jì)師在布局和整體規(guī)劃網(wǎng)頁(yè)設(shè)計(jì)時(shí)，導(dǎo)航總是一個(gè)重要的元素。我們會(huì)思考：

導(dǎo)航以什么形式呈現(xiàn)?

是否能夠最大程度地發(fā)揮其梳理網(wǎng)站結(jié)構(gòu)、有效傳遞信息的功能?

是否能夠烘托和配合整個(gè)頁(yè)面的設(shè)計(jì)風(fēng)格?

是否能夠別出心裁潤(rùn)色和體現(xiàn)該網(wǎng)站的特點(diǎn)又不影響其功能性?

是否能夠精益求精成為整個(gè)網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要的一筆?

那么，就讓我們一起分享和淺析一下一些讓設(shè)計(jì)師們花費(fèi)心思精雕細(xì)琢的導(dǎo)航設(shè)計(jì)吧。

導(dǎo)航的設(shè)計(jì)會(huì)根據(jù)網(wǎng)站的基本類(lèi)別、屬性和各自特點(diǎn)而有所定位。

在這里，我挑選了一些非系統(tǒng)、門(mén)戶等類(lèi)型，有明確特點(diǎn)、用戶定位、產(chǎn)品及品牌特色的品牌類(lèi)、專(zhuān)題類(lèi)網(wǎng)站。對(duì)于這些網(wǎng)站來(lái)說(shuō)，導(dǎo)航的設(shè)計(jì)將突破我們常見(jiàn)的橫向長(zhǎng)條導(dǎo)航或者豎式導(dǎo)航，會(huì)更加有意味、趣味和玩味，是能讓設(shè)計(jì)師們盡情拓展設(shè)計(jì)創(chuàng)意和思維的“有點(diǎn)兒意思”的導(dǎo)航設(shè)計(jì)!

　A. 材質(zhì)類(lèi)，給導(dǎo)航加點(diǎn)材質(zhì)!

材質(zhì)類(lèi)的導(dǎo)航，是潤(rùn)色導(dǎo)航、增加導(dǎo)航意味最常用的設(shè)計(jì)方法。在有特殊定向和用戶指向的網(wǎng)站設(shè)計(jì)里是廣被設(shè)計(jì)師們使用的手法。

這種快速、簡(jiǎn)單、效果直接的設(shè)計(jì)方式，能夠迅速將產(chǎn)品的特性和設(shè)計(jì)師的巧思呈現(xiàn)出來(lái)。并且材質(zhì)類(lèi)的導(dǎo)航設(shè)計(jì)往往都可以不必打破導(dǎo)航的基本形態(tài)，能夠很好的保持導(dǎo)航的功能性，頁(yè)面排版的整齊感。

因此可以在固定的網(wǎng)頁(yè)原型的結(jié)構(gòu)和位置上，靈活地表達(dá)產(chǎn)品的特性。設(shè)計(jì)師們可以隨心所欲雕琢內(nèi)部的材質(zhì)，從而打造不一樣的意味導(dǎo)航，成為整個(gè)頁(yè)面的小小亮點(diǎn)。

　B. 擬物類(lèi)，讓導(dǎo)航不僅僅是導(dǎo)航!

如何讓一個(gè)頁(yè)面看起來(lái)如身臨其境融入了該網(wǎng)站產(chǎn)品的世界?那么就要讓用戶的視覺(jué)體驗(yàn)真實(shí)地感受到該產(chǎn)品特性的存在。

這個(gè)時(shí)候，一個(gè)普通呆板的導(dǎo)航，遠(yuǎn)遠(yuǎn)不能滿足頁(yè)面的設(shè)計(jì)需要。

即使產(chǎn)品圖片再誘人，一個(gè)毫不融入氛圍的冷冰冰的導(dǎo)航，在頁(yè)面上不僅讓人失望更加破壞了應(yīng)該有的氣氛。所以，越來(lái)越多的設(shè)計(jì)，讓導(dǎo)航成為了烘托、增強(qiáng)網(wǎng)頁(yè)及產(chǎn)品氛圍的振奮一筆!擬物類(lèi)的導(dǎo)航，就像變色龍，在不同定位的網(wǎng)頁(yè)設(shè)計(jì)中，捕捉和適應(yīng)環(huán)境的特點(diǎn)，從而化身為環(huán)境的一部分。

擬物類(lèi)的導(dǎo)航，可以是抽屜，可以是布條、可以是樹(shù)木，可以是任何你能想到和創(chuàng)意出來(lái)的東西!打破一切既定的規(guī)則，不必一定要是長(zhǎng)條四方，不必一定要是整齊劃一的排版，擬物類(lèi)的導(dǎo)航可以將設(shè)計(jì)師的能動(dòng)性發(fā)揮到極點(diǎn)!

這樣的導(dǎo)航設(shè)計(jì)，在整個(gè)網(wǎng)頁(yè)中可以達(dá)到另外一層的功能性，那就是輔助提升產(chǎn)品給用戶的強(qiáng)大視覺(jué)認(rèn)知度，還未見(jiàn)其產(chǎn)品的詳細(xì)信息，你就能提前感受到它是干什么的，有什么樣的風(fēng)格，有什么樣的追求。讓導(dǎo)航不僅僅只是導(dǎo)航!

　C. 形態(tài)類(lèi)，換個(gè)形狀設(shè)計(jì)導(dǎo)航!

若問(wèn)到導(dǎo)航是什么樣的，大多數(shù)人都會(huì)立刻浮現(xiàn)出幾種基本的形狀和樣式，頂部的橫欄、側(cè)邊的豎欄。即便是高矮胖瘦、顏色各異、材質(zhì)各異，大多數(shù)的導(dǎo)航都不會(huì)跨出基本的界限。

那么導(dǎo)航是不是一定要遵守形狀這個(gè)“規(guī)矩”呢?答案肯定是否認(rèn)的。用戶雖然習(xí)慣了導(dǎo)航的“規(guī)矩性”，但是另類(lèi)形態(tài)的導(dǎo)航設(shè)計(jì)卻無(wú)疑給了用戶們一個(gè)新的視角，原來(lái)導(dǎo)航也可以“沒(méi)規(guī)沒(méi)距”!

那么是否可以隨意改變導(dǎo)航的形態(tài)設(shè)計(jì)呢，答案也是否定的，設(shè)計(jì)師們始終都要記住導(dǎo)航的根本屬性和用途，讓導(dǎo)航始終都不能脫離它在頁(yè)面設(shè)計(jì)中的核心作用。

如果你是一個(gè)大膽的設(shè)計(jì)師，又有新穎的設(shè)計(jì)理念和產(chǎn)品訴求，那么不妨嘗試做一次大地調(diào)整，換個(gè)形狀設(shè)計(jì)導(dǎo)航!

D. 融合類(lèi)，“和諧共進(jìn)”的導(dǎo)航設(shè)計(jì)!

有雷厲風(fēng)行搶風(fēng)頭的導(dǎo)航哥，也會(huì)有為人低調(diào)注重和諧的導(dǎo)航們。

在某些網(wǎng)頁(yè)設(shè)計(jì)中，需求的導(dǎo)向性會(huì)要求將導(dǎo)航一定程度的削弱，從而來(lái)突出產(chǎn)品的主體內(nèi)容。

那么對(duì)于這部分的導(dǎo)航設(shè)計(jì)，設(shè)計(jì)師們?cè)撊绾稳∩崮?是簡(jiǎn)單地羅列文字?還是將導(dǎo)航舍棄在邊角的位置?如何才能使得被削弱的導(dǎo)航仍然不失設(shè)計(jì)感，甚至能夠輔助主體內(nèi)容的突顯?

這個(gè)時(shí)候，對(duì)導(dǎo)航的處理和設(shè)計(jì)就能更加體現(xiàn)出一個(gè)設(shè)計(jì)師對(duì)宏觀大局的把控，以及對(duì)細(xì)節(jié)局部的掌控，讓局部服從整體，但又不是粗糙對(duì)待，反而精致得恰到好處!削弱并不是不需要設(shè)計(jì)，和諧并不是隱藏和消失。

很多優(yōu)秀的設(shè)計(jì)作品，在處理這類(lèi)情況時(shí)，通常將導(dǎo)航和網(wǎng)頁(yè)主體背景進(jìn)行關(guān)聯(lián)性的融合。從色彩的恰接、風(fēng)格感受、背景圖片的關(guān)聯(lián)、線框等多方面都可以進(jìn)行處理和設(shè)計(jì)。讓導(dǎo)航自然地呈現(xiàn)，仿佛為主體的一部分，又退而求其次，把更多的視覺(jué)焦點(diǎn)留給了主體內(nèi)容。從而完美地保持其功能性，又能與整體頁(yè)面“和諧共進(jìn)”!

E. 延展類(lèi)，導(dǎo)航設(shè)計(jì)的更多可能性!

設(shè)計(jì)是在不斷進(jìn)步的，隨著用戶體驗(yàn)的提高、用戶認(rèn)知度的拓展、產(chǎn)品需求的多樣性、設(shè)計(jì)師理念的不斷探索和更新，我們相信，導(dǎo)航設(shè)計(jì)將存在更多的可能性!也許下一個(gè)新的設(shè)計(jì)形式就誕生在你我之間!越來(lái)越多關(guān)于導(dǎo)航設(shè)計(jì)的研究和探索，將會(huì)給用戶帶來(lái)全新的視覺(jué)和使用體驗(yàn)!

本文轉(zhuǎn)載自百度UEO，作者為@豆豆醬-。導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少的部分，它是網(wǎng)站訪問(wèn)者獲取所需內(nèi)容的快速通道和途徑。

導(dǎo)航讓網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示，并引導(dǎo)用戶毫不費(fèi)力地找到并管理信息。同時(shí)，導(dǎo)航位于網(wǎng)頁(yè)的中上部分，視覺(jué)中心的區(qū)域。在保持其合理的功能作用的同時(shí)，一個(gè)好的導(dǎo)航設(shè)計(jì)，是整個(gè)網(wǎng)頁(yè)設(shè)計(jì)的點(diǎn)睛之筆!

一個(gè)設(shè)計(jì)師在布局和整體規(guī)劃網(wǎng)頁(yè)設(shè)計(jì)時(shí)，導(dǎo)航總是一個(gè)重要的元素。我們會(huì)思考：

導(dǎo)航以什么形式呈現(xiàn)?

是否能夠最大程度地發(fā)揮其梳理網(wǎng)站結(jié)構(gòu)、有效傳遞信息的功能?

是否能夠烘托和配合整個(gè)頁(yè)面的設(shè)計(jì)風(fēng)格?

是否能夠別出心裁潤(rùn)色和體現(xiàn)該網(wǎng)站的特點(diǎn)又不影響其功能性?

是否能夠精益求精成為整個(gè)網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要的一筆?

那么，就讓我們一起分享和淺析一下一些讓設(shè)計(jì)師們花費(fèi)心思精雕細(xì)琢的導(dǎo)航設(shè)計(jì)吧。

導(dǎo)航的設(shè)計(jì)會(huì)根據(jù)網(wǎng)站的基本類(lèi)別、屬性和各自特點(diǎn)而有所定位。

在這里，我挑選了一些非系統(tǒng)、門(mén)戶等類(lèi)型，有明確特點(diǎn)、用戶定位、產(chǎn)品及品牌特色的品牌類(lèi)、專(zhuān)題類(lèi)網(wǎng)站。對(duì)于這些網(wǎng)站來(lái)說(shuō)，導(dǎo)航的設(shè)計(jì)將突破我們常見(jiàn)的橫向長(zhǎng)條導(dǎo)航或者豎式導(dǎo)航，會(huì)更加有意味、趣味和玩味，是能讓設(shè)計(jì)師們盡情拓展設(shè)計(jì)創(chuàng)意和思維的“有點(diǎn)兒意思”的導(dǎo)航設(shè)計(jì)!

　A. 材質(zhì)類(lèi)，給導(dǎo)航加點(diǎn)材質(zhì)!

材質(zhì)類(lèi)的導(dǎo)航，是潤(rùn)色導(dǎo)航、增加導(dǎo)航意味最常用的設(shè)計(jì)方法。在有特殊定向和用戶指向的網(wǎng)站設(shè)計(jì)里是廣被設(shè)計(jì)師們使用的手法。

這種快速、簡(jiǎn)單、效果直接的設(shè)計(jì)方式，能夠迅速將產(chǎn)品的特性和設(shè)計(jì)師的巧思呈現(xiàn)出來(lái)。并且材質(zhì)類(lèi)的導(dǎo)航設(shè)計(jì)往往都可以不必打破導(dǎo)航的基本形態(tài)，能夠很好的保持導(dǎo)航的功能性，頁(yè)面排版的整齊感。

因此可以在固定的網(wǎng)頁(yè)原型的結(jié)構(gòu)和位置上，靈活地表達(dá)產(chǎn)品的特性。設(shè)計(jì)師們可以隨心所欲雕琢內(nèi)部的材質(zhì)，從而打造不一樣的意味導(dǎo)航，成為整個(gè)頁(yè)面的小小亮點(diǎn)。

　B. 擬物類(lèi)，讓導(dǎo)航不僅僅是導(dǎo)航!

如何讓一個(gè)頁(yè)面看起來(lái)如身臨其境融入了該網(wǎng)站產(chǎn)品的世界?那么就要讓用戶的視覺(jué)體驗(yàn)真實(shí)地感受到該產(chǎn)品特性的存在。

這個(gè)時(shí)候，一個(gè)普通呆板的導(dǎo)航，遠(yuǎn)遠(yuǎn)不能滿足頁(yè)面的設(shè)計(jì)需要。

即使產(chǎn)品圖片再誘人，一個(gè)毫不融入氛圍的冷冰冰的導(dǎo)航，在頁(yè)面上不僅讓人失望更加破壞了應(yīng)該有的氣氛。所以，越來(lái)越多的設(shè)計(jì)，讓導(dǎo)航成為了烘托、增強(qiáng)網(wǎng)頁(yè)及產(chǎn)品氛圍的振奮一筆!擬物類(lèi)的導(dǎo)航，就像變色龍，在不同定位的網(wǎng)頁(yè)設(shè)計(jì)中，捕捉和適應(yīng)環(huán)境的特點(diǎn)，從而化身為環(huán)境的一部分。

擬物類(lèi)的導(dǎo)航，可以是抽屜，可以是布條、可以是樹(shù)木，可以是任何你能想到和創(chuàng)意出來(lái)的東西!打破一切既定的規(guī)則，不必一定要是長(zhǎng)條四方，不必一定要是整齊劃一的排版，擬物類(lèi)的導(dǎo)航可以將設(shè)計(jì)師的能動(dòng)性發(fā)揮到極點(diǎn)!

這樣的導(dǎo)航設(shè)計(jì)，在整個(gè)網(wǎng)頁(yè)中可以達(dá)到另外一層的功能性，那就是輔助提升產(chǎn)品給用戶的強(qiáng)大視覺(jué)認(rèn)知度，還未見(jiàn)其產(chǎn)品的詳細(xì)信息，你就能提前感受到它是干什么的，有什么樣的風(fēng)格，有什么樣的追求。讓導(dǎo)航不僅僅只是導(dǎo)航!

　C. 形態(tài)類(lèi)，換個(gè)形狀設(shè)計(jì)導(dǎo)航!

若問(wèn)到導(dǎo)航是什么樣的，大多數(shù)人都會(huì)立刻浮現(xiàn)出幾種基本的形狀和樣式，頂部的橫欄、側(cè)邊的豎欄。即便是高矮胖瘦、顏色各異、材質(zhì)各異，大多數(shù)的導(dǎo)航都不會(huì)跨出基本的界限。

那么導(dǎo)航是不是一定要遵守形狀這個(gè)“規(guī)矩”呢?答案肯定是否認(rèn)的。用戶雖然習(xí)慣了導(dǎo)航的“規(guī)矩性”，但是另類(lèi)形態(tài)的導(dǎo)航設(shè)計(jì)卻無(wú)疑給了用戶們一個(gè)新的視角，原來(lái)導(dǎo)航也可以“沒(méi)規(guī)沒(méi)距”!

那么是否可以隨意改變導(dǎo)航的形態(tài)設(shè)計(jì)呢，答案也是否定的，設(shè)計(jì)師們始終都要記住導(dǎo)航的根本屬性和用途，讓導(dǎo)航始終都不能脫離它在頁(yè)面設(shè)計(jì)中的核心作用。

如果你是一個(gè)大膽的設(shè)計(jì)師，又有新穎的設(shè)計(jì)理念和產(chǎn)品訴求，那么不妨嘗試做一次大地調(diào)整，換個(gè)形狀設(shè)計(jì)導(dǎo)航!

D. 融合類(lèi)，“和諧共進(jìn)”的導(dǎo)航設(shè)計(jì)!

有雷厲風(fēng)行搶風(fēng)頭的導(dǎo)航哥，也會(huì)有為人低調(diào)注重和諧的導(dǎo)航們。

在某些網(wǎng)頁(yè)設(shè)計(jì)中，需求的導(dǎo)向性會(huì)要求將導(dǎo)航一定程度的削弱，從而來(lái)突出產(chǎn)品的主體內(nèi)容。

那么對(duì)于這部分的導(dǎo)航設(shè)計(jì)，設(shè)計(jì)師們?cè)撊绾稳∩崮?是簡(jiǎn)單地羅列文字?還是將導(dǎo)航舍棄在邊角的位置?如何才能使得被削弱的導(dǎo)航仍然不失設(shè)計(jì)感，甚至能夠輔助主體內(nèi)容的突顯?

這個(gè)時(shí)候，對(duì)導(dǎo)航的處理和設(shè)計(jì)就能更加體現(xiàn)出一個(gè)設(shè)計(jì)師對(duì)宏觀大局的把控，以及對(duì)細(xì)節(jié)局部的掌控，讓局部服從整體，但又不是粗糙對(duì)待，反而精致得恰到好處!削弱并不是不需要設(shè)計(jì)，和諧并不是隱藏和消失。

很多優(yōu)秀的設(shè)計(jì)作品，在處理這類(lèi)情況時(shí)，通常將導(dǎo)航和網(wǎng)頁(yè)主體背景進(jìn)行關(guān)聯(lián)性的融合。從色彩的恰接、風(fēng)格感受、背景圖片的關(guān)聯(lián)、線框等多方面都可以進(jìn)行處理和設(shè)計(jì)。讓導(dǎo)航自然地呈現(xiàn)，仿佛為主體的一部分，又退而求其次，把更多的視覺(jué)焦點(diǎn)留給了主體內(nèi)容。從而完美地保持其功能性，又能與整體頁(yè)面“和諧共進(jìn)”!

E. 延展類(lèi)，導(dǎo)航設(shè)計(jì)的更多可能性!

設(shè)計(jì)是在不斷進(jìn)步的，隨著用戶體驗(yàn)的提高、用戶認(rèn)知度的拓展、產(chǎn)品需求的多樣性、設(shè)計(jì)師理念的不斷探索和更新，我們相信，導(dǎo)航設(shè)計(jì)將存在更多的可能性!也許下一個(gè)新的設(shè)計(jì)形式就誕生在你我之間!越來(lái)越多關(guān)于導(dǎo)航設(shè)計(jì)的研究和探索，將會(huì)給用戶帶來(lái)全新的視覺(jué)和使用體驗(yàn)!