UI設計學習起來要注意的東西還是有很多的，例如導航欄，導航欄UI設計規范及注意事項有哪些呢?今天小編為大家詳細的介紹一下關于導航欄的設計注意事項，希望能夠幫助到今后工作的你。

　　UI培訓分享：導航欄UI設計規范及注意事項有哪些?設計好導航欄不僅僅是視覺上的工作，表現的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。

　　一、導航欄位置

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

　　在iOS上，導航欄是指顯示在應用程序頂部，位于狀態欄下方的容器區域，層級應高于當前頁面內容。在安卓上，Google公司在Material Design中也賦予了它同樣的定義，但是卻給了它另一個名稱，頂部應用欄( Top App Bar)。

　　導航欄是用于構架當前屏幕的內容，闡述當前屏幕的狀態，并且起到連接父子級頁面層次結構的作用。很多人疑惑，為什么標簽欄不能叫做底部導航?因為標簽欄是構架了多個屏幕之間平級頁面的內容切換，和導航的定義沒有任何關聯。

　　二、導航欄UI設計規范與實際項目的應用

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

　　1、導航欄標題設計規范

　　2017年以前的移動端規范下的導航欄還是循規蹈矩的，樣式單一。但隨著iPhone X等一系列全面屏手機相繼問世后，移動設備在屏幕高度上有了進一步的擴展，界面設計在一屏內的發揮空間也隨之增加。iOS11發布后，大標題導航欄設計風格興起，隨后被引入平臺規范。

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

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

　　大標題是將導航欄欄高增加到192px(iOS@2x)，保留高度為88px的導航容器來承載內容控件按鈕，將標題下墜居左。iOS的標準規范定義大標題的字號為68px。但由于英文有大小寫區分，在視覺上有一定的層次表現，而中文因為缺少一定的層次結構，并且相同字號的中文視覺大小大于英文，所以大多數時候我們在進行大標題設計時，會適當縮小，一般為56px-64px居多。

　　大標題導航欄的優點毋庸置疑，頁面留白更多，呼吸感更強，大氣現代、逼格更高，因為頁面標題巨大，能夠幫助用戶快速確認當前所處位置;采用統一的大標題，讓頁面布局風格快速統一。但缺點也顯而易見，因為增加了導航欄的高度，導致屏幕利用率降低，一些通過廣告變現或更加注重一屏內內容呈現的應用便中和了常規導航與大標題導航的優缺點，進行了風格改進。

　　2、導航按鈕及內容控件按鈕設計規范

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

　　與iOS的定義有著天壤之別，iOS非常明確地賦予了工具欄的定義，并且將導航欄和工具欄(Toolbars)徹底地分離開，典型案例就是Safari。在內容控件上iOS與Material Design也大相徑庭，Material Design不去限制你的內容控件多少，因為它提供了溢出菜單，并可以根據屏寬的變化，自適應釋出和收納溢出菜單中的控件。

　　而iOS則規定我們，要給內容控件按鈕足夠多的空間，必要的時候，隱藏導航欄標題也未嘗不可。真實的項目中我們經常為了快速落地，會存在一稿適配雙平臺的情況。這時候我們應該遵從哪一個平臺的規范呢?答案是：許多大廠的做法已經向我們驗證，規范不分家。

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

　　3、分割線設計規范

　　分割線只是一種體現形式，我想要表達的是，別忘記區分導航欄與內容界面的視覺層級關系。Matetial Design提醒我們，頂部應用欄可以與內容位于同一高度，但滾動時，請增加導航欄的視覺高度，讓內容在其后方滾動。而iOS則默認采用了背景模糊的方式區分了導航欄與內容區域的層級關系。

　　4、其他控件

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

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

　　導航欄用于構架當前屏幕的內容，闡述當前屏幕的狀態，并且起到連接父子級頁面層次結構的作用，在一個頁面發揮著重要作用，設計好導航欄不僅僅是視覺上的工作，表現的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。

　　導航欄UI設計規范及注意事項有哪些?上面已經為大家做了詳細的介紹，沒想到一個小小的導航欄就有這么多要注意的地方，可想而知掌握好導航欄的設計技巧對一名設計師來說尤為重要!

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