要設(shè)計(jì)一個(gè)原生的app，您應(yīng)該牢記iOS平臺(tái)與安卓平臺(tái)之間的差異。這兩個(gè)平臺(tái)不僅在界面設(shè)計(jì)上不一樣，它們的結(jié)構(gòu)和流程也是不一樣的。您應(yīng)該認(rèn)真學(xué)習(xí)它們之間的差異，這樣在設(shè)計(jì)原生app時(shí)，能夠?yàn)橛脩?hù)提供最好的體驗(yàn)。

原生的iOS和android app都具有特定的功能，apple和google的設(shè)計(jì)指南都建議盡可能使用平臺(tái)標(biāo)準(zhǔn)的導(dǎo)航控件：頁(yè)面控件，標(biāo)簽欄，分段控件，表視圖等等。用戶(hù)熟悉這些通用的控件如何在每個(gè)平臺(tái)上運(yùn)行，因此，使用標(biāo)準(zhǔn)控件可以讓用戶(hù)快速上手您的app。

我們將闡述iOS和android上交互設(shè)計(jì)模式有什么差別，界面設(shè)計(jì)看上去有什么不一樣的地方，以及它們?yōu)槭裁匆@樣設(shè)計(jì)。我們將結(jié)合一些案例來(lái)說(shuō)明。

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

在頁(yè)面之間切換是app中的常見(jiàn)操作。在導(dǎo)航模式方面，考慮iOS和Android具有不同的原生app設(shè)計(jì)指南非常重要。Android設(shè)備底部有一個(gè)通用導(dǎo)航欄。使用導(dǎo)航欄中的后退按鈕是返回上一個(gè)頁(yè)面或步驟的簡(jiǎn)便方法，它幾乎適用于所有Android應(yīng)用。

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

而Apple的設(shè)計(jì)方法卻截然不同。沒(méi)有全局導(dǎo)航欄，因此我們無(wú)法使用原生iOS應(yīng)用設(shè)計(jì)中的全局后退按鈕。內(nèi)頁(yè)有一個(gè)原生導(dǎo)航欄，左上角有一個(gè)后退按鈕。

后退按鈕（iOS）

Apple還在應(yīng)用中加入了從左到右的滑動(dòng)手勢(shì)，切換到上一個(gè)頁(yè)面。此手勢(shì)幾乎適用于所有應(yīng)用。

從左向右滑動(dòng)手勢(shì) - 返回（iOS）

iOS和Android之間的區(qū)別在于，在原生應(yīng)用中，iOS應(yīng)用從左向右滑動(dòng)手勢(shì)將返回到上一個(gè)頁(yè)面，Android上的相同手勢(shì)將切換標(biāo)簽。與iOS不同，Android上有一個(gè)底部導(dǎo)航欄，后退按鈕會(huì)返回上一個(gè)頁(yè)面。

記住平臺(tái)之間的這種差異非常重要。

從左向右滑動(dòng)手勢(shì) - 在標(biāo)簽之間切換（Android）

應(yīng)用內(nèi)導(dǎo)航模式在iOS和Android中有所不同

“Material Design設(shè)計(jì)規(guī)范”中有一些不同的導(dǎo)航選項(xiàng)。Android應(yīng)用中使用的一個(gè)眾所周知的導(dǎo)航模式是抽屜式導(dǎo)航和標(biāo)簽組合導(dǎo)航。

抽屜導(dǎo)航是一個(gè)菜單，通過(guò)按下漢堡菜單圖標(biāo)從左側(cè)或右側(cè)滑入。標(biāo)簽選項(xiàng)卡位于屏幕標(biāo)題的正下方，可以使內(nèi)容組織處于較高級(jí)別，允許用戶(hù)在應(yīng)用的視圖，數(shù)據(jù)集和功能方面進(jìn)行切換。

左抽屜導(dǎo)航菜單; 右 - 標(biāo)簽（Material Design）

Material Design中還有一個(gè)名為bottom navigation的組件。此組件對(duì)于Material Design原生應(yīng)用也很重要。底部導(dǎo)航欄使您可以輕松瀏覽并在單擊中切換頂級(jí)視圖。Material Design設(shè)計(jì)規(guī)范不建議同時(shí)使用底部導(dǎo)航和標(biāo)簽，因?yàn)樗赡軙?huì)在導(dǎo)航時(shí)造成混淆。

