Meterial design与Ant design规范对比分析

价值观及目标

小结：在设计价值观和目标上，二者基本是一致的。本质上都是遵循自然，简洁快速的设计理念。

设计原则

小结：这两个规范虽然目录不大相同，但大致都是从布局，导航，视觉，交互模式，动效等方面展开介绍的。 Material design开篇大篇幅介绍了物质环境、材料研究、起重机、光与影等理论知识，也说明Material design更侧重于动效流畅，模拟自然的感官体验；Ant design则更侧重于功能模块操作的简单快速。

设计原则-布局

共同点：二者布局均采用栅格化体系，间距原则均以四八原则为标准。

设计原则—导航

小结：二者虽然都是在讲导航，但是侧重点明显不同， Material design以APP为例，侧重于导航的内在逻辑关系及不同关系的搭建过渡。Ant design则轻量的给出几种常见导航的设计参考方案，一笔带过。

设计原则—视觉（颜色）

小结：视觉以颜色为例，二者都提供了详细的基础色板， Material design在不同使用场景剖析更细致。

设计原则—交互模式

小结：二者都是讲交互，但侧重点不同。

设计原则—动效

小结：Material design动效版块从动力学，物质学等深层理论基础开始介绍，到具体的案例分析，细致到展开折叠等微交互的毫秒级，非常细腻详尽，提供了编舞的具体操作模式，给出可扩展的定制化方案，在动效这块的规范的定义上，个人感觉，Material design规范要明显优于Ant design。

组件库

二者都提供了较健全的组件库及开发代码。（这块在设计师看来差不多，具体分析需要开发专家来定义）

总结

共同点：

 1、在设计价值观和目标上，二者基本是一致的。

2、交互设计也都崇尚极简，自然，均遵循交互设计七大定律；

 3、Ui规范上二者均采用栅格化体系，间距原则均以四八原则为标准。 

4、都提供了较健全的组件库及开发代码。（这块在设计师看来差不多，具体分析需要开发专家来定义） 

差异： 

1、Material design可以说是UE/UI 中非常优秀的教科书，体量要比ant的大十几倍，内容也更细致丰富，从最底层物质，自然等原理的解释，到抽象到实际案例中不同场景的各种不同UI及交互方案，细致到像素和毫秒级的设计准则，她不仅告诉我们如何设计，还会细致的讲解为何这么设计。蚂蚁金服则更简练，就告诉你就比着做就可以，有的也给出几种选择，但相对较少。

 2、Material design示例主要以移动端为例介绍，支持跨平台适配，遵循移动先行的设计法则。国外的PC端产品案例基本也都符合这个设计原则，产品功能核心化，去繁就简。Ant design示例主要以PC端为主，部分适配跨平台，但不完善。目前国内web端产品，设计理念偏向于大而全，对于页面丰富度有一定的要求。 

3、学习成本上， Material design打开特别慢，有时候一个页面打开要四五分钟，体量本身又比较大，真正能熟悉并且精通，需要付出更高的学习成本。Ant design规范官方文档，轻量、加载页面快，学习成本较低。 

在交互及UI设计的角度，二者没有本质区别，不是非此即彼的关系，在千变万化的设计过程中宜相互结合，取长补短。 

以上是作者个人对两大设计规范的粗略理解，分享给各位，一家之言，还请多多指教！

---

由于本人第一次发文，对编辑器还不大会用，文字内容多为截图，如需文档，可私信发我邮箱账号，我会一一回复。