前陣師傅帶著整理設計規范，結束項目后從規范角度去反思，會發現自己還有很多東西要學。交互設計師真的是一個很專業的職業（劃重點?。?，雖然國內市場入門門檻低，但是要做出合理的方案是需要有專業的知識儲備的。

定義

iOS：導航欄能夠實現在應用不同信息層級結構間的導航，有時候也可用于管理當前屏幕內容。

類型

1. iOS

（1）基礎規范

如圖是ios系統導航的基礎形式，其中text為上一級的標題，title為當前視圖的標題，a代表操作控件。

ios10規范中提及：一般來說，導航欄上應該不多于以下三個元素：當前視圖的標題、返回按鈕和一個針對當前的操作控件。

在已下載的253個app（app來源于豌豆莢的設計獎，appso和最美應用的推薦，app store的編輯推薦等，），歸納了以下三種形式：

1. 含三種元素
2. 不含返回按鈕
3. 不含返回及標題

1）含三種元素

大部分app沒有顯示上一級標題，右邊的操作控件最多為2個。在使用體驗上，只要保證兩個控件之間距離符合規范，2個操作控件是可行的。

2）不含返回按鈕

不含返回的一般為一級頁，有一個特殊例子是mindnode在導航欄加了四個操作控件

mindnode是一個思維導圖app，主要功能是子級頁的文稿編輯，主頁的優先需求也是展示內容，所以把附加功能放置在導航欄是符合當前app的需求的。

3）不含返回及標題

大部分app右邊的操作控件一般不多余3個,操作控件多了以后會壓縮icon尺寸,有悖于ios10的清晰原則,而day one journal的導航欄右邊有4個按鈕。

day one是一個日記本app，可以看出它的用戶群體定位是中深度用戶，導航欄的操作控件都是新手用戶很少使用到的，但是對于中深度用戶來說是高頻的便捷操作?？墒且泊嬖陂g距過小，容易誤操作的問題。

（2）app應用

如圖是導航欄的應用形式之一，為標簽與操作控件的結合。

在已下載的253個app，歸納了以下四種形式：

1. 包含搜索框
2. 包含標簽
3. 包含logo
4. 包含分段控件

1）包含搜索框

如圖所示，操作控件加搜索框，多用于搜索需求優先級較高的頁面。與搜索欄的區別是，搜索欄不包含管理當前頁面的操作控件。

app中涉及的形式如下：

2）包含標簽

如圖所示，操作控件加多個標簽，一般不多于3個，若多余三個可以考慮另設標簽欄。

app中涉及的形式如下

3）包含logo

如圖所示，logo加操作控件

app中涉及的形式如下：

4）包含分段控件

基本形式如圖所示，logo加操作控件，ios規范里提及在導航欄中使用了分段控件，就不要再放標題以及其它多余控件，所以在使用分段控件時，左右兩側的操作按鈕應越少越好。

app中涉及的形式如下：

2. Material Design

（1）基礎規范

如圖是Android導航的常見模式，抽屜導航及標簽。

在已下載的68個app（app來源于豌豆莢設計獎），歸納了以下三種形式：

1. 抽屜導航
2. 標簽
3. 抽屜導航＋標簽

1）抽屜導航

抽屜導航，其展開列表可以是一層也可以是多層級，但多層級大多運用在大屏幕上。

app涉及的形式如下：

2）標簽

標簽在安卓端也運用很多，其與ios的差別主要是視覺上的。

app涉及的形式如下：

3）抽屜導航＋標簽

多層級的導航模式，在material design規范中有舉例，但在app中運用較少。

app涉及的形式如下：

（2）app應用

在安卓端的app中，發現大部分運用的是ios的設計語言，或者用的就是ios端的版本，這里就證明了交互設計是一個各種條件綜合下的產物。

保留疑問查詢網上資料及請教師傅，對于在安卓端還仍然運用ios設計語言的解答：

1. 人力短缺，維護成本高。
2. ios設計語言較早出現，比material design語言早，認可度較高，影響力較大。
3. material design規范較粗略，規范更多的是視覺及動效。

注意事項

1. 規范性

規范性不是指一定完全照搬設計規范，而是要在符合規范的基礎上可以做有利于用戶使用的創新。沒有遵照規范的創新可能連基本的可用性都達不到。

微信的ios版和安卓版分別使用了各自平臺的設計語言，ios版沒有把搜索功能加在導航欄，而是通過下拉操作出現搜索欄，我猜測是考慮到一致性規范，這就是在規范之上的創新。

2. 一致性

一致性則是為了達到好用，盡可能讓導航一致減少用戶的學習成本。

微信的ios版導航欄只有以上幾種形式，規范起來算3種類型，用這種思路再去看市面上的app，就會發現有些app不是一個產品，只是多個頁面的集合。

3. 創新性

在交互設計中，創新是很難做到的，挑戰的是用戶的使用習慣，面臨的是新手引導的成本，但是只要能滿足用戶需求，并適合產品本身的就是好的創新。

之前文章有分析過的vsco的導航，沒有一點規范的痕跡，但是對于vsco來說，就是符合需求的導航。

寫在結尾

本文基于兩個平臺的規范文檔和現有app的應用對比兩個平臺的導航欄進行分析，有四個好處：

1. 幫助自己打牢專業基礎，這里分享Robert Hoekman.Jr和Jared Spool寫的《網站設計解構》一書中關于標準與創新的解答：即使是最具創新的項目，可能也只占整個項目的20%，其余都是基于標準的支撐。
2. 分析完所有控件，組件，視圖等我就建立了一套自己的基礎組件庫，輸出圖時效率翻倍啊。
3. 可以為大家提供一個學習交互設計的思路，一定要動起手來玩app并思考啊。打牢基礎再去想創新吧～
4. 可以證明自己具備專業基礎，很多公司招聘交互設計師會提這樣的要求，玩過100個app以上，了解并熟悉不同平臺設計規范。這樣的分析過程最起碼可以證明以上兩點。

作者：小靜靜，娛樂行業初級交互設計師，個人公眾號：靜靜做設計呢（jingidesign）

本文由 @小靜靜 原創發布于人人都是產品經理。未經許可，禁止轉載。