頂部導航欄作為我們使用APP時每天都要遇到的組件，出鏡頻率極高，看似簡單，其實我們在繪制界面的時候還是有許多細節(jié)需要注意的。本篇文章主要匯總了常見的四種頂部導航欄設計樣式，希望能幫助大家更好地理解導航欄這個組件。

一、常規(guī)導航欄

所謂常規(guī)導航欄，主要是指固定在狀態(tài)欄下，能清晰分辨出的一行導航欄，主要由操作圖標、標題、搜索框、背景等組成，大致分成三種，分別是簡單標題導航欄、搜索框導航欄以及Tab/分段控件導航欄。

1.簡單標題導航欄

簡單標題導航欄常見于二級詳情界面或導航簡單的一級界面，主要由操作圖標與標題組成，如下圖：

(以下涉及的尺寸大小都是二倍圖下的設計大小)

該類型的導航標題的大小一般是36px，操作圖標的設計大小一般是40px，切圖大小一般是48px，背景色多采用白色或APP主題色。并且很多APP為了保證整體界面的簡潔，還會去除導航欄底部分割線，僅采用白色作為背景。

2.搜索框導航欄

常規(guī)搜索框導航欄是在簡單標題導航欄的基礎上，增加了一個搜索框，一般去除了導航標題。如下圖：

搜索框的寬度隨導航欄中操作圖標的多少決定，搜索框高度多采用56~60px，搜索框中的圖標設計尺寸多采用32px(為了減少切圖尺寸，也可采用48px的切圖大小)。

 

在擺放圖標時，采用左右間距等分，距離搜索框的間距與邊距相等，看起來會更舒適。如下圖所示：

3.Tab/分段控件導航欄

Tab左右切換頂部導航欄與分段控件頂部導航欄，都是頂部有多個標題切換的導航欄樣式，分為選中標題與未選中標題，如下圖：

分段控件頂部導航欄一般有2~5個可選項，且不能左右滑動。Tab左右切換頂部導航欄的可選項可以擴展很多(如愛奇藝的首頁頂部Tab切換有24個可選項)，并且可以左右滑動切換，選中樣式也比較豐富，常見的有底部加上小短線、字體顏色變化、字號放大等(多個合并使用更能突出選中標題)，如下圖：

二、通欄導航欄

通欄導航欄與常規(guī)導航欄的構成基本沒有區(qū)別，最大的不同是，通欄導航欄的背景層一般與下方的模塊打通了，在視覺上看起來更為統(tǒng)一，還能一定程度上節(jié)約界面空間。如下圖：

通欄導航欄常用在電商、旅游等界面復雜或是需要烘托氛圍的界面中（多伴隨著背景處理），有些也會放在頂部通欄Banner上，節(jié)省空間的同時減少割裂感。

通欄導航欄的背景處理方式一般有三種

1.特殊背景處理：與下方模塊整體風格保持一致，多采用與下方一致的圖片背景；

2.顏色、漸變背景：采用純色或是漸變背景，常見于卡片風格的界面；

3.黑色透明漸變蒙層：采用一層漸變蒙層，常見于圖片Banner上，保證導航欄文字的可識別性。

三、大標題導航欄

自ios11發(fā)布后，大標題風格的導航欄便開始流行起來，尤其是飛機稿總能看見大標題導航欄的影子。普通的導航欄在二倍圖下高度只有88px，標題字號為36px，而大標題導航欄在二倍圖下高度足足有192px,標題字號為68px。

但并不是所有APP都適合使用大標題導航欄，并且即便使用大標題導航欄，整個APP中也不會全部使用，使用中界面向上滑動也會切換成正常狀態(tài)的導航欄或直接隱去導航欄，便于內容的查看。

 

有些APP也會折中使用，在常規(guī)88PX(二倍圖)導航欄高度下，放大字號，隱去分割線，使標題看起來更大。

使用大標題導航欄，你需要考慮以下兩點：

1.是否需要幫助用戶快速確認所處位置(多為產品頁面重復性多，或是功能單一的APP)；

2.APP整體風格是否偏向簡約大氣。

大標題導航欄總給人一種高逼格的感覺，這也是為什么飛機稿喜歡使用大標題，但卻沒見國內的電商APP使用。

四、小程序導航欄

微信的小程序導航欄，在頂部右上方有一個不可去除也無法編輯的Titlebar按鈕，微信配置了一深一淺兩種風格。

 

從APP轉換到小程序時，要注意調整APP的頂部導航欄的位置以及搜索框的大小，避免被Titlebar遮擋，如下圖：

上圖中，豌豆公主的頂部導航欄整體下移，并且減小了搜索框的高度，提高屏幕的利用率。

五、劃重點

·常規(guī)導航欄主要包括簡單標題導航欄、搜索框導航欄以及Tab/分段控件導航欄通欄導航欄

 

·通欄導航欄要注意導航背景的處理，常用的有特殊背景處理、顏色漸變背景、黑色透明漸變蒙層

 

·大標題導航欄使界面整體更有逼格，但不是所有APP都適合的，要根據(jù)情況合理使用

 

·微信小程序導航欄在頂部右上方有一個不可去除也無法編輯的Titlebar按鈕，從APP換到小程序時要注意重新調整導航欄