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

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

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

用戶都比較熟悉這些控件在各自平臺上的運行規(guī)律，因此只要你采用了這些標準控件，用戶會比較輕松地學(xué)會如何使用你的APP。

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

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

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

Global navigation bar (Android)

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

Back button?(iOS)

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

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

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

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

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

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

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

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

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

Material Design還有一個底部導(dǎo)航的組件，該組件對于Android端原生APP也很重要。底部導(dǎo)航欄，讓用戶可以通過點擊實現(xiàn)在不同的一級菜單中進行瀏覽或切換。Material Design指南不建議同時使用底部導(dǎo)航和（頂部）標簽，因為它可能會對用戶造成混淆。

Bottom navigation (Material Design)

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

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

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

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

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

差異三：標準控件的自定義視圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

差異七：字體

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

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

差異八：微交互

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

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

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

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

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

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

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

iOS

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

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

Android

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

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

例如：當一個元素填充到整個頁面中時，填充效果能夠暗示新頁面是子頁面，原頁面是其父級頁面。

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

在父級頁面中，其嵌入的子元素會在點擊時升起并展開。轉(zhuǎn)場讓用戶的注意力集中在子頁面中，同時加強了父級與子級頁面之間的關(guān)系。

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

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

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

結(jié)論

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

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

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

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

原文作者：SteelKiwi Inc.

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

翻譯：元設(shè)計

校審：行云

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

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