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

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

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

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

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

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

1. 穩(wěn)定的

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

2. 指引的

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

3. 統(tǒng)一的

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

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

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

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

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

2. 編輯操作欄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

常規(guī)返回箭頭：

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

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

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

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

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

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

不要截?cái)辔谋荆[藏完整標(biāo)題可能會(huì)引起誤解。

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

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

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

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

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

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

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

五、編輯操作欄解析

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

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

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

1. 標(biāo)題對(duì)齊

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

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

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

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

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

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

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

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

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

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

騰訊動(dòng)漫分類(lèi)頁(yè)導(dǎo)航欄效果：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

八、結(jié)語(yǔ)

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

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

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

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