導航欄分析:iOS 與 Material Design的對比分析
前陣師傅帶著整理設計規范,結束項目后從規范角度去反思,會發現自己還有很多東西要學。交互設計師真的是一個很專業的職業(劃重點?。?,雖然國內市場入門門檻低,但是要做出合理的方案是需要有專業的知識儲備的。
定義
iOS:導航欄能夠實現在應用不同信息層級結構間的導航,有時候也可用于管理當前屏幕內容。
類型
1. iOS
(1)基礎規范
如圖是ios系統導航的基礎形式,其中text為上一級的標題,title為當前視圖的標題,a代表操作控件。
ios10規范中提及:一般來說,導航欄上應該不多于以下三個元素:當前視圖的標題、返回按鈕和一個針對當前的操作控件。
在已下載的253個app(app來源于豌豆莢的設計獎,appso和最美應用的推薦,app store的編輯推薦等,),歸納了以下三種形式:
- 含三種元素
- 不含返回按鈕
- 不含返回及標題
1)含三種元素
大部分app沒有顯示上一級標題,右邊的操作控件最多為2個。在使用體驗上,只要保證兩個控件之間距離符合規范,2個操作控件是可行的。
2)不含返回按鈕
不含返回的一般為一級頁,有一個特殊例子是mindnode在導航欄加了四個操作控件
mindnode是一個思維導圖app,主要功能是子級頁的文稿編輯,主頁的優先需求也是展示內容,所以把附加功能放置在導航欄是符合當前app的需求的。
3)不含返回及標題
大部分app右邊的操作控件一般不多余3個,操作控件多了以后會壓縮icon尺寸,有悖于ios10的清晰原則,而day one journal的導航欄右邊有4個按鈕。
day one是一個日記本app,可以看出它的用戶群體定位是中深度用戶,導航欄的操作控件都是新手用戶很少使用到的,但是對于中深度用戶來說是高頻的便捷操作。可是也存在間距過小,容易誤操作的問題。
(2)app應用
如圖是導航欄的應用形式之一,為標簽與操作控件的結合。
在已下載的253個app,歸納了以下四種形式:
- 包含搜索框
- 包含標簽
- 包含logo
- 包含分段控件
1)包含搜索框
如圖所示,操作控件加搜索框,多用于搜索需求優先級較高的頁面。與搜索欄的區別是,搜索欄不包含管理當前頁面的操作控件。
app中涉及的形式如下:
2)包含標簽
如圖所示,操作控件加多個標簽,一般不多于3個,若多余三個可以考慮另設標簽欄。
app中涉及的形式如下
3)包含logo
如圖所示,logo加操作控件
app中涉及的形式如下:
4)包含分段控件
基本形式如圖所示,logo加操作控件,ios規范里提及在導航欄中使用了分段控件,就不要再放標題以及其它多余控件,所以在使用分段控件時,左右兩側的操作按鈕應越少越好。
app中涉及的形式如下:
2. Material Design
(1)基礎規范
如圖是Android導航的常見模式,抽屜導航及標簽。
在已下載的68個app(app來源于豌豆莢設計獎),歸納了以下三種形式:
- 抽屜導航
- 標簽
- 抽屜導航+標簽
1)抽屜導航
抽屜導航,其展開列表可以是一層也可以是多層級,但多層級大多運用在大屏幕上。
app涉及的形式如下:
2)標簽
標簽在安卓端也運用很多,其與ios的差別主要是視覺上的。
app涉及的形式如下:
3)抽屜導航+標簽
多層級的導航模式,在material design規范中有舉例,但在app中運用較少。
app涉及的形式如下:
(2)app應用
在安卓端的app中,發現大部分運用的是ios的設計語言,或者用的就是ios端的版本,這里就證明了交互設計是一個各種條件綜合下的產物。
保留疑問查詢網上資料及請教師傅,對于在安卓端還仍然運用ios設計語言的解答:
- 人力短缺,維護成本高。
- ios設計語言較早出現,比material design語言早,認可度較高,影響力較大。
- material design規范較粗略,規范更多的是視覺及動效。
注意事項
1. 規范性
規范性不是指一定完全照搬設計規范,而是要在符合規范的基礎上可以做有利于用戶使用的創新。沒有遵照規范的創新可能連基本的可用性都達不到。
微信的ios版和安卓版分別使用了各自平臺的設計語言,ios版沒有把搜索功能加在導航欄,而是通過下拉操作出現搜索欄,我猜測是考慮到一致性規范,這就是在規范之上的創新。
2. 一致性
一致性則是為了達到好用,盡可能讓導航一致減少用戶的學習成本。
微信的ios版導航欄只有以上幾種形式,規范起來算3種類型,用這種思路再去看市面上的app,就會發現有些app不是一個產品,只是多個頁面的集合。
3. 創新性
在交互設計中,創新是很難做到的,挑戰的是用戶的使用習慣,面臨的是新手引導的成本,但是只要能滿足用戶需求,并適合產品本身的就是好的創新。
之前文章有分析過的vsco的導航,沒有一點規范的痕跡,但是對于vsco來說,就是符合需求的導航。
寫在結尾
本文基于兩個平臺的規范文檔和現有app的應用對比兩個平臺的導航欄進行分析,有四個好處:
- 幫助自己打牢專業基礎,這里分享Robert Hoekman.Jr和Jared Spool寫的《網站設計解構》一書中關于標準與創新的解答:即使是最具創新的項目,可能也只占整個項目的20%,其余都是基于標準的支撐。
- 分析完所有控件,組件,視圖等我就建立了一套自己的基礎組件庫,輸出圖時效率翻倍啊。
- 可以為大家提供一個學習交互設計的思路,一定要動起手來玩app并思考啊。打牢基礎再去想創新吧~
- 可以證明自己具備專業基礎,很多公司招聘交互設計師會提這樣的要求,玩過100個app以上,了解并熟悉不同平臺設計規范。這樣的分析過程最起碼可以證明以上兩點。
作者:小靜靜,娛樂行業初級交互設計師,個人公眾號:靜靜做設計呢(jingidesign)
本文由 @小靜靜 原創發布于人人都是產品經理。未經許可,禁止轉載。
非常感謝分享,最近剛好在研究IOS交互規范
感謝,我是交互小白
最近剛好在研究導航設計,組件庫來份哈。