常規(guī)搜索框?qū)Ш綑谑窃诤?jiǎn)單標(biāo)題導(dǎo)航欄的基礎(chǔ)上，增加了一個(gè)搜索框，一般去除了導(dǎo)航標(biāo)題。如下圖：

搜索框的寬度隨導(dǎo)航欄中操作圖標(biāo)的多少?zèng)Q定，搜索框高度多采用56~60px，搜索框中的圖標(biāo)設(shè)計(jì)尺寸多采用32px(為了減少切圖尺寸，也可采用48px的切圖大小)。

在擺放圖標(biāo)時(shí)，采用左右間距等分，距離搜索框的間距與邊距相等，看起來(lái)會(huì)更舒適。如下圖所示：

3.Tab/分段控件導(dǎo)航欄

Tab左右切換頂部導(dǎo)航欄與分段控件頂部導(dǎo)航欄，都是頂部有多個(gè)標(biāo)題切換的導(dǎo)航欄樣式，分為選中標(biāo)題與未選中標(biāo)題，如下圖：

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

二、通欄導(dǎo)航欄

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

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

通欄導(dǎo)航欄的背景處理方式一般有三種

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

2.顏色、漸變背景：采用純色或是漸變背景，常見(jiàn)于卡片風(fēng)格的界面；

3.黑色透明漸變蒙層：采用一層漸變蒙層，常見(jiàn)于圖片Banner上，保證導(dǎo)航欄文字的可識(shí)別性。

三、大標(biāo)題導(dǎo)航欄

自ios11發(fā)布后，大標(biāo)題風(fēng)格的導(dǎo)航欄便開(kāi)始流行起來(lái)，尤其是飛機(jī)稿總能看見(jiàn)大標(biāo)題導(dǎo)航欄的影子。普通的導(dǎo)航欄在二倍圖下高度只有88px，標(biāo)題字號(hào)為36px，而大標(biāo)題導(dǎo)航欄在二倍圖下高度足足有192px,標(biāo)題字號(hào)為68px。

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

有些APP也會(huì)折中使用，在常規(guī)88PX(二倍圖)導(dǎo)航欄高度下，放大字號(hào)，隱去分割線(xiàn)，使標(biāo)題看起來(lái)更大。

使用大標(biāo)題導(dǎo)航欄，你需要考慮以下兩點(diǎn)：

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

2.APP整體風(fēng)格是否偏向簡(jiǎn)約大氣。

大標(biāo)題導(dǎo)航欄總給人一種高逼格的感覺(jué)，這也是為什么飛機(jī)稿喜歡使用大標(biāo)題，但卻沒(méi)見(jiàn)國(guó)內(nèi)的電商APP使用。

四、小程序?qū)Ш綑?/span>

微信的小程序?qū)Ш綑冢陧敳坑疑戏接幸粋€(gè)不可去除也無(wú)法編輯的Titlebar按鈕，微信配置了一深一淺兩種風(fēng)格。

從APP轉(zhuǎn)換到小程序時(shí)，要注意調(diào)整APP的頂部導(dǎo)航欄的位置以及搜索框的大小，避免被Titlebar遮擋，如下圖：

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

五、劃重點(diǎn)

·常規(guī)導(dǎo)航欄主要包括簡(jiǎn)單標(biāo)題導(dǎo)航欄、搜索框?qū)Ш綑谝约癟ab/分段控件導(dǎo)航欄通欄導(dǎo)航欄

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

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

·微信小程序?qū)Ш綑谠陧敳坑疑戏接幸粋€(gè)不可去除也無(wú)法編輯的Titlebar按鈕，從APP換到小程序時(shí)要注意重新調(diào)整導(dǎo)航欄