講一個(gè)老東家的故事。一次產(chǎn)品迭代會(huì)上，老板在臺(tái)上講到打算重構(gòu) C 端產(chǎn)品框架，想重整標(biāo)簽欄的標(biāo)簽設(shè)定。可在講到這一部分的時(shí)候卡殼了，遲遲說不出「標(biāo)簽欄」這個(gè)控件名，氣氛有些尷尬。這時(shí)一名產(chǎn)品經(jīng)理說道：底部導(dǎo)航欄！會(huì)議得以繼續(xù)。

不全錯(cuò)，這么說也算能理解?？丶诮缑娴撞?，能引導(dǎo)用戶切換頁面。但如果標(biāo)簽欄把導(dǎo)航欄的名字占了……那原本的導(dǎo)航欄應(yīng)該叫什么呢？頂部標(biāo)題欄？那導(dǎo)航欄里的內(nèi)容控件又應(yīng)該叫什么？左上角或者右上角的按鈕？

接地氣的名稱讓我們一聽就懂，直到有一天你打算跳槽，你拿著自己的作品到下家面試，設(shè)計(jì)總監(jiān)幾個(gè)術(shù)語啪啪把你問得不知所云。這些「死控件」、「死欄目」在頁面上不可或缺，在設(shè)計(jì)每一個(gè)頁面時(shí)你以為對(duì)它們?cè)缫蚜巳缰刚?，偏偏在關(guān)鍵時(shí)刻，它們卻六親不認(rèn)了。

「我又不走形式主義，為什么一定要說專用名詞呢？接地氣的名稱不是挺好嗎，溝通?！购芎?jiǎn)單的道理，如果名詞和概念都混淆不清，有沒有花功夫在 UI 設(shè)計(jì)領(lǐng)域進(jìn)行深度專研也就一目了然了，還何以談?wù)撊绾螌⑺鼈冞\(yùn)用自如呢？

這樣的經(jīng)歷，讓我產(chǎn)生了一個(gè)想法。是時(shí)候做一些知識(shí)內(nèi)容沉淀與分享了，不能讓更多的人走我踩過的坑。第一期我們便來講一講導(dǎo)航欄。

導(dǎo)航欄究竟在哪里

導(dǎo)航欄 Navigation Bar，也簡(jiǎn)稱為 Navbar。一定會(huì)有不少剛?cè)腴T的 UI 新人，在諸多的 Bar 控件中，難以區(qū)分它所指代的區(qū)域。

在 iOS 上，導(dǎo)航欄是指顯示在應(yīng)用程序頂部，位于狀態(tài)欄下方的容器區(qū)域，層級(jí)應(yīng)高于當(dāng)前頁面內(nèi)容。

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

△ iOS與安卓的規(guī)范與命名區(qū)別

請(qǐng)務(wù)必要記?。簩?dǎo)航欄是用于構(gòu)架當(dāng)前屏幕的內(nèi)容，闡述當(dāng)前屏幕的狀態(tài)，并且起到連接父子級(jí)頁面層次結(jié)構(gòu)的作用。所以回到開頭的小故事，為什么標(biāo)簽欄不能叫做底部導(dǎo)航，因?yàn)闃?biāo)簽欄是構(gòu)架了多個(gè)屏幕之間平級(jí)頁面的內(nèi)容切換，和「導(dǎo)航」的定義沒有關(guān)系。

規(guī)范里告訴我們?cè)撛趺醋?vs 實(shí)際項(xiàng)目我們?cè)撛趺醋?/span>

一個(gè)基本的導(dǎo)航欄容器一般承載的信息可能會(huì)有：標(biāo)題、導(dǎo)航按鈕、內(nèi)容控件按鈕、其他控件（比如搜索欄、分頁標(biāo)簽或分頁控件等），千萬別忘了還有分割線。（比如微信的導(dǎo)航欄）

1. 導(dǎo)航欄標(biāo)題

時(shí)間倒退回 2017 年以前，這時(shí)候的移動(dòng)端規(guī)范下的導(dǎo)航欄還是循規(guī)蹈矩的，樣式單一。但隨著 iPhone X 等一系列全面屏手機(jī)相繼問世后，移動(dòng)設(shè)備在屏幕高度上有了進(jìn)一步的擴(kuò)展，界面設(shè)計(jì)在一屏內(nèi)的發(fā)揮空間也隨之增加。iOS11 發(fā)布后，大標(biāo)題導(dǎo)航欄設(shè)計(jì)風(fēng)格興起，隨后被引入平臺(tái)規(guī)范。

