经验总结！Material Design和iOS 产品设计的差异化思考

王M争：Material Design（以下简称MD）谷歌设的一套视觉语言设规范，主应用于安卓类应用。

iOS Human Interface Guidelines（以下简称iOS）苹果公司针对 iOS设的一套人机交互指南，目的了使运行 iOS 的应用都能遵从一套特的视觉以及交互特性，从能够风格行统一。

相对来说，我们对于 iOS 的设计规范更熟悉——因为考虑到成本，设计师进行产设计的时候只会一套 iOS 的设计稿，然后适配卓机。

很少针对安卓机型出一套 MD风的方案，种现象虽存在但是并不合理。不同的系统/平台采用不同的设计语言，不同的设计语言培出不同的操习惯。

例使用安卓手机的用户平时见到的是 MD风的界面，突下一个 iOS风的应用，么操来就很不习惯，增加学习成。

为了让产品可以适用不同用户的操作习惯，提供 MD 和 iOS 套计稿是非常有必要的。当然 MD 和 iOS 的差异不是一篇文章就能说清楚的，这就从阴、导航和配色这三个方面来简析一下 MD 和 iOS 的差异。

一、阴影

对于不熟悉 MD 的计来说，MD 味着大色块+阴。

为什么 MD 如此痴迷于阴影？

从它的字就可以看出——Material Design，这里的 material 指的纸张；因源于实活，所以 MD 非常喜欢使用真实世界元素的理规律与空间关系表组件之间的层级关系，阴影就常见的表形式：

同样的账户注册，安卓界面中按钮阴影 iOS 界面中按钮阴影。

FAB（Floating Action Button），带有阴影的浮操作按钮甚至成为了 MD 的一大招牌。相较而言iOS更扁平化。

二、导航体系

产品导航体系主由单栏构，根据置以及交互方式可以分顶部栏单、底部栏单侧栏单。iOS 的导航体系主由底部栏单构， MD 使用了顶部栏单侧栏单。

面我们来看几个例子：

易音乐在 iOS 中采的是栏菜单导航，而在卓机上导航栏被移到界面顶，「账号」被收到侧边栏中。

b在 iOS 中有栏菜单有5个标签，而在卓机中只有4个标签，「我的」同样被侧边栏收起来。

推特在 iOS 中使的栏菜单导航，在卓机中导航栏被移到了顶。

而 Apple Music 做的更彻，在卓机上直接舍弃了菜单栏，采了侧边栏作为导航模式。

我们发现前两款国产应在卓机上都保留了栏菜单，而后两款国外应直接砍掉栏菜单。只是 Apple music 和推特，很多国外的卓类应都没有使栏菜单。而国的应因为考虑到 iOS，即使 MD 是阉割版的，属于 iOS 和 MD 的混血。甚至很多卓应在设计格上往 iOS 靠拢，b为例，5.11之前的卓版本中都是没有栏菜单的。

当然这里并是评 MD 和 iOS 哪个导航体系更好，我说自己的观点：

底部栏菜单的使用非常方便用户在单手握持情况下的操，但是对大屏手机来说，单手操显得很力。果用户改由双手握持手机，么从易用上来说底部栏菜单没有任何优势。

MD 的方案更加注重对界面空间的用，边栏菜单就不说。以底部栏菜单为例，在安卓机型中用户滑动的时底部栏菜单隐藏，方便的用户以看下乎，安卓版的底部栏用户滑动的时隐藏，而 iOS 则是固定不动的。

侧边栏的优势还体现在可以提供更多的标签，底部栏菜最多可以放5个。但是侧边栏菜需要用户点击才能调出来，比较隐蔽，而底部栏和顶部栏相对来说就会显得一目了然，总之各有千秋。

至于为什么 MD 会抛弃底部栏菜单，我个理解是设备原。为安卓型底部有三个物理按键，如采用底部栏菜单作为主导航模，容易造成用户误击。

类似有 web 类应用，为浏览控件栏也在底部，所以如采用了底部栏菜单样会造成用户误操作。

三、配色

MD 提倡使用高饱和度比色来提升品视觉表现力，也是我在上提到大色块。样个功能，从底部栏背景色、插画到按钮，我们可以发现 iOS 在色使用上比较克制。

知乎前安卓版本使用了大积蓝色，后来改成跟 iOS 样白色。这样调褒贬不，有用户反馈这完全照搬了 iOS，要改回 MD。

品界设计比效主要由配色、尺寸、距和阴影来完成。MD 在配色和阴影上做比较出，所以 MD风格品在视觉表现上更有冲击力。而 iOS 则显比较小新，追求扁平和简洁。所以我们法去评判这两款设计规范孰好孰坏，为其各自出发是不样。

然前也提到了 MD 和 iOS 异不仅仅体现在以上说这三，有些小细节也常值我们思考。我们都知在 iOS系统中，用户向右滑动的候会返回上一页面。因为苹果机没有物理返回按键，所以这种机制非常受欢迎，但是在一些定景的候就会有问题。例如如果想复制博的「一曲肝肠断，涯何觅知音」，选中光标从左向右滑动，这就会返回上一页面，别不方便。所以只能从右向左进行复制，后来了一下和 QQ，发现默认复制的是整条动，这也算是一个折衷的方案。

总结

篇文章并不是去评判 iOS 和 MD 两种设计风孰孰坏，也不是让我们现在就去为自己的产品做出两套设计稿，个目前来说也不太现。很国民类应用只采用一套设计稿，大家么做，整个大境就是样。

但是还是那句话：存在不一定理。出套计稿虽然现在起来不现实，但是也要做好准备，要有危机。

欢迎关注作者微信公众号：「王M争」

图片素材作者：Rifayet Uday