編輯導(dǎo)語：我們?nèi)粘煤芏囝愋偷漠a(chǎn)品，在操作一個產(chǎn)品時，我們會選擇各種路徑進(jìn)行操作，這時導(dǎo)航欄起到了很大的作用；導(dǎo)航欄可以幫助用戶進(jìn)行下一步操作，所以對于用戶體驗也是比較重要的；本文作者分享了關(guān)于交互中的導(dǎo)航欄設(shè)計，我們一起來了解一下。

一、關(guān)于導(dǎo)航欄

頂部導(dǎo)航欄出現(xiàn)在應(yīng)用程序屏幕的頂部，狀態(tài)欄下方，并指引當(dāng)前頁面位置、層級的控件；就是說，哪天你用一個 App 卻問我在哪、我該如何返回的時候，就是導(dǎo)航欄沒設(shè)計好。

導(dǎo)航欄是 App 中最常見的控件之一，iOS 和 Material Design 規(guī)范中對它進(jìn)行了闡述：

• 在 iOS 上，該欄被稱為導(dǎo)航欄，其高度比 Android 版本短。
• 在 Android 上，該欄被稱為頂部應(yīng)用欄，本文會以更常用的導(dǎo)航欄的叫法指代。

二、導(dǎo)航欄的特點(diǎn)

1. 穩(wěn)定的

頂部導(dǎo)航欄會顯示在應(yīng)用中幾乎每個頁面的頂部，有時是常駐存在，有時隨著頁面需要進(jìn)行隱藏，但永遠(yuǎn)不會缺席；很少頁面完全不需導(dǎo)航欄，而整個應(yīng)用都不需要導(dǎo)航欄的幾乎不存在。

2. 指引的

之所以叫它導(dǎo)航欄，明顯就是因為這個玩意具有導(dǎo)航作用，可以和用戶說，你現(xiàn)在處于什么頁面（導(dǎo)航欄標(biāo)題）、你現(xiàn)在處于什么位置（一級導(dǎo)航、二級導(dǎo)航，靠返回按鈕區(qū)分），用戶可以通過導(dǎo)航欄回到最開始的位置。

3. 統(tǒng)一的

同一個應(yīng)用內(nèi)，導(dǎo)航欄的位置、高度、信息都具備相對的統(tǒng)一性，以增加熟悉度，這也是頁面一致性要求的，iOS 和 Material Design 對導(dǎo)航欄的高度、信息等內(nèi)容都進(jìn)行了要求，所以大家在形態(tài)上都大差不差（但是內(nèi)容上被玩出了花，下文會講到）。

三、導(dǎo)航欄功能類型

按照功能類型劃分，導(dǎo)航欄常見的有：常規(guī)導(dǎo)航欄、編輯操作欄。

1. 常規(guī)導(dǎo)航欄

常規(guī)導(dǎo)航欄主要的是提供頁面及層級的指引、以及相關(guān)操作，這是我們看到最多的導(dǎo)航欄類型。

2. 編輯操作欄

編輯操作欄可以為所選項目提供動作。常規(guī)導(dǎo)航欄可以切換為編輯操作欄，在執(zhí)行某項操作或?qū)⑵涑废耙恢北３只顒訝顟B(tài)。

四、常規(guī)導(dǎo)航欄解析

在 Material Design 的規(guī)范中，導(dǎo)航欄由容器、導(dǎo)航圖標(biāo)、標(biāo)題、操作項、更多菜單等組成，而國內(nèi)的許多應(yīng)用，都在此基礎(chǔ)上，進(jìn)行了更多適應(yīng)產(chǎn)品需求的個性化設(shè)計；但是在形態(tài)上，依然與規(guī)范相似，以保證用戶易理解性與體驗的流暢性。

1）容器：即導(dǎo)航欄的范圍，導(dǎo)航欄所都有元素都應(yīng)當(dāng)在容器里面，導(dǎo)航欄容器的高度因場景不同，有高低之分。

常規(guī)的導(dǎo)航欄只需要保證指引性即可，所以不需要占據(jù)太大的高度位置，特別是非工具型的產(chǎn)品，更是將頁面高度空間視為寸土寸金的存在。

MD 針對導(dǎo)航欄的特殊情況提供了突出的頂部導(dǎo)航欄方案，并明確指出可用于較長的標(biāo)題，以容納圖像或為頂部應(yīng)用程序欄提供更強(qiáng)的外觀。

