1.  屏幕尺寸

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

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

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

2. 手勢指示條

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

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

3.  狀態(tài)欄

iOS 的狀態(tài)欄很高的，如果改成 Material Design 就會窄很多。

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

4.  底導航

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

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

5. 下拉浮層

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

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

6.  頁簽

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

下圖是 Material Design 官網(wǎng)給出的尺寸規(guī)范，推薦字號是 14:

7. 表單

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

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

內(nèi)容太多不一一舉例了，還是自己去看規(guī)范比較好。

8. 樣式

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

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

對比

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

總結(jié)

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

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

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

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

作者：設計師ZoeYZ

轉(zhuǎn)載請注明：學UI網(wǎng)》iOS 規(guī)范與 Material Design 哪里不同？官網(wǎng)總結(jié)了這幾點

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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