本文主要講講iOS和Android兩個(gè)平臺(tái)的交互設(shè)計(jì)模式間的主要區(qū)別，并進(jìn)一步闡述為什么會(huì)有這樣的區(qū)別。

要想設(shè)計(jì)出優(yōu)秀的原生APP，就要牢記iOS和Android間的差異。這些差異除了體現(xiàn)在APP的視覺(jué)方面，還體現(xiàn)在APP的結(jié)構(gòu)以及流程上。因此只有牢記了這些差異，才能為不同平臺(tái)的用戶設(shè)計(jì)出最佳使用體驗(yàn)。

iOS和Android的原生APP都具有各自操作系統(tǒng)所特有功能。Apple和Google的設(shè)計(jì)指南都建議開(kāi)發(fā)者盡可能使用平臺(tái)所提供的標(biāo)準(zhǔn)控件，比如：頁(yè)面控件、標(biāo)簽欄、分段控件、列表、聚合視圖和拆分視圖。

用戶都比較熟悉這些控件在各自平臺(tái)上的運(yùn)行規(guī)律，因此只要你采用了這些標(biāo)準(zhǔn)控件，用戶會(huì)比較輕松地學(xué)會(huì)如何使用你的APP。

所以接下來(lái)我們關(guān)注重點(diǎn)將集中在兩個(gè)平臺(tái)的交互設(shè)計(jì)模式間的主要區(qū)別，進(jìn)而闡明為什么它們看起來(lái)不同的原因（以及它們?yōu)槭裁匆@么做的原因）。另外我們還會(huì)通過(guò)原生APP的設(shè)計(jì)模板和設(shè)計(jì)案例來(lái)幫助讀者們更好地理解我們所描述的內(nèi)容。

差異一：導(dǎo)航模塊

在不同頁(yè)面間進(jìn)行切換是比較常規(guī)的操作。就導(dǎo)航模式而言，了解iOS和Android平臺(tái)間的設(shè)計(jì)指南的差異是很重要的。Android平臺(tái)在設(shè)備底部有一個(gè)通用導(dǎo)航欄，使用導(dǎo)航欄里的返回按鈕，會(huì)返回上一個(gè)頁(yè)面或步驟，它幾乎應(yīng)用于所有的Android平臺(tái)APP上。

Global navigation bar (Android)

相反，Apple的設(shè)計(jì)方法則有著很大的不同。在iOS原生APP的設(shè)計(jì)中，是沒(méi)有全局導(dǎo)航欄的，因此我們就不能通過(guò)導(dǎo)航欄中的返回鍵返回到上一步。這影響了iOS 中APP的設(shè)計(jì)，其內(nèi)部頁(yè)面需要一個(gè)在左上角有返回按鈕的原生導(dǎo)航欄。

Back button?(iOS)

不僅如此，Apple還在APP中加入了向右滑的手勢(shì)，以幫助用戶回到上一步，這個(gè)手勢(shì)也幾乎應(yīng)用于所有的iOS APP中。

Left-to-right swiping gesture?—?go back?(iOS)

在這種情況下，iOS和Android平臺(tái)之間的差異在于：iOS設(shè)備的原生APP可以通過(guò)向右滑來(lái)返回到上一步，而Android的原生APP通過(guò)向右滑則只能進(jìn)行標(biāo)簽的切換。但與iOS不同的是，Android設(shè)備有一個(gè)全局導(dǎo)航欄，其上的返回按鈕可以幫助用戶返回到上一步。

記住不同平臺(tái)之間的差異，進(jìn)而保證自家的APP與其他公司的APP有著一致性是非常重要的。

Left-to-right swiping gesture?—?switch between tabs (Android)

差異二：APP內(nèi)置的導(dǎo)航

在Material Design指南中，有幾種不同的導(dǎo)航類型，比較知名的一個(gè)類型的就是抽屜式導(dǎo)航和標(biāo)簽的結(jié)合。

