Android與iOS在交互細節上的區別

以下內容來自知乎,作者@MoonMonster,百度無線使用者體驗部交互設計師,上海MUX負責人。雷鋒網已取得作者授權,而對原回答做出適當編輯排版。

本文通過瞭解iOS&Android這兩個基本制霸移動平臺的智慧手機系統的交互區別(深坑),讓從業者獲得一些有益於開發設計的啟示。

在交互細節上有哪些區別,這問題說起來估計就有難度了!事先聲明,文長…… -_-’

1.導航模式

首先從導航模式開始,iOS 應用大多數情況,只提供單一的路徑。無論什麼樣的程式,都只有一個視窗,這個視窗用於放置程式的內容和功能,使用者不會意識到這個視窗。在 iOS 設備中,使用者覺得程式就是依次呈現的一屏又一屏圖像。

可以把一屏圖像想像成一個離散的視覺狀態或者模態。一個程式擁有的屏數或多或少,每一屏都是各種素材和控制項的組合,由此而衍生了iOS 應用內的多種導航模式,如:平鋪、清單及樹狀等。涉及到層級導航通過應用內左上角back鍵進行返回操作。

返回按鈕

應用內的導航與系統導航分隔開,iOS應用內一般無「退出」選項,通過實體home按鍵返回主屏介面及退出應用(手勢支援)。

Android 2.3和更早的系統依賴于手機硬體的返回鍵來支援應用程式的導航。Android 3.0 中引入了動作列,於是出現了第二種導航機制: 「向上」按鈕。

Android3.0 向上按鈕

向上按鈕被用於基於層級關係的應用程式中的介面切換。系統的「返回」按鍵是基於使用者最近查看,以時間倒敘的方式連接的介面歷史的導航(但有時候又不遵循這條邏輯)。

Android應用導航主要分為以下三類:

1.應用程式內的導航

  • 通過多個入口進入到介面
  • 介面內的視圖間導航
  • 同一層級的介面間導航

2.應用程式外的導航(通過主屏Widgets和通知)

  • 間接通知(通知列內的消息、mail內的日曆等)
  • 彈出通知

3.應用程式間的導航

當上一個查看的介面是當前介面的父層級時,點擊「返回」按鍵和點擊「向上」按鍵的結果是一樣的。然而,與「向上」按鍵不同的是, 「向上」按鍵可以確保使用者停留在應用程式中,而「返回」按鍵可以讓使用者回到系統首頁,甚至會回到另一個應使用者程式。

應用程式導航

Android 4.x後採用將四大天王實體鍵修改為三個虛擬按鍵(返回、Home、多工),意在解決Android設備碎片化的問題,並希望能夠解決Android一直以為存在的導航問題,但在實際當中該問題依然存在(魅族的Smart bar同樣在嘗試解決這個問題,通過有效的設計形成與其它手機的差異化)。

Android4.0 虛擬按鍵

在為Android應用進行設計時,請充分考慮導航問題,避免使用者在使用過程中迷失,並且在考慮按鈕位置及操作方式時注意Android虛擬鍵的誤操作問題。

2. 動作列(工具列)

iOS工具列一般處於螢幕的底部,但iPad端也可能出現在頂部。工具列上的控制項等寬放置。控制項會隨著屏上內容的切換而改變,因為內容與用來操縱它的控制項是匹配起來的。在工具列上放置當前情景下使用者最常用的功能。每個工具列上的控制項至少要保持 44×44 points的面積(Retina屏寬高均提高2倍 one point equals two pixels ),方便使用者操作。

動作列

Android動作列是 Android 應用程式的最重要的結構元素。它幾乎在應用程式的每個介面的頂部都有一塊專用的區域。

大多數應用程式的動作列被劃分為四個不同的功能區域 :

  • 應用程式的圖示:圖示能夠説明使用者對應用進行識別,如果當前顯示的不是應用程式的最高層介面,保證在圖示左邊顯示「向上」符號
  • 視圖控制項 :如果你的應用程式在不同的視圖展示內容,動作列的這個部分可以允許使用者切換視圖
  • 操作按鈕 :動作列裡的操作按鈕會展示你的應用程式的最重要的操作
  • 更多操作 :把不常用的操作放到更多操作裡

