網頁設計中的隐藏菜單示例

在網頁設計中使用導航圖标這(zhè)一趨勢正迫使我們再度審視導航菜單、它們在設計中的位置以及在用戶體驗中的角色。盡管這(zhè)一理念并沒(méi)有弱化其在導航方面(miàn)的意義和重要性，但其能(néng)夠給設計師和開(kāi)發(fā)人員帶來更多的創意空間。

根據項目的不同，導航圖标彼此區别很大，但是其中大多數會偏向(xiàng)于使用流行、簡單、貼合移動端的三行圖标，這(zhè)一類圖标外觀漂亮，而且在幾乎任何環境下都(dōu)比較帶感。這(zhè)個小圖标能(néng)夠用來隐藏小菜單，也能(néng)夠隐藏複雜、内容量大的菜單。

如果再給打開(kāi)過(guò)程配合上動态化的功能(néng)或細微但吸引人的效果，那麼(me)這(zhè)種(zhǒng)古樸的圖形更能(néng)優化設計。另外，其不僅能(néng)夠應用于各類導航（明确傳達信息），還(hái)能(néng)幫助解決響應性方面(miàn)的問題，并促進(jìn)與移動網站的結合。

下面(miàn)是一些采用隐藏菜單配合導航圖标的網站設計，都(dōu)是鮮貨。

eWebDesign

本例中，我們可以看到大量的圖像背景和視差效果。菜單圖标放置在大标題的右上角，打開(kāi)後(hòu)有非常詳盡的導航菜單指向(xiàng)其他闆塊。

Sampedro

标題欄的顯眼圖片和诙諧的slogan，這(zhè)二者的組合能(néng)夠絕對(duì)地吸引用戶的注意。隐藏導航欄有效地以不突兀的方式將(jiāng)重心從導航欄轉移到了複雜的背景上。

Chapoleone

Chapoleone采用了華麗的照片背景，流露出奢華精美的感覺。在這(zhè)裡(lǐ)如果用綜合式的導航欄就會破壞整體的沖擊力，因此左上角隐藏在小圖形後(hòu)方的滑出菜單絕對(duì)相得益彰。

Maecia

Maecia通過(guò)其誘人的動态效果和精美的背景將(jiāng)好(hǎo)奇的人帶入了其作品。爲了不讓網上的訪客迷亂，其主頁采用了鼠标單擊打開(kāi)的隐藏導航欄。

We are Empire

We are Empire證明了基于古典色調和大量留白空間的簡設計也能(néng)有華麗而誘人的外觀。在這(zhè)裡(lǐ)，隐藏菜單極佳地補完了整體外觀。

Brand Junkie

漂亮的圓形複古風格logo非常搶注意力，讓人第一眼就難以忘記。導航圖标與整體環境完美貼合，甚至第一眼都(dōu)找不到，要過(guò)幾秒鍾才能(néng)慢慢映入眼簾。

Intelart

Intelart美妙的暗色首頁完美運用了背景與前景的對(duì)比。其左上角無縫貼合的漢堡按鈕與logo和文字完美回應，以美妙的方式呈現出了一副以圖片爲核心的精美導航欄。

Monograph

Monograph的導航圖标完全不像是習慣上的三行按鈕，但是這(zhè)一有趣的方式卻使其成(chéng)爲了整體環境的重要組成(chéng)部分，與其他内容完美結合。

Camp David Film

盡管主導航欄習慣性地占據了标題欄的位置，但公司團隊卻巧妙地隐藏了二級導航欄。二級導航欄可以讓用戶進(jìn)一步通過(guò)分類探索網站，節省了大量的空間以便展示漂亮的照片。

Michael Villeneuve

Michael Villeneuve選用了非常趁手的簡約化關鍵。通過(guò)結合俏皮的輪廓線圖形、吸引人的小動畫和簡潔的實心彩色背景，其營造出了美妙而獨一無二的用戶體驗。

Exit Film

Exit Film采用了網頁設計潮流中比較新鮮的集中布局風格。其漢堡按鈕占據了中心位置，與非正統的頁面(miàn)安排完美和諧。

La Ligne Rouge

這(zhè)裡(lǐ)的導航圖标目的是完善整體設計并強化印象。導航按鈕采用了精美的曲棍球棒，與logo相互呼應，巧妙融入主頁頁面(miàn)。

Xander

通過(guò)全屏滾動展示的别緻圖片，網上的觀衆完全不會因爲缺乏主導航欄而感到麻煩，更不會感到煩人。這(zhè)裡(lǐ)隐藏菜單是個絕佳的選擇。

Tannbach

盡管使用漢堡按鈕是主流，但你還(hái)是可以返璞歸真，把菜單隐藏到簡單的拖拽使用面(miàn)闆後(hòu)方。Tannbach就使用了這(zhè)一方法。不過(guò)，其做法不乏互動和美感。首頁漂亮的圖片和背景巧妙地容納了部分動态導航元素，可以說是絕配。

Cofa Media

Cofa Media通過(guò)其描繪公司工作流程的有趣視頻背景來吸引用戶。略微細長(cháng)的漢堡按鈕巧妙地展現出主導航欄，進(jìn)而占據整個屏幕，提高用戶體驗。

Alt_Cph14

Alt_Cph14擁有獨一無二絕對(duì)能(néng)夠抓住人注意力的外觀。其數字化的設計匹配了很多脈沖幹擾效果，外加紮眼的藍色單色背景營造出了鮮明的印象。簡單原始的漢堡按鈕與整體主題相得益彰。

Ball&Claw

Ball&Claw 通過(guò)精美的圖形、巧妙的文字體系和經(jīng)典的配色展示出了美妙的家裝感覺。導航圖标與主頁設計完美搭配，帶來了一絲高貴感。

Hooch Creative

首頁不要任何視覺元素使其文案成(chéng)爲了主角，占據了首要位置。标語在這(zhè)種(zhǒng)環境下顯然具有巨大的視覺重量。菜單圖标也起(qǐ)到了一定的輔助作用。

Sam Dallyn

Sam Dallyn成(chéng)功地將(jiāng)用戶的注意力引導到了作品上。網格化、中心布局效果不錯，很好(hǎo)的強調了視覺元素。所有内容看起(qǐ)來都(dōu)很精美漂亮，甚至是左側側邊欄上不顯眼的小漢堡按鈕也和設計主線相互應和。

The First 50 Years of Bose

首頁整齊地分爲兩(liǎng)個闆塊，可以用鼠标單擊激活，包含了多種(zhǒng)動畫控制方式。漢堡按鈕用肉眼幾乎看不見，但又是整體作品的關鍵部分，其可以作爲網上讀者的方向(xiàng)标。

Demodern

Demodern采用了獨到的導航圖标，與視頻背景形成(chéng)鮮明對(duì)比。另外，其可愛的幾何圖形讓菜單與主頁設計巧妙結合，給用戶帶來了優秀的閱讀感。

結束語

導航圖标能(néng)夠補充并提升不同網站的設計。不管是要讓用戶關注作品的作品集，還(hái)是文案爲主導的普通公司網站，其都(dōu)在其中占有一席之地。