抽屜式導(dǎo)航是一個(gè)菜單，通過(guò)點(diǎn)擊漢堡菜單圖標(biāo)從頁(yè)面左側(cè)或右側(cè)滑出。標(biāo)簽位于屏幕標(biāo)題的正下方，可以使內(nèi)容信息處于較高級(jí)別，以允許用戶在APP的不同視圖、數(shù)據(jù)集和不同功能之間進(jìn)行切換。

Left?—?drawer navigation menu; right?—?tabs (Material Design)

Material Design還有一個(gè)底部導(dǎo)航的組件，該組件對(duì)于Android端原生APP也很重要。底部導(dǎo)航欄，讓用戶可以通過(guò)點(diǎn)擊實(shí)現(xiàn)在不同的一級(jí)菜單中進(jìn)行瀏覽或切換。Material Design指南不建議同時(shí)使用底部導(dǎo)航和（頂部）標(biāo)簽，因?yàn)樗赡軙?huì)對(duì)用戶造成混淆。

Bottom navigation (Material Design)

在Apple的人機(jī)界面指南中，并沒(méi)有與抽屜導(dǎo)航菜單類似的標(biāo)準(zhǔn)導(dǎo)航控件。相反，Apple的設(shè)計(jì)指南建議將全局導(dǎo)航放在標(biāo)簽欄中，標(biāo)簽欄放在APP的底部，可以在APP中的各個(gè)主要功能模塊之間進(jìn)行快速切換。

通常，標(biāo)簽欄包含的標(biāo)簽不超過(guò)五個(gè)。我們可以看到，該組件類似于Material Design中的底部導(dǎo)航，但在iOS APP中更常用。

Top left?—?iOS segmented control; bottom right?—?iOS tab bar?(HIG)

雖然這兩個(gè)操作系統(tǒng)的導(dǎo)航模塊中有類似的元素（如標(biāo)簽和分段控件、底部導(dǎo)航和標(biāo)簽欄），但是導(dǎo)航仍是兩者的主要區(qū)別之一。兩者之間有著客觀存在的差異，比如：Android中的全局導(dǎo)航欄，而iOS中就沒(méi)有，另外，兩個(gè)系統(tǒng)之間的視覺(jué)風(fēng)格也有所差別。

Apple認(rèn)為主要導(dǎo)航元素應(yīng)該前置，漢堡菜單應(yīng)該僅用于用戶操作中的不常用的存儲(chǔ)功能。而另一方面，Android端APP中的通常做法是將主要導(dǎo)航隱藏在漢堡菜單中。

差異三：標(biāo)準(zhǔn)控件的自定義視圖

如果你希望APP中的每個(gè)元素在不同平臺(tái)上都看起來(lái)一樣，你需要額外的開(kāi)發(fā)工作才能創(chuàng)建出最佳的APP設(shè)計(jì)體驗(yàn)。最復(fù)雜的情況是，在Android平臺(tái)上展示iOS平臺(tái)上的默認(rèn)控件，或在iOS平臺(tái)上展示Android平臺(tái)上默認(rèn)控件（如單選按鈕、復(fù)選框以及切換按鈕等），這需要進(jìn)行自定義控件的開(kāi)發(fā)。

每個(gè)平臺(tái)都有其獨(dú)特的交互規(guī)范，好的設(shè)計(jì)是能夠尊重用戶在不同操作系統(tǒng)中的使用習(xí)慣的。在為iOS和Android進(jìn)行設(shè)計(jì)APP時(shí)，牢記不同平臺(tái)之間的差異是很重要的，只有這樣，才能設(shè)計(jì)出滿足用戶期望的APP。

日期選擇器可以作為兩個(gè)平臺(tái)差異的案例，Android用戶是不熟悉iOS中常見(jiàn)的老虎機(jī)卷軸式的日期選擇器的，在Android APP中使用這種樣式的日期選擇器需要自定義視圖開(kāi)發(fā)，這可能會(huì)變得復(fù)雜，增加了開(kāi)發(fā)的復(fù)雜性和工期，并且會(huì)讓你的APP設(shè)計(jì)看起來(lái)與Android平臺(tái)有所不同。

Left?—?standard iOS controls; right?—?standard Android?controls

Left?—?standard iOS pickers; right?—?standard Android?pickers

差異四：按鈕風(fēng)格

