漫谈 Material Design & Ant Design

一、背景

近些年来前端的 UI 框架越来越多，其中不乏优质的作品如 Bootstrap 提供一套基础的 UI 组件库供用户(主要是开发者)使用，使用成熟的组件库可大大提高开发效率。随着用户对产品质量要求的提高，往往需要个性化定制组件库的样式，因此这些组件库往往设计得足够基础，但不够美观。在个性化定制之路上，每位设计师都有不尽相同的想法，使得设计风格不统一，随着设计成员更迭，设计风格将难以持续维护。

后来出现的 Material Design 与 Ant Design，从设计的角度思考，推出一套设计与语言来规范开发者的设计。这样做即使开发语言不同、平台不同依然可以保证一致的、有灵魂的设计风格。

在 YMFE 开发与维护的众多项目中，由于成员更迭、缺少 UI 设计、技术栈不统一等因素，出现了各式各样的页面风格。我们希望编写一套设计规范，统一团队项目的前端 UI 设计，屏蔽设计的差异，为团队众多项目注入灵魂，营造个性的团队文化，因此笔者进行了关于设计规范的一些调研。

二、明确概念

经常谈到设计规范，设计规范指的具体是什么呢？

在 web 开发中 Style Guide 与 Pattern Library 都具有设计规范的含义，二者有所区别：

1. Style Guide

• Style Guide 更侧重视觉，对设计的文字、颜色、LOGO、ICON 等设计作出规范，产出物一般称为 Guideline；
• 一般适用于设计团队维护一套统一的视觉设计风格，便于风格的统一与复用，规范；
• 实例：iOS Human Interface Guidelines 、 Material Guidelines；
• 难点：使设计团队甚至开发团队理解设计理念并不是容易的事情，例如 Material Design 中 “Material” 的隐喻比较抽象，难以理解与使用。

2. Pattern Library

• Pattern Library 更侧重前端开发，对界面元素的样式进行实现，其代码可供预览使用，产出物一般称为 组件库 UI 框架等；
• 一般用于开发团队协作，提高组件复用性的同时保证了用户体验的一致性；
• 实例：Bootstrap；
• 难点：使开发团队完全使用组件库提供的组件来构建页面有一定难度，开发者在找不到所需组件时往往自行编写样式，在没有设计稿的情况下非常容易做出与整体风格不一致的样式。

设计规范的定义引用自知乎 “如何建立一套 UI 设计规范”

Material Design Guideline 属于 Style Guide，除了 Guideline 以外，Material Design 也提供了组件库的实现: Material Components 和 Material Design Lite。 Ant Design 和前者类似，既包含设计指引又提供了React 实现。

三、概览

前面从设计规范的概念阐述了 Material Design & Ant Design 二者的联系，下面从其他方面了解二者的区别。

Material Design

做为一套较为成熟的设计语言，它的应用场景是极其广泛的，包含了谷歌的全线产品：Chrome OS、PC端、移动端(包括 iOS)，围绕“Material”的隐喻构建了完整、卓越的交互体验，对于它 “跨平台的底层系统” 的目标是实现了并且日趋进步的：

• 从动画效果(以下简称动效)、样式、布局、组件、模式、增长传播策略、可用性、平台、资源这些分类来介绍设计语言。
• 在电子屏幕上创造了全新的虚拟世界观。
• 提供全面、科学的交互效果示例，非常值得研究学习。
• 适用于不同平台。

Ant Design

从设计语言的层面来讲和 Material Design 还相差甚远，但对于它 “全面提高中台产品体验和研发效率” 的目标是实现的不错的：

• 从指引、组件、模式、资源这些分类来介绍设计语言。
• 对设计原则进行整理，总结了十大设计原则，使用文字介绍配以图片示例，使这些设计原则通俗易懂地为我们所接受。
• 对于中台产品复杂的交互逻辑，尤其是表格、表单设计做了相对深入的研究，并展示了通俗易懂的示例。

从二者的目标来看，服务于中后台系统的 Ant Design 显然不如 Material Design 的目标深远。 二者的目标亦有共同点：都是要建立相对底层的系统，实际上设定了设计的底线，基于此规范建立的系统拥有相对一致的表现样式而且不会很难看。从美观性上来看，Material Design 布局更鲜明大气，动效尤为出众，而 Ant Design 的设计中规中矩，布局紧凑，比较朴素严谨。

四、进一步对比

1.理念

Material Design

• “Material” 的隐喻 (Material is the metaphor)，随着电子屏幕的普及，“电子纸”这一材料的概念被前沿设计者们不断探索，在电子屏幕上形成了别具特色的交互体验。
• 鲜明、形象、有意义 (Bold, graphic, intentional)，遵循基础的平面设计规范以科学地构建出用户在视觉上的感知，鲜明形象的用户界面使用户获得沉浸式交互体验。
• 有意义的动效 (Motion provides meaning)，动效尤为重要，它可以给用户暗示和指引，从而顺其自然地知晓界面发生的交互行为。

Ant Design

• 微小，追求细节上的精益求精，用户在使用中不断发现令人惊喜的细节。
• 确定，用科学定义设计，用通俗的形式解读设计原则。
• 幸福，追求『用户』和『设计者』的幸福，流畅地完成一次次交互。

