header_v1.7.40

工作中初遇Ant Design

53天前发布

原创文章 / 多领域 / 观点
Sophia的玲珑阁 原创,如需商业用途或转载请与Sophia的玲珑阁联系,谢谢配合。

爱不释手的资源库,高效神奇~

最近接手一个项目关于到企业中台的项目,用到了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的设计


作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的交互设计妹纸。


职场设计技能,更多教程抢先就看,请关注作者的微信公众号:Sophia的玲珑阁


4
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功