Material Design指南中有兩種類型的按鈕：扁平式按鈕和凸起按鈕。Material Design中按鈕的文案通常是大寫(xiě)的，有時(shí)我們也會(huì)在iOS原生APP中看到大寫(xiě)的按鈕文案。但事實(shí)上，在iOS中，我們通常會(huì)將標(biāo)題大寫(xiě)。

Left?—?standard Material Design buttons; right?—?standard HIG?buttons

還有一種類型的按鈕，在Android中叫做懸浮操作按鈕，而在iOS中叫做行為召喚按鈕。懸浮操作按鈕表示其是APP中的主要操作命令，例如：郵件APP中的寫(xiě)郵件按鈕，或社交網(wǎng)絡(luò)APP中的發(fā)布新帖子按鈕。iOS APP中的主要操作的類似設(shè)計(jì)是行為召喚按鈕，該按鈕一般位于標(biāo)簽欄的中間。

Left?—?standard floating action button in iOS; right?—?standard CTA button in?Android

差異五：底部列表（Android）與動(dòng)作列表&行為視圖（iOS）

Android有兩種類型的底部列表：模態(tài)底部列表和永久底部列表。

模態(tài)底部列表有兩種類型的內(nèi)容：有著不同操作的模態(tài)底部列表和用戶點(diǎn)擊分享按鈕后彈出的APP列表。我們可以在iOS中的動(dòng)作列表和行為視圖中找到類似的內(nèi)容類型，但是這些組件與Android底部列表看起來(lái)有所不同。

Left?—?standard Material Design bottom sheets; right?—?action sheet in iOS?app

差異六：熱區(qū)和網(wǎng)格

iOS和Android對(duì)點(diǎn)擊熱區(qū)的規(guī)定有著細(xì)微的差別（iOS：44px@1X，Android：48dp/48px@1x），Material Design指南還建議所有的元素要與8dp大小的基線方格對(duì)齊。

差異七：字體

iOS的系統(tǒng)字體是San Francisco，而Android的標(biāo)準(zhǔn)字體則是Roboto，Noto則是Chrome和Android對(duì)其不支持語(yǔ)言的替代字體，你需要密切關(guān)注每個(gè)平臺(tái)的字體和布局規(guī)范。

Left?—?Material Design typography; right?—?HIG typography

差異八：微交互

就設(shè)計(jì)而言，第一印象通常就是用戶的最終印象。

這就是為什么APP從一開(kāi)始就要吸引用戶的注意力的原因。在APP設(shè)計(jì)和開(kāi)發(fā)的過(guò)程中，我們可以通過(guò)微交互和動(dòng)效來(lái)為用戶創(chuàng)造一個(gè)迷人的體驗(yàn)。

先定義兩個(gè)平臺(tái)上的交互和動(dòng)效的主要規(guī)則和建議，并通過(guò)具體的案例以加深理解。

專注和重要性。微交互能夠?qū)⒂脩舻淖⒁饬性贏PP中真正重要的內(nèi)容上，因此只有在真正需要時(shí)才會(huì)使用它們。這兩個(gè)平臺(tái)都不鼓勵(lì)使用過(guò)多的動(dòng)效，因?yàn)樗鼈儠?huì)分散用戶的注意力，并可能讓用戶感到緊張。

一致性和層次感。請(qǐng)務(wù)必記住，微交互通過(guò)顯示元素彼此之間的關(guān)系，來(lái)幫助用戶在APP中定位自己的位置。頁(yè)面之間的常見(jiàn)的、流暢的和不顯眼的過(guò)渡，可以使用戶持續(xù)參與到APP中，動(dòng)效暗示用戶如何操作并為之提供有效的建議。

盡管在Material Design指南和人機(jī)界面指南中對(duì)使用微動(dòng)畫(huà)的基本建議非常類似，但而這之間仍有一些明確的差異。用戶已經(jīng)習(xí)慣了在這些特定平臺(tái)之間的切換，并將其視為理所當(dāng)然的事情。

這就是為什么關(guān)注熟知交互顯得特別重要的原因，這些熟知的交互能夠提升用戶體驗(yàn)，并且看起來(lái)很自然。

