UI設(shè)計(jì)學(xué)習(xí)起來要注意的東西還是有很多的，例如導(dǎo)航欄，導(dǎo)航欄UI設(shè)計(jì)規(guī)范及注意事項(xiàng)有哪些呢?今天小編為大家詳細(xì)的介紹一下關(guān)于導(dǎo)航欄的設(shè)計(jì)注意事項(xiàng)，希望能夠幫助到今后工作的你。

　　UI培訓(xùn)分享：導(dǎo)航欄UI設(shè)計(jì)規(guī)范及注意事項(xiàng)有哪些?設(shè)計(jì)好導(dǎo)航欄不僅僅是視覺上的工作，表現(xiàn)的方式、承載的按鈕與組件、滾屏?xí)r的組合操作還能給用戶帶來極大的體驗(yàn)增益。

　　一、導(dǎo)航欄位置

　　導(dǎo)航欄 Navigation Bar，也簡稱為Navbar。有不少剛?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)。

　　導(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)聯(lián)。

　　二、導(dǎo)航欄UI設(shè)計(jì)規(guī)范與實(shí)際項(xiàng)目的應(yīng)用

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

　　1、導(dǎo)航欄標(biāo)題設(shè)計(jì)規(guī)范

　　2017年以前的移動(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ì)需求確定)。

　　大標(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í)候我們在進(jìn)行大標(biāo)題設(shè)計(jì)時(shí)，會(huì)適當(dāng)縮小，一般為56px-64px居多。

　　大標(biāo)題導(dǎo)航欄的優(yōu)點(diǎn)毋庸置疑，頁面留白更多，呼吸感更強(qiáng)，大氣現(xiàn)代、逼格更高，因?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)。

　　2、導(dǎo)航按鈕及內(nèi)容控件按鈕設(shè)計(jì)規(guī)范

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

　　與iOS的定義有著天壤之別，iOS非常明確地賦予了工具欄的定義，并且將導(dǎo)航欄和工具欄(Toolbars)徹底地分離開，典型案例就是Safari。在內(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)目中我們經(jīng)常為了快速落地，會(huì)存在一稿適配雙平臺(tái)的情況。這時(shí)候我們應(yīng)該遵從哪一個(gè)平臺(tái)的規(guī)范呢?答案是：許多大廠的做法已經(jīng)向我們驗(yàn)證，規(guī)范不分家。

　　在iOS諸多的應(yīng)用中溢出菜單早已普及，盡管這是Material Design提出的設(shè)計(jì)理念。雖然國內(nèi)遵從Material Design進(jìn)行Android應(yīng)用設(shè)計(jì)的情況相對(duì)較少，但它提供的設(shè)計(jì)理念與方案卻并不局限在安卓平臺(tái)。

　　3、分割線設(shè)計(jì)規(guī)范

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

　　4、其他控件

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

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

　　導(dǎo)航欄用于構(gòu)架當(dāng)前屏幕的內(nèi)容，闡述當(dāng)前屏幕的狀態(tài)，并且起到連接父子級(jí)頁面層次結(jié)構(gòu)的作用，在一個(gè)頁面發(fā)揮著重要作用，設(shè)計(jì)好導(dǎo)航欄不僅僅是視覺上的工作，表現(xiàn)的方式、承載的按鈕與組件、滾屏?xí)r的組合操作還能給用戶帶來極大的體驗(yàn)增益。

　　導(dǎo)航欄UI設(shè)計(jì)規(guī)范及注意事項(xiàng)有哪些?上面已經(jīng)為大家做了詳細(xì)的介紹，沒想到一個(gè)小小的導(dǎo)航欄就有這么多要注意的地方，可想而知掌握好導(dǎo)航欄的設(shè)計(jì)技巧對(duì)一名設(shè)計(jì)師來說尤為重要!

　　想要了解更多UI培訓(xùn)的具體課程內(nèi)容，就加入千鋒教育的UI培訓(xùn)交流群吧-809348958，群內(nèi)會(huì)有專職的老師為你答疑解惑。另外群內(nèi)不定期還會(huì)有免費(fèi)直播課，由現(xiàn)役的講師來授課。