三大移動平臺上的交互設計差別

20130320早讀課：三大移動平臺上的交互設計差別

時間: 2013-03-20 / 做者:admin / 分類:交互體驗,產品設計 / 瀏覽次數:2855 / 暫無評論 發表評論

分享到：新浪微博騰訊微博微信QQ空間有道筆記Google+EverNote更多0

推薦理由：iOS，Android，WindowsPhone能夠說是目前移動互聯網上最主流的三個平臺，在文中，做者@可風f 從佈局形式、導航邏輯、應用間聯繫、多任務、分辨率、設計風格等幾個角度比較了三者之間的差別，須要咱們在多平臺設計時注意。

以前早讀課也曾分享過@MoonMonster 的一篇文章，但沒有WindowsPhone平臺的信息，歡迎延伸閱讀→20121227早讀課：Android與iOS在交互細節上的差別

在設計的過程當中，由於這三個平臺的不一樣特性，每每要角色切換，不斷的換位思惟。可能新手和外行人以爲iOS和Android沒什麼區別，有的甚至拿Android直接照抄iOS設計就能夠了。還有一些人可能對WindowsPhone平臺一直以爲魔幻無比，但就是找不到應該如何下手。筆者總結了一下這三個平臺之間交互設計上的差別性，在開展交互設計的過程當中，必需要注意的問題：

 

一，佈局形式的差別

1）iOS經典的「tab bar」

在iOS應用內若是要切換不一樣的模塊，或者頁面內要切換不一樣的欄目，每每都會用到「tab bar」這一形式的控件。這個經典設計從iOS早期沿用至今，大部分iOS應用都是這樣設計的。固然，ios自己是很包容的，最近也很流行抽屜式導航。可是tab bar一直是最受歡迎也最好被用戶認知的方式：

  

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

在Android4.0規範出來以後，Android提出了2種視圖控制方式，一種是直接在導航欄的標題下加入一個觸控按鈕，點擊後會彈出切換欄目的菜單（圖中2標註的位置）

好比日曆應用點擊後能夠切換不一樣的視圖，另一種是直接在導航欄的下面加入了一個視圖控制欄（下右圖中2標註位置），和iOS的tab bar很像，不過是僅放在了上面，並且提倡支持手勢滑動切換：

3) Windows Phone的創新

Windows Phone與上面兩個平臺就差距很大了，由於Windows Phone獨特的Metro UI提倡迴歸傳統的閱讀體驗，像瀏覽報紙和雜誌同樣瀏覽手機上的內容，更關注與內容而不是修飾，因此Windows Phone總體都給人一種像在看雜誌的感受。Windows Phone的視圖控制經過一種叫作「全景視圖」的方式展開（下圖）。

實際上，4個視圖的內容是在一個頁面上的，並且是一個頁面同時加載的。用戶的手機默認只顯示第一屏的內容，經過滑動把後面的內容拉出來~

這種視圖方式很創新，並且方便閱讀，不得不說瀏覽的體驗好了不少。可是須要注意的是：

1）由於其實這3個欄目是同一頁面視圖，因此不要將內容放的過多，不然加載會很慢影響效率；

2）對交互設計過程當中的排版和視覺提出了很高的要求；（你得提早想好怎麼佈局好看了）

另外，WindowsPhone還提供了一種叫作樞軸的方式，樞軸和iOS的tab bar相差不是很大，只不過徹底是經過滑動來切換欄目的：

（樞軸佈局）

 

二，導航邏輯的差別

你們都知道iOS是沒有實體返回按鍵的，全部返回都是經過導航欄的back按鈕來完成。

在iOS的導航邏輯中，咱們能夠明顯的看出來，整個程序是一頁一頁的切換，就像一個幻燈片。而返回按鈕也就是切換到上一頁。因此，iOS的返回控制的是頁面。可是Android和WindowsPhone就不是這樣了，Android和WindowsPhone是有物理返回按鈕的，點擊物理返回按鈕，控制的不光是一個頁面，並且包括了上一步的操做，好比說：

進入頁面A，點擊文本框彈出鍵盤。那麼點擊返回按鍵就是 - 收起鍵盤

因此安卓和WindowsPhone的返回邏輯是按照時間流來判斷的，而不只僅是頁面，返回按鈕控制的是動做。

須要特地提一下的是：WindowsPhone的返回邏輯不單限於應用內，還影響到應用之間。也就是說你當前正在桌面，再點擊一次back，就會進入你上一次打開的應用。

另外在Android4.0開始，提出了一個向上的概念，就是導航欄標題前面的一個小箭頭，點擊這個箭頭，是回到該頁面的上一個層級：

 

三，應用之間聯繫的差別

