对ant design的初步认识

概括

偶然间,接触到AntD(Ant Design),不知道它是什么,简单搜索一番后,有了初步了解,故有此文。Ant D=Ant Design,是蚂蚁金服出品的,因为蚂蚁的英文是ant,所以叫ant design。
简单来说,AntD是一套设计准则+ui框架。

设计准则

设计准则就是告诉你应该怎么设计、怎么排版、怎么色彩搭配以提高用户体验,其实这一点很重要,知其然知其所以然,像bootstrap只是教你如何用,而没告诉为何如此设计。这里我举个例子,关于亲密性

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。
纵向间距关系
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。

首先,它教给我们,如果信息关联性高,那么间距就近些,以使之成为一个视觉单元。并且在纵向间距,给了3个层次,小、中、大,以供选择。

对于,非设计人员来说,看看这些设计准则挺好,对于专业设计人员来说那就更好了,这都是蚂蚁金服实践出来的准则。

UI库

按照antd的设计准则,实现了好多版本的ui库,有vue版的、有react版的等等,官方是react版本。这些ui组件都是阿里从众多中后台系统中,抽取出来的,pc版的脚手架叫 ant design pro,移动版的脚手架ant design mobile,以及纯组件的ant design。
antdesign pro是个脚手架,开箱即用,跟vue脚手架类似,有开发、构建、测试功能。

参考

如何评价 Ant Design 这个项目(一个设计语言)?
AntD官方网站

发布了336 篇原创文章 · 获赞 369 · 访问量 193万+

猜你喜欢

转载自blog.csdn.net/wangjun5159/article/details/103725950