于是現(xiàn)在 iOS 與 Material Design 在導(dǎo)航欄上也都定義了兩種導(dǎo)航欄標(biāo)題規(guī)范，常規(guī)標(biāo)題與大標(biāo)題。

常規(guī)標(biāo)題是指在高度為 88px（iOS@2x下）的導(dǎo)航容器中，居中放置一個(gè)當(dāng)前頁面的標(biāo)題。標(biāo)題字號(hào)一般為 34px-38px（34px 為 iOS 標(biāo)準(zhǔn)規(guī)范，但實(shí)際項(xiàng)目中可以盡量在不小于 34px 標(biāo)準(zhǔn)的情況下根據(jù)設(shè)計(jì)需求確定）。

△ 常規(guī)導(dǎo)航不同標(biāo)題字號(hào)的案例及視覺效果

大標(biāo)題是將導(dǎo)航欄高增加到 192px（iOS@2x），保留高度為 88px 的導(dǎo)航容器來承載內(nèi)容控件按鈕，將標(biāo)題下墜居左。iOS 的標(biāo)準(zhǔn)規(guī)范定義大標(biāo)題的字號(hào)為 68px。但由于英文有大小寫區(qū)分，在視覺上有一定的層次表現(xiàn)，而中文因?yàn)槿鄙僖欢ǖ膶哟谓Y(jié)構(gòu)，并且相同字號(hào)的中文視覺大小大于英文，所以大多數(shù)時(shí)候我們?cè)谶M(jìn)行大標(biāo)題設(shè)計(jì)時(shí)，會(huì)適當(dāng)縮小，一般為 56px-64px 居多。

△ 大標(biāo)題不同標(biāo)題字號(hào)的案例及視覺效果

大標(biāo)題導(dǎo)航欄的優(yōu)點(diǎn)毋庸置疑，頁面留白更多，呼吸感更強(qiáng)，大氣現(xiàn)代、格調(diào)更高，因?yàn)轫撁鏄?biāo)題巨大，能夠幫助用戶快速確認(rèn)當(dāng)前所處位置。采用統(tǒng)一的大標(biāo)題，讓頁面布局風(fēng)格快速統(tǒng)一。但缺點(diǎn)也顯而易見，因?yàn)樵黾恿藢?dǎo)航欄的高度，導(dǎo)致屏幕利用率降低，一些通過廣告變現(xiàn)或更加注重一屏內(nèi)內(nèi)容呈現(xiàn)的應(yīng)用便中和了常規(guī)導(dǎo)航與大標(biāo)題導(dǎo)航的優(yōu)缺點(diǎn)，進(jìn)行了風(fēng)格改進(jìn)。

△ 改進(jìn)的大標(biāo)題案例

那我們?nèi)绾卧诔Ｒ?guī)標(biāo)題和大標(biāo)題之間抉擇呢？這可不單單是設(shè)計(jì)風(fēng)格的問題，還受產(chǎn)品定位與功能的影響。蘋果的設(shè)計(jì)師在 Apple Music 中實(shí)驗(yàn)并驗(yàn)證了一條結(jié)論——在內(nèi)容非常豐富、層級(jí)結(jié)構(gòu)較深的產(chǎn)品當(dāng)中，大標(biāo)題能夠幫用戶快速確認(rèn)自己的位置。

所以我理解的適合使用大標(biāo)題風(fēng)格的產(chǎn)品一定是：突出內(nèi)容呈現(xiàn)而不是功能繁瑣的；產(chǎn)品定位更偏向于現(xiàn)代或文藝藝術(shù)的；需要快速統(tǒng)一界面風(fēng)格的。而層級(jí)結(jié)構(gòu)需不需要很深，這并不一定，我反而覺得功能越單一、產(chǎn)品體量級(jí)越輕的應(yīng)用，越適合大標(biāo)題。

所以如此看來，國(guó)內(nèi)使用大標(biāo)題成功的案例就為數(shù)不多了，這可能與中文字體還有國(guó)內(nèi) app 產(chǎn)品功能都比較繁瑣的原因有關(guān)，真正做到了使用大標(biāo)題快速幫助用戶確認(rèn)自己位置，并且結(jié)合了產(chǎn)品特性與風(fēng)格的，我認(rèn)為人人都是產(chǎn)品經(jīng)理的移動(dòng)端在這方面做得非常棒。