衆所周知，iOS是一個封閉的系統，而Android是一個開放的系統。咱們能夠比喻iOS每個應用都是一個小房間，每一個應用都在本身的房間裏作本身的事情，互相之間不進行任何來往。而Android則是一個大大的辦公區，每一個應用雖然也有本身的工位，可是能夠互相串門或者借用東西，而Windows Phone則遵循着和iOS差很少的方式。到了iOS6的時候能夠支持應用直接互相跳轉了，但那也僅限於你跳出去了，就再也不回來了，也就是說到了那個房間你就是那個房間的人了，與以前的房間沒有關聯了。

這樣的差別意味着，iOS和Windows Phone應用的權限變得很低，身爲應用的你既不能修改系統的一些屬性（除非越獄了），也不能修改其餘應用的內容。而Android的一款應用不但能夠控制系統的一些操做，還能夠控制其餘應用執行某些特定的操做。

這種差別會讓安卓上的應用設計有了更多的可能，身爲設計師的你能夠根據這一特性設計不少不錯的功能，好比系統美化或者系統優化，殺毒，攔截電話等功能，而iOS和Windows Phone就不能。可是這也讓Android系統面臨了很嚴峻的安全問題，因此安卓上各類優化和殺毒軟件很流行。

 

四，多任務的差別

多任務的差別用一句話來形容就是：iOS和WindowsPhone都是假的多任務，而Android是真的多任務。

若是你設計的應用有下載，那麼iOS和WindowsPhone切換到後臺下載就被暫停了，而Android不但不會暫停，你還能夠設計一些偷偷在後臺運行的功能！

 

五，分辨率的差別

親，你知道Android如今有多少種分辨率嗎？

適配一直是Android很頭痛的問題，身爲前端每每要爲不一樣的分辨率調效果而保證界面不會變形和模糊。而分辨率問題不只僅影響視覺這一塊，對交互設計也有很大的影響。由於這些手機每每屏幕比例也是不一樣的，你須要考慮不一樣的長寬比下，你的界面佈局應該是怎樣的。因此在設計Android的時候，你不能要求把界面佈局寫死，應該儘可能保證每一個控件都是浮動的，並且本身能評估出各類古怪的佈局下的效果。

iOS和Windows Phone就會好不少。iOS分辨率分爲320×480，640×960，640×1136，Windows Phone分辨率分爲480×800，800×1280，800×1136，雖然看起來也蠻多的，可是界面的比例基本上沒有什麼變化。因此對於交互上的佈局影響並非很大，視覺設計師也能夠經過腳本縮小裁圖簡單的解決問題。

 

六，設計風格的差別

設計風格是這3個客戶端本身獨特的個性，設計風格不單影響的是視覺設計的層面，對交互設計也很是的重要。尤爲是在考慮動效，擬物化交互的時候須要重視。iOS的設計風格偏向擬物化風格，這個擬物化不光是視覺上作出不少擬物的小按鈕小控件的，爲了配合視覺，你每每在交互上也能夠加一些生動有趣的內容。

好比說像最新的Path，進入商店時遮陽板會有一個收起的效果，小卡片也會根據重力感應而搖擺。若是交互上就能體現出平臺的設計風格的話，無疑會很是討好用戶，增長產品細節上的亮點。

Android平臺就簡單一些了，在總體的佈局和交互形式和iOS差很少的狀況下，儘可能的簡潔，呈現一種科幻的風格便可以了。Android平臺儘可能少用擬物化的動效，由於Android系統對於動畫效果的渲染比較差，若是太複雜的話可能會讓界面很是的卡。此外筆者推薦一款叫fuubo的應用，它是一款很是符合Android Holo風格又在交互上處理的頗有創新的產品。

WindowsPhone平臺則有着很大的不一樣，MetroUI的理念要求設計者更多的考慮如何展示內容，使用平滑的過渡動畫。並且還對設計者的排版和平面設計提出了一些考驗。因此建議交互設計的人好好讀讀WindowsPhone界面設計準則，而且平時就積累一些WindowsPhone界面的視覺界面感受，否則視覺設計師極可能會埋怨你哦！

Via：可風f    做者原創文章並投稿「互聯網er的早讀課」，轉載請艾特做者並註明出處。

若是看到這段文字，證實您已經看完這篇文章了，有什麼收穫有什麼感想有什麼不贊同，咱們期待您的留言評論，並誠摯邀請您加入「互聯網er早讀課」QQ羣，一同交流天天文章的心得並結識同行。官方2羣：74447564，加羣密碼「職業信息+城市+姓名」，不然不予經過，入羣后請修改羣名片。注：官方QQ羣非水羣，喜歡閒聊的童鞋請勿加入。再次感謝您對早讀課網站的支持。