Navicon，也就是漢堡圖標(biāo)，已經(jīng)成為越來(lái)越多網(wǎng)頁(yè)設(shè)計(jì)導(dǎo)航模塊時(shí)的首選了。相比于傳統(tǒng)的導(dǎo)航欄，隱藏式菜單導(dǎo)航在設(shè)計(jì)和用戶體驗(yàn)上有著它獨(dú)到的地方。作為一個(gè)隨著移動(dòng)端設(shè)計(jì)發(fā)展而崛起的網(wǎng)頁(yè)設(shè)計(jì)元素，Navicon并沒(méi)有減弱它引導(dǎo)用戶的功能性，也沒(méi)有喪失它作為基礎(chǔ)網(wǎng)頁(yè)組件的重要性，還為設(shè)計(jì)師和開(kāi)發(fā)者提供了更大的創(chuàng)作空間。

如何正確使用Navicon取決于項(xiàng)目的實(shí)際狀況，相對(duì)保守的站點(diǎn)可能不會(huì)考慮這個(gè)選擇，而不少追求時(shí)尚簡(jiǎn)約、多平臺(tái)體驗(yàn)統(tǒng)一的新興網(wǎng)站可能會(huì)更加青睞Navicon，因?yàn)樽鳛閷?dǎo)航接口的它小巧而討喜，輕松配合大圖和時(shí)尚的網(wǎng)頁(yè)設(shè)計(jì)，并且隱藏起復(fù)雜的、零碎的導(dǎo)航內(nèi)容菜單。

Navicon很單調(diào)么？并非如此。借助額外的打開(kāi)過(guò)程動(dòng)效和抓人眼球的細(xì)節(jié)效果，Navicon擁有非常大的提升空間和設(shè)計(jì)可能性以及良好的用戶體驗(yàn)。更重要的是，它適用于各類導(dǎo)航：不僅可以清楚的傳達(dá)信息，而且有助于解決響應(yīng)速度方面的問(wèn)題，并且能夠促進(jìn)網(wǎng)頁(yè)在多平臺(tái)設(shè)計(jì)上的統(tǒng)一。

如何設(shè)計(jì)一個(gè)靠譜的Navicon：《數(shù)據(jù)告訴你真相！漢堡圖標(biāo)并非最佳菜單方案》
深入了解不同的導(dǎo)航模式：《交互基礎(chǔ)知識(shí)科普！帶你認(rèn)識(shí)最熱門(mén)的12種導(dǎo)航模式》

接下來(lái)，我們通過(guò)一系列的網(wǎng)頁(yè)設(shè)計(jì)，來(lái)深入了解Navicon和隱藏式菜單導(dǎo)航的魅力。

eWebDesign

大圖背景和視差特效強(qiáng)化了網(wǎng)站視覺(jué)，Navicon菜單按鈕在右上角，點(diǎn)擊打開(kāi)你會(huì)看到一個(gè)設(shè)計(jì)非常細(xì)致的導(dǎo)航菜單。

Sampedro

時(shí)尚的照片放置與網(wǎng)頁(yè)的頁(yè)頭，配合著時(shí)髦的Slogan吸引著用戶全部的吸引力。隱藏的導(dǎo)航欄是個(gè)理想的解決方案，它讓用戶將注意力從復(fù)雜的導(dǎo)航轉(zhuǎn)移到內(nèi)容上。

Chapoleone

細(xì)膩而對(duì)稱的圖片背景讓網(wǎng)頁(yè)擁有著別樣的美感，如果加上導(dǎo)航欄會(huì)破壞這樣的美感，所以設(shè)計(jì)師將Navicon放在左上角。符合習(xí)慣，安靜自然。

Maecia

文字與帥氣的視頻背景融為一體，底部動(dòng)態(tài)的箭頭指引用戶向下瀏覽，常駐右上角的Navicon借助黑白強(qiáng)對(duì)比彰顯存在感，不影響視覺(jué)，也不會(huì)從你視野中消失。當(dāng)鼠標(biāo)移上去的時(shí)候，黑底會(huì)變成紅色。

We are Empire

經(jīng)典的色彩和簡(jiǎn)約的設(shè)計(jì)可見(jiàn)設(shè)計(jì)師的別出心裁，隱藏式的菜單欄令整個(gè)頁(yè)面保持安靜。即使鼠標(biāo)移動(dòng)上去的時(shí)候，動(dòng)效也非常柔和，黑色變?yōu)榧t色，底部的短橫緩慢伸長(zhǎng)，動(dòng)靜之間，味道悠長(zhǎng)。

Brand Junkie

華麗的圓形復(fù)古圖章占據(jù)了頁(yè)面中央，前景后景對(duì)比強(qiáng)烈。右上角的Navicon融入度高，但是相應(yīng)的，用戶也不容易發(fā)現(xiàn)。

Intelart

雖然網(wǎng)站整體呈現(xiàn)暗色調(diào)，但是前景后景之間的對(duì)比度頗為理想。Navicon和網(wǎng)頁(yè)整體風(fēng)格相互呼應(yīng)，點(diǎn)擊之后可以看到復(fù)雜的導(dǎo)航。

