iOS 规范与 Material Design 哪里不同？官网总结了这几点

手机端设计通常要么参考 iOS 规范，要么参考 Material Design 规范。

究竟哪个设计规范更好，这个很难说得清。

用 iOS 的规范的直接好处是，大多设计师及领导们都用 iPhone，用 iOS 规范设计审稿方便。

然而 iPhone 在国内实际市占不到 10%，从用户量级来看，和 Android 出自一家的 Material Design，更加贴近广大群众的习惯。

不过从提供的资料和文档来看，Material Design 提供的细节规范、尺寸能资料，比 iOS 详细齐全。

Material Design 的官网上甚至有一篇文章，教你如何通过十个步骤，把 iOS 规范的设计稿，改成 Android 规范，简直不要太贴心。

今天就来以这篇「iOS 转Material Design 官方教程」为基础，说对比一下这两个设计规范的差异。

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 的教程

（左下角点击查看原文可以跳转），显然是不建议直接拿来用。

在不同的场景，寻找最适合的方案才是上策。

不过要说设计资料，还是 Material Design 提供得比较丰富，适合新人学习借鉴，例如我给大家准备了几个 Material Design 的组件方便下载：

---

想要学习或者练习交互，但又缺少机会和动力的朋友，可以了解一下「体验设计学习社」。

无限制作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：