Material、Fluent、Ant设计语言：比较与选择

​有时候看到一些硬件产品介绍的文章。经常会看到这样一句话【延续家族设计语言】，特别是在汽车与电子产品的文章介绍中会看到这样子的语句。如搜索关键字【延续家族设计语言】可以看到汽车相关的标题最多，其次是电子产品。

在我进入产品岗位时，我更多的工作是从事需求与项目管理相关的工作，对设计的要求只是要保持页面元素的完整性，风格不需要太分裂即可。

直至Google在2015年发布了Material Design 对应的文档后，我才恍然大悟。原来设计人员也是能够像程序员的编程语言一样，有一套语言来进行规范设计效果。

Marterial Design是在全世界的人都夸赞Apple有设计感的背景下，Google为统一安卓设计推出的一套设计标准，这种标准是Google的公司标准与推荐标准。它让Google的产品设计风格都逐渐的统一，这种统一展示出来的并不是单纯的好看与美感，更体现了这种超大体量的公司内部各部门与各条产品现对于设计统一的重视程度。（从上一篇的百度登录页面就可以看到百度公司内部的分裂情况有多严重）。

Marterial Design发布后我读了不下10次，常读常新。它描述了一种外观的设计原则、设计思路、设计目的，同时又严谨的对各种图标、布局、颜色、控件、动画效果做出了要求，明确到控件的圆角度、阴影的高度、调色版的色号选择与搭配，也给过了可用与不可用的案件说明。

这些都让我认识到，在产品的外观设计时，如果要保证设计的一致性，产品设计人员应关注到哪一些点，设计是基于哪些思路来做、如何使用黄金分割比例、斐波那契螺旋至外观设计中。

应用至具体的工作中，虽然我设计美感及不上专业的UI设计，但可以在设计的一致性确认设计的合理性。

Marterial Design的设计影响已经影响到了我们现在使用的各种APP、Web页面、桌面应用。微软最新的设计语言Fluent Design明显受到了它的影响，Fluent Design中提出的材质感概念更是直接指向了Marterial Design。

同Marterial的纸片材质不同，Fluent将上图的毛玻璃效果定义为亚克力（亚克力材质 也是材质的一种，还是回归到了Marterial-材料），同时在Fluent Design己将此设计语言扩充到了AR、VR相关的软件设计中。

同苹果公司一样，微软只是公布了一下自己的已经更换了设计语言（色块metro风格总算被地抛弃），并没有向 Google一样推广设计语言。毕竟这两家没有安卓碎片化的问题。

这些具有各种细腻的操作动画、优秀的光影效果、绚丽的色彩搭配要实现起来对产品设计团队与实现团队都是一个非常大的挑战。很多产品自己的业务流程实现都应付不了，这些视频上华丽的设计就成了屠龙之术。

Ant Design的发布却是实实在在为产品与研发来提供轮子。

从蚂蚁金服推出的Ant Design从帮助文档来看，也明显是同Marterial Design的说明文档一脉相承。更优秀的是推出了与之对应的前端框架，将设计与前端框架进行统一，提出【开箱即用】的概念，再也不需要设计出结果后担心前端人员说“这个我做不出来”或“这个实现起来太麻烦了”

Ant Design也提出了很多的设计理念，但是它避开了C端这种需要多样化的设计，提供了中后台的前端样式。它为产品人员提供Axure对应的rplib 元件库，为研发人员提供了现成的组件库。让产品人员与研发人员能够最快的达成设计上的一致，更加专注于业务的实现。

从rplib的元件库中可以看出，这一套设计语言与框架是蚂蚁金服的产品团队在设计的过程中将各种经验收集起来的产生的组织过程资产，同时拉上了前端团队支持做出了一个开源项目。

这种开源并不仅仅是一个工具的开源，而是将一种设计理念与工作方式的开源。它提供了设计原型与实现样式达成一致工作方式。

Ant Design在github上的star已经要比google方的Marterial Design要更多了，比起对应的html+css源码。程序员看来更喜欢现成己有的框架。（除了圣诞彩蛋事件）

我一直推崇采用带有交互的原型来同客户、研发、测试人员达成一致，而不是长长的需求说明书。

虽然这些设计有各种各样的UI、代码实现框架。但是它都在说明产品设计中一致性的重要性，这一致并不简单的是设计上的一致，而是从需求、页面、交互、业务逻辑、异常处理来达成足够的一致性。这种一致性才会让用户不会在使用有廉价感。而实现这种一致性，并不会增加很大的工作量，是需要让产品中各个部门与人员有良好统一的工作习惯。

不过各部门之间的工作习惯统一也是个不小的工作量~~

End