但是這種方案在國內(nèi)的應(yīng)用的并不常見，因為中文環(huán)境下，出現(xiàn)這種超長標(biāo)題的場景比較少，就算有，大多也可以通過縮減標(biāo)題字?jǐn)?shù)的方法避免這種問題。

iOS 的大標(biāo)題導(dǎo)航欄使用反而更為常見，大標(biāo)題可以明確地與下方內(nèi)容進(jìn)行區(qū)分，默認(rèn)情況下，大標(biāo)題導(dǎo)航欄不包含背景底色或陰影。

大標(biāo)題導(dǎo)航欄樣式下，隨著用戶滾動頁面內(nèi)容，大標(biāo)題會轉(zhuǎn)換為標(biāo)準(zhǔn)大小的標(biāo)題。

導(dǎo)航欄的底色理論上允許各種顏色，同時也支持透明，但在設(shè)計時，基于體驗上的可視性，需要避免因?qū)Ш綑诘耐该鞯咨鴮?dǎo)致與下方信息難以區(qū)分的情況。

2）導(dǎo)航圖標(biāo)（可選）：導(dǎo)航圖標(biāo)是可選的，它可以采用以下任何形式：

菜單圖標(biāo)：這將打開一個導(dǎo)航抽屜，而在國內(nèi) App 中，這個規(guī)范不僅是漢堡導(dǎo)航按鈕的形式，也可以是頭像圖片等形式。

返回箭頭：返回上一個頁面，返回箭頭并非必須是向左箭頭，也有向下箭頭、關(guān)閉按鈕等，但總之都是“回退”的方向。

人們知道標(biāo)準(zhǔn)的后退按鈕可以讓他們通過信息層次結(jié)構(gòu)來追溯自己的步驟，但是，如果應(yīng)用希望實(shí)現(xiàn)自定義后退按鈕，就需要確保它仍然看起來像后退按鈕，行為符合人們的期望，與界面的其余部分匹配，并且在整個應(yīng)用程序中始終如一地實(shí)現(xiàn)。

常規(guī)返回箭頭：

向下返回箭頭（常用于可以下滑收起的頁面）：

關(guān)閉樣式返回按鈕（常用于瀏覽器/H5 等層級較深但可以一鍵關(guān)閉的頁面）：

3）標(biāo)題（可選）：應(yīng)用欄標(biāo)題可用于描述，主要作用為：用戶當(dāng)前所在的頁面/頁面中的具體場景/正在使用的應(yīng)用等，此外，標(biāo)題還被廣泛“改造”，具備很大的被定制的潛力，以滿足產(chǎn)品獨(dú)特的需求，這點(diǎn)會在下文講到。

MD 對于導(dǎo)航欄的標(biāo)題做了許多的規(guī)范建議，但是目前看似乎大部分應(yīng)用都并沒有遵守這些規(guī)范，比如：

如果標(biāo)題文本很長，請使用突出顯示的應(yīng)用程序欄，并將標(biāo)題換成兩行。

不要在常規(guī)的頂部應(yīng)用欄中包裝文字。

不要截斷文本，隱藏完整標(biāo)題可能會引起誤解。

不要縮小文本以使其僅占一行。

4）操作項（可選）：導(dǎo)航欄大多會包含操作項，在操作項中，最常用的動作一般會放在左側(cè)，然后朝最右邊的最少動作進(jìn)行。

5）更多菜單（可選）：針對某些功能操作，不適合直接展示在導(dǎo)航欄外面但由不能直接去掉，或者導(dǎo)航欄空間不足以承載，可以將其放在更多菜單里，點(diǎn)擊可以查看這些功能項。

此外，在國內(nèi)應(yīng)用中，導(dǎo)航欄還被用于與其他多種功能進(jìn)行結(jié)合：

搜索：搜索功能可以說是國內(nèi)應(yīng)用導(dǎo)航欄中最常見到的功能了，因為大部分應(yīng)用都將搜索視為應(yīng)用中的高優(yōu)先級功能，用戶可以通過搜索快速查詢應(yīng)用里的內(nèi)容，同時也為應(yīng)用帶來不小的商業(yè)化收益（關(guān)于搜索功能的詳解，可以查看上一篇文章）。

