不管你是在家，在公司，還是在設計師工作室工作，互聯網企業都會找你去給他們設計 App。為了滿足所有顧客的需要，這些企業通常需要同時開發運行在 Android 和 iOS 設備上的 App。
在理想的情況下，我們希望能花上好幾個月的時間來分別為兩類設備設計一款 App，但是實際上，我們沒那么多的時間。就我所負責的項目而言，每次的時間都僅夠我設計一個 App。通常情況下，我們也都只設計一個 App，然后在交給 iOS 和 Android 開發團隊之前將它們做一些微調。要按照這種方式進行 App 設計，首先我們應當預先了解這兩個平臺之間的差異，這樣你才能夠使得你設計的 App 在這兩個平臺上的外觀都能顯得自然。
在設計開始之前1. 了解另外一種系統 2. 選擇一個優先的平臺由于我們一次要對兩個平臺進行設計，在時間有限的情況下，你需要接受的一個事實就是——必須有一個平臺需要優先設計。如何選擇優先的平臺并不在于你的個人喜好，而是在于你設計的這款app的市場定位如何。你所處的環境中有更多人使用 Android 設備嗎？它是收費 App 嗎？你的目標受眾是誰？問問自己這些問題有利于你決定哪一個平臺應當是被優先滿足的。
3. 了解設計規范閱讀iOS和Android的設計規范。在過去，iOS 被認為有著更加嚴格的設計規范，有時候為了讓 App 能夠上線 AppStore，你需要走一個大約兩周長的流程。而在 Play store 里則不存在這樣的審批流程。然而，恰恰由于 App 上線如此開放，Android 平臺上的 App 質量一直因為良莠不齊而飽受詬病，Google 為此推出了Material Design來試圖解決這個問題。
對于 Web 設計者而言，他們早就熟悉了 MD 了
網上有很多免費而且好用的 UI kit，你可以將它們用在你的項目中，你可以在這片文章的最后找到一些 kit 資源的下載鏈接，使用這些組件將會給你的 App 帶來一些原生的感覺。但是即使你使用了這些 UI kit，想要了解“什么時候應當做出區別以及什么時候兩個平臺應當保持一致”還是需要一些技巧的。在這里，我將向你分享一些我的。
設計你的 App遵循這些步驟，你的 App 就能同時在 iOS 和 Android 保持完美！
1. 總體的樣式從 iOS7 以后，Apple 就一直在采用扁平化的設計模式，去除了所有不必要的紋理和陰影等效果——和早些年間的版本完全不同。Google 的新 MD 設計規范有了一些更加細節的規定，通過一種叫“紙片”的方法來創造更多的層級關系。
2. 實體按鈕Android 有一個返回按鈕，點擊它可以返回上一個屏幕。
iPhone 上則沒有這樣一個按鈕，所以需要有一種方式能夠讓用戶回到先前的屏幕。通常的解決方案是在屏幕的左上角放置一個返回鍵。
3. 通用元素兩種平臺之間的確存在著一些通用的元素，比如說狀態欄和標題欄，它們會出現在每一屏的頂部。你不應當改變導航欄的高度，如果你想讓 App 看起來更加原生的話。所以，我推薦你在設計的第一頁就定義好標題欄的樣式，然后在其他的屏幕上使用一個占位的方框來替代，這樣能省下不少時間，但是你應當向程序員說明標題欄在不同的屏幕上都是一樣的樣式。
不同平臺上的導航欄有一定的差別。在 Android 上文本是左對齊的，然而 iOS 上是居中對齊的。在 iOS 上，很多企業都用它們的 logo 來替換首頁標題欄中的文字，但是在 Android 設備上這不是一個好的主意。狀態欄（顯示你的網絡、電量和時間信息）是系統組件，你不需要考慮設計它，只要確保它們不會對他人造成誤解就好了。
4. 導航或許iOS 和 Android 平臺之間最大的區別就在于他們的導航樣式了。Android 上最主要的導航方式是抽屜菜單，Android 用戶們通常在這個菜單內進行跳轉。而且在整個 App 中，這種體驗是一貫的。Apple 的導航樣式更傾向于 tab bar，它位于屏幕的底部，并且以一種很簡單的方式實現上部內容的切換。當你設計 App 的結構的時候，你可以為不同的平臺設計不同的導航樣式。
5. 要不要用卡片式？在 UI設計中，卡片正逐漸成為一種主要的 UI設計樣式，它們可以應付多種情況，而且給用戶提供了一種能夠呈現有效內容的便捷方式。視覺上，卡片非常適應于 Android 的 Material Design（它事實上源自于紙張的靈感）。使用陰影和卡片之間的合理間距能夠創建一種自然的外觀。
在 iOS 上，使用卡片設計需要更加的小心謹慎，盡管一些大型的 App，諸如 Facebook 和 pinterest 的確使用了一種略微偏離 iOS 視覺規范的設計風格。Instagram 使用了一種完全扁平化的設計風格，盡管從結構的觀點上看，用戶的每一條推送都能被視為是一張卡片，instagram 的設計很值得你去花時間揣摩，它是如何遵循 iOS 視覺規范的。如果你要在 iOS 平臺上應用陰影，你最好小心謹慎，盡量使得這些陰影不是那么的明顯。
6. 排版iOS 系統上的默認字體是 Helvetica Neue，在 Android 上則是 Roboto。盡管這兩種字體在外觀上有顯著的差異，但是這兩個字體的尺寸卻是近乎相同的。如果你想要在設計的時候節省時間，那么用一款字體就可以，但是要和開發人員溝通在不同的平臺上使用對應的字體。而在設計重要的布局結構和使用大號字體時，我建議你還是同時用這兩種字體測試效果。
如果你想要精益求精，那么你就要對不同平臺上的設計規范更加注意。比如如下幾條：
Android 的 MD設計需要用到更多的空格來進行布局在 MD 中字體大小的變化會更加多樣在 iOS 上，字體沒那么多大小差異，但是在字體重量上（Font weight）有更多的變化，同樣允許你創建主次結構兩個平臺都使用比較細的字體來現實正文內容，然而，在下面的例子中，Android 使用了輕（Lighr）和常規（Regular）字體，而 iOS 使用了粗體（Bold）和常規字體這是一個非常簡單的例子，向你展示了排版方面的一些細微的不同可以導致印象上的巨大差異——你能很快分辨你是在用 Android 手機還是在用 iPhone！
7. 網格和觸摸元件iOS（@1x 下 44px）和 Android（1:1 比率下 48p）都有對可觸摸元件的設計規范。MD 規范同樣建議對所有元素使用 8dp 網格對齊。
在最近的項目上，我發現遵守 Android 的這些設計規范會更加安全，因為大一些的 48px 的按鈕在兩個平臺上都表現良好，而且 MD 的規范更加全面，還經常更新。不管怎么說，你都應該在設計中使用網格，但是我們發現定義更加明確的 Android 網格會更好用一些。
8. 按鈕樣式這里是 MD 下定義的幾個按鈕類型：
浮動動作按鈕（Floating action buttons）：最傳統的有邊框的按鈕，陰影厚重明顯，將它們從頁面上分離出來。它們僅應當被用于背景，或者謹慎地在卡片上使用，不應當在警告框或者彈出框上使用，因為使用這種按鈕，就會創建一層視覺深度。這種按鈕的填充顏色一般使用 App 的主色，而下一種按鈕，通常使用輔助的顏色。扁平化按鈕（Flat buttons）： 通常文本使用 App 的主色，沒有邊框，它們通常使用間距和大寫字母來強調不同內容之間的分離關系。和 MD 相比較，iOS App 在外觀上是完全扁平化的，沒有層級深度和陰影。主要按鈕有填充顏色，次級按鈕反轉顏色，也就是說，有著主色的邊框和文字。這種方案有時候會受到一定的限制，特別將它是用于標簽欄等元素的時候。要用好這種設計模式，你必須對不同的顏色在你的 App 中分別代表什么有一個清晰的概念。
9. 動作表單動作表單（Action sheets）允許用戶在多項操作中進行選擇。比如，當我點擊（或者長按）我想要分享、上傳、復制或者刪除的圖片時。
iOS 和 Android 用近乎相同的方式解決這種問題。首先，動作表單都是出現在屏幕的地步，然后在主要內容上罩上一層陰影。然而，它們在創造不同的深度和其他細節方面有著一些不同。
Android 在動作表單上加了一層厚重的陰影，表明它是脫離于原先的內容的。iOS 的動作表單沒有陰影，僅僅是在原先的背景上防止了一個有一定透明度的灰色圖案。只存在于 Android 上，它允許用戶快速選擇功能。然而，記住，這并不是 iOS 原生的控件之一。在下面的例子中，用戶點擊 profile，然后彈出了一個下拉菜單，提供了幾個選項。
像特定的一些數據的輸入，比如日期和時間，Android 現在有了原生的對話框，雖然它們看起來像是警告彈出框，一個例子是日歷輸入。iOS 使用完全不同的方式解決這個問題，它會在屏幕的底部彈出一個轉輪讓用戶進行選擇。在設計這些東西的時候要小心，并且和開發人員做好溝通。
10. 分類控制分類控制允許用戶以一種簡單的方式在不同內容之間進行跳轉。在不同的平臺上，該控件的使用方式是完全相同的，但是在視覺上有著顯著差異，因此要注意使用正確的形式。在 iOS 上，分類控制控件的外觀很像我們剛才提到的按鈕。而在 Android 上，通過間距來展現它們的分離關系，同時用下劃線來標明目前所處的位置。
11. 彈出框正確地處理這一類型的控件十分重要，因為他們也許會涉及到一些很重要的操作，例如注冊，確認條款，甚至是確認支付。我們需要讓他們看起來是原生的，以便產生一種安全感和信任感。
Android 的警告框使用的按鈕樣式，就是我們先前提到過的扁平按鈕，你可以在 MD 說明文檔中找到它們應有的尺寸。動作按鈕位于卡片的右半部分。實際上，所謂的按鈕其實就是一個文本。它們使用大寫字母將它們和其他內容區別開，并且使用 App 的主色。
12. i買粉絲ni買粉絲n 設計是在 UI 設計中的一個比較特殊的領域。不管你是使用免費的 i買粉絲n，和專門的 i買粉絲n設計師合作，還是自己設計 i買粉絲n，不同的平臺上對 i買粉絲n 都有特別的樣式要求。iOS 平臺更偏好線形 i買粉絲n，Android 上的 i買粉絲n 的描邊則更加地粗壯，或者干脆就用填充的 i買粉絲n。這里是兩個平臺上的 i買粉絲n 對比，你也可以點擊這里的鏈接查看iOS和Android下的 i買粉絲n 設計規范。
13. 面包菜單、載入圖片不幸的數字 13（注：最后的晚餐的在場人數）。通常來說，警告框和表示載入的圖標留給開發者做決定。你或許已經經歷過彈出框和警告框的設計和 App 的其他部分樣式完全脫節的情況。那是因為通常 iOS 和 Android 平臺都有對這些情況的默認的處理方案，但是你也可以利用你的方案進行替代。在這里，讓你的設計能被真實還原的最好的方式就是和開發人員多進行溝通。
14. 通用 UI 控制復選框，單選框和輸入框，以及開關都是應該有著原生感覺的控件。像警告框和對話框一樣，這些控件保持默認樣式的話能夠給用戶帶來熟悉感和信任感。盡可能多地使用原生控件，用戶自然知道如何使用他們，并且在涉及到敏感信息和支付事宜的時候能夠更信任你的 App。
在下面的例子中，我們可以看到兩個平臺上的差異其實是