工作中初遇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有前端代码的事情,而是开发主动要求设计去按照这个做的行为,肯定了它的实用性、灵活性和扩展性。
到现在为止,阁主也才刚接触不久,大伙可以去官网按照目录(如下图)继续探索它的设计原则、出发点、动效制作等等,因为是开源的,很多企业都直接使用了,不必考虑版权问题,大伙可以大胆去尝试,欢迎留言交流。
往期精彩文章