三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

3 評(píng)論 14714 瀏覽 16 收藏 12 分鐘

iOS,Android,WindowsPhone是現(xiàn)在移動(dòng)互聯(lián)網(wǎng)上面主流的三個(gè)平臺(tái)了,我也都分別參與過這三個(gè)平臺(tái)的設(shè)計(jì)。在設(shè)計(jì)的過程中,因?yàn)檫@三個(gè)平臺(tái)的不同特性,往往要角色切換,不斷的換位思維。

 

可能新手和外行人覺得iOS和Android沒什么區(qū)別,有的甚至拿Android直接照抄iOS設(shè)計(jì)就可以了。還有一些人可能對(duì)WindowsPhone平臺(tái)一直覺得魔幻無比,但就是找不到應(yīng)該如何下手。今天我總結(jié)了一下這三個(gè)平臺(tái)之間交互設(shè)計(jì)上的差異性,在開展交互設(shè)計(jì)的過程中,必須要注意的問題:

 

一、布局形式的差異

iOS經(jīng)典的“tab?bar”

在iOS應(yīng)用內(nèi)如果要切換不同的模塊,或者頁面內(nèi)要切換不同的欄目,往往都會(huì)用到“tab?bar”這一形式的控件。這個(gè)經(jīng)典設(shè)計(jì)從iOS早期沿用至今,

大部分iOS應(yīng)用都是這樣設(shè)計(jì)的。當(dāng)然,ios本身是很包容的,最近也很流行抽屜式導(dǎo)航。但是tab?bar一直是最受歡迎也最好被用戶認(rèn)知的方式:

 

Android提供了2種視圖控制方式

在Android4.0規(guī)范出來之后,Android提出了2種視圖控制方式,一種是直接在導(dǎo)航欄的標(biāo)題下加入一個(gè)觸控按鈕,點(diǎn)擊后會(huì)彈出切換欄目的菜單

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

(圖中2標(biāo)注的位置)

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

(比如日歷應(yīng)用點(diǎn)擊后可以切換不同的視圖)

 

另外一種是直接在導(dǎo)航欄的下面加入了一個(gè)視圖控制欄,和iOS的tab?bar很像,不過是僅放在了上面,而且提倡支持手勢(shì)滑動(dòng)切換:

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

(圖中2標(biāo)注位置)

 

WindowsPhone的創(chuàng)新

WindowsPhone與上面兩個(gè)平臺(tái)就差距很大了,因?yàn)閃indowsPhone獨(dú)特的MetroUI提倡回歸傳統(tǒng)的閱讀體驗(yàn),像瀏覽報(bào)紙和雜志一樣瀏覽手機(jī)上的內(nèi)容,更關(guān)注與內(nèi)容而不是修飾。所以WindowsPhone整體都給人一種像在看雜志的感覺。

WindowsPhone的視圖控制通過一種叫做“全景視圖”的方式展開

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

 

實(shí)際上,4個(gè)視圖的內(nèi)容是在一個(gè)頁面上的,而且是一個(gè)頁面同時(shí)加載的。用戶的手機(jī)默認(rèn)只顯示第一屏的內(nèi)容,通過滑動(dòng)把后面的內(nèi)容拉出來~

這種視圖方式很創(chuàng)新,而且方便閱讀,不得不說瀏覽的體驗(yàn)好了很多。但是需要注意的是:

1)因?yàn)槠鋵?shí)這3個(gè)欄目是同一頁面視圖,所以不要將內(nèi)容放的過多,否則加載會(huì)很慢影響效率;

2)對(duì)交互設(shè)計(jì)過程中的排版和視覺提出了很高的要求;(你得提前想好怎么布局好看了)

 

另外,WindowsPhone還提供了一種叫做樞軸的方式,樞軸和iOS的tab?bar相差不是很大,只不過完全是通過滑動(dòng)來切換欄目的:

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

(樞軸布局)

 

二、導(dǎo)航邏輯的差異

