譯：原生iOS應用程序和原生Android應用程序設計之間的差別

原文地址：https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca

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

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

導航模式的差別

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

另外一方面，Apple的設計方法卻大相徑庭。沒有全局導航欄，所以咱們沒法使用原生iOS應用程序設計中的全局後退按鈕返回。這會影響iOS移動應用程序的設計。屏幕內部應該有一個左上角是一個返回按鈕的原生導航欄。

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

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

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

iOS和Android中應用內導航模式有所不一樣

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

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

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

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

一般，選項卡包含的類別不超過五個。咱們能夠看到，此組件相似於Material Design中的底部導航，但更經常使用於iOS應用程序中。

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

Apple認爲主要導航元素應位於前臺，漢堡包菜單應僅用於存儲不是用戶執行的平常任務的功能。不一樣的是，Android應用程序一般的作法是在漢堡菜單中隱藏主導航。

自定義標準控件須要額外的開發時間，而且對於用戶來講是不熟悉的

若是您但願應用程序中的每一個元素在不一樣平臺上看起來相同，那麼您須要進行額外的開發工做才能建立最佳的移動應用程序設計。最複雜的用例涉及默認控件，如單選按鈕，複選框，切換按鈕等，而且須要自定義視圖實現，以在iOS上顯示相似iOS的控件或相似Android的控件。

每一個平臺都有其獨特的交互。在每一個操做系統中尊重用戶習慣的設計是良好的設計。在爲iOS和Android設計移動應用程序時，牢記平臺之間的差別很是重要，這樣您就能夠設計出知足用戶指望的應用程序。

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

iOS和Android中的按鈕樣式

「Material Design Guidelines」中有兩種類型的按鈕 - 平面和凸起。這些按鈕用於不一樣的狀況。Material Design中按鈕上的文本一般都是大寫的。有時咱們在本機iOS應用程序中也會找到大寫按鈕文本，但一般咱們找到的是標題大小寫。

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

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

Android中有兩種類型的底部列表：list列表和表格列表。list底部列表有兩種類型的內容：具備不一樣情景操做的列表和在用戶點擊「共享」圖標後顯示的應用程序列表。咱們能夠在iOS活動視圖操做列表中找到相同類型的內容。但這些組件看起來與Android底部列表不一樣。

分辨率的差別

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

排版差別

San Francisco是iOS中的系統字體。Roboto是Android中的標準字體。Noto是Chrome和Android不支持的全部語言的標準字體。您須要密切關注每一個平臺的排版和佈局規範。

Microinteractions

在設計方面，第一印象一般是用戶的最後印象。

這就是爲何從一開始就吸引用戶的注意力如此重要。在應用程序設計和開發過程當中，咱們能夠經過微交互和動畫爲用戶建立一個很是着迷的體驗。

讓咱們明確關於兩個平臺的交互和動做的主要規則和建議，並查看詳細示例。

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

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

儘管使用微動畫的基本建議在「Material Design Guidelines」和「人機交互指南」中很是類似，但仍有一些明肯定義的差別。用戶習慣於這些特定於平臺的過渡，並以爲十分天然。

這就是爲何要特別注意熟悉的交互是十分重要的，這將改善用戶體驗並在每一個平臺上看起來天然。

iOS

iOS用戶習慣於iOS中使用的微妙動畫，例如平滑過渡，設備方向的流暢變化和基於物理的移動。當移動沒有意義或彷佛違反物理定律時，iOS用戶會感到迷失方向。例如，若是用戶經過從屏幕頂部向下滑動來顯示視圖，則他們但願可以經過向後滑動來退出視圖。HIG強烈建議，除非您正在建立諸如遊戲之類的沉浸式體驗，不然您可使自定義過渡動畫與內置動畫相媲美。

Android

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

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

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

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

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

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

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

結論

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

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

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