編者注：繼前篇「iOS 13設(shè)計準(zhǔn)則」后，本文繼續(xù)編譯了Erik D. Kennedy的一篇關(guān)于移動設(shè)備界面設(shè)計差異化的文章。如果你正在同時為iOS和Android設(shè)計APP，你一定會需要該指南。本文將覆蓋作為UI/UX設(shè)計師的你可能會碰到的幾乎所有兩個平臺相關(guān)的差異。如果你正在為一個平臺進行設(shè)計，那么你可以參考本指南將其更好地移植到另外一個平臺上。本指南主要涉及導(dǎo)航、控件、字體排版和其他相關(guān)平臺標(biāo)準(zhǔn)等4大塊內(nèi)容。

iOS和Android的UI設(shè)計的主要區(qū)別

以下是設(shè)計人員在將應(yīng)用程序從iOS轉(zhuǎn)換為Android時需要考慮的最重要的區(qū)別，反之亦然：

在深入探討之前，需要先解決一個重要的問題，這個問題關(guān)系到其他的一切：

是否必須讓Android應(yīng)用和iOS應(yīng)用有所區(qū)別？

簡而言之：不是！

蘋果和谷歌都是非常聰明的公司，各有無數(shù)的用戶群體。但他們也會像其他任何人一樣犯用戶體驗的錯誤，但是總的來說，當(dāng)他們?yōu)橄到y(tǒng)的默認工作方式定義一種設(shè)計語言時，他們不會犯下令人難以置信的明顯錯誤。因此，盡管本文介紹了使用兩種方式（iOS方式和Android方式）進行設(shè)計，但這兩種方式都沒有錯。如果你的用戶能夠安心地瀏覽和使用你正在創(chuàng)建的應(yīng)用，那么沒人會告訴你不要使用iOS上的標(biāo)簽頁還是Android上的模式視圖。

本文本著學(xué)習(xí)“以iOS方式思考”或“以Android方式思考”的精神寫的，如果你的目標(biāo)是為兩個平臺同時開發(fā)一個應(yīng)用程序，并且希望每個應(yīng)用都帶有原生的感覺，那么本指南將對你有巨大幫助。

1. iOS和Android導(dǎo)航對比

1.1 屏幕頂部導(dǎo)航

iOS和Android導(dǎo)航UI的區(qū)別

我們將按順序從屏幕頂部開始。每個平臺針對大多數(shù)屏幕頂部顯示的內(nèi)容都有不同的標(biāo)準(zhǔn)。

在iOS上，左側(cè)動作（可選的）幾乎都是「后退」操作，無論是順序后退到前一屏幕（「第2步」后退到「第1步」），還是按照層級結(jié)構(gòu)后退到父級屏幕（「收件箱」后退到「郵箱」）。還有一種情況就是在此處鏈接和本屏內(nèi)容不相關(guān)的目標(biāo)地址。頁面標(biāo)題始終存在，開始是大號字體，隨著屏幕的向上滾動頁頭會收縮變小?？蛇x的右側(cè)頁面動作可以顯示為單個文本操作按鈕或者多個圖標(biāo)操作按鈕。

在Android上，頁面標(biāo)題是居左對齊的。頁面標(biāo)題的左側(cè)不需要有任何內(nèi)容，但是（a）如果該頁面是頂級頁面并且應(yīng)用程序中有一個「漢堡包」按鈕，它將顯示在該位置；或者（b）如果該頁面緊隨著另外一個頁面，你可以在此位置選擇添加后退按鈕。

參考資源:

• iOS navigation bars
• Material Design top app bar

1.2 主導(dǎo)航

iOS和Android主導(dǎo)航的區(qū)別

應(yīng)用程序中的主要部分或目標(biāo)位置以不同的方式布局。

在iOS上，應(yīng)用中的主導(dǎo)航位于屏幕底部以標(biāo)簽（選項卡）的形式顯示。

1. 總共有2-5個標(biāo)簽
2. 標(biāo)簽文本使用10號字
3. 代表應(yīng)用程序的主要目標(biāo)位置

值得一提的是，許多流行的第三方iOS應(yīng)用也遵循一些其他準(zhǔn)則：

