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

2022-06-28    分類: 網(wǎng)站建設

在我的理解里,交互就是通過界面設計引導用戶操作,并且作出反饋的過程,動畫是提供可感知的反饋。

  蘋果和谷歌對開發(fā)者發(fā)布的 iOS 8 與 Android 5.0 設計規(guī)范為的就是幫助開發(fā)者所開發(fā)的應用能夠盡量與系統(tǒng)應用得到一致的體驗。因此,下面試圖通過兩者的設計規(guī)范粗淺地對比 iOS 平板(iOS 8)與 Android 平板(Android 5.0)的交互與動畫:

  設計原則

  界面設計中的隱喻

  用戶使用平板時的輸入方式

  平板響應這些用戶行為的輸出效果(動畫)

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

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

  充分利用整個屏幕(所謂「沉浸式」)、弱化擬物設計、使用毛玻璃底板等方式去突出主體內容,以內容為主

  通過留白、不同狀態(tài)的顏色、排版及無邊框的按鈕保證內容顯示的清晰度

  利用毛玻璃、重疊效果及空間的大小關系(如日歷中「年」與「月」)表達空間中的層級關系。

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

  通過紙面質感的設計效果(包括排版、網(wǎng)格、空間、比例、配色、圖像使用)讓用戶感到自然(明白隱喻)

  突出核心功能,引導用戶操作

  對用戶的行為進行統(tǒng)一的、恰當?shù)姆答?/p>

兩者的區(qū)別

  由于 iOS 的操作一般只有三種:點擊進入下一層、返回上一層、按 home 鍵返回桌面,操作相對簡單而統(tǒng)一,因此 iOS 8 的設計以突出內容為主。

  而 Android 的操作相對復雜一些,因此通過紙面質感的設計效果以引導操作成為設計重點。

  其次,iOS 8 通過透視下層內容的方式(毛玻璃)表達空間層級關系,而 Android 5.0 通過光影效果表達。

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

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

  iPhone 界面

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

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

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

  標題與控制按鈕

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

  內容區(qū)域

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

  「設置」中一級菜單在左側顯示,二級菜單在右側顯示的抽屜式設計

  控制中心新的排列方式

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

  左右滑動切換的頂部 Tap

  左邊抽屜式導航面板

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

  懸浮響應按鈕

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

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

  iOS 8 與 Android 兩者的輸入方式不外乎觸摸,語音,鍵盤等常見方式,其中大的不同在于 iOS 平板的操作方式對手勢操作,特別是「多點觸控」操作的利用。iOS 平板能夠五指捏合返回桌面、四指并排向上滑動進入多任務管理、四指并排左右滑動切換最近使用過的應用,而且 iOS 的右滑返回手勢在 iOS 平板中依然有效。橫屏顯示后 home 鍵仍然在用戶方便操作的范圍內,使得用戶一般操作上顯得靈活方便。

  而由于 Material Design 設計語言要求隱去不重要的按鈕,突出核心功能(懸浮響應按鈕),因此在 Android 手機等屏幕無需多點觸控的設備上也能自然操作。也同樣由于這個原因,Android 平板的輸入方式與手機沒有太大變化,沒有針對平板作出處理,導致在更大的屏幕下需要頻繁移動延伸手指的覆蓋范圍去觸控操作。

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

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

  iOS 與 Android 的設計規(guī)范中均對動畫提出的要求可以說是一致的:1、表達可感知的、恰當?shù)姆答?2、節(jié)制動畫的添加,盡量與內置動畫一致或相切合。

  其中 iOS 8 的動畫依然符合 iOS 的設計規(guī)范的要點:以內容為主,通過不同顏色(或臨時高亮)表達按鈕的不同狀態(tài),或空間的大小縮放表達層級關系。

  Android 5.0 則以觸控漣漪為核心表示觸控反饋,配合反饋真實的質量、重量、Z 軸的高度變化、界面元素自身的變化等多個維度表示反饋。甚至講究動畫所連接的兩個界面之間是否有元素新增、消失、保留,并根據(jù)這些元素去留延展元素的動畫。

標題名稱:iOS 平板與 Android 平板的交互與動畫
分享URL:http://www.bm7419.com/news49/172449.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、網(wǎng)站導航營銷型網(wǎng)站建設、建站公司手機網(wǎng)站建設、Google

廣告

聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設計公司