2. 導(dǎo)航按鈕及內(nèi)容控件按鈕

iOS 規(guī)定導(dǎo)航按鈕位置僅能用于放置返回按鈕，可以添加一個(gè)層級(jí)的面包屑，幫助用戶有效地明確當(dāng)前頁面層級(jí)；Material Design 中，不僅可以放置返回按鈕，還另有作用，菜單圖標(biāo)-用于打開導(dǎo)航抽屜或者關(guān)閉圖標(biāo)-關(guān)閉工具欄。

△ iOS與安卓的導(dǎo)航按鈕區(qū)域區(qū)別

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

△ iOS明確地將導(dǎo)航欄與工具欄分離開

在內(nèi)容控件上 iOS 與 Material Design 也大相徑庭，Material Design 不去限制你的內(nèi)容控件多少，因?yàn)樗峁┝艘绯霾藛危⒖梢愿鶕?jù)屏寬的變化，自適應(yīng)釋出和收納溢出菜單中的控件。

而 iOS 則規(guī)定我們，要給內(nèi)容控件按鈕足夠多的空間，必要的時(shí)候，隱藏導(dǎo)航欄標(biāo)題也未嘗不可。

那么真實(shí)的項(xiàng)目中，我們往往為了快速落地，會(huì)存在一稿適配雙平臺(tái)的情況。這時(shí)候我們應(yīng)該遵從哪一個(gè)平臺(tái)的規(guī)范呢？答案是：許多大廠的做法已經(jīng)向我們驗(yàn)證，規(guī)范不分家。

在 iOS 諸多的應(yīng)用中溢出菜單早已普及，盡管這是 Material Design 提出的設(shè)計(jì)理念。

△ Material Design的溢出菜單也被運(yùn)用在iOS端

雖然國(guó)內(nèi)遵從 Material Design 進(jìn)行 Android 應(yīng)用設(shè)計(jì)的情況相對(duì)較少，但它提供的設(shè)計(jì)理念與方案卻并不局限在安卓平臺(tái)。

3. 分割線

分割線只是一種體現(xiàn)形式，我想要表達(dá)的是，別忘記區(qū)分導(dǎo)航欄與內(nèi)容界面的視覺層級(jí)關(guān)系。Matetial Design 提醒我們，頂部應(yīng)用欄可以與內(nèi)容位于同一高度，但滾動(dòng)時(shí)，請(qǐng)?jiān)黾訉?dǎo)航欄的視覺高度，讓內(nèi)容在其后方滾動(dòng)。而 iOS 則默認(rèn)采用了背景模糊的方式區(qū)分了導(dǎo)航欄與內(nèi)容區(qū)域的層級(jí)關(guān)系。

△ 區(qū)分導(dǎo)航欄與內(nèi)容區(qū)域的層級(jí)關(guān)系

缺少視覺分割會(huì)讓用戶分不清導(dǎo)航欄與內(nèi)容界面，它們看起來會(huì)更像一個(gè)平級(jí)。對(duì)用戶視覺區(qū)分內(nèi)容主次其實(shí)是極不友好的。

4. 其他控件

關(guān)于其他控件，iOS 只在規(guī)范中提及到了分頁控件。蘋果設(shè)計(jì)師考慮到部分場(chǎng)景在當(dāng)前頁面中還存在信息層級(jí)結(jié)構(gòu)劃分，此時(shí)建議可以在導(dǎo)航欄中使用分段控件。

但國(guó)內(nèi)的應(yīng)用程序早已將導(dǎo)航欄容器的作用發(fā)揮到，基于導(dǎo)航欄層級(jí)始終高于內(nèi)容區(qū)域的特性，我們通?？梢詫⒎侄慰丶?、分頁標(biāo)簽、搜索欄等等用戶可能隨時(shí)使用的工具放在導(dǎo)航欄中。

△ 導(dǎo)航欄通常會(huì)承載的其他控件

總結(jié)

導(dǎo)航欄是幾乎每一個(gè)界面都必定存在的控件，正因?yàn)闊o法輕易刪減，逃不掉就必須用好它，不然很容易淪為頁面的減分項(xiàng)。

設(shè)計(jì)好導(dǎo)航欄不僅僅是視覺上的工作，表現(xiàn)的方式、承載的按鈕與組件、滾屏?xí)r的組合操作還能給用戶帶來極大的體驗(yàn)增益。

文章來源：優(yōu)設(shè)    作者：