在手機(jī)應(yīng)用的交互細(xì)節(jié)上，Android 與 iOS 有哪些區(qū)別?
在 交互細(xì)節(jié)上有哪些區(qū)別，這問(wèn)題回答起來(lái)估計(jì)就有難度了!
事先聲明，文長(zhǎng)...... -_-'
首先從 導(dǎo)航模式開(kāi)始，iOS 應(yīng)用大多數(shù)情況,只提供單一的路徑。無(wú)論什么樣的程序，都只有一個(gè)窗口，這個(gè)窗口用于放置程序的內(nèi)容和功能，用戶不會(huì)意識(shí)到這個(gè)窗口。在 iOS 設(shè)備中,用戶覺(jué)得程序就是依次呈現(xiàn)的一屏又一屏圖像。
可以把一屏圖像想象成一個(gè)離散的視覺(jué)狀態(tài)或者模態(tài)。一個(gè)程序擁有的屏數(shù)或多或少,每一屏都是各種素材和控件的組合，由此而衍生了iOS 應(yīng)用內(nèi)的多種導(dǎo)航模式，如：平鋪、列表及樹(shù)狀等。涉及到層級(jí)導(dǎo)航通過(guò)應(yīng)用內(nèi)左上角back鍵進(jìn)行返回操作(圖1)。
圖1
應(yīng)用內(nèi)的導(dǎo)航與系統(tǒng)導(dǎo)航分隔開(kāi)，iOS應(yīng)用內(nèi)一般無(wú)「退出」選項(xiàng)，通過(guò)實(shí)體home按鍵返回主屏界面及退出應(yīng)用(手勢(shì)支持)。
Android 2.3和更早的系統(tǒng)依賴于手機(jī)硬件的返回鍵來(lái)支持應(yīng)用程序的導(dǎo)航。Android 3.0 中引入了操作欄,于是出現(xiàn)了第二種導(dǎo)航機(jī)制: “向上”按鈕(圖2)。
圖2
向上按鈕被用于基于層級(jí)關(guān)系的應(yīng)用程序中的界面切換。系統(tǒng)的“返回”按鍵是基于用戶最近查看，以時(shí)間倒敘的方式連接的界面歷史的導(dǎo)航(但有時(shí)候又不遵循這條邏輯)。
Android應(yīng)用導(dǎo)航主要分為以下三類：
1.應(yīng)用程序內(nèi)的導(dǎo)航
通過(guò)多個(gè)入口進(jìn)入到界面
界面內(nèi)的視圖間導(dǎo)航
同一層級(jí)的界面間導(dǎo)航
2.應(yīng)用程序外的導(dǎo)航(通過(guò)主屏Widgets和通知)
間接通知(通知欄內(nèi)的消息、mail內(nèi)的日歷等)
彈出通知
3.應(yīng)用程序間的導(dǎo)航
當(dāng)上一個(gè)查看的界面是當(dāng)前界面的父層級(jí)時(shí),點(diǎn)擊“返回”按鍵和點(diǎn)擊“向上”按鍵的結(jié)果是一樣的。然而,與“向上”按鍵不同的是, “向上”按鍵可以確保用戶停留在應(yīng)用程序中,而“返回”按鍵可以讓用戶回到系統(tǒng)首頁(yè),甚至?xí)氐搅硪粋€(gè)應(yīng)用戶程序。
圖3
Android 4.x后采用將四大天王實(shí)體鍵修改為三個(gè)虛擬按鍵(返回、Home、多任務(wù))，意在解決Android設(shè)備碎片化的問(wèn)題，并希望能夠解決Android一直以為存在的導(dǎo)航問(wèn)題，但在實(shí)際當(dāng)中該問(wèn)題依然存在(魅族的Smart bar同樣在嘗試解決這個(gè)問(wèn)題，通過(guò)有效的設(shè)計(jì)形成與其它手機(jī)的差異化)。
圖4
在為Android應(yīng)用進(jìn)行設(shè)計(jì)時(shí)，請(qǐng)充分考慮導(dǎo)航問(wèn)題，避免用戶在使用過(guò)程中迷失，并且在考慮按鈕位置及操作方式時(shí)注意Android虛擬鍵的誤操作問(wèn)題。
2. 操作欄(工具欄)
iOS工具欄一般處于屏幕的底部，但iPad端也可能出現(xiàn)在頂部。工具欄上的控件等寬放置?？丶?huì)隨著屏上內(nèi)容的切換而改變,因?yàn)閮?nèi)容與用來(lái)操縱它的控件是匹配起來(lái)的。在工具欄上放置當(dāng)前情景下用戶最常用的功能。每個(gè)工具欄上的控件至少要保持 44×44 points的面積(Retina屏寬高均提高2倍 one point equals two pixels )，方便用戶操作。
圖5
Android操作欄是 Android 應(yīng)用程序的最重要的結(jié)構(gòu)元素。它幾乎在應(yīng)用程序的每個(gè)界面的頂部都有一塊專用的區(qū)域(圖6)。
圖6
大多數(shù)應(yīng)用程序的操作欄被劃分為四個(gè)不同的功能區(qū)域 ：
1.應(yīng)用程序的圖標(biāo)：圖標(biāo)能夠幫助用戶對(duì)應(yīng)用進(jìn)行識(shí)別，如果當(dāng)前顯示的不是應(yīng)用程序的最高層界面,保證在圖標(biāo)左邊顯示“向上”符號(hào)。
2.視圖控件 ：如果你的應(yīng)用程序在不同的視圖展示內(nèi)容,操作欄的這個(gè)部分可以允許用戶切換視圖
3.操作按鈕 ：操作欄里的操作按鈕會(huì)展示你的應(yīng)用程序的最重要的操作。
4.更多操作 ：把不常用的操作放到更多操作里。
Android 3.0在某些應(yīng)用界面引入了長(zhǎng)按進(jìn)入選擇模式，4.x后對(duì)選擇模式進(jìn)行了改良引入了情境操作欄(CAB，contextual action bar)，與操作欄出現(xiàn)在同一個(gè)位置(圖7)，后面會(huì)與iOS的編輯模式進(jìn)行比較。
圖7
Ps. Android里也有底部操作欄，但僅為頂部操作欄的擴(kuò)展，官方稱為「Split Action Bar」(圖7)。
圖8
在進(jìn)行設(shè)計(jì)的時(shí)候需要考慮操作欄如何適應(yīng)不同的屏幕方向和屏幕尺寸，進(jìn)行動(dòng)態(tài)的調(diào)整以達(dá)到最優(yōu)的效果。
3. 多任務(wù)
iOS通過(guò)雙擊Home鍵及四指手勢(shì)激活多任務(wù)選擇器(圖6)。大多數(shù)程序在轉(zhuǎn)移到后臺(tái)的時(shí)候,會(huì)被掛起。被掛起的程序會(huì)展示在“多任務(wù)選擇器 (multitasking bar)”中，幫助用戶快速找到近期使用的程序。當(dāng)用戶重啟掛起的程序時(shí),它能夠從退出時(shí)所在的那個(gè)點(diǎn)迅速恢復(fù),無(wú)需重新渲染界面。
當(dāng)用戶激活多任務(wù)選擇器后：
1.向左滑動(dòng)，查看更多其它任務(wù)。
2.向右滑動(dòng)(首屏任務(wù)界面)， 進(jìn)入側(cè)快捷面板區(qū)域。
3.長(zhǎng)按任務(wù)，進(jìn)入刪除模式。
圖9
為iOS 應(yīng)用進(jìn)行設(shè)計(jì)時(shí)，請(qǐng)考慮iOS雙層狀態(tài)欄( double-high status bar)，顯示當(dāng)前正在進(jìn)行的任務(wù)：通話中、錄音中等，應(yīng)用布局不會(huì)因高度的變化而出現(xiàn)問(wèn)題。
Android的多任務(wù)界面提供了一個(gè)最近使用的應(yīng)用程序之間切換的有效方式。并被賦予一個(gè)獨(dú)立的虛擬按鍵，位于導(dǎo)航欄的最右側(cè),用以顯示用戶最近使用的應(yīng)用程序及任務(wù),它們通過(guò)時(shí)間順序進(jìn)行組織排列,最近使用的應(yīng)用程序放置在近期任務(wù)界面的最底部。
近期任務(wù)管理，當(dāng)用戶點(diǎn)擊近期任務(wù)按鍵后：
1.選中任務(wù)左/右滑動(dòng)，刪除任務(wù)。
2.長(zhǎng)按任務(wù)，將彈出任務(wù)彈窗，「從列表中刪除」、「應(yīng)用信息」
圖10
4. 通知中心
早期iOS系統(tǒng)并沒(méi)有通知中心，后引入Android系統(tǒng)中通知中心設(shè)計(jì)，這是一種能夠使用戶更為簡(jiǎn)單、方便的查看各種通知信息的方案。用戶通過(guò)手指從頂部邊緣下滑激活通知中心(與Android一樣)，在應(yīng)用全屏?xí)r用戶需要兩次操作才可激活通知中心(防止誤操作)。用戶在通知中心內(nèi)可實(shí)現(xiàn)應(yīng)用間的調(diào)用或跳轉(zhuǎn)，需要通過(guò)iOS的多任務(wù)才可返回之前應(yīng)用(Android采用系統(tǒng)的back鍵，導(dǎo)致應(yīng)用與應(yīng)用之前的邏輯復(fù)雜性的增加)。
通知中心一般承載以下類型信息：
1.消息。
2.事件。
3.更新。
4.狀態(tài)
圖11
通知中心是早期Android系統(tǒng)中的優(yōu)秀設(shè)計(jì)，在之后的更新中也不斷被賦予新的意義。Android的通知系統(tǒng)被設(shè)計(jì)為當(dāng)用戶聚焦某個(gè)任務(wù)時(shí)能快速告知用戶一些事件，但還是應(yīng)該謹(jǐn)慎決定創(chuàng)建一個(gè)通知。
用戶在通知中心內(nèi)實(shí)現(xiàn)應(yīng)用間的調(diào)用或跳轉(zhuǎn)，但需要詳盡考慮Android系統(tǒng)導(dǎo)航「back」、「up」對(duì)跳轉(zhuǎn)邏輯的影響。
因Android的開(kāi)放性，導(dǎo)致通知中心所顯示的信息可進(jìn)行相應(yīng)的設(shè)計(jì)，但需注意以下幾條：
1.使其私有化 。
2.導(dǎo)航到正確的地方
3.對(duì)時(shí)間敏感事件請(qǐng)?jiān)黾訒r(shí)間戳
4.對(duì)通知進(jìn)行合并
5.自我清理，如某個(gè)事件在具體時(shí)間發(fā)生，過(guò)期后該通知可能對(duì)用戶來(lái)說(shuō)并不重要。
6.使用不同的圖標(biāo)或提示。
圖12
寫(xiě)到這插個(gè)題外話，微軟的Win8木有通知中心的設(shè)計(jì)，不知道是因?yàn)橼s工還是設(shè)計(jì)理念的原因，導(dǎo)致Surface平臺(tái)的通知有點(diǎn)像早期iOS的情況，Win8主要依靠三種通知方式進(jìn)行提示：1.屏幕右上角通知。 2.鎖屏界面的更新和詳細(xì)狀態(tài)。 3.「開(kāi)始」屏幕上的磁貼。
5. 通知方式
目前iOS中的通知具體有四種方式：
1.條幅式通知。
2.彈出式通知。
3.Icon右上角消息式通知。
4.聲音通知。
每種通知方式給用戶的通知強(qiáng)度及心理影響均不同，在設(shè)計(jì)時(shí)考慮希望給用戶呈現(xiàn)的消息級(jí)別及相對(duì)應(yīng)的通知強(qiáng)度。應(yīng)用的通知及是否顯示在通知中心，用戶均可在設(shè)置中進(jìn)行設(shè)置，請(qǐng)謹(jǐn)慎使用通知，不要讓用戶感到困擾及厭煩。
圖13
Android中的通知具體有以下四種方式
1.通知區(qū)域提醒。
2.進(jìn)行中的通知
3.彈出式通知。
4.提示條通知。
其中彈出式及提示條通知僅在當(dāng)前運(yùn)行的應(yīng)用中出現(xiàn)，顯示需要用戶立即處理的任務(wù)或提醒。進(jìn)行中的通知可讓用戶了解正在后臺(tái)運(yùn)行的進(jìn)程。例如音樂(lè)播放器會(huì)在通知系統(tǒng)里一直顯示 當(dāng)前正在播放的曲目直到用戶手動(dòng)停止播放。在頂部狀態(tài)欄通知區(qū)域以圖標(biāo)表示最近的通知，打開(kāi)通知中心即可查看這些通知，平板電腦通知區(qū)域被集成到屏幕底部的系統(tǒng)欄中。
圖14
6. 編輯模式(選擇模式)
iOS應(yīng)用在可供用戶編輯的界面一般通過(guò)Table view的「編輯」鍵進(jìn)入編輯模式，進(jìn)入編輯后頂部導(dǎo)航欄發(fā)生變化，根據(jù)內(nèi)容的不同出現(xiàn)不同的編輯選項(xiàng)，允許對(duì)內(nèi)容進(jìn)行多項(xiàng)，執(zhí)行操作時(shí)將應(yīng)用到多項(xiàng)所選內(nèi)容，在編輯項(xiàng)過(guò)多時(shí)，可采用底部操作欄的設(shè)計(jì)。用戶在編輯模式下執(zhí)行完編輯后點(diǎn)擊「完成」退出當(dāng)前模式。
圖15
Android通過(guò)長(zhǎng)按進(jìn)入選擇模式，選擇內(nèi)容后出現(xiàn)的情境操作欄(CAB)是一個(gè)覆蓋在你的應(yīng)用程序當(dāng)前操作欄上的臨時(shí)操作欄，它在用戶長(zhǎng)按某個(gè)可被選擇的內(nèi)容項(xiàng)后出現(xiàn)(圖7，往上找哦)。 進(jìn)入選擇模式后，通過(guò)點(diǎn)擊可選擇多個(gè)內(nèi)容項(xiàng)，在情境操作欄觸發(fā)一個(gè)操作會(huì)應(yīng)用到所有被選中的內(nèi)容，執(zhí)行操作后將退出選擇模式，情景操作欄也隨著消失。
應(yīng)用程序需要支持同時(shí)選擇多個(gè)內(nèi)容項(xiàng)時(shí)，Android官方建議使用情境操作欄，并對(duì)長(zhǎng)按手勢(shì)進(jìn)行預(yù)留。
圖16
iOS在文本視圖、web 視圖和圖片視圖里調(diào)出編輯菜單,來(lái)執(zhí)行剪切、粘貼和選擇等操作，菜單出現(xiàn)在需要進(jìn)行處理的內(nèi)容附近，與內(nèi)容產(chǎn)生關(guān)聯(lián)，輕量的懸浮式設(shè)計(jì)避免了模式化的狀態(tài)(用戶可點(diǎn)擊任何區(qū)域取消懸浮菜單)。應(yīng)用程序可調(diào)整菜單的行為，給用戶更多控制內(nèi)容的操作。
圖17
Android可以在文本框及其它文本視圖中長(zhǎng)按選擇任何文字，這個(gè)操作會(huì)觸發(fā)一個(gè)文本選擇模式，便于擴(kuò)展選擇或?qū)x定文本進(jìn)行操作。同樣，該選擇模式會(huì)激活情境操作欄。Android 4.x對(duì)選擇滑塊的處理很優(yōu)秀，便于用戶選擇，能夠精確進(jìn)行定位，單滑塊進(jìn)行光標(biāo)定位時(shí)尤為管用。
圖18
7. Widgets(小部件)
這個(gè)應(yīng)該先從Android談起，Widgets一直是Android系統(tǒng)的亮點(diǎn)(個(gè)人不太喜歡，可能是因?yàn)锳ndroid系統(tǒng)的復(fù)雜性)，Android系統(tǒng)導(dǎo)航層級(jí)就分為了主屏幕和應(yīng)用列表，主屏幕是一個(gè)可定制的區(qū)域，用以放置應(yīng)用程序的快捷方式、文件夾、及Widgets，通過(guò)用戶左右劃動(dòng)屏幕切換到不同的主屏幕面板。 應(yīng)用列表內(nèi)區(qū)分為App區(qū)域及Widgets區(qū)域，隨著用戶安裝的應(yīng)用越來(lái)越多，相應(yīng)的Widgets也越來(lái)越多... -_-' 一個(gè)應(yīng)用可以弄多個(gè)不同size的Widgets， 好像又有點(diǎn)扯遠(yuǎn)了!
Android系統(tǒng)的Widgets分為以下四種類型：
1. 信息型Widgets
2. 聚合型Widgets
3. 控制型Widgets
4. 混合型Widgets
圖19
iOS平臺(tái)可能大多數(shù)人覺(jué)得并沒(méi)有Widgets的概念，通知中心內(nèi)的天氣及股票可以算是iOS對(duì)Widgets的試水(個(gè)人感受)，雖然簡(jiǎn)單，但相信應(yīng)該會(huì)在未來(lái)看到iOS對(duì)這一方面更深入的嘗試吧。 ^_^
8. Tab欄
iOS的Tab欄用于切換子任務(wù)、視圖和模式。Tab欄位于屏幕的底部,并且始終可見(jiàn)。Tab 欄上展示圖標(biāo)和文字，當(dāng)用戶選中某個(gè)tab時(shí)，這個(gè)tab處于高亮狀態(tài)。
在 iPhone 上，tab 欄一次只能顯示 5 個(gè)以內(nèi)的頁(yè)簽。如果程序需要更多的tab，tab欄可以展示前四個(gè)，第五個(gè)放置「更多」，用列表的方式呈現(xiàn)其余的項(xiàng)目。
圖20
Android的Tab欄用于探索和切換不同視圖或功能,也可用于瀏覽不同分類的內(nèi)容集合。主要有三種tab類型：
1. 滾動(dòng)tab
2. 固定tab
3. 堆疊tab
圖21
頭又開(kāi)始痛了，不想寫(xiě)了，就到這吧... T_T
兩個(gè)系統(tǒng)還有很多細(xì)節(jié)上的不同，像Android的邊界反饋效果與iOS的回拉效果、Activity Indicator的對(duì)比、dialog上確認(rèn)鍵兩個(gè)系統(tǒng)分別在不同的位置等，以及iOS特有功能上的一些交互特性Passbook、iCloud、iAd等等......
Ps.以上每個(gè)點(diǎn)均能單獨(dú)拿出來(lái)寫(xiě)個(gè)長(zhǎng)文
-- 完 --
聯(lián)系客服
