超全面！Android 應用與iOS 應用之間的設計差異對比

作者：彩云譯設計 2018-08-15 12:43:52

為了創建最佳的原生 APP，就需要你牢記 iOS 和 Android 平臺之間的差異。這些平臺差異不僅在視覺層面有所不同，在結構和流程上也有區別。牢記這些差異，才能給原生應用以最佳的用戶體驗。

編者按：同一個App，為什么iOS 和Android 的交互操作有那么大的區別?本文將用大量原生設計案例，為你一一說明它們為什么應該這樣做，趕緊學起來!

了解并適當結合平臺規范與優勢，才能做到最佳的用戶體驗。

適用于 iOS 和 Android 的原生應用具有特殊的系統內置功能。 Apple 和 Google 的規范建議盡可能使用平臺標準控件：頁面布局，標簽欄，分割線，表格視圖，集合視圖和拆分視圖。用戶熟悉這些控件在每個平臺上的一般操作方式，因此如果使用標準控件，用戶將會非常直觀的知道如何使用。本文將聚焦于 iOS 和 Android 上的交互設計模式之間的區別，闡明 iOS 和 Android 上的應用看起來不同的原因，以及它們為什么應該這樣做。另外，本文還將提供原生應用設計示例，以幫助你更好的理解本文所寫的內容。

一、導航模式的差異

在界面之間切換是移動應用中的常見操作。考慮 iOS 和 Android 原生應用控件規范的差異，對于導航模式的設計很關鍵。 Android 設備底部有一個全局導航欄，使用導航欄中的后退按鈕是返回上一個界面或步驟的簡便方法，它適用于所有 Android 應用。

△ 全局導航欄(Android)

對比 Apple，設計方法卻截然不同。 iOS 沒有全局導航欄，因此我們不能指望像 Android 原生控件那樣能支持全局返回。這個特性就會影響到 iOS 應用的設計，應用中需要設計一個導航欄，并在左上角加上一個返回按鈕。

△ iOS上的返回按鈕

嚴格來說，iOS 也有一個返回的全局操作，直接在界面上右滑即可返回上一級頁面。(譯者注：這個特性我原來還真不知道，現在已經用的很順手了。)

△ 全局返回操作(iOS)

在這種情況下，iOS 和 Android 之間的區別在于，在 iOS 設備上頁面的右滑是返回上一級，而在 Android 上則是切換標簽。

為了保持與其他移動應用的一致性，一定要記住平臺之間的差異。

△ 左滑操作切換標簽(Android)

二、應用內部的導航模式在iOS和Android上是不同的

在 Material Design 設計規范中有一些不同的導航模式。在 Android 應用中被大家熟知的導航模式是抽屜和標簽形式的組合。

抽屜導航其實是一個菜單，通過點擊漢堡圖標，然后從左側或右側滑出。標簽欄一般位于標題欄的下方，使得內容能夠很好地被管理，通過標簽欄，用戶可以對應用的視圖，數據集和功能進行切換。

△ 左側就是抽屜導航;右側是標簽欄

在 Material Design 中還有一個組件叫做底部導航。這個組件對于安卓原生應用來說也非常重要。底部的菜單項很容易點擊和操作。但是安卓規范其實不建議同時使用底部導航和標簽，因為它可能會在導航時引起混亂。

△ 底部導航(Material Design)

在 Apple 的人機交互規范中，沒有類似抽屜菜單的標準導航控件。相反，Apple 則建議將全局導航放在標簽欄中。標簽欄放在應用的底部，讓應用的核心功能能夠快速切換。

通常，底部欄標簽不會超過5個。正如你看到的那樣，這個組件非常像安卓端的底部導航，只是在 iOS 中這種形式的導航更加常用。

△ iOS的兩種常見導航形式，分段控制和底部標簽欄

雖然在兩個操作系統中都有類似的功能(切換標簽和分段控制，底部導航和標簽欄)，但導航形式仍然是 iOS 和 Android 之間的主要區別之一。兩者之間存在一些客觀差異，例如 Android 中有全局導航欄而在 iOS 中卻沒有，以及兩者在視覺上的差異。

Apple 認為，常用導航入口應該盡可能的外置，一些用戶不常用的功能才需要被放進漢堡菜單中。而對比安卓規范，通常會把主要導航也放在漢堡菜單中。

三、改造標準控件需要額外的開發時間，用戶也缺乏使用經驗

如果希望應用中的每個元素在各個平臺上看起來都一樣，那么將需要額外的開發工作來創建最佳的移動應用設計。最麻煩的是涉及到默認控件，比如單選按鈕、復選框、tab切換等等，這些控件需要一個定制的視圖來實現顯示 Android 上類似 iOS 的控件或 iOS 上類似 Android 的控件。

每個平臺的交互方式各有其獨特性。好的設計是尊重不同平臺用戶習慣的設計。在為 iOS 和 Android 設計移動應用時，一定要記住平臺之間的差異，這樣才能設計出滿足用戶期望的應用。

