03 instagram download for android(如何同時設計 iOS 和 Android？)

溝通在不同的平臺上使用對應的字體。而在設計重要的布局結構和使用大號字體時，我建議你還是同時用這兩種字體測試效果。

如果你想要精益求精，那么你就要對不同平臺上的設計規范更加注意。比如如下幾條：

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買粉絲n

i買粉絲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。

在下面的例子中，我們可以看到兩個平臺上的差異其實是很小的，小到你在設計的時候可以忽略這些差異，用其中一種形式設計，但是不要忽略細節上的差異所帶來的原生的感覺。使用你的 UI 庫，并且在開發的早期和開發人員做好說明。

總結

在同一個設計稿中同時呈現出原生 iOS 和 Android 的感覺也并非一件不可能的任務。嘗試在設計之初就注意到這些差別，并且注意對控件的使用，并且在設計過程中和開發人員保持緊密的聯系。

資源

我希望這篇文章能夠為你解答“在哪些方面將兩個平臺區別開”這個問題，但是你顯然需要一些合適的工具或者模板來進行你的設計。這里有一些你可以用來開始你的設計的資源，我為你挑選出了一些最好的：

設計規范 iOS Human interface guidelinesAndroid material design guidelinesUI 庫

這些 UI 庫能夠幫助你剩下很多的防治和調整原生控件的時間。你可以從庫中抽取出你要的部分并將它們用于你的 iOS 或 Android 設計稿中。

An excellent PSD template for iOS from Teehan + LaxAndroid Material Design PSD Templatei買粉絲n Line i買粉絲ns which are great for iOS designFlat i買粉絲ns that work well with material design模型

Mockup 在你想別人展示你的設計稿的時候是一項非常好用的工具。這些模型有好幾種類別。當你要展示 Android 設計稿的時候，你要小心選擇這些模型。我傾向于使用 Nexus，因為它是 Google 自己設計的手機，對于其他的廠商來說沒有傾向性。

Official iPhone device downloadsFlat apple devices with multiple perspectivesNexus 6 flat mockupLifestyle mockups from placeit

tutsplus

作者：Chris O’Sullivan

譯文地址：設計派

譯者：設計派_小溫

很赞哦!（54216）