編輯導(dǎo)語：App的導(dǎo)航欄是頁面設(shè)計中不可缺少的部分，看似相同，但其實在設(shè)計上都有著一些差異。本文作者從剛設(shè)計樣式、設(shè)計風(fēng)格、交互狀態(tài)等多個發(fā)面出發(fā)，對導(dǎo)航欄進行了系統(tǒng)的分析。一起來看看。

APP導(dǎo)航欄(AppBar)大家應(yīng)該都很熟悉，位于屏幕頂部，集合了用戶經(jīng)常使用的一些功能，是頁面設(shè)計中不可缺少的組成部分。

雖然導(dǎo)航欄很常見，但是我們在使用產(chǎn)品的過程中會發(fā)現(xiàn)，每個APP的導(dǎo)航欄或多或少都存在一些設(shè)計上的差異。

為了能讓大家對導(dǎo)航欄有更清晰且全面的認識，這篇文章將導(dǎo)航欄的設(shè)計樣式、設(shè)計風(fēng)格、交互狀態(tài)等多方面的內(nèi)容綜合在一起進行分析，一起來看看吧~

一、導(dǎo)航欄的構(gòu)成

整個導(dǎo)航欄通常分為左、中、右三部分，左側(cè)和右側(cè)主要用來放置功能控件，中間部分主要用來放置文字標(biāo)題，接下里展開分析左中右三部分的構(gòu)成。

1. 左側(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é)合徽標(biāo)、搜索框、下拉菜單等空間。

2. 中間部分

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

（1) 標(biāo)題

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

還可以把標(biāo)題區(qū)域做成支持下拉的樣式，擴展更多的功能全。

（2) 用戶頭像

在社交類產(chǎn)品或?qū)υ捒蛑?，會在中間部分放置用戶的頭像和信息，用來展示用戶的詳細信息。

（3) 產(chǎn)品Logo

有些產(chǎn)品還會將Logo放在導(dǎo)航欄的中心位置用來展示品牌形象，在APP的首頁可以考慮這樣設(shè)計，起到強調(diào)作用。

（4) 分段控件

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

（5) 搜索框

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

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

（6) 導(dǎo)航選項

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

3. 右側(cè)導(dǎo)航

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

（1) 頭像

如果想調(diào)用與用戶屬性相關(guān)的功能，就可以將頭像放在導(dǎo)航欄的右側(cè)區(qū)域，點擊彈出相關(guān)的選項。

（2) 圖標(biāo)

在右側(cè)區(qū)域放置功能圖標(biāo)是最常見的設(shè)計，把用戶最常使用的功能，例如消息圖標(biāo)、搜索圖標(biāo)，都可以集中到導(dǎo)航欄的右側(cè)區(qū)域。

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

（3) 按鈕

按鈕也可以放在右側(cè)區(qū)域來引導(dǎo)用戶操作。當(dāng)出現(xiàn)多個按鈕時，要使用樣式和顏色來靈活區(qū)分按鈕的主次關(guān)系。

按鈕的形狀包括圓形、方形、圓角矩形等，按鈕樣式包括顏色填充、描邊、圖標(biāo)和文字結(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)航等。

1. 扁平風(fēng)格

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

2. 陰影懸浮風(fēng)格

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

3. 顏色填充風(fēng)格

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

4. 深色風(fēng)格

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

5. 透明風(fēng)格

圖片詳情頁的UI設(shè)計中常用到透明的導(dǎo)航風(fēng)格，既能避免導(dǎo)航欄將圖片內(nèi)容遮擋，還能突出頁面的高級感。

三、導(dǎo)航欄交互狀態(tài)分析

1. 選中狀態(tài)

當(dāng)用戶與導(dǎo)航欄交互時，導(dǎo)航欄上的控件要能夠動態(tài)切換來為用戶提供即時反饋，比如當(dāng)選中頁面中的內(nèi)容時，導(dǎo)航欄要出對應(yīng)的操作提示，是否刪除、分享等。

2. 滾動狀態(tài)

當(dāng)頁面上下滾動時，原本扁平的APP導(dǎo)航欄出現(xiàn)陰影懸浮的升高效果，狀態(tài)的改變會讓操作看起來更自然。

3. 背景模糊

當(dāng)頁面滾動時，頂部導(dǎo)航出現(xiàn)毛玻璃的模糊效果，這是現(xiàn)在很流行的視覺效果，會讓整體的用戶體驗更流程。

4. 尺寸調(diào)整

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

四、最后

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

#專欄作家#

作者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。