大家都知道iOS是沒有實(shí)體返回按鍵的,所有返回都是通過導(dǎo)航欄的back按鈕來完成。

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

 

在iOS的導(dǎo)航邏輯中,我們可以明顯的看出來,整個(gè)程序是一頁一頁的切換,就像一個(gè)幻燈片。而返回按鈕也就是切換到上一頁。所以,iOS的返回控制的是頁面。

 

但是Android和WindowsPhone就不是這樣了,Android和WindowsPhone是有物理返回按鈕的,點(diǎn)擊物理返回按鈕,控制的不光是一個(gè)頁面,而且包括了上一步的操作,比如說:

 

進(jìn)入頁面A,點(diǎn)擊文本框彈出鍵盤。那么點(diǎn)擊返回按鍵就是?–?收起鍵盤

所以安卓和WindowsPhone的返回邏輯是按照時(shí)間流來判斷的,而不僅僅是頁面,返回按鈕控制的是動(dòng)作。

 

需要特意提一下的是:WindowsPhone的返回邏輯不單限于應(yīng)用內(nèi),還影響到應(yīng)用之間。也就是說你當(dāng)前正在桌面,再點(diǎn)擊一次back,就會(huì)進(jìn)入你上一次打開的應(yīng)用。

另外在Android4.0中,提出了一個(gè)向上的概念,就是導(dǎo)航欄標(biāo)題前面的一個(gè)小箭頭,點(diǎn)擊這個(gè)箭頭,是回到該頁面的上一個(gè)層級(jí):

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

 

三、應(yīng)用之間聯(lián)系的差異

眾所周知,iOS是一個(gè)封閉的系統(tǒng),而Android是一個(gè)開放的系統(tǒng)。我們可以比喻iOS每一個(gè)應(yīng)用都是一個(gè)小房間,每個(gè)應(yīng)用都在自己的房間里做自己的事情,互相之間不進(jìn)行任何來往。

而Android則是一個(gè)大大的辦公區(qū),每個(gè)應(yīng)用雖然也有自己的工位,但是可以互相串門或者借用東西,而WindowsPhone則遵循著和iOS差不多的方式。到了iOS6的時(shí)候可以支持應(yīng)用直接互相跳轉(zhuǎn)了,但那也僅限于你跳出去了,就不再回來了,也就是說到了那個(gè)房間你就是那個(gè)房間的人了,與之前的房間沒有關(guān)聯(lián)了。

 

這樣的差異意味著,iOS和WindowsPhone應(yīng)用的權(quán)限變得很低,身為應(yīng)用的你既不能修改系統(tǒng)的一些屬性(除非越獄了),也不能修改其他應(yīng)用的內(nèi)容。而Android的一款應(yīng)用不但可以控制系統(tǒng)的一些操作,還可以控制其他應(yīng)用執(zhí)行某些特定的操作。

 

這種差異會(huì)讓安卓上的應(yīng)用設(shè)計(jì)有了更多的可能,身為設(shè)計(jì)師的你可以根據(jù)這一特性設(shè)計(jì)很多不錯(cuò)的功能,比如系統(tǒng)美化或者系統(tǒng)優(yōu)化,殺毒,攔截電話等功能,而iOS和WindowsPhone就不能。

但是這也讓Android系統(tǒng)面臨了很嚴(yán)峻的安全問題,所以安卓上各種優(yōu)化和殺毒軟件很流行。

 

四、多任務(wù)的差異

多任務(wù)的差異用一句話來形容就是:iOS和WindowsPhone都是假的多任務(wù),而Android是真的多任務(wù)。

如果你設(shè)計(jì)的應(yīng)用有下載,那么iOS和WindowsPhone切換到后臺(tái)下載就被暫停了,而Android不但不會(huì)暫停,你還可以設(shè)計(jì)一些偷偷在后臺(tái)運(yùn)行的功能!

 

五、分辨率的差異

親,你知道Android現(xiàn)在有多少種分辨率嗎?

 

2