Android 3.0在某些應用介面引入了長按進入選擇模式,4.x後對選擇模式進行了改良引入了情境動作列(CAB,coNtextual action bar),與動作列出現在同一個位置,後面會與iOS的編輯模式進行比較。

情境動作列

Ps. Android裡也有底部動作列,但僅為頂部動作列的擴展,官方稱為「Split Action Bar」。

Split Action Bar

在進行設計的時候需要考慮動作列如何適應不同的螢幕方向和螢幕尺寸,進行動態的調整以達到最優的效果。

3. 多工

iOS通過按兩下Home鍵及四指手勢啟動多工選擇器。大多數程式在轉移到後臺的時候,會被掛起。被掛起的程式會展示在「多工選擇器 (multitasking bar)」中,説明使用者快速找到近期使用的程式。當使用者重啟掛起的程式時,它能夠從退出時所在的那個點迅速恢復,無需重新渲染介面。

當使用者啟動多工選擇器後:

  1. 向左滑動,查看更多其它任務
  2. 向右滑動(首屏任務介面), 進入側快捷面板區域
  3. 長按任務,進入刪除模式

多工

為iOS 應用進行設計時,請考慮iOS雙層狀態列(double-high status bar),顯示當前正在進行的任務:通話中、錄音中等,應用佈局不會因高度的變化而出現問題。

Android的多工介面提供了一個最近使用的應用程式之間切換的有效方式。並被賦予一個獨立的虛擬按鍵,位於巡覽列的最右側,用以顯示使用者最近使用的應用程式及任務,它們通過時間順序進行組織排列,最近使用的應用程式放置在近期任務介面的最底部。

近期任務管理,當使用者點擊近期任務按鍵後:

  1. 選中任務左/右滑動,刪除任務
  2. 長按任務,將彈出任務彈窗,「從清單中刪除」、「應用資訊」

Android 多工順序排列

4. 通知中心

早期iOS系統並沒有通知中心,後引入Android系統中通知中心設計,這是一種能夠使使用者更為簡單、方便的查看各種通知資訊的方案。使用者通過手指從頂部邊緣下滑啟動通知中心(與Android一樣),在應用全屏時使用者需要兩次操作才可啟動通知中心(防止誤操作)。

使用者在通知中心內可實現應用間的調用或跳轉,需要通過iOS的多工才可返回之前應用(Android採用系統的back鍵,導致應用與應用之前的邏輯複雜性的增加)。

通知中心一般承載以下類型資訊:

  • 消息
  • 事件
  • 更新
  • 狀態

通知中心

通知中心是早期Android系統中的優秀設計,在之後的更新中也不斷被賦予新的意義。Android的通知系統被設計為當使用者聚焦某個任務時能快速告知使用者一些事件,但還是應該謹慎決定創建一個通知。
使用者在通知中心內實現應用間的調用或跳轉,但需要詳盡考慮Android系統導航「back」、「up」對跳轉邏輯的影響。

因Android的開放性,導致通知中心所顯示的資訊可進行相應的設計,但需注意以下幾條:

  • 使其私有化
  • 導航到正確的地方
  • 對時間敏感事件請增加時間戳記
  • 對通知進行合併
  • 自我清理,如某個事件在具體時間發生,過期後該通知可能對使用者來說並不重要
  • 使用不同的圖示或提示。

通知中心 (2)

寫到這插個題外話,微軟的Win8木有通知中心的設計,不知道是因為趕工還是設計理念的原因,導致Surface平臺的通知有點像早期iOS的情況,Win8主要依靠三種通知方式進行提示:

  • 螢幕右上角通知
  • 鎖屏介面的更新和詳細狀態
  • 「開始」螢幕上的磁貼

5. 通知方式

目前iOS中的通知具體有四種方式:

  • 條幅式通知
  • 彈出式通知
  • Icon右上角消息式通知
  • 聲音通知

每種通知方式給使用者的通知強度及心理影響均不同,在設計時考慮希望給使用者呈現的消息級別及相對應的通知強度。應用的通知及是否顯示在通知中心,使用者均可在設置中進行設置,請謹慎使用通知,不要讓使用者感到困擾及厭煩。

通知回饋

Android中的通知具體有以下四種方式

  • 通知區域提醒
  • 進行中的通知
  • 彈出式通知
  • 提示條通知