1. 任何代表應(yīng)用程序主要動作的標(biāo)簽（例如，照片類型的應(yīng)用程序中的添加新照片的動作）位于居中的位置
2. 任何個人信息或與設(shè)置相關(guān)的動作出現(xiàn)在最后的位置
3. 搜索出現(xiàn)在第二個位置

另一方面，iOS的內(nèi)置應(yīng)用程序，（1）阻止在標(biāo)簽欄中執(zhí)行操作，（2）沒有個人信息或與設(shè)置相關(guān)的標(biāo)簽，以及（3）搜索出現(xiàn)在最后的位置。

而在Android上，應(yīng)用程序最大的不同就是，同樣的主導(dǎo)航可以出現(xiàn)在界面的很多位置上，通常為（a）漢堡包按鈕，（b）搜索欄，（c）標(biāo)簽欄，或者（d）浮動動作按鈕。本文將在后面的章節(jié)討論所有這4種情況。請注意：Andriod最近確實開始使用類似于iOS的底部導(dǎo)航了，所以你可能根本不會覺得有那么大的區(qū)別。

參考資源：

• iOS tab bars
• Material Design understanding navigation (注意：這個比較理論化)

1.3 輔助導(dǎo)航

iOS和Android輔助導(dǎo)航UI的區(qū)別

在iOS上，底部標(biāo)簽欄中無法容納的導(dǎo)航可以（a）被分流到所有「更多」標(biāo)簽中，或（b）以動作按鈕的形式顯示在其他目標(biāo)位置的左上方或右上方。

在Android上，可通過按下漢堡包按鈕在邊欄中顯示輔助導(dǎo)航。

注意：雖然Apple不是很鼓勵使用漢堡包按鈕（或在其默認應(yīng)用程序中使用該按鈕），但許多第三方iOS應(yīng)用程序確實都使用了。無論你是否愿意使用，這只不過是多了一個選擇而已。最佳做法是避免任何重要的內(nèi)容被隱藏，因為顯而易見的內(nèi)容總能成為贏家。

參考資源:

• Material Design nav drawer

1.4 iOS和Android的后退模式對比

image

在iOS上，你可以根據(jù)上下文環(huán)境通過4種方式執(zhí)行后退操作

什么是模式窗口視圖或全屏視圖？

iOS模式窗口的后退導(dǎo)航UI

模式窗口是單屏任務(wù)，通過在前景中向上滑動而出現(xiàn)，同時允許前一個屏幕在后退到背景處的同時可以從屏幕頂部被窺視到一小部分。你可以通過向下滑動或點擊頂部的「后退」操作來關(guān)閉模式窗口。

全屏視圖是占據(jù)整個屏幕的照片或視頻等媒體。在iOS和Android上向下輕掃即可將其關(guān)閉。

在Android上，后退導(dǎo)航要簡單得多：對于Android 10及更高版本，只需在屏幕的任一側(cè)滑動即可，這將始終執(zhí)行后退導(dǎo)航的操作。對于Android 9，可以使用屏幕左下方無所不在的「后退」按鈕。

2. iOS和Android的控件設(shè)計對比

2.1 主CTA按鈕

iOS和Android主動作按鈕UI的區(qū)別

在iOS上，頁面上的主按鈕通常都會出現(xiàn)在右上角。

但是，在Android上，頁面的主按鈕通常作為浮動操作按鈕（簡稱FAB）顯示在底部右側(cè)。

值得注意的是，每個平臺都會有例外。

iOS和Android輔助動作按鈕的UI區(qū)別

在iOS上，有時重要的頁面操作將出現(xiàn)在底部的工具欄上。蘋果喜歡強調(diào)這與標(biāo)簽欄的作用真的是不一樣的，但是現(xiàn)在來用吧。

同樣，在Android上，有時重要的操作將出現(xiàn)在屏幕頂部。

參考資源：

• iOS buttons
• Material Design floating action button

2.2 iOS和Android搜索對比

在iOS和Android上，搜索是常見但靈活度很高的控件。有時，它是應(yīng)用程序的重點，有時它基本上是邊緣用例，而大多數(shù)時候它介于兩者之間。如你所料，每個平臺在此都具有一定的靈活性。下面將介紹一些常見的范例。

iOS和Android搜索UI的不同