適配一直是Android很頭痛的問題,身為前端往往要為不同的分辨率調(diào)效果而保證界面不會(huì)變形和模糊。而分辨率問題不僅僅影響視覺這一塊,對(duì)交互設(shè)計(jì)也有很大的影響。因?yàn)檫@些手機(jī)往往屏幕比例也是不同的,你需要考慮不同的長(zhǎng)寬比下,你的界面布局應(yīng)該是怎樣的。

 

所以在設(shè)計(jì)Android的時(shí)候,你不能要求把界面布局寫死,應(yīng)該盡量保證每個(gè)控件都是浮動(dòng)的,而且自己能評(píng)估出各種古怪的布局下的效果。

iOS和WindowsPhone就會(huì)好很多。iOS分辨率分為320×480,640×960,640×1136,WindowsPhone分辨率分為480×800,800×1280,800×1136,雖然看起來也蠻多的,但是界面的比例基本上沒有什么變化。所以對(duì)于交互上的布局影響并不是很大,視覺設(shè)計(jì)師也可以通過腳本縮小裁圖簡(jiǎn)單的解決問題。

 

六,設(shè)計(jì)風(fēng)格的差異

設(shè)計(jì)風(fēng)格是這3個(gè)客戶端自己獨(dú)特的個(gè)性,設(shè)計(jì)風(fēng)格不單影響的是視覺設(shè)計(jì)的層面,對(duì)交互設(shè)計(jì)也非常的重要。尤其是在考慮動(dòng)效,擬物化交互的時(shí)候需要重視。

iOS的設(shè)計(jì)風(fēng)格偏向擬物化風(fēng)格,這個(gè)擬物化不光是視覺上做出很多擬物的小按鈕小控件的,為了配合視覺,你往往在交互上也可以加一些生動(dòng)有趣的內(nèi)容。

三大移動(dòng)平臺(tái)上的交互設(shè)計(jì)差異

比如說像最新的path,進(jìn)入商店時(shí)遮陽板會(huì)有一個(gè)收起的效果,小卡片也會(huì)根據(jù)重力感應(yīng)而搖擺。如果交互上就能體現(xiàn)出平臺(tái)的設(shè)計(jì)風(fēng)格的話,無疑會(huì)非常討好用戶,增加產(chǎn)品細(xì)節(jié)上的亮點(diǎn)。

Android平臺(tái)就簡(jiǎn)單一些了,在整體的布局和交互形式和iOS差不多的情況下,盡量的簡(jiǎn)潔,呈現(xiàn)一種科幻的風(fēng)格即可以了。Android平臺(tái)盡量少用擬物化的動(dòng)效,因?yàn)锳ndroid系統(tǒng)對(duì)于動(dòng)畫效果的渲染比較差,如果太復(fù)雜的話可能會(huì)讓界面非常的卡。

本人強(qiáng)烈推薦一款叫fuubo的應(yīng)用,它是一款非常符合Android?Holo風(fēng)格又在交互上處理的很有創(chuàng)新的產(chǎn)品。

WindowsPhone平臺(tái)則有著很大的不同,MetroUI的理念要求設(shè)計(jì)者更多的考慮如何展現(xiàn)內(nèi)容,使用平滑的過渡動(dòng)畫。而且還對(duì)設(shè)計(jì)者的排版和平面設(shè)計(jì)提出了一些考驗(yàn)。所以建議交互設(shè)計(jì)的人好好讀讀WindowsPhone界面設(shè)計(jì)準(zhǔn)則,并且平時(shí)就積累一些WindowsPhone界面的視覺界面感覺,不然視覺設(shè)計(jì)師很可能會(huì)埋怨你哦!~

來源:伯樂在線

 

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 喬布斯看到了肯定會(huì)說:狗屎?。?!

    來自廣東 回復(fù)
  2. 內(nèi)容非常老,照著三大平臺(tái)官方設(shè)計(jì)標(biāo)準(zhǔn)抄的吧,有提煉自己的觀點(diǎn)嗎?

    來自廣東 回復(fù)