導航欄分析:iOS 與 Material Design的對比分析

3 評論 17178 瀏覽 141 收藏 12 分鐘

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

定義

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

類型

1. iOS

(1)基礎規范

2

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

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

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

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

1)含三種元素

3

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

4

2)不含返回按鈕

5

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

6

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

3)不含返回及標題

7

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

8

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

(2)app應用

9

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

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

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

1)包含搜索框

10

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

app中涉及的形式如下:

11

2)包含標簽

9

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

app中涉及的形式如下

12

3)包含logo

13

如圖所示,logo加操作控件

app中涉及的形式如下:

13副本

4)包含分段控件

14

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

app中涉及的形式如下:

14副本

2. Material Design

(1)基礎規范

15

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

在已下載的68個app(app來源于豌豆莢設計獎),歸納了以下三種形式:

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

1)抽屜導航

16

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

app涉及的形式如下:

16副本

2)標簽

17

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

app涉及的形式如下:

17副本

3)抽屜導航+標簽

18

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

app涉及的形式如下:

18副本

(2)app應用

19

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

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

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

注意事項

1. 規范性

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

20

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

2. 一致性

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

21

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

3. 創新性

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

22

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

寫在結尾

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

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

 

作者:小靜靜,娛樂行業初級交互設計師,個人公眾號:靜靜做設計呢(jingidesign)

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 非常感謝分享,最近剛好在研究IOS交互規范

    來自云南 回復
  2. 感謝,我是交互小白

    回復
  3. 最近剛好在研究導航設計,組件庫來份哈。

    回復