交互設計的那些事

　　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 是有物理返回按鈕的，點擊物理返回按鈕，控制的不光是一個頁面，而且包括了上一步的操作，比如說：

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

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

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

　　三，應用之間聯系的差異

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

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

　　這種差異會讓 Android 上的應用設計有了更多的可能，身為設計師的你可以根據這一特性設計很多不錯的功能，比如系統美化或者系統優化，殺毒，攔截電話等功能，而 iOS 和 Windows Phone 就不能。但是這也讓 Android 系統面臨了很嚴峻的安全問題，所以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界面的視覺界面感覺，不然視覺設計師很可能會埋怨你哦!