底部導(dǎo)航（Material Design）

在Apple人機(jī)界面指南中，沒(méi)有與抽屜導(dǎo)航菜單類(lèi)似的標(biāo)準(zhǔn)導(dǎo)航控件。相反，Apple的指南建議將全局導(dǎo)航放在標(biāo)簽欄中。標(biāo)簽欄顯示在app頁(yè)面的底部，可以在應(yīng)用的主要部分之間快速切換。

通常，標(biāo)簽欄的數(shù)量不超過(guò)五個(gè)。我們可以看到，此組件類(lèi)似于Material Design中的底部導(dǎo)航，但在iOS應(yīng)用程序中更常用。

左上角 - iOS分段控制; 右下角 - iOS標(biāo)簽欄（HIG）

雖然在兩個(gè)操作系統(tǒng)中都有類(lèi)似的功能（標(biāo)簽和分段控制，底部導(dǎo)航和標(biāo)簽欄），但導(dǎo)航仍然是iOS和Android之間的主要區(qū)別之一。兩個(gè)都存在客觀差異，例如Android中的全局導(dǎo)航欄及其在iOS中的缺失，以及這兩個(gè)系統(tǒng)的視覺(jué)差異。

Apple認(rèn)為主要導(dǎo)航元素應(yīng)最優(yōu)先，漢堡包菜單應(yīng)僅用于商店功能不是用戶(hù)執(zhí)行的日常任務(wù)的功能。另一方面，Android應(yīng)用的通常的做法是在漢堡菜單中隱藏主導(dǎo)航。

標(biāo)準(zhǔn)控件的自定義視圖需要額外的開(kāi)發(fā)時(shí)間，并且用戶(hù)不熟悉

如果您希望應(yīng)用程序中的每個(gè)元素在不同平臺(tái)上看起來(lái)相同，那么您需要進(jìn)行額外的開(kāi)發(fā)工作才能創(chuàng)建最佳的移動(dòng)應(yīng)用設(shè)計(jì)。最復(fù)雜的用例涉及默認(rèn)控件，如單選按鈕，復(fù)選框，切換等，需要自定義視圖實(shí)現(xiàn)，以在iOS上顯示類(lèi)似iOS的控件或類(lèi)似Android的控件。

每個(gè)平臺(tái)都有其獨(dú)特的互動(dòng)。良好的設(shè)計(jì)是在每個(gè)操作系統(tǒng)中尊重用戶(hù)習(xí)慣的設(shè)計(jì)。在為iOS和Android設(shè)計(jì)移動(dòng)應(yīng)用時(shí)，請(qǐng)牢記平臺(tái)之間的差異非常重要，這樣您就可以設(shè)計(jì)出滿足用戶(hù)期望的應(yīng)用。

在兩個(gè)平臺(tái)上通常設(shè)計(jì)不同的元素的一個(gè)示例是日期選擇器。Android用戶(hù)不熟悉iOS中常見(jiàn)的老虎機(jī)卷軸式日期選擇器。在Android中使用這種樣式的日期選擇器需要自定義視圖，這可能會(huì)變得復(fù)雜，增加了開(kāi)發(fā)的復(fù)雜性和持續(xù)時(shí)間，并使您的應(yīng)用程序設(shè)計(jì)看起來(lái)與Android平臺(tái)不同。

左 - 標(biāo)準(zhǔn)iOS控件; 右- 標(biāo)準(zhǔn)的Android控件

左 - 標(biāo)準(zhǔn)iOS選擇; 右 - 標(biāo)準(zhǔn)的Android采摘者

iOS和Android中的按鈕樣式

“Material Design設(shè)計(jì)規(guī)范指南”中有兩種類(lèi)型的按鈕 - 扁平和帶陰影。這些按鈕用于不同的情況。Material Design中按鈕上的文本通常都是大寫(xiě)的。有時(shí)我們?cè)谠鷌OS應(yīng)用程中也會(huì)找到大寫(xiě)文本的按鈕，但通常只是標(biāo)題是大寫(xiě)的。中文的不受此規(guī)范的影響。