Monograph

和普通的漢堡圖標(biāo)不一樣，Monograph的Navicon是參考網(wǎng)頁(yè)的風(fēng)格單獨(dú)定制的，稍有不同但是一眼可以看出來(lái)。位置優(yōu)越，使用便捷，風(fēng)格統(tǒng)一。

Camp David Film

雖然網(wǎng)頁(yè)在頭部使用了相對(duì)傳統(tǒng)的導(dǎo)航，但是設(shè)計(jì)團(tuán)隊(duì)巧妙地使用了文本替代按鈕，并且將其他的部分隱藏在Navicon之后，這樣的分段式導(dǎo)航兼顧到了不同用戶的需求，呈現(xiàn)了一部分重要的內(nèi)容，還兼顧到了漂亮的背景和視覺(jué)的統(tǒng)一。

Michael Villeneuve

Michael Villeneuve采用了更為簡(jiǎn)約的設(shè)計(jì)，漂亮的線框圖標(biāo)和文字結(jié)合在一起，在深色背景下對(duì)比明顯。左上角的Navicon也是如此。

Exit Film

網(wǎng)站集中式的內(nèi)容布置非常獨(dú)特，對(duì)稱的布局使網(wǎng)頁(yè)看起來(lái)非常整齊。Navicon沒(méi)有置于頂部，而是在左邊中央位置。

La Ligne Rouge

在這里，Navicon的作用是補(bǔ)充設(shè)計(jì)并強(qiáng)化網(wǎng)站特色。菜單按鈕和中間的曲棍球圖標(biāo)保持樣式上的一致性，確保了識(shí)別性又保留了網(wǎng)頁(yè)的性格。

Xander

如畫(huà)的照片，雅致的字體，隱藏式菜單果然是首選。

Tannbach

主流的設(shè)計(jì)固然不錯(cuò)，別出機(jī)杼的設(shè)計(jì)更能令人難忘。Tannbach的導(dǎo)航菜單使用了下拉式的面板，不缺乏互動(dòng)性，也足夠精致。

Cofa Media

網(wǎng)頁(yè)使用視頻背景展現(xiàn)了機(jī)構(gòu)的工作流程，點(diǎn)擊Navicon之后，導(dǎo)航菜單會(huì)占據(jù)整個(gè)屏幕，這和移動(dòng)端的設(shè)計(jì)高度一致，值得參考學(xué)習(xí)哦~

Alt_Cph14

Alt_Cph14 所使用的藍(lán)色絕對(duì)令你印象深刻，它的靈感應(yīng)該是來(lái)自于早期的數(shù)字界面設(shè)計(jì)。在這種色調(diào)之下，Navicon清晰而明顯。

Ball&Claw

Ball&Claw 網(wǎng)站使用精致的排版和優(yōu)雅的配色方案營(yíng)造雅致的氛圍，Navicon與整個(gè)氛圍相得益彰。

Hooch Creative

去掉傳統(tǒng)的導(dǎo)航欄之后整個(gè)頁(yè)面清爽了起來(lái)，亮色調(diào)的網(wǎng)站名稱，大字體標(biāo)題，兩者以不同的方式吸引用戶注意，而Navicon則在右上角平衡了網(wǎng)頁(yè)的視覺(jué)。

Sam Dallyn

作為產(chǎn)品展示類的網(wǎng)頁(yè)，Sam Dallyn這個(gè)網(wǎng)站的頁(yè)面布局非常出色，精致、復(fù)雜，但又涇渭分明。微小的Navicon在左側(cè)無(wú)干擾地常駐，如果你真的需要借助導(dǎo)航來(lái)做什么的話，也不難找到。

The First 50 Years of Bose

整個(gè)網(wǎng)頁(yè)被設(shè)計(jì)師從中間一分為二，鼠標(biāo)移動(dòng)到某一側(cè)的時(shí)候，中間的隔線會(huì)移動(dòng)到另一側(cè)，激活所在區(qū)域，借助動(dòng)效和聲音吸引你。常駐右側(cè)的Navicon與其他功能構(gòu)成了側(cè)邊欄，便于操作。

Demodern

黑色底的Navicon 在淺色底背景上看起來(lái)頗為顯眼。點(diǎn)擊Navicon會(huì)呈現(xiàn)出黑色底的導(dǎo)航內(nèi)容，菜單出現(xiàn)時(shí)候的動(dòng)效具有令人難忘的幾何質(zhì)感。

結(jié)語(yǔ)

Navicon和許多不同類型的網(wǎng)站都能完美的適配，這中間可選擇的余地非常之大，你所需要的是仔細(xì)的分析的大膽的想象。

【那些充滿異域風(fēng)情的優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)】

風(fēng)情法蘭西：
《時(shí)尚雅致！25個(gè)來(lái)自法國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》

嚴(yán)謹(jǐn)日耳曼：
《嚴(yán)謹(jǐn)而浪漫！20個(gè)來(lái)自德國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》

熱情西班牙：
《情迷西班牙！20個(gè)來(lái)自西班牙最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》

原文地址：designmodo
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege