要創建最佳的原生應用程序設計，您應該牢記iOS和Android平臺之間的差異。這些平臺不僅在原生應用程序的外觀方面有所不同; 它們在結構和交互方面也有所不同。您需要牢記這些差異，以通過原生應用程序設計給用戶提供最佳用戶體驗。

iOS和Android的原生移動應用程序具有各自操作系統平臺特殊的功能。Apple和Google的設計指南建議盡可能使用平臺標準導航控件：頁面控件，選項卡，分類控件，表視圖，組合視圖和拆分視圖。用戶熟悉這些控件是如何在每個平臺上運行的，因此如果您使用標準控件，您的用戶將直觀地知道如何操作您的應用程序。我們專注于iOS和Android上的交互設計模式之間的主要區別，以闡明iOS和Android上的應用程序看起來不同的原因 - 以及它們為什么應該這樣做。我們還提供原生應用程序設計模板和原生移動應用程序示例，以幫助您可視化我們正在談論的內容。

導航模式的差異

在屏幕之間跳轉是移動應用程序中的常見操作。在設計導航模式方面，考慮到iOS和Android不同的應用程序設計指南是非常重要的。Android設備底部有一個通用導航欄。使用導航欄中的后退按鈕非常簡便的返回上一個屏幕或步驟，它幾乎適用于所有Android應用程序。

全局導航條(Android)

另一方面，Apple的設計方法卻截然不同。沒有全局導航欄，因此我們無法使用原生iOS應用程序設計中的全局后退按鈕返回。這會影響iOS移動應用程序的設計。屏幕內部應該有一個左上角是一個返回按鈕的原生導航欄。

返回按鈕(iOS)

Apple還在應用程序中引入從左到右的滑動手勢，以跳轉到上一個屏幕。此手勢幾乎適用于所有應用。

從左向右滑動手勢 - 返回（iOS）

在這種情況下，iOS和Android之間的區別在于，在iOS設備上的原生應用程序中，從左向右滑動手勢將返回到上一個屏幕。相同手勢在Android設備上通常用于切換選項卡。但與iOS不同的是，Android設備上有一個底部導航欄，后面的按鈕會返回上一個屏幕。

記住平臺之間的這種差異以保持與其他移動應用程序的一致性始終很重要。

從左向右滑動手勢 - 在標簽之間切換（Android）iOS和Android中應用內導航模式有所不同

“Material Design Guidelines” 中有一些不同的導航選項。Android應用程序中使用的一個眾所周知的導航模式是抽屜導航和選項卡的組合。

抽屜導航是一個通過點擊漢堡菜單圖標從左側或右側滑入的菜單。選項卡位于屏幕標題的正下方，內容組織處于較高級別，允許用戶在應用中切換不同的視圖，數據集和功能。

左—抽屜導航菜單， 右—選項卡

Material Design中還有一個名為bottom navigation的組件。此組件對于Material Design應用程序也很重要。底部導航欄使您可以輕松瀏覽和切換頂級視圖。Material Design Guidelines不建議同時使用底部導航和選項卡，因為它可能會在導航時造成混淆。

底部導航（材料設計）

在Apple的UI指南中，沒有與抽屜導航菜單類似的標準導航控件。相反，Apple的指南建議將全局導航放在選項卡中。選項卡顯示在應用程序屏幕的底部，可以在應用程序的主要類別之間快速切換。

通常，選項卡包含的類別不超過五個。我們可以看到，此組件類似于Material Design中的底部導航，但更常用于iOS應用程序中。

左上角 - iOS分段控制; 右下角 - iOS標簽欄（HIG）

雖然在兩個操作系統中都有類似的功能（選項卡和類別控制，底部導航和標簽欄），但導航仍然是iOS和Android之間的主要區別之一。存在兩個客觀差異，例如Android中的全局導航欄及其在iOS中的缺乏，以及這兩個系統的視覺差異。

Apple認為主要導航元素應位于前臺，漢堡包菜單應僅用于存儲不是用戶執行的日常任務的功能。不同的是，Android應用程序通常的做法是在漢堡菜單中隱藏主導航。

自定義標準控件需要額外的開發時間，并且對于用戶來說是不熟悉的

如果您希望應用程序中的每個元素在不同平臺上看起來相同，那么您需要進行額外的開發工作才能創建最佳的移動應用程序設計。最復雜的用例涉及默認控件，如單選按鈕，復選框，切換按鈕等，并且需要自定義視圖實現，以在iOS上顯示類似iOS的控件或類似Android的控件。

每個平臺都有其獨特的交互。在每個操作系統中尊重用戶習慣的設計是良好的設計。在為iOS和Android設計移動應用程序時，牢記平臺之間的差異非常重要，這樣您就可以設計出滿足用戶期望的應用程序。

在兩個平臺上的一個不同的元素的設計示例是日期選擇器。Android用戶不熟悉iOS中常見的老虎機卷軸式日期選擇器。在Android中使用這種樣式的日期選擇器需要自定義視圖，這可能會變得復雜，增加了開發的復雜性和持續時間，并使您的應用程序設計看起來與Android平臺不同。

iOS和Android中的按鈕樣式

“Material Design Guidelines”中有兩種類型的按鈕 - 平面和凸起。這些按鈕用于不同的情況。Material Design中按鈕上的文本通常都是大寫的。有時我們在本機iOS應用程序中也會找到大寫按鈕文本，但通常我們找到的是標題大小寫。

左 - 標準材料設計按鈕; 右 - 標準的HIG按鈕

