在我的理解里，交互就是通過(guò)界面設(shè)計(jì)引導(dǎo)用戶操作，并且作出反饋的過(guò)程，動(dòng)畫(huà)是提供可感知的反饋。

　　蘋(píng)果和谷歌對(duì)開(kāi)發(fā)者發(fā)布的 iOS 8 與 Android 5.0 設(shè)計(jì)規(guī)范為的就是幫助開(kāi)發(fā)者所開(kāi)發(fā)的應(yīng)用能夠盡量與系統(tǒng)應(yīng)用得到一致的體驗(yàn)。因此，下面試圖通過(guò)兩者的設(shè)計(jì)規(guī)范粗淺地對(duì)比 iOS 平板(iOS 8)與 Android 平板(Android 5.0)的交互與動(dòng)畫(huà)：

　　設(shè)計(jì)原則

　　界面設(shè)計(jì)中的隱喻

　　用戶使用平板時(shí)的輸入方式

　　平板響應(yīng)這些用戶行為的輸出效果(動(dòng)畫(huà))

　　iOS 平板與 Android 平板的設(shè)計(jì)原則

iOS 8 的設(shè)計(jì)原則在我的理解是：

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

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

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

　　而要講 Android 5.0 設(shè)計(jì)原則就必須說(shuō)到谷歌推出的全新設(shè)計(jì)語(yǔ)言 Material Design 。Material Design 的設(shè)計(jì)原則在我的理解里是這樣的：

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

　　突出核心功能，引導(dǎo)用戶操作

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

兩者的區(qū)別

　　由于 iOS 的操作一般只有三種：點(diǎn)擊進(jìn)入下一層、返回上一層、按 home 鍵返回桌面，操作相對(duì)簡(jiǎn)單而統(tǒng)一，因此 iOS 8 的設(shè)計(jì)以突出內(nèi)容為主。

　　而 Android 的操作相對(duì)復(fù)雜一些，因此通過(guò)紙面質(zhì)感的設(shè)計(jì)效果以引導(dǎo)操作成為設(shè)計(jì)重點(diǎn)。

　　其次，iOS 8 通過(guò)透視下層內(nèi)容的方式(毛玻璃)表達(dá)空間層級(jí)關(guān)系，而 Android 5.0 通過(guò)光影效果表達(dá)。

iOS 平板與 Android 平板界面設(shè)計(jì)中的隱喻

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

　　iPhone 界面

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

　　底部 Tap 和位于頂部導(dǎo)航欄中的分段控制按鈕

　　頂部導(dǎo)航欄中出現(xiàn)了標(biāo)題和兩個(gè)控制按鈕，他們則是以顏色不同暗示是否可以點(diǎn)擊

　　標(biāo)題與控制按鈕

　　而在內(nèi)容區(qū)域，則通過(guò)添加邊框或背景表示可以點(diǎn)擊

　　內(nèi)容區(qū)域

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

　　「設(shè)置」中一級(jí)菜單在左側(cè)顯示，二級(jí)菜單在右側(cè)顯示的抽屜式設(shè)計(jì)

　　控制中心新的排列方式

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

　　左右滑動(dòng)切換的頂部 Tap

　　左邊抽屜式導(dǎo)航面板

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

　　懸浮響應(yīng)按鈕

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

用戶使用 iOS 平板與 Android 平板時(shí)的輸入方式

　　iOS 8 與 Android 兩者的輸入方式不外乎觸摸，語(yǔ)音，鍵盤(pán)等常見(jiàn)方式，其中大的不同在于 iOS 平板的操作方式對(duì)手勢(shì)操作，特別是「多點(diǎn)觸控」操作的利用。iOS 平板能夠五指捏合返回桌面、四指并排向上滑動(dòng)進(jìn)入多任務(wù)管理、四指并排左右滑動(dòng)切換最近使用過(guò)的應(yīng)用，而且 iOS 的右滑返回手勢(shì)在 iOS 平板中依然有效。橫屏顯示后 home 鍵仍然在用戶方便操作的范圍內(nèi)，使得用戶一般操作上顯得靈活方便。

　　而由于 Material Design 設(shè)計(jì)語(yǔ)言要求隱去不重要的按鈕，突出核心功能(懸浮響應(yīng)按鈕)，因此在 Android 手機(jī)等屏幕無(wú)需多點(diǎn)觸控的設(shè)備上也能自然操作。也同樣由于這個(gè)原因，Android 平板的輸入方式與手機(jī)沒(méi)有太大變化，沒(méi)有針對(duì)平板作出處理，導(dǎo)致在更大的屏幕下需要頻繁移動(dòng)延伸手指的覆蓋范圍去觸控操作。

　　Android 手機(jī)中突出的懸浮響應(yīng)按鈕

　　iOS 平板與 Android 平板的輸出效果(動(dòng)畫(huà))

　　iOS 與 Android 的設(shè)計(jì)規(guī)范中均對(duì)動(dòng)畫(huà)提出的要求可以說(shuō)是一致的：1、表達(dá)可感知的、恰當(dāng)?shù)姆答?2、節(jié)制動(dòng)畫(huà)的添加，盡量與內(nèi)置動(dòng)畫(huà)一致或相切合。

　　其中 iOS 8 的動(dòng)畫(huà)依然符合 iOS 的設(shè)計(jì)規(guī)范的要點(diǎn)：以內(nèi)容為主，通過(guò)不同顏色(或臨時(shí)高亮)表達(dá)按鈕的不同狀態(tài)，或空間的大小縮放表達(dá)層級(jí)關(guān)系。

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

標(biāo)題名稱：iOS 平板與 Android 平板的交互與動(dòng)畫(huà)
分享URL：http://aaarwkj.com/news49/172449.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、營(yíng)銷型網(wǎng)站建設(shè)、建站公司、手機(jī)網(wǎng)站建設(shè)、Google

廣告

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