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

定義

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

類型

1. iOS

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

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

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

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

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

1）含三種元素

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

2）不含返回按鈕

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

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

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

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

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

（2）app應(yīng)用

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

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

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

1）包含搜索框

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

app中涉及的形式如下：

2）包含標(biāo)簽

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

app中涉及的形式如下

3）包含logo

如圖所示，logo加操作控件

app中涉及的形式如下：

4）包含分段控件

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

app中涉及的形式如下：

2. Material Design

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

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

在已下載的68個(gè)app（app來(lái)源于豌豆莢設(shè)計(jì)獎(jiǎng)），歸納了以下三種形式：

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

1）抽屜導(dǎo)航

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

app涉及的形式如下：

2）標(biāo)簽

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

app涉及的形式如下：

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

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

app涉及的形式如下：

（2）app應(yīng)用

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

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

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

注意事項(xiàng)

1. 規(guī)范性

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

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

2. 一致性

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

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

3. 創(chuàng)新性

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

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

寫在結(jié)尾

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

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

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

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