編者按：同一個(gè)App，為什么iOS 和Android 的交互操作有那么大的區(qū)別?本文將用大量原生設(shè)計(jì)案例，為你一一說明它們?yōu)槭裁磻?yīng)該這樣做，趕緊學(xué)起來!

了解并適當(dāng)結(jié)合平臺規(guī)范與優(yōu)勢，才能做到最佳的用戶體驗(yàn)。

為了創(chuàng)建最佳的原生 APP，就需要你牢記 iOS 和 Android 平臺之間的差異。這些平臺差異不僅在視覺層面有所不同，在結(jié)構(gòu)和流程上也有區(qū)別。牢記這些差異，才能給原生應(yīng)用以最佳的用戶體驗(yàn)。

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

一、導(dǎo)航模式的差異

在界面之間切換是移動應(yīng)用中的常見操作?？紤] iOS 和 Android 原生應(yīng)用控件規(guī)范的差異，對于導(dǎo)航模式的設(shè)計(jì)很關(guān)鍵。 Android 設(shè)備底部有一個(gè)全局導(dǎo)航欄， 使用導(dǎo)航欄中的后退按鈕是返回上一個(gè)界面或步驟的簡便方法，它適用于所有 Android 應(yīng)用。

△ 全局導(dǎo)航欄(Android)

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

△ iOS上的返回按鈕

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

△ 全局返回操作(iOS)

在這種情況下，iOS 和 Android 之間的區(qū)別在于，在 iOS 設(shè)備上頁面的右滑是返回上一級，而在 Android 上則是切換標(biāo)簽。

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

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

二、應(yīng)用內(nèi)部的導(dǎo)航模式在iOS和Android上是不同的

在 Material Design 設(shè)計(jì)規(guī)范中有一些不同的導(dǎo)航模式。在 Android 應(yīng)用中被大家熟知的導(dǎo)航模式是抽屜和標(biāo)簽形式的組合。

抽屜導(dǎo)航其實(shí)是一個(gè)菜單，通過點(diǎn)擊漢堡圖標(biāo)，然后從左側(cè)或右側(cè)滑出。標(biāo)簽欄一般位于標(biāo)題欄的下方，使得內(nèi)容能夠很好地被管理，通過標(biāo)簽欄，用戶可以對應(yīng)用的視圖，數(shù)據(jù)集和功能進(jìn)行切換。

△ 左側(cè)就是抽屜導(dǎo)航;右側(cè)是標(biāo)簽欄

在 Material Design 中還有一個(gè)組件叫做底部導(dǎo)航。這個(gè)組件對于安卓原生應(yīng)用來說也非常重要。底部的菜單項(xiàng)很容易點(diǎn)擊和操作。但是安卓規(guī)范其實(shí)不建議同時(shí)使用底部導(dǎo)航和標(biāo)簽，因?yàn)樗赡軙趯?dǎo)航時(shí)引起混亂。

△ 底部導(dǎo)航(Material Design)

在 Apple 的人機(jī)交互規(guī)范中，沒有類似抽屜菜單的標(biāo)準(zhǔn)導(dǎo)航控件。相反，Apple 則建議將全局導(dǎo)航放在標(biāo)簽欄中。標(biāo)簽欄放在應(yīng)用的底部，讓應(yīng)用的核心功能能夠快速切換。

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

△ iOS的兩種常見導(dǎo)航形式，分段控制和底部標(biāo)簽欄

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

Apple 認(rèn)為，常用導(dǎo)航入口應(yīng)該盡可能的外置，一些用戶不常用的功能才需要被放進(jìn)漢堡菜單中。而對比安卓規(guī)范，通常會把主要導(dǎo)航也放在漢堡菜單中。

三、改造標(biāo)準(zhǔn)控件需要額外的開發(fā)時(shí)間，用戶也缺乏使用經(jīng)驗(yàn)

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

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

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

△ 左邊是iOS標(biāo)準(zhǔn)日期選擇器; 右邊是Android標(biāo)準(zhǔn)日期選擇器

△ 左邊是iOS標(biāo)準(zhǔn)選擇器;右邊是Android標(biāo)準(zhǔn)選擇器

四、iOS和Android中的按鈕樣式

在 Android 設(shè)計(jì)規(guī)范中有2種不同樣式的按鈕——扁平的和凸起的。這些按鈕分別用在不同的場景下。在 Android 中，按鈕上的文字一般都是全大寫。在 iOS 原生應(yīng)用的按鈕中有時(shí)也能找到大寫的文字，但更多的情況是出現(xiàn)在標(biāo)題上。

△ 左邊是標(biāo)準(zhǔn)的Android按鈕;右邊是標(biāo)準(zhǔn)的iOS按鈕

