交互設計的那些事:Android、iOS和WP平臺的六大差異

iPhone、Galaxy S3 以及 Lumia 920是市場上如今最引人注目的三款智慧手機,正好對應iOS、Android及Windows Phone三大平臺,儘管三大作業系統在市場份額、出貨量以及使用者認可方面都有著不小的差異。 但更能我們興趣,更有討論價值的其實是這三大平臺在設計方面的差異,這不僅最終決定著使用者的體驗,也決定了開發者的參與熱情。

 

來自微信公眾帳號「互聯網er的早讀課」的這篇文章從包括變局、導航邏輯、設計風格等六大方面的差異對三大平臺的交互設計進行了較為深入的分析和討論,極具參考價值。

一,佈局形式的差異

1)iOS 經典的「tab bar」



在 iOS 應用內如果要切換不同的模組,或者頁面內要切換不同的欄目,往往都會用到「tab bar」這一形式的控制項。這個經典設計從 iOS 早期沿用至今,大部分 iOS 應用都是這樣設計的。當然,iOS 本身是很包容的,最近也很流行抽屜式導航。但是 tab bar 一直是最受歡迎也最好被使用者認知的方式:

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

在 Android 4.0 規範出來之後,Android 提出了 2 種視圖控制方式,一種是直接在巡覽列的標題下加入一個觸控按鈕,點擊後會彈出切換欄目的功能表(圖中 2 標注的位置)

比如日曆應用點擊後可以切換不同的視圖,另外一種是直接在巡覽列的下面加入了一個視圖控制欄(下右圖中 2 標注位置),和 iOS 的 tab bar 很像,不過是僅放在了上面,而且提倡支援手勢滑動切換:

3) Windows Phone 的創新

Windows Phone 與上面兩個平臺就差距很大了,因為 Windows Phone 獨特的 Metro UI 提倡回歸傳統的閱讀體驗,像流覽報紙和雜誌一樣流覽手機上的內容,更關注與內容而不是修飾,所以 Windows Phone 整體都給人一種像在看雜誌的感覺。Windows Phone 的視圖控制通過一種叫做「全景視圖」的方式展開(下圖)。

實際上,4 個視圖的內容是在一個頁面上的,而且是一個頁面同時載入的。使用者的手機預設只顯示第一屏的內容,通過滑動把後面的內容拉出來。

這種視圖方式很創新,而且方便閱讀,不得不說流覽的體驗好了很多。但是需要注意的是:

  • 因為其實這3個欄目是同一網頁檢視,所以不要將內容放的過多,否則載入會很慢影響效率;
  • 對交互設計過程中的排版和視覺提出了很高的要求;

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

(樞軸佈局)

二,導航邏輯的差異

大家都知道 iOS 是沒有實體返回按鍵的,所有返回都是通過巡覽列的 back 按鈕來完成。

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

但是 Android 和 Windows Phone 就不是這樣了,Android 和 Windows Phone 是有物理返回按鈕的,點擊物理返回按鈕,控制的不光是一個頁面,而且包括了上一步的操作,比如說:

進入頁面 A,點擊文字方塊彈出鍵盤。那麼點擊返回按鍵就是收起鍵盤。

所以 Android 和 Windows Phone 的返回邏輯是按照時間流來判斷的,而不僅僅是頁面,返回按鈕控制的是動作。

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

另外在 Android 4.0 開始,提出了一個向上的概念,就是巡覽列標題前面的一個小箭頭,點擊這個箭頭,是回到該頁面的上一個層級:

三,應用之間聯繫的差異

眾所周知,iOS 是一個封閉的系統,而 Android 是一個開放的系統。

我們可以比喻 iOS 每一個應用都是一個小房間,每個應用都在自己的房間裡做自己的事情,互相之間不進行任何來往。而 Android 則是一個大大的辦公區,每個應用雖然也有自己的工位,但是可以互相串門或者借用東西,而 Windows Phone 則遵循著和 iOS 差不多的方式。到了 iOS 6 的時候可以支援應用直接互相跳轉了,但那也僅限於你跳出去了,就不再回來了,也就是說到了那個房間你就是那個房間的人了,與之前的房間沒有關聯了。

這樣的差異意味著,iOS 和 Windows Phone 應用的許可權變得很低,身為應用的你既不能修改系統的一些屬性(除非越獄了),也不能修改其他應用的內容。而 Android 的一款應用不但可以控制系統的一些操作,還可以控制其他應用執行某些特定的操作。

這種差異會讓 Android 上的應用設計有了更多的可能,身為設計師的你可以根據這一特性設計很多不錯的功能,比如系統美化或者系統優化,殺毒,攔截電話等功能,而 iOS 和 Windows Phone 就不能。但是這也讓 Android 系統面臨了很嚴峻的安全問題,所以Android上各種優化和殺毒軟體很流行。

四,多工的差異

多工的差異用一句話來形容就是:iOS 和 Windows Phone 都是假的多工,而 Android 是真的多工。

如果你設計的應用有下載,那麼 iOS 和 Windows Phone 切換到後臺下載就被暫停了,而 Android 不但不會暫停,你還可以設計一些偷偷在後臺運行的功能!

五,解析度的差異

親,你知道Android現在有多少種解析度嗎?

(TECH2IPO 注:此資料圖顯示的是 2011 年 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 系統對於動畫效果的渲染比較差,如果太複雜的話可能會讓介面非常的卡。

Windows Phone 平臺則有著很大的不同,Metro UI 的理念要求設計者更多的考慮如何展現內容,使用平滑的過渡動畫。而且還對設計者的排版和平面設計提出了一些考驗。所以建議交互設計的人好好讀讀WindowsPhone介面設計準則,並且平時就積累一些Windows Phone介面的視覺介面感覺,不然視覺設計師很可能會埋怨你哦!

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.