了解并適當(dāng)結(jié)合平臺(tái)規(guī)范與優(yōu)勢(shì)，才能做到最佳的用戶體驗(yàn)。在《最新Android &?

iOS設(shè)計(jì)尺寸規(guī)范》一文中介紹APP 設(shè)計(jì)規(guī)范（https://ds.mockplus.cn），同時(shí)本文也是一些補(bǔ)充。

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

應(yīng)用以最佳的用戶體驗(yàn)。

本文將聚焦于iOS和Android上的交互設(shè)計(jì)模式之間的區(qū)別，闡明iOS和Android上的應(yīng)用看起來(lái)不同的原因，以及它們?yōu)槭裁磻?yīng)該這樣做。

另外，本文還將提供原生應(yīng)用設(shè)計(jì)示例，以幫助你更好的理解本文所寫的內(nèi)容。

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

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

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

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

iOS上的返回按鈕

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

全局返回操作 (iOS)

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

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

左滑操作切換標(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)簽欄，用戶可以對(duì)應(yīng)用的視圖，數(shù)據(jù)集和功能進(jìn)行切換。

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

在Material Design中還有一個(gè)組件叫做底部導(dǎo)航。這個(gè)組件對(duì)于安卓原生應(yīng)用來(lái)說(shuō)也非常重要。底部的菜單項(xiàng)很容易點(diǎn)擊和操作。但是安卓規(guī)范其實(shí)不建議同時(shí)使用底部導(dǎo)航和標(biāo)簽，因?yàn)樗赡軙?huì)在導(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)簽不會(huì)超過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)漢堡菜單中。而對(duì)比安卓規(guī)范，通常會(huì)把主要導(dǎo)航也放在漢堡菜單中。

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

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

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

兩個(gè)平臺(tái)差異的一個(gè)例子是日期選擇器。安卓用戶對(duì)iOS中常見的老虎機(jī)形式的日期選擇器并不熟悉。在Android中使用這種類型的日期選擇器還需要重新布局，這樣無(wú)形中增加了開發(fā)的難度和時(shí)間，并使界面看起來(lái)與系統(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種不同樣式的按鈕——扁平的和凸起的。這些按鈕分別用在不同的場(chǎng)景下。在Android中，按鈕上的文字一般都是全大寫。在iOS原生應(yīng)用的按鈕中有時(shí)也能找到大寫的文字，但更多的情況是出現(xiàn)在標(biāo)題上。

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

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

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

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ī)范基線來(lái)設(shè)計(jì)。

字體差異

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

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

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

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

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

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

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

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

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

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

IOS

iOS用戶習(xí)慣于iOS中的微動(dòng)畫，像平滑過渡，橫豎屏轉(zhuǎn)向以及模擬物理規(guī)律等等。當(dāng)應(yīng)用出現(xiàn)無(wú)意義的或者違反物理常識(shí)的動(dòng)畫時(shí)，用戶就會(huì)感到困惑。

例如，用戶希望通過下拉來(lái)刷新界面，希望通過右滑來(lái)返回。iOS設(shè)計(jì)規(guī)范強(qiáng)烈建議，除非正在創(chuàng)建諸如游戲之類的沉浸式體驗(yàn)，否則還是盡可能的按照官方給出的動(dòng)畫規(guī)范來(lái)設(shè)計(jì)。

Android

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

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

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

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

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

need-to-insert-img

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

在應(yīng)用的最上層，切換目標(biāo)通常被分在主要任務(wù)(這些任務(wù)可能彼此不相關(guān))上。這些界面通過改變不透明度和縮放值來(lái)進(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ái)系統(tǒng)自身的組件設(shè)計(jì)應(yīng)用，流程要快很多。因此，最好是花些時(shí)間了解下兩個(gè)平臺(tái)不同的設(shè)計(jì)規(guī)范，而不是混合iOS和Android的組件模型，然后還得花很多力氣在開發(fā)上。

設(shè)計(jì)規(guī)范系統(tǒng)網(wǎng)址：https://ds.mockplus.cn