工作中初遇Ant Design

最近接手一个项目关于到企业中台的项目，用到了Ant Design的开源资源。

什么是中台？先来解释一下这个概念，一个产品整体系统包含前台、中台、后台三个部分，前台关注场景，中台关注数据，后台关注运营，它们的组成部分如下图。

从图中可以看出，中台相当于是企业的数据集成中心，起着管理数据的功能。

言归正传，自己正好接手一个中台项目，为了效率起见，于是启用了Ant Design的开源设计资源。

Ant Design是蚂蚁金服体验技术部经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系，它是对外开源的设计资源库（百度可以轻易搜到），目的是提供完善的设计原则、最佳实践和设计资源文件（Sketch 和 Axure），来帮助业务快速设计出高质量的产品原型，让设计师更专注于更好的用户体验，将时间和精力放在思考业务上，而不是将时间浪费在绘图上。

Ant Design带给阁主的惊喜是一步步发现的。

首先阁主下载了资源库Ant Design Pro，里面典型的页面和通用的模板基本上能满足阁主的绘图需求（如下图），如果还是没有满足的，阁主就解锁symbol，自己进行搭建。

然后再下载了Kitchen，它是一款为设计者提升工作效率的 Sketch工具集，是一个Sketch的插件。于是就开始边思考业务，边搭建模型，基本上能满足阁主所需要的组件。到这里阁主以为完事了，本以为是它只是个组件比较全的模板库而已，没想到好戏在后面。

不久，在做搜索列表右下角的列表的时候，发现可以在Kitchen的组件生成器里面直接输入数值，就可以立马得到想要的搜索结果数字列表，不用自己将矩形一个个复制之后再改数字。

这引起了阁主的好奇，然后将Kitchen的功能一个个试了一遍，它们分别是设计稿上传、symbol同步、Iconfont图标库、调色板、组件生成器。如下图。

阁主无法描述出它们的实用性是有多强，但拿Iconfont图标库这个头像生成器来说，分为人物照片和卡通两种，单击相应的按钮图片就会随机更换（有不少sketch插件也具有这样的功能重点在于Kitchen更实用全面），图片质量都挺不错，如下图。其它的功能待大伙慢慢去体验。

再接着，阁主继续往下做的时候，开发人员为了节约时间，主动过来沟通，说之前他们为了节约时间，后台的界面也是在Ant Design的基础上进行整改的，让阁主直接用它的做就行。阁主惊讶的不是Ant Design有前端代码的事情，而是开发主动要求设计去按照这个做的行为，肯定了它的实用性、灵活性和扩展性。

到现在为止，阁主也才刚接触不久，大伙可以去官网按照目录（如下图）继续探索它的设计原则、出发点、动效制作等等，因为是开源的，很多企业都直接使用了，不必考虑版权问题，大伙可以大胆去尝试，欢迎留言交流。

---

往期精彩文章

《用Keep的案例来阐述交互设计师的职责》

《大公司的工作流程及时间分配》

《找工作之——作品集篇》

《设计师，有想过你的30岁吗？》

《体验设计应有的意识（高手进阶之路）》

《传说中的用户体验地图Sketch文件》

《创业公司设计师怎样从0到1设计一款APP（七）——APP Logo的设计》