iOS

iOS用戶習(xí)慣于iOS中的微交互，例如：平滑過(guò)渡、不同APP之間的流暢切換以及基于物理原理的滑動(dòng)。當(dāng)移動(dòng)沒(méi)有意義或似乎違反物理規(guī)則時(shí)，iOS用戶就會(huì)感到困惑。

例如：如果用戶想通過(guò)下滑來(lái)打開(kāi)某個(gè)界面，則他們會(huì)希望能夠通過(guò)滑回去的操作來(lái)關(guān)閉該界面。人機(jī)界面指南強(qiáng)烈建議，除非是開(kāi)發(fā)諸如游戲之類的沉浸式體驗(yàn)，否則你需要將自定義動(dòng)效的實(shí)現(xiàn)效果達(dá)到與iOS內(nèi)置的動(dòng)效相媲美的水平。

Android

根據(jù)Material design設(shè)計(jì)指南的規(guī)定，在轉(zhuǎn)場(chǎng)的過(guò)程中，界面元素分為轉(zhuǎn)出、轉(zhuǎn)入或永久等三個(gè)類型。不同的類型會(huì)影響其自身的轉(zhuǎn)換方式。

動(dòng)效引導(dǎo)用戶的注意力。當(dāng)UI改變外觀時(shí)，動(dòng)效需要在轉(zhuǎn)場(chǎng)前后提供元素的位置和外觀之間的延續(xù)性。導(dǎo)航轉(zhuǎn)場(chǎng)是所有有著界面的交互中最重要的元素，他們通過(guò)展示APP的層次結(jié)構(gòu)來(lái)幫助用戶確定自己的位置。

例如：當(dāng)一個(gè)元素填充到整個(gè)頁(yè)面中時(shí)，填充效果能夠暗示新頁(yè)面是子頁(yè)面，原頁(yè)面是其父級(jí)頁(yè)面。

Example of a parent-to-child transition (Material Design Guidelines)

在父級(jí)頁(yè)面中，其嵌入的子元素會(huì)在點(diǎn)擊時(shí)升起并展開(kāi)。轉(zhuǎn)場(chǎng)讓用戶的注意力集中在子頁(yè)面中，同時(shí)加強(qiáng)了父級(jí)與子級(jí)頁(yè)面之間的關(guān)系。

有著相同父級(jí)的頁(yè)面動(dòng)效采用同樣的動(dòng)效來(lái)加強(qiáng)它們之間的關(guān)系（如相冊(cè)中的照片、個(gè)人資料中的模塊以及流程中的步驟），類似的頁(yè)面從同一側(cè)進(jìn)來(lái)，離開(kāi)時(shí)則是相反的反向。

Tabs are at the same elevation and move together on the horizontal

在APP的頂層架構(gòu)中，用戶目標(biāo)通常被分組為不同的主要任務(wù)（這些任務(wù)可能彼此不相關(guān)），這些頁(yè)面切換可以通過(guò)改變頁(yè)面的不透明度和縮放比例來(lái)實(shí)現(xiàn)。

結(jié)論

當(dāng)然也有例外：一些iOS APP會(huì)遵循Material Design指南中的設(shè)計(jì)規(guī)則（如Gmail），也有一些Android APP會(huì)遵循人機(jī)界面指南中的設(shè)計(jì)規(guī)則（如Instagram）。

Left?—?Gmail on iOS; right?—?Gmail on?Android

Left?—?Instagram on iOS; right?—?Instagram on?Android

但有一點(diǎn)是顯而易見(jiàn)的：使用各操作系統(tǒng)的默認(rèn)控件設(shè)計(jì)的APP要快得多，因此，最好花點(diǎn)時(shí)間在APP設(shè)計(jì)上，而不是單純制作一個(gè)APP模型（該模型是Apple的人機(jī)界面指南和Google的Material Design混合體），而后由于自定義元素而浪費(fèi)大量的開(kāi)發(fā)時(shí)間。

原文作者：SteelKiwi Inc.

原文鏈接：https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca

翻譯：元設(shè)計(jì)

校審：行云

本文由 @元設(shè)計(jì) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議