iOS 平板與 Android 平板的交互與動畫

f663x 10年前發布 | 17K 次閱讀 IOS 移動開發

原文出處: 浩槐的博客(@浩槐) 


在我的理解里,交互就是通過界面設計引導用戶操作,并且作出反饋的過程,動畫是提供可感知的反饋。
蘋果和谷歌對開發者發布的 iOS 8 與 Android 5.0 設計規范為的就是幫助開發者所開發的應用能夠盡量與系統應用得到一致的體驗。因此,下面試圖通過兩者的設計規范粗淺地對比 iOS 平板(iOS 8)與 Android 平板(Android 5.0)的交互與動畫:

  • 設計原則
  • 界面設計中的隱喻
  • 用戶使用平板時的輸入方式
  • 平板響應這些用戶行為的輸出效果(動畫)

iOS 平板與 Android 平板的設計原則

iOS 8 的設計原則在我的理解是:

  1. 充分利用整個屏幕(所謂「沉浸式」)、弱化擬物設計、使用毛玻璃底板等方式去突出主體內容,以內容為主
  2. 通過留白、不同狀態的顏色、排版及無邊框的按鈕保證內容顯示的清晰度
  3. 利用毛玻璃、重疊效果及空間的大小關系(如日歷中「年」與「月」)表達空間中的層級關系。

而要講 Android 5.0 設計原則就必須說到谷歌推出的全新設計語言 Material Design 。Material Design 的設計原則在我的理解里是這樣的:

  1. 通過紙面質感的設計效果(包括排版、網格、空間、比例、配色、圖像使用)讓用戶感到自然(明白隱喻)
  2. 突出核心功能,引導用戶操作
  3. 對用戶的行為進行統一的、恰當的反饋
兩者的區別

由于 iOS 的操作一般只有三種:點擊進入下一層、返回上一層、按 home 鍵返回桌面,操作相對簡單而統一,因此 iOS 8 的設計以突出內容為主。
而 Android 的操作相對復雜一些,因此通過紙面質感的設計效果以引導操作成為設計重點。
其次,iOS 8 通過透視下層內容的方式(毛玻璃)表達空間層級關系,而 Android 5.0 通過光影效果表達。

iOS 平板與 Android 平板界面設計中的隱喻

iOS 的界面通常由頂部導航欄和底部 Tap 組成的 Bar、內容、控制按鈕,以及及警告提示等消息提示組成,iOS 平板亦同。這里拿 iPhone 的界面描述 iOS 平板中的舉例說明。

 iOS 平板與 Android 平板的交互與動畫

iPhone 界面

這個界面中底部 Tap 和位于頂部導航欄中的分段控制按鈕均以鮮明的顏色表示被選中的狀態,而且分段控制按鈕以按鈕形式出現,暗示這是需要點擊切換而不是滑動切換

 iOS 平板與 Android 平板的交互與動畫

底部 Tap 和位于頂部導航欄中的分段控制按鈕

頂部導航欄中出現了標題和兩個控制按鈕,他們則是以顏色不同暗示是否可以點擊

 iOS 平板與 Android 平板的交互與動畫

標題與控制按鈕

而在內容區域,則通過添加邊框或背景表示可以點擊

 iOS 平板與 Android 平板的交互與動畫

內容區域

另一方面在界面布局上,最明顯的針對 iPad 的優化有:

  1. 「設置」中一級菜單在左側顯示,二級菜單在右側顯示的抽屜式設計
  2. 控制中心新的排列方式

相比之下,Android 的界面較 iOS 更為復雜。對比 iOS,Android 較為突出的區別有兩個:一種是通過條形的顏色「滑塊」暗示可以左右滑動切換的頂部 Tap,另一種是左邊抽屜式導航面板。這兩種導航方式本身的主要區別在于,前者可承載的層級結構更加扁平簡單而且 Tap 數量較少,后者可承載層級結構較為復雜而且用戶需要從某一 Tap 較深的層級直接返回到首層。

 iOS 平板與 Android 平板的交互與動畫

左右滑動切換的頂部 Tap
   iOS 平板與 Android 平板的交互與動畫
左邊抽屜式導航面板

另一方面界面中使用出現較多的,帶有鮮明顏色的懸浮響應按鈕能夠突顯當前最核心的功能

 iOS 平板與 Android 平板的交互與動畫

懸浮響應按鈕

專用于平板電腦的 Android 3.0 曾經為平板針對優化,但后期的 4.0 與5.0 均取消了這些優化。另一方面,由于谷歌希望利用 Material Design 設計語言構建一個跨平臺和超越設備尺寸的統一體驗,因此不同平臺與屏幕尺寸的設備上界面設計趨于一致,布局僅有結構網格和行距的不同。

用戶使用 iOS 平板與 Android 平板時的輸入方式

iOS 8 與 Android 兩者的輸入方式不外乎觸摸,語音,鍵盤等常見方式,其中最大的不同在于 iOS 平板的操作方式對手勢操作,特別是「多點觸控」操作的利用。iOS 平板能夠五指捏合返回桌面、四指并排向上滑動進入多任務管理、四指并排左右滑動切換最近使用過的應用,而且 iOS 的右滑返回手勢在 iOS 平板中依然有效。橫屏顯示后 home 鍵仍然在用戶方便操作的范圍內,使得用戶一般操作上顯得靈活方便。
而由于 Material Design 設計語言要求隱去不重要的按鈕,突出核心功能(懸浮響應按鈕),因此在 Android 手機等屏幕無需多點觸控的設備上也能自然操作。也同樣由于這個原因,Android 平板的輸入方式與手機沒有太大變化,沒有針對平板作出處理,導致在更大的屏幕下需要頻繁移動延伸手指的覆蓋范圍去觸控操作。

 iOS 平板與 Android 平板的交互與動畫

Android 手機中突出的懸浮響應按鈕

iOS 平板與 Android 平板的輸出效果(動畫)

iOS 與 Android 的設計規范中均對動畫提出的要求可以說是一致的:1、表達可感知的、恰當的反饋;2、節制動畫的添加,盡量與內置動畫一致或相切合。
其中 iOS 8 的動畫依然符合 iOS 的設計規范的要點:以內容為主,通過不同顏色(或臨時高亮)表達按鈕的不同狀態,或空間的大小縮放表達層級關系。
Android 5.0 則以觸控漣漪為核心表示觸控反饋,配合反饋真實的質量、重量、Z 軸的高度變化、界面元素自身的變化等多個維度表示反饋。甚至講究動畫所連接的兩個界面之間是否有元素新增、消失、保留,并根據這些元素去留延展元素的動畫。

 

 本文由用戶 f663x 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!