其中彈出式及提示條通知僅在當前運行的應用中出現,顯示需要使用者立即處理的任務或提醒。進行中的通知可讓使用者瞭解正在後臺運行的進程。例如音樂播放機會在通知系統裡一直顯示 當前現正播放的曲目直到使用者手動停止播放。在頂部狀態列通知區域以圖示表示最近的通知,打開通知中心即可查看這些通知,平板電腦通知區域被集成到螢幕底部的系統欄中。

6. 編輯模式(選擇模式)

iOS應用在可供使用者編輯的介面一般通過Table view的「編輯」鍵進入編輯模式,進入編輯後頂部巡覽列發生變化,根據內容的不同出現不同的編輯選項,允許對內容進行多項,執行操作時將應用到多項所選內容,在編輯項過多時,可採用底部動作列的設計。使用者在編輯模式下執行完編輯後點擊「完成」退出當前模式。

編輯模式

Android通過長按進入選擇模式,選擇內容後出現的情境動作列(CAB)是一個覆蓋在你的應用程式當前動作列上的臨時動作列,它在使用者長按某個可被選擇的內容項後出現。 進入選擇模式後,通過點擊可選擇多個內容項,在情境動作列觸發一個操作會應用到所有被選中的內容,執行操作後將退出選擇模式,情景動作列也隨著消失。

應用程式需要支援同時選擇多個內容項時,Android官方建議使用情境動作列,並對長按手勢進行預留。

Android 情境動作列

iOS在文本視圖、web 視圖和圖片視圖裡調出編輯功能表,來執行剪切、粘貼和選擇等操作,功能表出現在需要進行處理的內容附近,與內容產生關聯,輕量的懸浮式設計避免了模式化的狀態(使用者可點擊任何區域取消懸浮功能表)。應用程式可調整功能表的行為,給使用者更多控制內容的操作。

懸浮功能表

Android可以在文字方塊及其它文本視圖中長按選擇任何文字,這個操作會觸發一個文本選擇模式,便於延伸選取或對選定文本進行操作。同樣,該選擇模式會啟動情境動作列。Android 4.x對選擇滑塊的處理很優秀,便於使用者選擇,能夠精確進行定位,單滑塊進行游標定位時尤為管用。

滑塊選擇

7. Widgets(小部件)

這個應該先從Android談起,Widgets一直是Android系統的亮點(個人不太喜歡,可能是因為Android系統的複雜性),Android系統導航層級就分為了主畫面和應用清單,主畫面是一個可定制的區域,用以放置應用程式的快捷方式、資料夾、及Widgets,通過使用者左右劃動螢幕切換到不同的主畫面面板。

應用清單內區分為App區域及Widgets區域,隨著使用者安裝的應用越來越多,相應的Widgets也越來越多… -_-’  一個應用可以弄多個不同size的Widgets,好像又有點扯遠了!

Android系統的Widgets分為以下四種類型:

  • 資訊型Widgets
  • 聚合型Widgets
  • 控制型Widgets
  • 混合型Widgets

Android Widgets

iOS平臺可能大多數人覺得並沒有Widgets的概念,通知中心內的天氣及股票可以算是iOS對Widgets的試水(個人感受),雖然簡單,但相信應該會在未來看到iOS對這一方面更深入的嘗試吧。 ^_^

8. Tab欄

iOS的Tab欄用於切換子任務、視圖和模式。Tab欄位於螢幕的底部,並且始終可見。Tab 欄上展示圖示和文字,當使用者選中某個tab時,這個tab處於高亮狀態。

在 iPhone 上,tab 欄一次只能顯示 5 個以內的頁簽。如果程式需要更多的tab,tab欄可以展示前四個,第五個放置「更多」,用清單的方式呈現其餘的專案。

tab欄

Android的Tab欄用於探索和切換不同視圖或功能,也可用於流覽不同分類的內容集合。主要有三種tab類型:

  • 滾動tab
  • 固定tab
  • 堆疊tab

Android tab

兩個系統還有很多細節上的不同,像Android的界限回饋效果與iOS的回拉效果、Activity Indicator的對比、dialog上確認鍵兩個系統分別在不同的位置等,以及iOS特有功能上的一些交互特性Passbook、iCloud、iAd等等……

作者博客:MoonMonster

 

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

Comments are closed.