iOS和Android搜索樣式的區(qū)別：

• 取消搜索的話，在iOS上點擊「取消」按鈕，在Android上點擊「←」圖標(biāo)。
• 清除現(xiàn)有搜索關(guān)鍵詞但仍然保留在搜索屏幕的話，在iOS上點擊「x」圖標(biāo)，在Android上也是點擊「x」圖標(biāo)。

當(dāng)搜索是非常重要的功能時，iOS和Android都將立即顯示搜索欄。同時，點擊搜索欄將顯示一個完全獨立的屏幕。

當(dāng)搜索不那么重要或不常用時，你可以通過其他地方訪問它。

iOS和Android搜索訪問的UI區(qū)別

在iOS上，通常將搜索視為主標(biāo)簽欄中的一個標(biāo)簽或頂部導(dǎo)航欄中的一個操作。

在Android上，你將在頂欄的上下文操作中看到它。

參考資源：

• iOS search bars
• Material Design search pattern

2.3 iOS和Android操作菜單對比

iOS和Android底部操作菜單的UI區(qū)別

在iOS上，可以通過任何按鈕或嘗試執(zhí)行任何操作來觸發(fā)操作菜單。它們從底部向上滑起，很容易觸手可及。

但是，在Android上，僅當(dāng)你點擊三點圖標(biāo)（這是表示「更多選項」的Android圖標(biāo)）時，才會顯示底部操作菜單。并且通常只有在有很多可能的操作時才會從底部出現(xiàn)。

這兩個平臺都具有操作菜單的標(biāo)準(zhǔn)。

iOS和Android動作菜單的UI區(qū)別

當(dāng)你按住某個元素時，iOS的一個稱為「上下文菜單」的較新（iOS 13）功能將顯示相關(guān)操作。顯示上下文菜單時，背景將會變模糊。

在Android上，許多菜單將直接顯示在元素上。在較新版本的Android中，菜單將覆蓋三點圖標(biāo)本身。

資源參考：

• iOS action sheets
• iOS context menus
• Android menus
• Android bottom sheets

2.4 選擇控件

在移動設(shè)備上，使用不同的方式處理少數(shù)選項中的選擇與多個選項中的選擇是非常明智的做法。

iOS和Android選擇器菜單的UI的區(qū)別

要在相對較少的選項中進行選擇，請在iOS上使用選擇器控件。選擇器可以顯示為錨定在底部（如上圖所示），也可以與內(nèi)容內(nèi)聯(lián)（例如，請參見后文中提到的「日期選擇器」）。

要在Android上的幾個選項中進行選擇，通常使用下拉菜單（顯示在適當(dāng)位置）或模式對話框（顯示在中間并使應(yīng)用背景變暗）列出選項。

iOS和Android選擇器屏幕UI的區(qū)別

對于較長的選項列表，或者當(dāng)進行多選變得可能時，通常會在iOS和Android上看到專用的「選擇器屏幕」。設(shè)計師在移動設(shè)計中最常犯的錯誤之一就是不使用全屏用于選擇具有多種選項的單個選擇。

資源參考：

• iOS pickers
• Android dropdown menus
• Android dialogs

2.5 iOS和Android日期選擇器的對比

iOS和Android日期選擇控件的UI區(qū)別

在iOS上，日期選擇器具有其他任何選擇器控件的外觀，但帶有用于顯示日期、月份和可選年份的列。

Android擁有自己的自定義日期選擇器控件。你可以選擇包含年份、不包含年份、或者允許用戶選擇是否要包含年份。

參考資源：

• iOS picker
• Android date picker (注意觀察Material Design規(guī)范中的差異)

2.6 iOS和Android的選項卡

iOS和Android選項卡的UI區(qū)別

值得注意的是，iOS沒有外觀與「標(biāo)簽欄」類似的控件。相反，Apple要求你使用分段按鈕在姐妹視圖之間進行切換。

在Android上，使用樣式統(tǒng)一的「扁平化設(shè)計 flat design」樣式選項卡。

參考資源：

• iOS segmented controls
• Material Design tabs

2.7 iOS和Android上的「撤消」模式對比

iOS和Android撤銷控件的UI區(qū)別