品牌名稱、logo：某些應(yīng)用需要展示自己的品牌特征，會將品牌名稱、logo 等在應(yīng)用中展示，而最適合的地方就是導(dǎo)航欄，因為這個位置在頁面的可自定義內(nèi)容中層級最高。

Tab 標(biāo)簽：導(dǎo)航欄中采用 Tab 標(biāo)簽(iOS 里稱為分段控件）的形式也比較常見，這種 Tab 可以讓應(yīng)用在一個頁面中通過 Tab 承載更多的信息，大多以純文本的形式出現(xiàn)，用戶可以快速識別并通過左右滑動的形式查看；另外，如果采用 Tab 形式，就需要保證幾個 Tab 的信息層級本身是一致的，以便于用戶理解。

五、編輯操作欄解析

頂部導(dǎo)航欄可以轉(zhuǎn)換為編輯操作欄，以向選定的項目提供相應(yīng)的動作；例如，當(dāng)用戶從圖庫中選擇照片時，頂部導(dǎo)航欄會轉(zhuǎn)換為具有與所選照片相關(guān)的動作的編輯操作欄。

當(dāng)然，iOS 也有不同的規(guī)范樣式，當(dāng) iOS 的導(dǎo)航欄切換為編輯操作欄時，操作項往往在頁面底部，而頁面頂部放置“完成”、“取消”等操作，此處還是需要根據(jù)不同場景進(jìn)行考量。

六、iOS 和 Android 導(dǎo)航欄的區(qū)別

1. 標(biāo)題對齊

在 iOS 上，導(dǎo)航欄的高度比 Android 版本短，其標(biāo)題在兩個平臺的默認(rèn)文本對齊方式有所不同，Android（MD 規(guī)范）為左對齊，而 iOS 為居中對齊。

iOS 在大標(biāo)題的狀態(tài)下，標(biāo)題會采用左對齊的方式。

Android 導(dǎo)航欄返回箭頭右側(cè)為該頁面標(biāo)題，iOS 返回箭頭右側(cè)一般不是當(dāng)前頁面的標(biāo)題，而是上一層級頁面的標(biāo)題，或者返回文案。

2. 導(dǎo)航欄背景

Android 一般使用陰影來表示導(dǎo)航欄中的層級關(guān)系，而在 iOS 中，應(yīng)用可以使用高斯模糊等方式來區(qū)分導(dǎo)航欄和內(nèi)容。

七、導(dǎo)航欄案例分析

除了上述提到的導(dǎo)航欄規(guī)范，以及常見的導(dǎo)航欄樣式，這里還想繼續(xù)討論導(dǎo)航欄的一些不同用法，這些用法可以巧妙地滿足一些不同的產(chǎn)品需求。

1. 沉浸式導(dǎo)航欄以保證設(shè)計效果

沉浸式導(dǎo)航欄常用于 App 首屏的設(shè)計上，App 的首屏往往存在 Banner 等信息，設(shè)計師基于節(jié)省設(shè)計空間、整體的視覺效果等方面的考量，會將導(dǎo)航欄疊在 Banner 等內(nèi)容之上；并且隨著頁面滑動，導(dǎo)航欄背景逐漸過渡為不透明，以保證上滑頁面之后，導(dǎo)航欄的信息仍然清晰可視，且不干擾用戶正在瀏覽的其他內(nèi)容。

以騰訊動漫為例，首屏狀態(tài)下導(dǎo)航欄為透明底色，以營造整體氛圍感，在頁面上滑之后，過渡為白色背景，兼顧了頁面信息流瀏覽效果。

騰訊動漫分類頁導(dǎo)航欄效果：

淘寶搜索結(jié)果頁導(dǎo)航欄效果：

沉浸式導(dǎo)航欄的設(shè)計容易出現(xiàn)信息與下方的圖像信息相互干擾導(dǎo)致影響閱讀的情況，在設(shè)計師需要注意保證基本的信息可視性。

此外，頁面的沉浸式并沒有必須將導(dǎo)航欄背景完全透明。如菜鳥裹裹，將導(dǎo)航欄單獨(dú)設(shè)計，采用懸浮在頁面上方的設(shè)計；而非常規(guī)的通欄樣式，頁面呼吸感更強(qiáng)，也可以營造整體沉浸感的瀏覽，這種設(shè)計在地圖相關(guān)的場景中被廣泛應(yīng)用。

2. 上滑隱藏導(dǎo)航欄以節(jié)省頁面空間

雖然導(dǎo)航欄是頁面中必不可少的，但并非是必須固定存在的，在合適的條件下，導(dǎo)航欄可以隨著頁面滑動而適時隱藏，以節(jié)省頁面空間；此外，在用戶注意力在頁面其他位置時，隱藏導(dǎo)航欄還能幫助用戶更加聚焦于正在關(guān)注的信息。

需要注意的是，導(dǎo)航欄必須能夠被用戶通過某種點(diǎn)擊/滑動等操作輕易呼出，以保證用戶切換操作目標(biāo)時的無縫切換。

以掌閱為例，掌閱在瀏覽小說過程中，會將導(dǎo)航欄收起，以保證頁面瀏覽效率，減少瀏覽干擾；同時，當(dāng)用戶希望呼出導(dǎo)航欄時，只需要向下滑動或者單擊頁面即可。

3. 導(dǎo)航欄標(biāo)題具備拓展操作空間

上文講到，導(dǎo)航欄的標(biāo)題存在很大的可改造空間，其中一點(diǎn)就是在許多應(yīng)用中，導(dǎo)航欄標(biāo)題被賦予了可操作的能力，這種設(shè)計將標(biāo)題的指引性與功能性相結(jié)合；除了讓操作更加便捷之外，更是節(jié)省了寸土寸金的頁面空間。

以微信公眾號為例，當(dāng)用戶瀏覽公眾號時，頁面上滑后導(dǎo)航欄將會顯示公眾號名稱，并且在某次改版中，加入了點(diǎn)擊名稱即可查看公眾號詳情的設(shè)計；這種設(shè)計將公眾號名稱與功能性結(jié)合起來，賦予了標(biāo)題的拓展空間，對公眾號的關(guān)注量提升也有一定幫助。

滴答清單：滴答清單是一個工具類應(yīng)用，用戶可以用它記錄一些日常事項，在事項編輯頁中，導(dǎo)航欄標(biāo)題是該事項所在的位置。這個標(biāo)題也支持點(diǎn)擊，點(diǎn)擊后，可以將記錄事項移動到不同的位置。

智行火車票：在查詢機(jī)票界面中，導(dǎo)航欄標(biāo)題一般顯示的是出發(fā)地點(diǎn)和到達(dá)地點(diǎn)，一般情況下，點(diǎn)擊即可直接切換出發(fā)地點(diǎn)和到達(dá)地點(diǎn)；而在查詢機(jī)票的界面，由于機(jī)票不穩(wěn)定因素多（如機(jī)票浮動等，用戶會涉及到比價等情況），用戶在這個場景中的潛在需求不僅僅是切換出發(fā)/到達(dá)地點(diǎn)。

因此，這個標(biāo)題還被賦予更多功能，用戶點(diǎn)擊即可切換歷史搜索的查詢記錄、更改出發(fā)/到達(dá)地點(diǎn)、查詢返程等操作。

4. 導(dǎo)航欄強(qiáng)化關(guān)鍵操作

對于應(yīng)用來說，總有一些功能是應(yīng)用希望可以讓用戶注意到并且進(jìn)行操作的，而導(dǎo)航欄的位置在頁面的最高層級，在這里突出某些操作，可以比較輕易地吸引用戶的注意力。

途家：在途家的詳情頁，用戶上滑頁面時，住宿時間選擇會固定在導(dǎo)航欄，便于用戶快速選擇。

在這種應(yīng)用中，選擇住宿時間是相對比較重要的功能，用戶的期望住宿時間內(nèi)，該房間是否空閑，直接影響用戶是否選擇該房間；這種設(shè)計通過將住宿時間常駐在導(dǎo)航欄，加強(qiáng)功能的曝光，減少用戶長時間瀏覽后，想要訂房卻發(fā)現(xiàn)期望時間段內(nèi)不可入住的情況。

騰訊新聞：在騰訊新聞瀏覽內(nèi)容時，文章作者會固定在導(dǎo)航欄，并且右側(cè)有明顯的關(guān)注按鈕。這種設(shè)計很明顯，就是希望提升用戶的關(guān)注轉(zhuǎn)化。

5. 導(dǎo)航欄信息切換巧妙“增加”空間

導(dǎo)航欄空間本身是有限的，但是我們可以通過某些微動效巧妙地“增加”導(dǎo)航欄的信息空間；比如通過信息切換的方式，將產(chǎn)品中某些信息暫時性地展示在導(dǎo)航欄，一段時間之后，恢復(fù)常規(guī)的信息。

QQ 音樂在導(dǎo)航欄的設(shè)計中，有很多值得參考的點(diǎn)：

用戶在 QQ 音樂詳情頁點(diǎn)擊收藏時，導(dǎo)航欄右側(cè)信息會臨時切換為分享提示條。通過微動效出現(xiàn)的形式，可以第一時間吸引用戶注意力；同時，這種提示并非是固定的，而是與用戶觸發(fā)存在關(guān)聯(lián)性，因此更適合采用臨時狀態(tài)，在導(dǎo)航欄的位置既不顯得過于突出和干擾，又能吸引用戶注意，結(jié)合得比較巧妙。

用戶進(jìn)入 QQ 音樂歌單時，歌單導(dǎo)航欄標(biāo)題會切換為一句話，這句話具備因不同歌單而異，可以算是導(dǎo)航欄的小彩蛋；數(shù)秒鐘之后，切換為正常的歌單標(biāo)題。

用戶進(jìn)入 QQ 音樂播放頁時，有時導(dǎo)航欄會出現(xiàn)與該歌手相關(guān)的“撲通小組”的提示，點(diǎn)擊可以跳轉(zhuǎn)到對應(yīng)的小組。

當(dāng)用戶聽一首歌時，大概率也會對這首歌比較感興趣，在這種場景下，用戶點(diǎn)擊轉(zhuǎn)化率或許也會有不小的提升；這種設(shè)計充分利用了導(dǎo)航欄的空間，同樣也是數(shù)秒鐘之后，通過微動效，切換為正常的導(dǎo)航欄。

6. 導(dǎo)航欄顯示關(guān)鍵信息

考慮到應(yīng)用的需求多樣，谷歌的 Material Design 、蘋果的 iOS 規(guī)范并不能完美地符合所有需求；導(dǎo)航欄標(biāo)題在國內(nèi)的用法中，不僅只有一行文字，甚至不僅只有文字，而是根據(jù)產(chǎn)品不同訴求進(jìn)行改造，以保證關(guān)鍵信息可以充分展示。

豆瓣：用戶在瀏覽豆瓣的電影詳情頁時，隨著頁面上滑，電影封面、名稱、評分等信息將會固定在導(dǎo)航欄上。

我們知道豆瓣里評分是一個十分重要的功能，許多用戶會依據(jù)別人的評分來初步判斷一個電影的質(zhì)量，因此評分有必要處于高優(yōu)先級的展示位置；單純的導(dǎo)航欄規(guī)范很難滿足這一點(diǎn)，于是豆瓣對導(dǎo)航欄標(biāo)題信息進(jìn)行了重新的設(shè)計。

發(fā)發(fā)奇：發(fā)發(fā)奇是一款電商類應(yīng)用，商品價格高，在該應(yīng)用的詳情頁中，上滑頁面后，發(fā)發(fā)奇會將商品名稱和價格這種重要信息會固定在導(dǎo)航欄。

7. 根據(jù)操作信息實(shí)時變動

導(dǎo)航欄是針對于所在頁面而言的指示性控件，因此，當(dāng)頁面信息發(fā)生變化，導(dǎo)航欄也可以隨之發(fā)生變化，以適應(yīng)當(dāng)前內(nèi)容。

知乎：用戶在知乎視頻信息流瀏覽時，隨著視頻的切換，導(dǎo)航欄標(biāo)題也會跟隨變化。

八、結(jié)語

導(dǎo)航欄是頁面設(shè)計中最常見的控件，雖然常用，但不見得每個人都能用好。作為設(shè)計師，需要考慮到如何在導(dǎo)航欄基礎(chǔ)能力上，賦予其更大的能力發(fā)揮空間。

這篇文章介紹了導(dǎo)航欄的基礎(chǔ)規(guī)范，也列舉業(yè)內(nèi)對導(dǎo)航欄的設(shè)計做的比較好的一些應(yīng)用，包括導(dǎo)航欄如何配合操作進(jìn)行變化，如何讓信息更加高效展示等，希望這篇文章對你有幫助。

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

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