根據(jù)項(xiàng)目的不同，導(dǎo)航圖標(biāo)彼此區(qū)別很大，但是其中大多數(shù)會(huì)偏向于使用流行、簡(jiǎn)單、貼合移動(dòng)端的三行圖標(biāo)，這一類圖標(biāo)外觀漂亮，而且在幾乎任何環(huán)境下都比較帶感。這個(gè)小圖標(biāo)能夠用來(lái)隱藏小菜單，也能夠隱藏復(fù)雜、內(nèi)容量大的菜單。
如果再給打開(kāi)過(guò)程配合上動(dòng)態(tài)化的功能或細(xì)微但吸引人的效果，那么這種古樸的圖形更能優(yōu)化設(shè)計(jì)。另外，其不僅能夠應(yīng)用于各類導(dǎo)航（明確傳達(dá)信息），還能幫助解決響應(yīng)性方面的問(wèn)題，并促進(jìn)與移動(dòng)網(wǎng)站的結(jié)合。
下面是一些采用隱藏菜單配合導(dǎo)航圖標(biāo)的網(wǎng)站設(shè)計(jì)，都是鮮貨。
eWebDesign
本例中，我們可以看到大量的圖像背景和視差效果。菜單圖標(biāo)放置在大標(biāo)題的右上角，打開(kāi)后有非常詳盡的導(dǎo)航菜單指向其他板塊。
Sampedro
標(biāo)題欄的顯眼圖片和詼諧的slogan，這二者的組合能夠絕對(duì)地吸引用戶的注意。隱藏導(dǎo)航欄有效地以不突兀的方式將重心從導(dǎo)航欄轉(zhuǎn)移到了復(fù)雜的背景上。
Chapoleone
Chapoleone采用了華麗的照片背景，流露出奢華精美的感覺(jué)。在這里如果用綜合式的導(dǎo)航欄就會(huì)破壞整體的沖擊力，因此左上角隱藏在小圖形后方的滑出菜單絕對(duì)相得益彰。
Maecia
Maecia通過(guò)其誘人的動(dòng)態(tài)效果和精美的背景將好奇的人帶入了其作品。為了不讓網(wǎng)上的訪客迷亂，其主頁(yè)采用了鼠標(biāo)單擊打開(kāi)的隱藏導(dǎo)航欄。
We are Empire
We are Empire證明了基于古典色調(diào)和大量留白空間的最簡(jiǎn)設(shè)計(jì)也能有華麗而誘人的外觀。在這里，隱藏菜單極佳地補(bǔ)完了整體外觀。
Brand Junkie
漂亮的圓形復(fù)古風(fēng)格logo非常搶注意力，讓人第一眼就難以忘記。導(dǎo)航圖標(biāo)與整體環(huán)境完美貼合，甚至第一眼都找不到，要過(guò)幾秒鐘才能慢慢映入眼簾。
Intelart
Intelart美妙的暗色首頁(yè)完美運(yùn)用了背景與前景的對(duì)比。其左上角無(wú)縫貼合的漢堡按鈕與logo和文字完美回應(yīng)，以美妙的方式呈現(xiàn)出了一副以圖片為核心的精美導(dǎo)航欄。
Monograph
Monograph的導(dǎo)航圖標(biāo)完全不像是習(xí)慣上的三行按鈕，但是這一有趣的方式卻使其成為了整體環(huán)境的重要組成部分，與其他內(nèi)容完美結(jié)合。
Camp David Film
盡管主導(dǎo)航欄習(xí)慣性地占據(jù)了標(biāo)題欄的位置，但公司團(tuán)隊(duì)卻巧妙地隱藏了二級(jí)導(dǎo)航欄。二級(jí)導(dǎo)航欄可以讓用戶進(jìn)一步通過(guò)分類探索網(wǎng)站，節(jié)省了大量的空間以便展示漂亮的照片。
Michael Villeneuve
Michael Villeneuve選用了非常趁手的簡(jiǎn)約化關(guān)鍵。通過(guò)結(jié)合俏皮的輪廓線圖形、吸引人的小動(dòng)畫(huà)和簡(jiǎn)潔的實(shí)心彩色背景，其營(yíng)造出了美妙而獨(dú)一無(wú)二的用戶體驗(yàn)。
Exit Film
Exit Film采用了網(wǎng)頁(yè)設(shè)計(jì)潮流中比較新鮮的集中布局風(fēng)格。其漢堡按鈕占據(jù)了中心位置，與非正統(tǒng)的頁(yè)面安排完美和諧。
La Ligne Rouge
這里的導(dǎo)航圖標(biāo)目的是完善整體設(shè)計(jì)并強(qiáng)化印象。導(dǎo)航按鈕采用了精美的曲棍球棒，與logo相互呼應(yīng)，巧妙融入主頁(yè)頁(yè)面。
Xander
通過(guò)全屏滾動(dòng)展示的別致圖片，網(wǎng)上的觀眾完全不會(huì)因?yàn)槿狈χ鲗?dǎo)航欄而感到麻煩，更不會(huì)感到煩人。這里隱藏菜單是個(gè)絕佳的選擇。
Tannbach
盡管使用漢堡按鈕是主流，但你還是可以返璞歸真，把菜單隱藏到簡(jiǎn)單的拖拽使用面板后方。Tannbach就使用了這一方法。不過(guò)，其做法不乏互動(dòng)和美感。首頁(yè)漂亮的圖片和背景巧妙地容納了部分動(dòng)態(tài)導(dǎo)航元素，可以說(shuō)是絕配。
Cofa Media
Cofa Media通過(guò)其描繪公司工作流程的有趣視頻背景來(lái)吸引用戶。略微細(xì)長(zhǎng)的漢堡按鈕巧妙地展現(xiàn)出主導(dǎo)航欄，進(jìn)而占據(jù)整個(gè)屏幕，提高用戶體驗(yàn)。
Alt_Cph14
Alt_Cph14擁有獨(dú)一無(wú)二絕對(duì)能夠抓住人注意力的外觀。其數(shù)字化的設(shè)計(jì)匹配了很多脈沖干擾效果，外加扎眼的藍(lán)色單色背景營(yíng)造出了鮮明的印象。簡(jiǎn)單原始的漢堡按鈕與整體主題相得益彰。
Ball&Claw
Ball&Claw 通過(guò)精美的圖形、巧妙的文字體系和經(jīng)典的配色展示出了美妙的家裝感覺(jué)。導(dǎo)航圖標(biāo)與主頁(yè)設(shè)計(jì)完美搭配，帶來(lái)了一絲高貴感。
Hooch Creative
首頁(yè)不要任何視覺(jué)元素使其文案成為了主角，占據(jù)了首要位置。標(biāo)語(yǔ)在這種環(huán)境下顯然具有巨大的視覺(jué)重量。菜單圖標(biāo)也起到了一定的輔助作用。
Sam Dallyn
Sam Dallyn成功地將用戶的注意力引導(dǎo)到了作品上。網(wǎng)格化、中心布局效果不錯(cuò)，很好的強(qiáng)調(diào)了視覺(jué)元素。所有內(nèi)容看起來(lái)都很精美漂亮，甚至是左側(cè)側(cè)邊欄上不顯眼的小漢堡按鈕也和設(shè)計(jì)主線相互應(yīng)和。
The First 50 Years of Bose
首頁(yè)整齊地分為兩個(gè)板塊，可以用鼠標(biāo)單擊激活，包含了多種動(dòng)畫(huà)控制方式。漢堡按鈕用肉眼幾乎看不見(jiàn)，但又是整體作品的關(guān)鍵部分，其可以作為網(wǎng)上讀者的方向標(biāo)。
Demodern
Demodern采用了獨(dú)到的導(dǎo)航圖標(biāo)，與視頻背景形成鮮明對(duì)比。另外，其可愛(ài)的幾何圖形讓菜單與主頁(yè)設(shè)計(jì)巧妙結(jié)合，給用戶帶來(lái)了優(yōu)秀的閱讀感。
結(jié)束語(yǔ)
導(dǎo)航圖標(biāo)能夠補(bǔ)充并提升不同網(wǎng)站的設(shè)計(jì)。不管是要讓用戶關(guān)注作品的作品集，還是文案為主導(dǎo)的普通公司網(wǎng)站，其都在其中占有一席之地。
原文地址：designmodo
]]>