交互設(shè)計(jì):Android、iOS和WP平臺(tái)的六大差異
iPhone、Galaxy S3 以及 Lumia 920是市場(chǎng)上如今最引人注目的三款智能手機(jī),正好對(duì)應(yīng)iOS、Android及Windows Phone三大平臺(tái),盡管三大操作系統(tǒng)在市場(chǎng)份額、出貨量以及用戶認(rèn)可方面都有著不小的差異。
但更能我們興趣,更有討論價(jià)值的其實(shí)是這三大平臺(tái)在設(shè)計(jì)方面的差異,這不僅最終決定著用戶的體驗(yàn),也決定了開(kāi)發(fā)者的參與熱情。
來(lái)自微信公眾帳號(hào)“互聯(lián)網(wǎng)er的早讀課”的這篇文章從包括變局、導(dǎo)航邏輯、設(shè)計(jì)風(fēng)格等六大方面的差異對(duì)三大平臺(tái)的交互設(shè)計(jì)進(jìn)行了較為深入的分析和討論,極具參考價(jià)值。
一,布局形式的差異
1)iOS 經(jīng)典的“tab bar”
在 iOS 應(yīng)用內(nèi)如果要切換不同的模塊,或者頁(yè)面內(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)知的方式:
2)Android 提供了 2 種視圖控制方式
在 Android 4.0 規(guī)范出來(lái)之后,Android 提出了 2 種視圖控制方式,一種是直接在導(dǎo)航欄的標(biāo)題下加入一個(gè)觸控按鈕,點(diǎn)擊后會(huì)彈出切換欄目的菜單(圖中 2 標(biāo)注的位置)
比如日歷應(yīng)用點(diǎn)擊后可以切換不同的視圖,另外一種是直接在導(dǎo)航欄的下面加入了一個(gè)視圖控制欄(下右圖中 2 標(biāo)注位置),和 iOS 的 tab bar 很像,不過(guò)是僅放在了上面,而且提倡支持手勢(shì)滑動(dòng)切換:
3) Windows Phone 的創(chuàng)新
Windows Phone 與上面兩個(gè)平臺(tái)就差距很大了,因?yàn)?Windows Phone 獨(dú)特的 Metro UI 提倡回歸傳統(tǒng)的閱讀體驗(yàn),像瀏覽報(bào)紙和雜志一樣瀏覽手機(jī)上的內(nèi)容,更關(guān)注與內(nèi)容而不是修飾,所以 Windows Phone 整體都給人一種像在看雜志的感覺(jué)。Windows Phone 的視圖控制通過(guò)一種叫做“全景視圖”的方式展開(kāi)(下圖)。
實(shí)際上,4 個(gè)視圖的內(nèi)容是在一個(gè)頁(yè)面上的,而且是一個(gè)頁(yè)面同時(shí)加載的。用戶的手機(jī)默認(rèn)只顯示第一屏的內(nèi)容,通過(guò)滑動(dòng)把后面的內(nèi)容拉出來(lái)。
這種視圖方式很創(chuàng)新,而且方便閱讀,不得不說(shuō)瀏覽的體驗(yàn)好了很多。但是需要注意的是:
因?yàn)槠鋵?shí)這3個(gè)欄目是同一頁(yè)面視圖,所以不要將內(nèi)容放的過(guò)多,否則加載會(huì)很慢影響效率;
對(duì)交互設(shè)計(jì)過(guò)程中的排版和視覺(jué)提出了很高的要求;
另外,Windows Phone 還提供了一種叫做樞軸的方式,樞軸和 iOS 的 tab bar 相差不是很大,只不過(guò)完全是通過(guò)滑動(dòng)來(lái)切換欄目的:
(樞軸布局)
二,導(dǎo)航邏輯的差異
大家都知道 iOS 是沒(méi)有實(shí)體返回按鍵的,所有返回都是通過(guò)導(dǎo)航欄的 back 按鈕來(lái)完成。
在 iOS的導(dǎo)航邏輯中,我們可以明顯的看出來(lái),整個(gè)程序是一頁(yè)一頁(yè)的切換,就像一個(gè)幻燈片。而返回按鈕也就是切換到上一頁(yè)。所以,iOS 的返回控制的是頁(yè)面。
但是 Android 和 Windows Phone 就不是這樣了,Android 和 Windows Phone 是有物理返回按鈕的,點(diǎn)擊物理返回按鈕,控制的不光是一個(gè)頁(yè)面,而且包括了上一步的操作,比如說(shuō):
進(jìn)入頁(yè)面 A,點(diǎn)擊文本框彈出鍵盤(pán)。那么點(diǎn)擊返回按鍵就是收起鍵盤(pán)。
所以 Android 和 Windows Phone 的返回邏輯是按照時(shí)間流來(lái)判斷的,而不僅僅是頁(yè)面,返回按鈕控制的是動(dòng)作。
需要特意提一下的是:Windows Phone 的返回邏輯不單限于應(yīng)用內(nèi),還影響到應(yīng)用之間。也就是說(shuō)你當(dāng)前正在桌面,再點(diǎn)擊一次 back,就會(huì)進(jìn)入你上一次打開(kāi)的應(yīng)用。
另外在 Android 4.0 開(kāi)始,提出了一個(gè)向上的概念,就是導(dǎo)航欄標(biāo)題前面的一個(gè)小箭頭,點(diǎn)擊這個(gè)箭頭,是回到該頁(yè)面的上一個(gè)層級(jí):
三,應(yīng)用之間聯(lián)系的差異
眾所周知,iOS 是一個(gè)封閉的系統(tǒng),而 Android 是一個(gè)開(kāi)放的系統(tǒng)。
我們可以比喻 iOS 每一個(gè)應(yīng)用都是一個(gè)小房間,每個(gè)應(yīng)用都在自己的房間里做自己的事情,互相之間不進(jìn)行任何來(lái)往。而 Android 則是一個(gè)大大的辦公區(qū),每個(gè)應(yīng)用雖然也有自己的工位,但是可以互相串門(mén)或者借用東西,而 Windows Phone 則遵循著和 iOS 差不多的方式。到了 iOS 6 的時(shí)候可以支持應(yīng)用直接互相跳轉(zhuǎn)了,但那也僅限于你跳出去了,就不再回來(lái)了,也就是說(shuō)到了那個(gè)房間你就是那個(gè)房間的人了,與之前的房間沒(méi)有關(guān)聯(lián)了。
這樣的差異意味著,iOS 和 Windows Phone 應(yīng)用的權(quán)限變得很低,身為應(yīng)用的你既不能修改系統(tǒng)的一些屬性(除非越獄了),也不能修改其他應(yīng)用的內(nèi)容。而 Android 的一款應(yīng)用不但可以控制系統(tǒng)的一些操作,還可以控制其他應(yīng)用執(zhí)行某些特定的操作。
這種差異會(huì)讓 Android 上的應(yīng)用設(shè)計(jì)有了更多的可能,身為設(shè)計(jì)師的你可以根據(jù)這一特性設(shè)計(jì)很多不錯(cuò)的功能,比如系統(tǒng)美化或者系統(tǒng)優(yōu)化,殺毒,攔截電話等功能,而 iOS 和 Windows Phone 就不能。但是這也讓 Android 系統(tǒng)面臨了很嚴(yán)峻的安全問(wèn)題,所以Android上各種優(yōu)化和殺毒軟件很流行。
四,多任務(wù)的差異
多任務(wù)的差異用一句話來(lái)形容就是:iOS 和 Windows Phone 都是假的多任務(wù),而 Android 是真的多任務(wù)。
如果你設(shè)計(jì)的應(yīng)用有下載,那么 iOS 和 Windows Phone 切換到后臺(tái)下載就被暫停了,而 Android 不但不會(huì)暫停,你還可以設(shè)計(jì)一些偷偷在后臺(tái)運(yùn)行的功能!
五,分辨率的差異
親,你知道Android現(xiàn)在有多少種分辨率嗎?
(TECH2IPO 注:此數(shù)據(jù)圖顯示的是 2011 年 Android 手機(jī)狀況,現(xiàn)在,相關(guān)問(wèn)題已經(jīng)有所緩解和減輕。)
適配一直是 Android 很頭痛的問(wèn)題,身為前端往往要為不同的分辨率調(diào)效果而保證界面不會(huì)變形和模糊。而分辨率問(wèn)題不僅僅影響視覺(jué)這一塊,對(duì)交互設(shè)計(jì)也有很大的影響。因?yàn)檫@些手機(jī)往往屏幕比例也是不同的,你需要考慮不同的長(zhǎng)寬比下,你的界面布局應(yīng)該是怎樣的。所以在設(shè)計(jì) Android 的時(shí)候,你不能要求把界面布局寫(xiě)死,應(yīng)該盡量保證每個(gè)控件都是浮動(dòng)的,而且自己能評(píng)估出各種古怪的布局下的效果。
iOS 和 Windows Phone 就會(huì)好很多。iOS 分辨率分為 320x480,640x960,640x1136,Windows Phone 分辨率分為 480x800,800x1280,800x1136。雖然看起來(lái)也蠻多的,但是界面的比例基本上沒(méi)有什么變化。所以對(duì)于交互上的布局影響并不是很大,視覺(jué)設(shè)計(jì)師也可以通過(guò)腳本縮小裁圖簡(jiǎn)單的解決問(wèn)題。
六,設(shè)計(jì)風(fēng)格的差異
設(shè)計(jì)風(fēng)格是這 3 個(gè)客戶端自己獨(dú)特的個(gè)性,設(shè)計(jì)風(fēng)格不單影響的是視覺(jué)設(shè)計(jì)的層面,對(duì)交互設(shè)計(jì)也非常的重要。尤其是在考慮動(dòng)效,擬物化交互的時(shí)候需要重視。iOS 的設(shè)計(jì)風(fēng)格偏向擬物化風(fēng)格,這個(gè)擬物化不光是視覺(jué)上做出很多擬物的小按鈕小控件的,為了配合視覺(jué),你往往在交互上也可以加一些生動(dòng)有趣的內(nèi)容。
比如說(shuō)像最新的 Path,進(jìn)入商店時(shí)遮陽(yáng)板會(huì)有一個(gè)收起的效果,小卡片也會(huì)根據(jù)重力感應(yīng)而搖擺。如果交互上就能體現(xiàn)出平臺(tái)的設(shè)計(jì)風(fēng)格的話,無(wú)疑會(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)?Android 系統(tǒng)對(duì)于動(dòng)畫(huà)效果的渲染比較差,如果太復(fù)雜的話可能會(huì)讓界面非常的卡。
Windows Phone 平臺(tái)則有著很大的不同,Metro UI 的理念要求設(shè)計(jì)者更多的考慮如何展現(xiàn)內(nèi)容,使用平滑的過(guò)渡動(dòng)畫(huà)。而且還對(duì)設(shè)計(jì)者的排版和平面設(shè)計(jì)提出了一些考驗(yàn)。所以建議交互設(shè)計(jì)的人好好讀讀WindowsPhone界面設(shè)計(jì)準(zhǔn)則,并且平時(shí)就積累一些Windows Phone界面的視覺(jué)界面感覺(jué),不然視覺(jué)設(shè)計(jì)師很可能會(huì)埋怨你哦!
本文地址:http://m.likemindfilms.com/tutorial/id1439.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