介面設計中，用了導航並不代表會用導航欄。正因為無法輕易刪減，逃不掉就必須用好它，不然很容易淪為頁面的減分項。

講一個老東家的故事。

一次產品迭代會上，老闆在臺上講到打算重構C端產品框架，想重整標籤欄的標籤設定。可在講到這一部分的時候卡殼了，遲遲說不出“標籤欄”這個控制元件名，氣氛有那麼一丁點尷尬。

這時，在座的一名產品經理慷慨解囊地說：底部導航欄！

嗯，不全錯，這麼說也算能理解。控制元件在介面底部，能引導使用者切換頁面。

但如果標籤欄把導航欄的名字佔了……那原本的導航欄應該叫什麼呢？頂部標題欄？

那導航欄裡的內容控制元件又應該叫什麼？左上角或者右上角的按鈕？

接地氣的名稱讓我們一聽就懂，直到有一天你打算跳槽，你拿著自己的作品到下家面試，設計總監幾個術語啪啪把你問得不知所云。

這些“死控制元件”、“死欄目”在頁面上不可或缺，在設計每一個頁面時，你以為你對它們早已瞭如指掌，偏偏在關鍵時刻，它們卻六親不認了（說多了都是淚，我曾經面試也吃過專業名詞的虧，以後有機會再聊）。

“我又不走形式主義，為什麼一定要說專用名詞裝x呢？接地氣的名稱不是挺好嗎，溝通高效。”

很簡單的道理，如果名詞和概念都混淆不清，有沒有花功夫在UI設計領域進行深度專研也就一目瞭然了，還何以談論如何將它們運用自如呢？

“你連迪麗熱媽和古力娜扎都沒分清，你敢說你知道什麼是真皮沙發？”

我的經歷，讓我產生了一個想法，是時候做一些知識內容沉澱與分享了，不能讓更多的人走我踩過的坑，我們便來講一講導航欄。

一、導航欄究竟在哪裡

導航欄 Navigation Bar，也簡稱為Navbar。一定會有不少剛入門的UI新人，在諸多的Bar控制元件中，難以區分它所指代的區域。

在iOS上，導航欄是指顯示在應用程式頂部，位於狀態列下方的容器區域，層級應高於當前頁面內容。

在安卓上，Google公司在Material Design中也賦予了它同樣的定義，但是卻給了它另一個名稱，頂部應用欄（Top App Bar）。

請務必要記住：

導航欄是用於構架當前螢幕的內容，闡述當前螢幕的狀態，並且起到連線父子級頁面層次結構的作用。

所以，回到開頭的小故事，為什麼標籤欄不能叫做底部導航。因為標籤欄是構架了多個螢幕之間平級頁面的內容切換，和“導航”的定義沒有半毛錢關係。

二、規範裡告訴我們該怎麼做 VS 實際專案我們該怎麼做

一個基本的導航欄容器一般承載的資訊可能會有：標題；導航按鈕；內容控制元件按鈕；其他控制元件（比如搜尋欄、分頁標籤或分頁控制元件等）；分割線（比如微信導航欄）。

2。1 導航欄標題

時間退回2017年以前，這時候的移動端規範下的導航欄還是循規蹈矩的，樣式單一。但隨著iPhone X等一系列全面屏手機相繼問世後，移動裝置在螢幕高度上有了進一步的擴充套件，介面設計在一屏內的發揮空間也隨之增加。iOS11釋出後，大標題導航欄設計風格興起，隨後被引入平臺規範。

於是，現在iOS與Material Design在導航欄上也都定義了兩種導航欄標題規範：常規標題與大標題。

常規標題是指在高度為88px（iOS@2x下）的導航容器中，居中放置一個當前頁面的標題。標題字號一般為34px-38px（34px為iOS標準規範，但實際專案中可以在儘量在不小於34px標準的情況下根據設計需求確定）。

大標題是將導航欄欄高增加到192px（iOS@2x），保留高度為88px的導航容器來承載內容控制元件按鈕，將標題下墜居左。

iOS的標準規範定義大標題的字號為68px，但由於英文有大小寫區分，在視覺上有一定的層次表現。而中文因為缺少一定的層次結構，並且相同字號的中文視覺大小大於英文；所以，大多數時候我們在進行大標題設計時，會適當縮小，一般為56px-64px居多。