二者的设计理念中，科学定义设计这一点是共通的，在视觉设计方面二者都对科学保持敬畏的态度。其他的理念中，Material Design 对动效和排版的追求更进一步，Ant Design 虽然动效的设计不足，虽然受到其中台系统的约束，不会鲜明激进地表现设计(中台系统追求简洁明确也是理所应当的)，但对整个系统的交互设计也是尤为重视的。

2.动效

Material Design

Material Design 对于动效尤为重视，个人认为 Material Design 特有的动效是这个设计的精髓之一，很多 Material Design 的设计作品只学习了基本样式、使用了一些特色鲜明的组件(如 Floating Action Button)，却严重缺乏动效的设计，这样的设计作品并不是好的 Material Design 作品(如国内的 MDUI 对动效的表现实在不充分)。

Material Design 文档对动效进行了全面而形象的阐述，强烈建议各位欣赏一下 Material Design 官网对动效的阐述和示例： Material Design 文档 - motion

Ant Design

Ant Design 虽然对动效的处理没有 Material Design 那样耀眼，但也差强人意。在一些细节上体现了对动效的重视，例如模态框(Modal)的弹出和收起的动画，有一个从按钮到屏幕中心的过渡效果。

Ant Design 将动效单独提取出来成为 Motion Design ，提供了 React 的动画方案。Ant Design 并没有像 Material Design 那样提出电子纸之类的新概念，但也与前者不约而同地从现实世界的角度思考界面元素的动效，推出了一套动画设计语言及其解决方案，更多地从页面内容展现的角度去思考，巧妙地用动效带来的暗示来构建与延伸虚拟空间。

对比了二者对动效的处理，发现国人对交互设计也是一直在努力探索。但在我所接触的日常项目开发中，交互设计稍显匮乏，在有交互设计师参与的项目中，交互设计师一般不会做特复杂的动效设计(尤其是追求开发效率的 H5 页面)；在没有交互设计师参与的项目中，UI 设计师一般只提供静态的设计图，而交互设计一般由前端开发者自行设计。

任何一项好的作品，都会历经从无到有，从有到优的过程。在从有到优的阶段，通过严谨科学的交互设计来做动效，提高交互体验，可以让作品的质量更上一层楼。

3.组件库

单独的 Guideline 一般服务于设计师，Guldeline 要配合组件库才能为更多开发者所接受。

Material Design

Material Components，分为 android、ios、web 三部分，分别用Java、Objective-C、JavaScript实现。 Material Design Lite，JavaScript实现。

第三方的实现 material-ui 和 materialize 也很受欢迎。

Ant Design

ant-design，JavaScript实现。

也有其他框架的实现

虽然 ant-design 的 star 少一些，但增速也很快，而且中文文档很完整。

4.指引

除了组件库之外，设计指引也是不可或缺的，并不是每个团队或者每个项目都有 UI/UX 人员支持，设计指引可以指导 UI/UX 人员进行定制化开发，也可以帮助前端开发者在没有设计人员的情况下也可以开发出拥有良好交互体验和美观性的页面。

Material Design

对动效、布局规则、界面设计模式、增长传播策略、可用性、平台方面对设计进行指引，可以说既全面又专业。对于每一类指引，Material Design 都以图文配合的形式做出通俗易懂的示例，对用户来说非常容易理解。

与 Ant Design 相比多了很多其他平台适配和移动端交互的指引。

Ant Design

对设计原则、色彩、图标、字体、布局、导航、数据录入展示、反馈、动效、界面设计模式、资源这些方面进行指引，分类较多。针对中台系统展示了一些实践案例，对表单表格有着较为深入的研究，并在界面设计模式的介绍中展示出来。

Ant Design 还有一处亮点是使用通俗的语言介绍了十大设计原则，配合图文的形式告诉使用者在 web 开发中如何正确使用这些原则，这正是其理念中“确定”的概念。

两种设计语言都做了尽可能全面且通俗易懂的指引，对于前端开发者来说，即使不使用他们的组件库，通过浏览这些设计指引来学习一些设计和交互的基础知识也是很值得的。

5.使用成本

Material Design & Ant Design 作为设计语言，都有各种编程语言的实现。

Material Design 使用成本要高一些：

• Material 的概念不容易理解；
• 英文文档在国内还是有很多开发者不容易接受；
• 空间层次划分太多(24层)；
• 需要较高水平的视觉和交互设计才能真正发挥其优势。

Ant Design 使用成本低很多：

• Guideline 相比 Material Design 更容易学习掌握；
• 中文文档健全；
• 没有复杂的层次和材料的概念；
• 组件库的示例相对更完整；

五、总结

Material Design 与 Ant Design 都是高质量的设计语言，虽然目标不同、理念不同，但二者都为了更优雅地解决问题。

随着互联网行业的迅猛发展，人们对用户体验的要求越来越高。前端开发者的程序直接和用户进行沟通，因此在进行业务开发的同时应提高视觉与交互方面的素养，才能更好地理解所开发产品的设计理念，并给予用户更加卓越的使用体验。