一、導航欄的構成 

整個導航欄通常分為左、中、右三部分，左側和右側主要用來放置功能控件，中間部分主要用來放置文字標題，接下里展開分析左中右三部分的構成。

左側導航

放置在APP頂部導航欄左側的控件很多都跟動作相關，例如執行返回動作、關閉動作或者點擊漢堡菜單進行展開動作等。

除了在左側放置表示動作的控件，還可以在放置頭像框、消息提示等優先級較高的內容，用來引起用戶的注意。

在網頁端的頂部導航欄中，左側都會放置品牌logo，因為網頁端頂部的空間更大，所以還可以在LOGO周圍結合徽標、搜索框、下拉菜單等空間。

中間部分

APP頂部導航欄的中間部分主要用于放置標題，當然根據使用場景的不同，還可以放置頭像、搜索框、下拉框、導航等控件。

1) 標題

最常見的是在中間使用加粗的文字作為標題，也可以使用主標題+副標題的形式來展示更多的信息。

還可以把標題區域做成支持下拉的樣式，擴展更多的功能全。

2) 用戶頭像

在社交類產品或對話框中，會在中間部分放置用戶的頭像和信息，用來展示用戶的詳細信息。

3) 產品Logo

有些產品還會將Logo放在導航欄的中心位置用來展示品牌形象，在APP的首頁可以考慮這樣設計，起到強調作用。

4) 分段控件

在移動端產品中，還可以在中間部分放置分段控件，通常2-3個標簽，在早期的網易云音樂APP中就用到了這樣的設計，通過點擊標簽或者左右滑動頁面完成內容切換。

5) 搜索框

導航欄中間經常能看到搜索框，然后搜索框左右兩邊放置其他的控件。當導航欄的內容太多，比如有文字標題、頭像、按鈕等控件，搜索欄和這些控件可能無法并排放置時，可以將搜索欄橫向拉長，放在下一行單獨展示。

現在淘寶APP首頁的導航欄就做成了兩行，上一行用來放置文字標題和功能圖標，搜素欄集合掃碼、拍照等功能單獨作為一行。

6) 導航選項

在網頁中，標簽、按鈕、面包屑導航等常見的導航組件，通常會固定在網頁導航的中心位置。當頁面縮小到移動端時，考慮到移動端尺寸較小，如果頂部導航內容太多，可以嘗試把功能組件放到第二層級。

右側導航

相對于左側和中間，APP導航欄的右側部分更加靈活，沒有固定的要求說必須放哪些內容，根據需求放置各種類型的功能控件。

1) 頭像

如果想調用與用戶屬性相關的功能，就可以將頭像放在導航欄的右側區域，點擊彈出相關的選項。

2) 圖標

在右側區域放置功能圖標是最常見的設計，把用戶最常使用的功能，例如消息圖標、搜索圖標，都可以集中到導航欄的右側區域。

如果右側需要展示的圖標太多，可以把這些圖標聚合在一起，處理成類似微信首頁右上角的設計，點擊之后出現更多功能。

3) 按鈕

按鈕也可以放在右側區域來引導用戶操作。當出現多個按鈕時，要使用樣式和顏色來靈活區分按鈕的主次關系。

按鈕的形狀包括圓形、方形、圓角矩形等，按鈕樣式包括顏色填充、描邊、圖標和文字結合等多種風格，通過靈活的設計抓住用戶的注意力。

4) 搜索框

在網頁端中會看到搜索框放在右側的設計，將搜索框作為單獨的控件或者和其他控件組合使用放在右側，方便用戶快速訪問。

5) 下拉菜單

在Pad端和網頁端中，可以使用嵌套在應用欄右側的下拉菜單進行切換帳戶、語言等操作。

 二、導航欄的5種設計風格 

頂部導航欄設計風格需要與與整個產品的UI相匹配，常見的導航欄設計樣式有

扁平風格、陰影懸浮效果、顏色填充效果、使用半透明導航等。

扁平風格

頂部導航區域完全融入到背景中，和整個頁面融為一個整體，頁面看起來比較簡約。

陰影懸浮風格

通過在導航欄下方增加一層陰影效果，讓導航欄有懸浮在頁面上的感覺，同時便于和頁面其他內容作區分。

顏色填充風格

將導航欄背景進行色彩填充，不透明度降低到8-12%，使用一些簡約而高級的色彩來增加頁面的豐富度，體現品牌特點。

深色風格

APP頁面的背景大多都是淺色，這個時候如果使用深色的導航，能夠產生很強烈的對比效果，用來突出導航中的內容。比如早期的微信APP頁面，頂部就是采用深色的導航，和淺色的頁面作對比。

透明風格

圖片詳情頁的UI設計中常用到透明的導航風格，既能避免導航欄將圖片內容遮擋，還能突出頁面的高級感。

三、導航欄交互狀態分析 

選中狀態

當用戶與導航欄交互時，導航欄上的控件要能夠動態切換來為用戶提供即時反饋，比如當選中頁面中的內容時，導航欄要出對應的操作提示，是否刪除、分享等。

滾動狀態

當頁面上下滾動時，原本扁平的APP導航欄出現陰影懸浮的升高效果，狀態的改變會讓操作看起來更自然。

背景模糊

當頁面滾動時，頂部導航出現毛玻璃的模糊效果，這是現在很流行的視覺效果，會讓整體的用戶體驗更流程。

尺寸調整

當頁面尺寸變小時，要考慮將多余的導航選項折疊并隱藏在“更多”圖標里面，這樣才會讓設計更合理。

最后 

以上就是導航欄(App Bar)設計中能用到的知識點和設計細節，希望通過這些內容能幫助你對導航欄有更多的設計想法和思考。

「組件系列」的其他文章，近期也會不斷更新，歡迎大家關注??

設計夾將近期分享的設計資源整理成了一份清單合集，如果其中有大家需要的資源，直接在公眾號后臺回復對應的關鍵詞即可免費領取，這份清單也會不斷更新更多的資源，建議大家收藏起來隨時查看。

慢慢來比較快，希望對你有幫助！

領取方式：關注公眾號，后臺回復【資源】獲取高清素材清單

轉載請注明：學UI網》APP導航欄設計分析：5種設計樣式+4種交互狀態

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司