1.  屏幕尺寸

iOS 規(guī)范沒有特別規(guī)定的屏幕尺寸，因?yàn)椴煌叽绲?iPhone 寬度不同。

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

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

2. 手勢指示條

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

Material design 的示意圖上，通常底部沒有任何東西，所以設(shè)計(jì)稿也可以簡單點(diǎn)，手勢條和導(dǎo)航按鈕都不用放。

3.  狀態(tài)欄

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

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

4.  底導(dǎo)航

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

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

5. 下拉浮層

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

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

6.  頁簽

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

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

7. 表單

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

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

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

8. 樣式

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

兩邊的復(fù)選框也不一樣，iOS 喜歡全部用圓形，而 Material 則嚴(yán)格遵照復(fù)選框應(yīng)該是方形的心理習(xí)慣。

對比

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

總結(jié)

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

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

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

原文地址：體驗(yàn)進(jìn)階（公眾號）

作者：設(shè)計(jì)師ZoeYZ

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

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

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

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