左 -Material Design按鈕; 右- 標(biāo)準(zhǔn)的HIG按鈕

還有一種類(lèi)型的按鈕 - Android上的浮動(dòng)操作按鈕和iOS上的CTA按鈕。浮動(dòng)操作按鈕表示應(yīng)用程序中的主要操作。例如，郵件應(yīng)用中的撰寫(xiě)按鈕或社交網(wǎng)絡(luò)應(yīng)用中的新帖子按鈕可以是浮動(dòng)操作按鈕。iOS應(yīng)用中主要操作的類(lèi)似設(shè)計(jì)是CTA按鈕，該按鈕位于標(biāo)簽欄的中心。

左邊 - iOS中的標(biāo)準(zhǔn)CTA按鈕；右邊 - Android中的標(biāo)準(zhǔn)浮動(dòng)操作按鈕;?

Android中的原生底部動(dòng)作條與iOS中的底部動(dòng)作條和活動(dòng)視圖之間的差異

Android中有兩種類(lèi)型的底部動(dòng)作條：模態(tài)底部動(dòng)作條和持久底部動(dòng)作條。模態(tài)底部動(dòng)作條有兩種類(lèi)型的內(nèi)容：具有不同操作的模態(tài)底部動(dòng)作條和在用戶(hù)點(diǎn)擊“共享”圖標(biāo)后顯示的應(yīng)用列表。我們可以在原生iOS底部動(dòng)作條和活動(dòng)視圖中找到相同類(lèi)型的內(nèi)容。但這些組件看起來(lái)與Android底部動(dòng)作條不同。

左 -Material Design底部動(dòng)作條; 右 - iOS應(yīng)用中的底部動(dòng)作條

觸摸目標(biāo)和網(wǎng)格的差異

iOS和Android的觸摸目標(biāo)指南略有不同（iOS為44px @ 1x，Android為48dp / 48px @ 1x）。Material Design建議將所有元素與8dp方形基線網(wǎng)格對(duì)齊。

排版差異

San Francisco是iOS中的系統(tǒng)字體。Roboto是Android中的標(biāo)準(zhǔn)字體。Noto是Chrome和Android不支持的所有語(yǔ)言的標(biāo)準(zhǔn)字體。您需要密切關(guān)注每個(gè)平臺(tái)的排版和布局規(guī)范。

左 -Material Design排版; 右 - HIG排版

微互動(dòng)

在設(shè)計(jì)方面，第一印象通常是用戶(hù)的最后印象。

這就是為什么從一開(kāi)始就吸引用戶(hù)的注意力如此重要。在應(yīng)用設(shè)計(jì)和開(kāi)發(fā)過(guò)程中，我們可以通過(guò)微交互和動(dòng)畫(huà)為用戶(hù)創(chuàng)建一個(gè)非常迷人的體驗(yàn)。

讓我們定義關(guān)于兩個(gè)平臺(tái)的交互和動(dòng)作的主要規(guī)則和建議，并查看詳細(xì)示例。

重點(diǎn)和重要性 - 交互將用戶(hù)的注意力集中在應(yīng)用中真正重要的內(nèi)容上，因此只有在真正需要時(shí)才需要使用它們。兩個(gè)平臺(tái)都不鼓勵(lì)過(guò)多的動(dòng)畫(huà)，因?yàn)樗鼈儠?huì)分散用戶(hù)的注意力并使用戶(hù)感到緊張。

一致性和層次結(jié)構(gòu) - 請(qǐng)務(wù)必記住，交互通過(guò)顯示元素彼此之間的關(guān)系來(lái)幫助用戶(hù)在應(yīng)用中定位自己。從一個(gè)頁(yè)面到另一個(gè)頁(yè)面，流暢和不顯眼的過(guò)渡讓用戶(hù)覺(jué)得很自然。

盡管在“Material Design設(shè)計(jì)規(guī)范”和“Apple人機(jī)界面指南”中使用微動(dòng)畫(huà)的基本建議非常相似，但仍有一些明確定義的差異。用戶(hù)習(xí)慣于這些特定于平臺(tái)的過(guò)渡，并將其視為自然而然的差異。

這就是為什么重要的是要特別注意熟悉的交互，這將改善用戶(hù)體驗(yàn)并在每個(gè)平臺(tái)上看起來(lái)自然。

