中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

雖然導航欄很常見，但是我們在使用產品的過程中會發現，每個APP的導航欄或多或少都存在一些設計上的差異。

為了能讓大家對導航欄有更清晰且全面的認識，這篇文章將導航欄的設計樣式、設計風格、交互狀態等多方面的內容綜合在一起進行分析，一起來看看吧~

一、導航欄的構成

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

1. 左側導航

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

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

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

2. 中間部分

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

（1) 標題

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

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

（2) 用戶頭像

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

（3) 產品Logo

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

（4) 分段控件

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

（5) 搜索框

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

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

（6) 導航選項

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

3. 右側導航

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

（1) 頭像

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

（2) 圖標

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

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

（3) 按鈕

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

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

（4) 搜索框

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

（5) 下拉菜單

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

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

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

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

1. 扁平風格

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

2. 陰影懸浮風格

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

3. 顏色填充風格

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

4. 深色風格

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

5. 透明風格

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

三、導航欄交互狀態分析

1. 選中狀態

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

2. 滾動狀態

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

3. 背景模糊

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

4. 尺寸調整

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

四、最后

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

#專欄作家#

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

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。