先說Android平台,自從material design面世以來,市場上很多Android app在設計上參差不齊。可能由於設備及用戶使用習慣等各種原因,大多數app都還在以Android 4.0的規範在做設計,當然也有很多app為了省事,直接從iOS上照搬過來。因此,真正以MD為設計基礎的應用並不多。下面是一些整體的框架記錄,更為詳細的交互細節以後再說。

 

仔細閱讀MD的規範,似乎寫的很清楚,但是如果和Android4.0規範放在一起,還是會發現很多有出入的地方。不過規範的目的是為了培養並迎合用戶使用習慣,減少用戶認知負擔。文字是死的,人是活的,靈活應用才是關鍵。

在以MD為基礎的app設計中,經常會出現以下結構(如圖1)

在Android 4.0和material design設計規範中都專門對選項卡進行了說明,但兩者的說法不同。

在Android 4.0中,選項卡tabs屬於操作欄的一部分,可以很輕鬆探索 app 中的不同功能,或瀏覽不同分類的數據集,就是說tabs選項卡是可以作為導航使用的,類似於iOS的標籤欄,只是iOS放在屏幕底部,安卓是放在屏幕頂端(如上圖2)。

但在material design中,tabs的作用是將大量關聯的數據或者選項劃分成更易理解的分組,雖然很容易讓人聯想到導航,但其本身並不是用來導航的。每個tab的內容應該互相關聯並且是在同一個主題下(如下圖)。圖中出行方式可以通過tab劃分成多種方式,但是搜索、指南、設置卻完全屬於不同的功能導航。

如此看來,兩種規範似乎是相互衝突的,而且只要留心一下你會發現,現在市場上經常是這兩種形式都有。googel官方比較推崇應用結構是:左側導航抽屜+應用欄+tabs(Tab可選),但是同一種結構卻有兩種不同表現方式。

方式一:谷歌主推形式

側邊欄導航作為應用的主導航,頭屏显示應用最重要的功能或內容,如果在較低層級中有多個平行相關視圖,可以用Tab結構(當然也可以沒有)。這種結構的關鍵是主要功能或內容很突出,所以頭屏最大化显示,而其他功能相對較弱,不需要頻繁切換側邊欄導航(如下圖)。谷歌發布的inbox郵箱,左側導航欄作為主導航,默認显示收件箱頁面,用戶最常用也最重要的功能是查看收件箱,至於其他的發件箱、垃圾郵件等都可以放在導航抽屜內收起。googel圖書頂部是應用欄+tabs結構,此處Tab強調的是在同一主題下的不同歸類,而不是導航。

方式二:市場發展

或許是受4.0規範的影響,在左側導航抽屜+應用欄+tabs的應用結構中,Tab作為應用的主導航,而左側抽屜作為輔導航,收納一些用戶不常使用的功能,像用戶中心、設置、反饋等。這種結構適合那些多個相同等級的功能視圖需要頻繁切換的app,且只需要手指左右滑動就能快速切換Tab視圖,這將大大提高應用使用效率。如下圖所示,雖然是概念設計(主要是國內安卓應用喜歡延續iOS風格,將Tab放在屏幕底部,米找到合適的例子,且MD沒有被普遍應用),但很適合該場景下的示例。這款產品類似於微信,將主要功能導航放在頂部,實現快速切換,側邊抽屜導航放置收藏、狀態、設置等次要功能。

以上兩種方式並不衝突,關鍵是看你應用的功能內容。如果你的應用核心功能很突出,且不需要其他功能頻繁切換,就選擇第一種;如果你的應用有兩個或者兩個以上相同重要的功能模塊,且需要頻繁切換,比如微信的即時聊天和朋友圈,那就嘗試第二種。

Android部分暫時就到這裏,來看看iOS。如果展開來講,體系太龐大,暫且用一張圖表示,雖然都是很基礎的內容。

 

另外,Android和IOS很明顯的差異是層級返回和編輯選擇。

1、層級返回

IOS平台沒有實體返回按鍵,所以涉及層級間的導航,app界面本身一定要有返回按鈕,而實體home鍵只負責應用退出。Android平台有物理返回按鍵,且點擊返回的是動作流。比如,在搜索界面,點擊搜索框調出軟鍵盤,再點返回按鍵,不是返回上一頁,而是收回彈出的軟鍵盤,它強調的是返回上一個動作的界面,而非層級關係。在Android平台上的app,如果應用本身含有返回按鈕,返回的是上一層級,設計的是層級間的導航。另外,在安卓app的首頁點擊返回按鍵,就是退出應用。可看如下關係圖

2、編輯選擇

對於編輯選擇功能,IOS有明確的入口,通常在導航欄上有編輯按鈕,點擊後進入編輯模式,通常可以多選,同時底部或頂部會增加工具欄,用來處理多選內容。當然也可以單選刪除,通過點按向左滑動刪除,或者是點擊按鈕從底部呼出操作菜單,逐個刪除。但Android是通過長安方式進入編輯模式,此時操作欄被一個臨時情景操作欄覆蓋(情景操作欄可以覆蓋頂部操作欄和底部操作欄),界面內容允許單個或多個操作(如下圖)

以上部分其實都是一些平台規範總結,將區別大且重要部分整理出來,也是為了方便閱讀查看,後期會持續更新一些其他交互內容。

作者:butter

來源:http://www.jianshu.com/p/b5ca80ae894d