還有一種非常有特點(diǎn)的按鈕類型——在 Android 上叫做浮動按鈕，在 iOS 上叫做活動按鈕。浮動按鈕用來展示應(yīng)用的主要操作。例如，在郵件 APP 中寫郵件，或者在社交 APP 中發(fā)狀態(tài)都會用到這個(gè)浮動按鈕。而在 iOS 中與之類似的按鈕則叫做活動按鈕，通常會放在底部導(dǎo)航的中間。

△ 左邊是標(biāo)準(zhǔn)的iOS活動按鈕;右側(cè)是標(biāo)準(zhǔn)的Android浮動按鈕

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

在 Android 中有兩種不同類型的底部操作視圖：模態(tài)視圖和常駐視圖。模態(tài)視圖又有兩種不同類型：具有不同操作內(nèi)容的模態(tài)列表和用戶點(diǎn)擊「共享」圖標(biāo)后顯示的應(yīng)用列表。在 iOS 上也能找到類似的組件，但是在設(shè)計(jì)風(fēng)格和布局上差異比較大。

△ 左邊是標(biāo)準(zhǔn)的Android底部菜單視圖;右邊是標(biāo)準(zhǔn)的iOS標(biāo)準(zhǔn)菜單視圖

六、在觸摸范圍和系統(tǒng)網(wǎng)格之間存在的差異

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

七、字體差異

iOS 的系統(tǒng)默認(rèn)字體是 San Francisco 而 Android 系統(tǒng)默認(rèn)字體則是 Roboto。Noto 是能在 Android 的所有界面中都適用的字體，包括那些不支持 Roboto 字體的語種。正是因?yàn)橛胁町?，所以需要密切關(guān)注不同平臺的排版和布局規(guī)范。

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

八、交互細(xì)節(jié)差異

給用戶的第一印象通常都是建立在設(shè)計(jì)層面。

建立用戶的第一印象對產(chǎn)品來說很重要。在 APP 開發(fā)設(shè)計(jì)過程中，我們可以通過做好微交互和動畫來為用戶創(chuàng)建一個(gè)有吸引力的體驗(yàn)。

讓我們明確下兩個(gè)平臺的交互和動畫的規(guī)則和建議，并查看官方給出的一些標(biāo)準(zhǔn)示例。

焦點(diǎn)和優(yōu)先級——交互設(shè)計(jì)的目的是將用戶的注意力集中在應(yīng)用中對他真正重要的事情上， 兩個(gè)平臺都不鼓勵(lì)濫用動畫，因?yàn)檫^多的動畫容易分散用戶的注意力，也會讓用戶感到焦慮。

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

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

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

九、iOS

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

十、Android

依照 Material Design 規(guī)范，一個(gè)元素在轉(zhuǎn)換過程中分為傳出，傳入或常駐，不同的元素也會有不同的轉(zhuǎn)換方式。

動畫能夠引導(dǎo)用戶的注意力。當(dāng)界面發(fā)生變化時(shí)，動畫建立了過渡前后的連續(xù)性。導(dǎo)航的切換是界面中非常重要的元素。它們通過清晰的結(jié)構(gòu)來幫助用戶找準(zhǔn)自己的方向。例如，當(dāng)一個(gè) UI 元素展開以填充整個(gè)屏幕時(shí)，展開后的新界面是點(diǎn)開元素的子級，返回可以回到父級。

△ 子父級切換的例子(Android設(shè)計(jì)規(guī)范)

在父級界面上，嵌入的子元素會在點(diǎn)擊時(shí)抬起并在適當(dāng)?shù)奈恢谜归_。將過渡的重點(diǎn)放在子界面上，明確子父級之間的關(guān)系。

共享相同的父級界面(例如標(biāo)簽切換時(shí)的內(nèi)容)一致性的移動能夠強(qiáng)化他們的關(guān)系。

標(biāo)簽選項(xiàng)卡固定在一個(gè)位置不變，內(nèi)容界面在水平方向上進(jìn)行移動。

在應(yīng)用的最上層，切換目標(biāo)通常被分在主要任務(wù)(這些任務(wù)可能彼此不相關(guān))上。這些界面通過改變不透明度和縮放值來進(jìn)行適當(dāng)?shù)霓D(zhuǎn)換。

總結(jié)

當(dāng)然也有例外：一些 iOS 應(yīng)用遵循 Android 設(shè)計(jì)規(guī)范(比如 Gmail)而一些 Android 應(yīng)用則遵循 iOS 設(shè)計(jì)規(guī)范(比如 Instagram)。

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

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

但其實(shí)顯而易見——使用兩個(gè)平臺系統(tǒng)自身的組件設(shè)計(jì)應(yīng)用，流程要快很多。因此，最好是花些時(shí)間了解下兩個(gè)平臺不同的設(shè)計(jì)規(guī)范，而不是混合 iOS 和 Android 的組件模型，然后還得花很多力氣在開發(fā)上。