?

?

今天為大家分享的是「App導(dǎo)航欄設(shè)計(jì)」。

?

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

?

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

?

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

?

?

?

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

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

?

?

1、左側(cè)導(dǎo)航

?

放置在App頂部導(dǎo)航欄左側(cè)的控件很多都跟動作相關(guān)，例如執(zhí)行返回動作、關(guān)閉動作或者點(diǎn)擊漢堡菜單進(jìn)行展開動作等。

?

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

?

在網(wǎng)頁端的頂部導(dǎo)航欄中，左側(cè)都會放置品牌logo，因?yàn)榫W(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ū)域做成支持下拉的樣式，擴(kuò)展更多的功能全。

?

2) 用戶頭像

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

?

3) 產(chǎn)品Logo

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

?

4) 分段控件

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

?

5) 搜索框

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

?

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

?

?

6) 導(dǎo)航選項(xiàng)

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

?

?

2、右側(cè)導(dǎo)航

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

?

1) 頭像

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

?

2) 圖標(biāo)

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

?

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

?

?

3) 按鈕

?

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

按鈕的形狀包括圓形、方形、圓角矩形等，按鈕樣式包括顏色填充、描邊、圖標(biāo)和文字結(jié)合等多種風(fēng)格，通過靈活的設(shè)計(jì)抓住用戶的注意力。

?

4) 搜索框

在網(wǎng)頁端中會看到搜索框放在右側(cè)的設(shè)計(jì)，將搜索框作為單獨(dú)的控件或者和其他控件組合使用放在右側(cè)，方便用戶快速訪問。

?

5) 下拉菜單

?

在Pad端和網(wǎng)頁端中，可以使用嵌套在應(yīng)用欄右側(cè)的下拉菜單進(jìn)行切換帳戶、語言等操作。

?

?

?

?

二、導(dǎo)航欄的5種設(shè)計(jì)風(fēng)格

頂部導(dǎo)航欄設(shè)計(jì)風(fēng)格需要與與整個(gè)產(chǎn)品的UI相匹配，常見的導(dǎo)航欄設(shè)計(jì)樣式有

扁平風(fēng)格、陰影懸浮效果、顏色填充效果、使用半透明導(dǎo)航等。

?

?

1、扁平風(fēng)格

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

?

?

?

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

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

?

?

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

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

?

?

4、深色風(fēng)格

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

?

?

5、透明風(fēng)格

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

?

?

?

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

?

1、選中狀態(tài)

?

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

?

?

2、滾動狀態(tài)

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

?

3、背景模糊

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

?

?

4、尺寸調(diào)整

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

?

?

?

最后

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

?

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

來源網(wǎng)絡(luò)

?