乾貨！iOS 和 Android APP 設計差別

瞭解並適當結合平臺規範與優點，才能作到最佳的用戶體驗。在《最新Android &

iOS設計尺寸規範》一文中介紹 APP 設計規範（ds.mockplus.cn），同時本文也是一些補充。

爲了建立最佳的原生APP，就須要你牢記iOS和Android平臺之間的差別。這些平臺差別不只在視覺層面有所不一樣，在結構和流程上也有區別。牢記這些差別，才能給原生

應用以最佳的用戶體驗。

本文將聚焦於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元素展開以填充整個屏幕時，展開後的新界面是點開元素的子級，返回能夠回到父級。

子父級切換的例子 (Android設計規範)

在父級界面上，嵌入的子元素會在點擊時擡起並在適當的位置展開。將過渡的重點放在子界面上，明確子父級之間的關係。

共享相同的父級界面（例如標籤切換時的內容）一致性的移動可以強化他們的關係。

標籤選項卡固定在一個位置不變，內容界面在水平方向上進行移動

在應用的最上層，切換目標一般被分在主要任務(這些任務可能彼此不相關)上。這些界面經過改變不透明度和縮放值來進行適當的轉換。

總結

固然也有例外：一些iOS應用遵循Android設計規範（好比Gmail）而一些Android應用則遵循iOS設計規範（好比Instagram）。

左邊是iOS版的Gmail，右邊是Android版的Gmail

左邊是iOS版的Instagram，右邊是Android的Instagram

但其實顯而易見——使用兩個平臺系統自身的組件設計應用，流程要快不少。所以，最好是花些時間瞭解下兩個平臺不一樣的設計規範，而不是混合iOS和Android的組件模型，而後還得花不少力氣在開發上。

設計規範系統網址：ds.mockplus.cn