導(dǎo)航菜單可能是網(wǎng)頁(yè)設(shè)計(jì)中最重要的部分了。每個(gè)用戶瀏覽網(wǎng)站時(shí)一定有所需，因此導(dǎo)航菜單能夠幫助用戶尋找信息。好的導(dǎo)航菜單像是導(dǎo)游，告訴用戶網(wǎng)站是干什么的，內(nèi)容分類有哪些，在哪里可以找到什么信息。

而且導(dǎo)航欄也是整體布局的重要組成。

總結(jié)一下，導(dǎo)航欄的重要性。

1. 瀏覽完Logo后，導(dǎo)航欄是用戶第一個(gè)看到的組件。
2. 導(dǎo)航欄的作用是引導(dǎo)用戶。
3. 導(dǎo)航欄的作用也類似于索引，快速幫助用戶找到所需信息。

想讓導(dǎo)航欄更加優(yōu)雅、美麗、響應(yīng)式么？看看導(dǎo)航欄設(shè)計(jì)的三大要點(diǎn)吧！

相關(guān)閱讀：
《導(dǎo)航設(shè)計(jì)趨勢(shì)！關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)》
《革命性的創(chuàng)新網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)》
《大型網(wǎng)站導(dǎo)航設(shè)計(jì)指南》

1) 別再讓導(dǎo)航胖下去了，給導(dǎo)航減個(gè)肥

導(dǎo)航菜單重要性不言而喻。一些設(shè)計(jì)師往往使用一些繁雜的裝飾來(lái)做突出。其實(shí)大可不必，通過(guò)字體、懸停效果、留白可以設(shè)計(jì)出簡(jiǎn)約、優(yōu)雅的極簡(jiǎn)主義風(fēng)格導(dǎo)航欄，看看下面的案例。

Design Instruct

Sugar Rush

Mmminimal

AD60

Rhythm

2) 如果有能力，為什么不試試來(lái)做響應(yīng)式設(shè)計(jì)

設(shè)備種類越來(lái)越多，如何滿足大部分用戶的閱讀需求?這就必須要使用響應(yīng)式設(shè)計(jì)了。根據(jù)屏幕尺寸來(lái)合理縮放頁(yè)面，達(dá)到更好的閱讀效果，這里是一些案例。

Inspire Conference

Forefathers Group

These Are Things

Ryan O'Rourke

Stephen Caver

3) 合理放置導(dǎo)航，出現(xiàn)在該出現(xiàn)的地方

將導(dǎo)航放置何處，以何種方式展現(xiàn)，這都是不容忽視的，無(wú)論是水平布局還是垂直布局，都要盡量滿足用戶使用習(xí)慣。水平式導(dǎo)航菜單的好處是明顯，清晰可見，大家都會(huì)知道導(dǎo)航條在上方，而且不是那么占據(jù)空間。而垂直的導(dǎo)航菜單可以兼容不同的屏幕尺寸。

• 避免奇怪的布局
• HTML標(biāo)記要簡(jiǎn)單
• 保持簡(jiǎn)約
• CSS設(shè)置樣式

原文地址：designzzz

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量57萬(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ì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：