前陣師傅帶著整理設(shè)計規(guī)范，結(jié)束項(xiàng)目后從規(guī)范角度去反思，會發(fā)現(xiàn)自己還有很多東西要學(xué)。交互設(shè)計師真的是一個很專業(yè)的職業(yè)（劃重點(diǎn)?。m然國內(nèi)市場入門門檻低，但是要做出合理的方案是需要有專業(yè)的知識儲備的。

定義

iOS：導(dǎo)航欄能夠?qū)崿F(xiàn)在應(yīng)用不同信息層級結(jié)構(gòu)間的導(dǎo)航，有時候也可用于管理當(dāng)前屏幕內(nèi)容。

類型

1. iOS

（1）基礎(chǔ)規(guī)范

如圖是ios系統(tǒng)導(dǎo)航的基礎(chǔ)形式，其中text為上一級的標(biāo)題，title為當(dāng)前視圖的標(biāo)題，a代表操作控件。

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

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

1. 含三種元素
2. 不含返回按鈕
3. 不含返回及標(biāo)題

1）含三種元素

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

2）不含返回按鈕

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

mindnode是一個思維導(dǎo)圖app，主要功能是子級頁的文稿編輯，主頁的優(yōu)先需求也是展示內(nèi)容，所以把附加功能放置在導(dǎo)航欄是符合當(dāng)前app的需求的。

3）不含返回及標(biāo)題

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

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

（2）app應(yīng)用

如圖是導(dǎo)航欄的應(yīng)用形式之一，為標(biāo)簽與操作控件的結(jié)合。

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

1. 包含搜索框
2. 包含標(biāo)簽
3. 包含logo
4. 包含分段控件

1）包含搜索框

如圖所示，操作控件加搜索框，多用于搜索需求優(yōu)先級較高的頁面。與搜索欄的區(qū)別是，搜索欄不包含管理當(dāng)前頁面的操作控件。

app中涉及的形式如下：

2）包含標(biāo)簽

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

app中涉及的形式如下

3）包含logo

如圖所示，logo加操作控件

app中涉及的形式如下：

4）包含分段控件

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

app中涉及的形式如下：

2. Material Design

（1）基礎(chǔ)規(guī)范

如圖是Android導(dǎo)航的常見模式，抽屜導(dǎo)航及標(biāo)簽。

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

1. 抽屜導(dǎo)航
2. 標(biāo)簽
3. 抽屜導(dǎo)航＋標(biāo)簽

1）抽屜導(dǎo)航

抽屜導(dǎo)航，其展開列表可以是一層也可以是多層級，但多層級大多運(yùn)用在大屏幕上。

app涉及的形式如下：

2）標(biāo)簽

標(biāo)簽在安卓端也運(yùn)用很多，其與ios的差別主要是視覺上的。

app涉及的形式如下：

3）抽屜導(dǎo)航＋標(biāo)簽

多層級的導(dǎo)航模式，在material design規(guī)范中有舉例，但在app中運(yùn)用較少。

app涉及的形式如下：

（2）app應(yīng)用

在安卓端的app中，發(fā)現(xiàn)大部分運(yùn)用的是ios的設(shè)計語言，或者用的就是ios端的版本，這里就證明了交互設(shè)計是一個各種條件綜合下的產(chǎn)物。

保留疑問查詢網(wǎng)上資料及請教師傅，對于在安卓端還仍然運(yùn)用ios設(shè)計語言的解答：

1. 人力短缺，維護(hù)成本高。
2. ios設(shè)計語言較早出現(xiàn)，比material design語言早，認(rèn)可度較高，影響力較大。
3. material design規(guī)范較粗略，規(guī)范更多的是視覺及動效。

注意事項(xiàng)

1. 規(guī)范性

規(guī)范性不是指一定完全照搬設(shè)計規(guī)范，而是要在符合規(guī)范的基礎(chǔ)上可以做有利于用戶使用的創(chuàng)新。沒有遵照規(guī)范的創(chuàng)新可能連基本的可用性都達(dá)不到。

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

2. 一致性

一致性則是為了達(dá)到好用，盡可能讓導(dǎo)航一致減少用戶的學(xué)習(xí)成本。

微信的ios版導(dǎo)航欄只有以上幾種形式，規(guī)范起來算3種類型，用這種思路再去看市面上的app，就會發(fā)現(xiàn)有些app不是一個產(chǎn)品，只是多個頁面的集合。

3. 創(chuàng)新性

在交互設(shè)計中，創(chuàng)新是很難做到的，挑戰(zhàn)的是用戶的使用習(xí)慣，面臨的是新手引導(dǎo)的成本，但是只要能滿足用戶需求，并適合產(chǎn)品本身的就是好的創(chuàng)新。

之前文章有分析過的vsco的導(dǎo)航，沒有一點(diǎn)規(guī)范的痕跡，但是對于vsco來說，就是符合需求的導(dǎo)航。

寫在結(jié)尾

本文基于兩個平臺的規(guī)范文檔和現(xiàn)有app的應(yīng)用對比兩個平臺的導(dǎo)航欄進(jìn)行分析，有四個好處：

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

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

本文由 @小靜靜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。