大標題導航欄的優點毋庸置疑，頁面留白更多，呼吸感更強，大氣現代、逼格更高。因為頁面標題巨大，能夠幫助使用者快速確認當前所處位置。採用統一的大標題，讓頁面佈局風格快速統一。

但缺點也顯而易見，因為增加了導航欄的高度，導致螢幕利用率降低。一些透過廣告變現或更加註重一屏內內容呈現的應用便中和了常規導航與大標題導航的優缺點，進行了風格改進。

那我們如何在常規標題和大標題之間抉擇呢？

這可不單單是設計風格的問題，還受產品定位與功能的影響。

蘋果的設計師在Apple Music中實驗並驗證了一條結論——在內容非常豐富、層級結構較深的產品當中，大標題能夠幫使用者快速確認自己的位置。

所以，我認為適合使用大標題風格的產品一定是突出內容呈現而不是功能繁瑣，產品定位更偏向於現代或文藝藝術，需要快速統一介面風格。至於層級結構需不需要很深，這並不一定；我反而覺得功能越單一、產品體量級越輕的應用，越適合大標題。

2。2 導航按鈕及內容控制元件按鈕

iOS規定導航按鈕位置僅能用於放置返回按鈕，可以新增一個層級的麵包屑，幫助使用者有效地明確當前頁面層級。

Material Design中，則不僅可以放置返回按鈕，還另有作用，選單圖示-用於開啟導航抽屜或者關閉圖示-關閉工具欄。

這一點與iOS的定義有著天壤之別，iOS非常明確地賦予了工具欄的定義，並且將導航欄和工具欄（Toolbars）徹底地分離開，典型案例就是Safari。

在內容控制元件上iOS與Material Design也大相徑庭，Material Design不去限制你的內容控制元件多少，因為它提供了溢位選單，並可以根據屏寬的變化，自適應釋出和收納溢位選單中的控制元件。

而iOS則規定我們，要給內容控制元件按鈕足夠多的空間，必要的時候，隱藏導航欄標題也未嘗不可。

那麼真實的專案中，我們經常為了快速落地，會存在一稿適配雙平臺的情況，應該遵從哪一個平臺的規範呢？

答案：許多大廠的做法已經向我們驗證，規範不分家。

在iOS諸多的應用中溢位選單早已普及，儘管這是Material Design提出的設計理念。

雖然國內遵從Material Design進行Android應用設計的情況相對較少，但它提供的設計理念與方案卻並不侷限在安卓平臺。

2。3 分割線

分割線只是一種體現形式，我想要表達的是，別忘記區分導航欄與內容介面的視覺層級關係。

Matetial Design提醒我們，頂部應用欄可以與內容位於同一高度，但滾動時，請增加導航欄的視覺高度，讓內容在其後方滾動。而iOS則預設採用了背景模糊的方式，以此區分導航欄與內容區域的層級關係。

缺少視覺分割會讓使用者分不清導航欄與內容介面，它們看起來會更像一個平級，對使用者視覺區分內容主次其實是極不友好的。

2。4 其他控制元件

關於其他控制元件，iOS只在規範中提及到了分頁控制元件。蘋果設計師考慮到部分場景在當前頁面中還存在資訊層級結構劃分，此時建議可以在導航欄中使用分段控制元件。

但國內的應用程式早已將導航欄容器的作用發揮到極致，基於導航欄層級始終高於內容區域的特性，我們通常可以將分段控制元件、分頁標籤、搜尋欄等使用者可能隨時使用的工具放在導航欄中。

三、總結

導航欄是幾乎每一個介面都必定存在的控制元件，正因為無法輕易刪減，逃不掉就必須用好它，不然很容易淪為頁面的減分項。

設計好導航欄不僅僅是視覺上的工作，表現的方式、承載的按鈕與元件、滾屏時的組合操作還能給使用者帶來極大的體驗增益。

這一期我只從平臺規範入手，瞭解了導航欄基本的使用方式，下一期我們再進階探索一下，有哪些不錯的應用，在導航欄上做出了不錯的表現吧。

如果你有關於導航欄的其他見解，歡迎在下方留言討論。

本文由 @Howie_t 原創釋出於人人都是產品經理。未經許可，禁止轉載。

題圖來自unsplash，基於CC0協議