1.  屏幕尺寸

iOS 規范沒有特別規定的屏幕尺寸，因為不同尺寸的 iPhone 寬度不同。

以前常用的是 iPhone 8 的 375×667，后來常用的是 iPhone 11 Pro / X 的 375×812。

但是 Material Design 的屏幕尺寸就很明確，一直都是 360×640，看起來就讓強迫癥很舒適的數字。

2. 手勢指示條

iPhone 的底部都是統一的手勢指示條，而 Android 手機底部可能是三個導航按鈕，也可能是手勢指示條，甚至可能什么都沒有。

Material design 的示意圖上，通常底部沒有任何東西，所以設計稿也可以簡單點，手勢條和導航按鈕都不用放。

3.  狀態欄

iOS 的狀態欄很高的，如果改成 Material Design 就會窄很多。

上面是比較簡單的展示形式，下面是 Material Desgin 官網的示意圖，高度是 24：

4.  底導航

iOS 的底導航比 Material Design 更高，給手勢條留出的位置更高，而且常用磨砂玻璃做背景。

而下圖是 Material Design 官網給出的底導航尺寸，字號規定是 12，非常清晰了吧：

5. 下拉浮層

iOS 使用很多 Action Sheet，而 Material Design 則較少使用這類浮層，較多使用頁面。

當然，Material Design 也是有類似浮層的，叫做 Bottom Sheets，只是一般只作為菜單使用：

6.  頁簽

iOS 規范的頁簽是上圖左側這種擬物風格的，而 Material Design 的頁簽是上圖右側這種簡單的線條風格。

下圖是 Material Design 官網給出的尺寸規范，推薦字號是 14:

7. 表單

iOS 和 Material Design 的表單還是有挺多差異的，例如：

• iOS 的表單項之間有分割線，而 Material Design 沒有。
• iOS 的表單項之間右側一般放置箭頭，Material Design 則可能是圖標。
• iOS 的文本框都是簡單的下劃線，Material Design 可能是矩形框也可能是下劃線。
• ……

內容太多不一一舉例了，還是自己去看規范比較好。

8. 樣式

iOS 喜歡用淺色大陰影，而 Material Design 一般用比較細的深色陰影。

兩邊的復選框也不一樣，iOS 喜歡全部用圓形，而 Material 則嚴格遵照復選框應該是方形的心理習慣。

對比

對比一下兩邊的差異，看看有多不同。

總結

大部分公司為了節約成本，并不會為手機端搞兩套設計，通常是兩個平臺規范都要綜合考慮。

所以 Material Design 這把 iOS 規范直接改成 Material Design 的教程，顯然是不建議直接拿來用。

在不同的場景，尋找最適合的方案才是上策。

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網》iOS 規范與 Material Design 哪里不同？官網總結了這幾點

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務