iOS版

iOS用戶(hù)習(xí)慣于iOS中使用的微妙動(dòng)畫(huà)，例如平滑過(guò)渡，流暢變化和基于物理的滾動(dòng)。當(dāng)移動(dòng)沒(méi)有意義或似乎違反物理定律時(shí)，iOS用戶(hù)會(huì)感到迷失。例如，如果用戶(hù)通過(guò)從頁(yè)面頂部向下滑動(dòng)來(lái)顯示視圖，則他們希望能夠通過(guò)向后滑動(dòng)來(lái)解除視圖。HIG強(qiáng)烈建議，除非您正在創(chuàng)建諸如游戲之類(lèi)的沉浸式體驗(yàn)，否則您可以使自定義過(guò)渡與內(nèi)置動(dòng)畫(huà)相媲美。

Android

根據(jù)“Material Design指南”，在轉(zhuǎn)換期間，轉(zhuǎn)換的界面元素分為傳出，傳入或永久。項(xiàng)目所屬的類(lèi)別會(huì)影響其轉(zhuǎn)換方式。

動(dòng)畫(huà)引導(dǎo)用戶(hù)注意。當(dāng)UI改變外觀時(shí)，動(dòng)作在轉(zhuǎn)換之前和之后提供元素的放置和外觀之間的連續(xù)性。導(dǎo)航轉(zhuǎn)換是與界面進(jìn)行整體交互的重要元素。它們通過(guò)表達(dá)應(yīng)用程序的層次結(jié)構(gòu)幫助用戶(hù)定位自己。例如，當(dāng)元素?cái)U(kuò)展以填充整個(gè)屏幕時(shí)，擴(kuò)展行為表示新頁(yè)面是子元素。它展開(kāi)的頁(yè)面是它的父元素。

導(dǎo)航轉(zhuǎn)換是與界面進(jìn)行整體交互的重要元素。它們通過(guò)表達(dá)應(yīng)用的層次結(jié)構(gòu)幫助用戶(hù)定位自己。例如，當(dāng)元素?cái)U(kuò)展以填充整個(gè)屏幕時(shí)，擴(kuò)展行為表示新屏幕是子元素。它展開(kāi)的屏幕是它的父元素。

父級(jí)對(duì)子級(jí)過(guò)渡的例子（Material Design指南）

在父屏幕上，嵌入的子元素在觸摸時(shí)會(huì)抬??起并在適當(dāng)?shù)奈恢谜归_(kāi)。

過(guò)渡將重點(diǎn)放在子頁(yè)面上，同時(shí)加強(qiáng)了父級(jí)與子級(jí)之間的關(guān)系。

共享相同父級(jí)的頁(yè)面（例如相冊(cè)中的照片，個(gè)人資料中的部分或流程中的步驟）一致地移動(dòng)以加強(qiáng)他們的關(guān)系。對(duì)等屏幕從一側(cè)滑入，同時(shí)其兄弟在相反方向上離開(kāi)頁(yè)面。

標(biāo)簽位于同一高度，并在水平方向上一起移動(dòng)

在應(yīng)用程序的頂層，目標(biāo)通常被分組為主要任務(wù)（可能彼此不相關(guān)）。這些屏幕通過(guò)更改不透明度和比例等值來(lái)轉(zhuǎn)換。

結(jié)論

當(dāng)然也有例外：一些iOS應(yīng)用程序遵循Material Design Guidelines（如Gmail），一些Android應(yīng)用程序遵循人機(jī)界面指南（如Instagram）。

左 - iOS上的Gmail; 右 - Android上的Gmail

左 - iOS上的Instagram; 右 - 在Android上的Instagram

但有一點(diǎn)是顯而易見(jiàn)的 - 使用原生組件為兩個(gè)操作系統(tǒng)設(shè)計(jì)移動(dòng)應(yīng)用要快得多。因此，最好花時(shí)間在設(shè)計(jì)上而不是設(shè)計(jì)Apple的人機(jī)界面指南和Google的Material Design組件混合的應(yīng)用，然后設(shè)計(jì)自定義元素而花費(fèi)大量時(shí)間進(jìn)行開(kāi)發(fā)。