在iOS上，警示顯示在屏幕中央，但你還是會看到警示從屏幕底部向上滑動的效果（在iOS術(shù)語中稱為「動作面板」）。破壞性操作（例如刪除某些內(nèi)容）顯示為紅色。

在Android上，一些警示會出現(xiàn)在屏幕中央。但是，對于不需要用戶輸入并在幾秒鐘后就要消失的警示，你可以使用「消息條 snackbars」。消息條非常棒，因為（a）它們?yōu)槟闾峁┝艘环N告訴用戶其操作成功的方法，并且（b）你可以在其上添加一個或兩個操作使它們成為執(zhí)行「撤消」操作的理想場所。

參考資源：

• iOS Undo
• Material Design snackbars

3. iOS和Android字體排版的對比

3.1 默認字體

iOS和Android的默認字體SF和Roboto的區(qū)別

雖然不必以默認的字體設(shè)置iPhone或Android應(yīng)用程序，但最好知道系統(tǒng)字體是什么，以防萬一你想模仿內(nèi)置應(yīng)用程序的樣式。

iOS系統(tǒng)字體稱為SF。這是一種緊湊型字體，專為小尺寸而設(shè)計。你可以在此處下載SF。

Android的系統(tǒng)字體稱為Roboto。雖然它的字體與SF總體上非常相似，但它的字母形狀更高，呼吸空間更大。你可以在此處下載Roboto。

此外，許多Android操作系統(tǒng)都使用稱為Product Sans的Google專有字體設(shè)置，該字體不可用于第三方。

3.2 文本樣式

iOS UI中的字體樣式

Android UI中的字體樣式

參考資源：

• iOS typography guidelines
• Material Design typography guidelines

4. iOS和Android的其他平臺標(biāo)準(zhǔn)

4.1 App圖標(biāo)尺寸和形狀

iOS和Android應(yīng)用圖標(biāo)的設(shè)計區(qū)別

使用以下尺寸設(shè)計iPhone的應(yīng)用圖標(biāo)：

最終，你的圖標(biāo)也可能會用于其他尺寸，但是如果在60px下進行設(shè)計，則需要驗證它在120x120px、180x180px和1024x1024px上看起來是否合適。

使用以下尺寸設(shè)計Andriod的應(yīng)用圖標(biāo)：

因此，如果你（1）設(shè)計一個48x48px的精美矢量圖標(biāo)，（2）放大至400％以確保它看起來仍然不錯，（3）創(chuàng)建一個512x512px的單獨版本，就太完美了！

當(dāng)你第一次查看iPhone或Android需要的圖標(biāo)表格時，可能會令人生畏。但是，只要你知道基本大小，并且能夠以各種較大的倍數(shù)進行檢查和導(dǎo)出時，就一點也不會覺得難了。

參考資源：
iOS app icons guidelines
Material Design app icon guidelines

4.2 iOS和Android點擊目標(biāo)最小尺寸的區(qū)別

請注意，Apple的點「pt」和Android的與設(shè)備無關(guān)的像素「dp」在功能上是等效的。它們只是指一個基準(zhǔn)尺寸（與CSS單位「像素」相同），該尺寸與屏幕是普通清晰度、高清晰度、超高清還是人們正在制作的任何其他屏幕無關(guān)！

在Android的較大點擊目標(biāo)尺寸和較小的每屏像素數(shù)量之間，Android應(yīng)用程序的外觀往往比其iOS更加干凈、通透。

4.3 Material Design和iOS的設(shè)計語言的區(qū)別

在試圖展示兩種設(shè)計語言和理念之間的差異時，本指南對iOS和Material Design語言的相似部分進行了微調(diào)。有關(guān)這些內(nèi)容的更多信息，你需要深入了解每個設(shè)計系統(tǒng)的官方文檔。

• iOS設(shè)計語言，請閱讀Human Interface Guidelines。
• Material Design設(shè)計語言，請閱讀Material Design site。

英文原文：https://learnui.design/blog/ios-vs-android-app-ui-design-complete-guide.html
原文作者：Erik D. Kennedy
編譯作者：微博/公眾號@設(shè)計吐司

以上譯文僅代表原作者觀點。如需轉(zhuǎn)載請遵循CC版權(quán)協(xié)議正確標(biāo)明出處。