兩個平臺差異的一個例子是日期選擇器。安卓用戶對 iOS 中常見的老虎機形式的日期選擇器并不熟悉。在 Android 中使用這種類型的日期選擇器還需要重新布局，這樣無形中增加了開發的難度和時間，并使界面看起來與系統風格格格不入。

△ 左邊是iOS標準日期選擇器; 右邊是Android標準日期選擇器

△ 左邊是iOS標準選擇器;右邊是Android標準選擇器

四、iOS和Android中的按鈕樣式

在 Android 設計規范中有2種不同樣式的按鈕——扁平的和凸起的。這些按鈕分別用在不同的場景下。在 Android 中，按鈕上的文字一般都是全大寫。在 iOS 原生應用的按鈕中有時也能找到大寫的文字，但更多的情況是出現在標題上。

△ 左邊是標準的Android按鈕;右邊是標準的iOS按鈕

還有一種非常有特點的按鈕類型——在 Android 上叫做浮動按鈕，在 iOS 上叫做活動按鈕。浮動按鈕用來展示應用的主要操作。例如，在郵件 APP 中寫郵件，或者在社交 APP 中發狀態都會用到這個浮動按鈕。而在 iOS 中與之類似的按鈕則叫做活動按鈕，通常會放在底部導航的中間。

△ 左邊是標準的iOS活動按鈕;右側是標準的Android浮動按鈕

五、iOS與Android底部操作視圖的差異

在 Android 中有兩種不同類型的底部操作視圖：模態視圖和常駐視圖。模態視圖又有兩種不同類型：具有不同操作內容的模態列表和用戶點擊「共享」圖標后顯示的應用列表。在 iOS 上也能找到類似的組件，但是在設計風格和布局上差異比較大。

△ 左邊是標準的Android底部菜單視圖;右邊是標準的iOS標準菜單視圖

六、在觸摸范圍和系統網格之間存在的差異

iOS 和 Android 的觸摸范圍略有不同(iOS 最小的觸摸范圍為44px @1x，Android 為48dp/48px @1x)。Android 規范還建議將所有元素以 8dp 作為規范基線來設計。

七、字體差異

iOS 的系統默認字體是 San Francisco 而 Android 系統默認字體則是 Roboto。Noto 是能在 Android 的所有界面中都適用的字體，包括那些不支持 Roboto 字體的語種。正是因為有差異，所以需要密切關注不同平臺的排版和布局規范。

△ 左邊是Android字體; 右邊是iOS字體

八、交互細節差異

給用戶的第一印象通常都是建立在設計層面。

建立用戶的第一印象對產品來說很重要。在 APP 開發設計過程中，我們可以通過做好微交互和動畫來為用戶創建一個有吸引力的體驗。

讓我們明確下兩個平臺的交互和動畫的規則和建議，并查看官方給出的一些標準示例。

焦點和優先級——交互設計的目的是將用戶的注意力集中在應用中對他真正重要的事情上，兩個平臺都不鼓勵濫用動畫，因為過多的動畫容易分散用戶的注意力，也會讓用戶感到焦慮。

一致性和層級結構——請務必記住，交互設計最重要的是通過確定元素之間的層級關系，幫助用戶在應用中找到他們想要的。貼心，流暢，不突兀的頁面跳轉才能保證用戶能輕松操作。對于這一點來說，兩個平臺都對動畫規范做了一些合理的建議。

盡管 Android 的 Material Design(材料設計規范)與 iOS 的 Human Interface(人機交互規范)在使用動畫方面的規范非常相似，但仍有一些明確的差異。用戶會習慣于特定平臺的動畫跳轉方式并認為只有他們習慣的那些才是最自然的。

這就是為什么要特別注意平臺間的交互形式，這些小的細節可以很好的提升用戶體驗，使得在不同平臺上都能給用戶帶來自然的體驗。

九、iOS

iOS 用戶習慣于 iOS 中的微動畫，像平滑過渡，橫豎屏轉向以及模擬物理規律等等。當應用出現無意義的或者違反物理常識的動畫時，用戶就會感到困惑。例如，用戶希望通過下拉來刷新界面，希望通過右滑來返回。iOS 設計規范強烈建議，除非正在創建諸如游戲之類的沉浸式體驗，否則還是盡可能的按照官方給出的動畫規范來設計。

十、Android

依照 Material Design 規范，一個元素在轉換過程中分為傳出，傳入或常駐，不同的元素也會有不同的轉換方式。

動畫能夠引導用戶的注意力。當界面發生變化時，動畫建立了過渡前后的連續性。導航的切換是界面中非常重要的元素。它們通過清晰的結構來幫助用戶找準自己的方向。例如，當一個 UI 元素展開以填充整個屏幕時，展開后的新界面是點開元素的子級，返回可以回到父級。