還有一種類型的按鈕 - Android上的浮動操作按鈕和iOS上的呼叫操作按鈕。浮動操作按鈕表示應用程序中的主要操作。例如，郵件應用程序中的撰寫按鈕或社交網絡應用程序中的新帖子按鈕可以是浮動操作按鈕。iOS應用程序中主要操作的類似設計是行為按鈕，該按鈕位于標簽欄的中心。

左側 - iOS中的標準CTA按鈕; 右 - Android中的標準浮動操作按鈕

Android中的原生底部列表與iOS中的活動視圖操作列表之間的差異

Android中有兩種類型的底部列表：list列表和表格列表。list底部列表有兩種類型的內容：具有不同情景操作的列表和在用戶點擊“共享”圖標后顯示的應用程序列表。我們可以在iOS活動視圖操作列表中找到相同類型的內容。但這些組件看起來與Android底部列表不同。

左 - 標準材料設計底部列表; 右 - iOS應用中的操作表分辨率的差異

iOS和Android的分辨率指南略有不同（iOS為44px @ 1x，Android為48dp / 48px @ 1x）。Material Design Guidelines還建議將所有元素與8dp方形基線網格對齊。

排版差異

San Francisco是iOS中的系統字體。Roboto是Android中的標準字體。Noto是Chrome和Android不支持的所有語言的標準字體。您需要密切關注每個平臺的排版和布局規范。

左 - 材料設計排版; 右 - HIG排版Microinteractions

在設計方面，第一印象通常是用戶的最后印象。

這就是為什么從一開始就吸引用戶的注意力如此重要。在應用程序設計和開發過程中，我們可以通過微交互和動畫為用戶創建一個非常著迷的體驗。

讓我們明確關于兩個平臺的交互和動作的主要規則和建議，并查看詳細示例。

重點和重要性 - 交互將用戶的注意力集中在應用程序中真正重要的內容上，因此只有在真正需要時才需要使用它們。兩個平臺都不鼓勵過多的動畫，因為它們會分散用戶的注意力并使用戶感到緊張。

一致性和層次結構 - 請務必記住，交互通過顯示元素彼此之間的關系來幫助用戶在應用中定位自己。從一個屏幕到另一個屏幕的自然，流暢的過渡使用戶保持沉浸其中。動作向導為如何執行操作提供了有用的建議。

盡管使用微動畫的基本建議在“Material Design Guidelines”和“人機交互指南”中非常相似，但仍有一些明確定義的差異。用戶習慣于這些特定于平臺的過渡，并覺得十分自然。

這就是為什么要特別注意熟悉的交互是十分重要的，這將改善用戶體驗并在每個平臺上看起來自然。

iOS

iOS用戶習慣于iOS中使用的微妙動畫，例如平滑過渡，設備方向的流暢變化和基于物理的移動。當移動沒有意義或似乎違反物理定律時，iOS用戶會感到迷失方向。例如，如果用戶通過從屏幕頂部向下滑動來顯示視圖，則他們希望能夠通過向后滑動來退出視圖。HIG強烈建議，除非您正在創建諸如游戲之類的沉浸式體驗，否則您可以使自定義過渡動畫與內置動畫相媲美。

Android

根據“Material Design Guidelines”，在轉換期間，轉換的界面元素分為傳出，傳入或固定。項目所屬的類別會影響其轉換方式。

動畫引導用戶注意。當UI改變外觀時，動作在轉換之前和之后提供元素的放置和外觀之間的連續性。導航轉換是與界面進行整體交互的重要元素。它們通過表達應用程序的層次結構幫助用戶定位自己。例如，當元素擴展以填充整個屏幕時，擴展行為表示新屏幕是子元素。它展開的屏幕是它的父元素。

導航轉換是與界面進行整體交互的重要元素。它們通過表達應用程序的層次結構幫助用戶定位自己。例如，當元素擴展以填充整個屏幕時，擴展行為表示新屏幕是子元素。它展開的屏幕是它的父元素。

父級視圖對子視圖過渡的例子（Material Design Guidelines）

在父屏幕上，嵌入的子元素在觸摸時會抬起并在適當的位置展開。

過渡將重點放在子屏幕上，同時加強了父子視圖之間的關系。

共用相同父級的屏幕（例如相冊中的照片，個人資料中的部分或流程中的步驟）一致地移動以加強他們的關系。視圖從一側滑入，同時同級的視圖在相反方向上離開屏幕。

選項卡位于同一高度，并在水平方向上一起移動

在應用程序的頂層，選項通常被分組為主要任務（可能彼此不相關）。這些屏幕通過更改不透明度和比例等值來轉換。

結論

當然也有例外：一些iOS應用程序遵循Material Design Guidelines（如Gmail），一些Android應用程序遵循人機交互指南（如Instagram）。

左-Instagram on iO;右 -Instagram on Android

但有一點是顯而易見的 - 使用原生組件為兩個操作系統設計移動應用程序要快得多。因此，最好花時間對應不同的系統平臺設計而不是開發一個應用程序模型，因為一個應用程序模型是Apple的人機交互指南和Google的Material Design組件的混合，然后由于自定義元素而花費大量時間進行開發。

想要查看本機設計應用示例，其中我們使用本機元素以及具有強大樣式的自定義界面？訪問我們的Dribbble 和Behance 頁面，以更好地了解我們的能力。

原文發布時間為：2018-10-18

本文作者：SteelKiwi Inc.

本文來自云棲社區合作伙伴“安卓巴士Android開發者門戶”，了解相關信息可以關注“安卓巴士Android開發者門戶”。

總結

以上是生活随笔為你收集整理的安卓巴士Android开发者门户的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。