一、導(dǎo)航欄的構(gòu)成
整個導(dǎo)航欄通常分為左、中、右三部分，左側(cè)和右側(cè)主要用來放置功能控件，中間部分主要用來放置文字標題，接下里展開分析左中右三部分的構(gòu)成。
左側(cè)導(dǎo)航
放置在APP頂部導(dǎo)航欄左側(cè)的控件很多都跟動作相關(guān)，例如執(zhí)行返回動作、關(guān)閉動作或者點擊漢堡菜單進行展開動作等。
除了在左側(cè)放置表示動作的控件，還可以在放置頭像框、消息提示等優(yōu)先級較高的內(nèi)容，用來引起用戶的注意。
在網(wǎng)頁端的頂部導(dǎo)航欄中，左側(cè)都會放置品牌logo，因為網(wǎng)頁端頂部的空間更大，所以還可以在LOGO周圍結(jié)合徽標、搜索框、下拉菜單等空間。
中間部分
APP頂部導(dǎo)航欄的中間部分主要用于放置標題，當然根據(jù)使用場景的不同，還可以放置頭像、搜索框、下拉框、導(dǎo)航等控件。
1) 標題
最常見的是在中間使用加粗的文字作為標題，也可以使用主標題+副標題的形式來展示更多的信息。
還可以把標題區(qū)域做成支持下拉的樣式，擴展更多的功能全。
2) 用戶頭像
在社交類產(chǎn)品或?qū)υ捒蛑校瑫谥虚g部分放置用戶的頭像和信息，用來展示用戶的詳細信息。
3) 產(chǎn)品Logo
有些產(chǎn)品還會將Logo放在導(dǎo)航欄的中心位置用來展示品牌形象，在APP的首頁可以考慮這樣設(shè)計，起到強調(diào)作用。
4) 分段控件
在移動端產(chǎn)品中，還可以在中間部分放置分段控件，通常2-3個標簽，在早期的網(wǎng)易云音樂APP中就用到了這樣的設(shè)計，通過點擊標簽或者左右滑動頁面完成內(nèi)容切換。
5) 搜索框
導(dǎo)航欄中間經(jīng)常能看到搜索框，然后搜索框左右兩邊放置其他的控件。當導(dǎo)航欄的內(nèi)容太多，比如有文字標題、頭像、按鈕等控件，搜索欄和這些控件可能無法并排放置時，可以將搜索欄橫向拉長，放在下一行單獨展示。
現(xiàn)在淘寶APP首頁的導(dǎo)航欄就做成了兩行，上一行用來放置文字標題和功能圖標，搜素欄集合掃碼、拍照等功能單獨作為一行。
6) 導(dǎo)航選項
在網(wǎng)頁中，標簽、按鈕、面包屑導(dǎo)航等常見的導(dǎo)航組件，通常會固定在網(wǎng)頁導(dǎo)航的中心位置。當頁面縮小到移動端時，考慮到移動端尺寸較小，如果頂部導(dǎo)航內(nèi)容太多，可以嘗試把功能組件放到第二層級。
右側(cè)導(dǎo)航
相對于左側(cè)和中間，APP導(dǎo)航欄的右側(cè)部分更加靈活，沒有固定的要求說必須放哪些內(nèi)容，根據(jù)需求放置各種類型的功能控件。
1) 頭像
如果想調(diào)用與用戶屬性相關(guān)的功能，就可以將頭像放在導(dǎo)航欄的右側(cè)區(qū)域，點擊彈出相關(guān)的選項。
2) 圖標
在右側(cè)區(qū)域放置功能圖標是最常見的設(shè)計，把用戶最常使用的功能，例如消息圖標、搜索圖標，都可以集中到導(dǎo)航欄的右側(cè)區(qū)域。
如果右側(cè)需要展示的圖標太多，可以把這些圖標聚合在一起，處理成類似微信首頁右上角的設(shè)計，點擊之后出現(xiàn)更多功能。
3) 按鈕
按鈕也可以放在右側(cè)區(qū)域來引導(dǎo)用戶操作。當出現(xiàn)多個按鈕時，要使用樣式和顏色來靈活區(qū)分按鈕的主次關(guān)系。
按鈕的形狀包括圓形、方形、圓角矩形等，按鈕樣式包括顏色填充、描邊、圖標和文字結(jié)合等多種風(fēng)格，通過靈活的設(shè)計抓住用戶的注意力。
4) 搜索框
在網(wǎng)頁端中會看到搜索框放在右側(cè)的設(shè)計，將搜索框作為單獨的控件或者和其他控件組合使用放在右側(cè)，方便用戶快速訪問。
5) 下拉菜單
在Pad端和網(wǎng)頁端中，可以使用嵌套在應(yīng)用欄右側(cè)的下拉菜單進行切換帳戶、語言等操作。
二、導(dǎo)航欄的5種設(shè)計風(fēng)格
頂部導(dǎo)航欄設(shè)計風(fēng)格需要與與整個產(chǎn)品的UI相匹配，常見的導(dǎo)航欄設(shè)計樣式有
扁平風(fēng)格、陰影懸浮效果、顏色填充效果、使用半透明導(dǎo)航等。
扁平風(fēng)格
頂部導(dǎo)航區(qū)域完全融入到背景中，和整個頁面融為一個整體，頁面看起來比較簡約。
陰影懸浮風(fēng)格
通過在導(dǎo)航欄下方增加一層陰影效果，讓導(dǎo)航欄有懸浮在頁面上的感覺，同時便于和頁面其他內(nèi)容作區(qū)分。
顏色填充風(fēng)格
將導(dǎo)航欄背景進行色彩填充，不透明度降低到8-12%，使用一些簡約而高級的色彩來增加頁面的豐富度，體現(xiàn)品牌特點。
深色風(fēng)格
APP頁面的背景大多都是淺色，這個時候如果使用深色的導(dǎo)航，能夠產(chǎn)生很強烈的對比效果，用來突出導(dǎo)航中的內(nèi)容。比如早期的微信APP頁面，頂部就是采用深色的導(dǎo)航，和淺色的頁面作對比。
透明風(fēng)格
圖片詳情頁的UI設(shè)計中常用到透明的導(dǎo)航風(fēng)格，既能避免導(dǎo)航欄將圖片內(nèi)容遮擋，還能突出頁面的高級感。
三、導(dǎo)航欄交互狀態(tài)分析
選中狀態(tài)
當用戶與導(dǎo)航欄交互時，導(dǎo)航欄上的控件要能夠動態(tài)切換來為用戶提供即時反饋，比如當選中頁面中的內(nèi)容時，導(dǎo)航欄要出對應(yīng)的操作提示，是否刪除、分享等。
滾動狀態(tài)
當頁面上下滾動時，原本扁平的APP導(dǎo)航欄出現(xiàn)陰影懸浮的升高效果，狀態(tài)的改變會讓操作看起來更自然。
背景模糊
當頁面滾動時，頂部導(dǎo)航出現(xiàn)毛玻璃的模糊效果，這是現(xiàn)在很流行的視覺效果，會讓整體的用戶體驗更流程。
尺寸調(diào)整
當頁面尺寸變小時，要考慮將多余的導(dǎo)航選項折疊并隱藏在“更多”圖標里面，這樣才會讓設(shè)計更合理。
最后
以上就是導(dǎo)航欄(App Bar)設(shè)計中能用到的知識點和設(shè)計細節(jié)，希望通過這些內(nèi)容能幫助你對導(dǎo)航欄有更多的設(shè)計想法和思考。
「組件系列」的其他文章，近期也會不斷更新，歡迎大家關(guān)注??
設(shè)計夾將近期分享的設(shè)計資源整理成了一份清單合集，如果其中有大家需要的資源，直接在公眾號后臺回復(fù)對應(yīng)的關(guān)鍵詞即可免費領(lǐng)取，這份清單也會不斷更新更多的資源，建議大家收藏起來隨時查看。
慢慢來比較快，希望對你有幫助！
領(lǐng)取方式：關(guān)注公眾號，后臺回復(fù)【資源】獲取高清素材清單
作者：Clippp
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》APP導(dǎo)航欄設(shè)計分析：5種設(shè)計樣式+4種交互狀態(tài)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.0391cbd.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司