Ant Design思考与总结

阿俊C
1,460 阅读9分钟

一、Ant Design介绍

1、简介

Ant Design 提供了一套非常完整的 组件化设计规范 与 组件化编码规范，大幅提高了部分产品的设计研发效率及质量。Ant Design 与 G2 的代码质量和文档质量都非常高，算是阿里提出 “大中台，小前台” 后外面可见的杰出作品。目前有阿里、美团、滴滴、简书等采用。

旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

二、设计角度

仅从设计角度来说**「Material Design和Bootstrap，前者具有严格的设计规范，后者是纯粹的UI框架。 而Ant Design，介于这两者之间」**

  • Material Design Material Design（中文名：材料设计语言），是由Google推出的设计语言，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉” , 最大的特点就是 「学院派」 。因为Google有Android、chrome、G-mail等，用严格的设计语言来统一各平台上的设计效果，显然非常有必要。

  • Bootstrap Bootstrap 是Twitter推出的一个用于前端开发的开源工具包。是一个CSS/HTML框架。 Bootstrap背后也有自己的一套设计思路，但并没有明确提出来，而是把重点放在了组件应用上面。是一个比较好的学习前端技术的轮子，但对于设计来说就不够友好了。Twitter毕竟不是google这类公司，不需要统一的设计语言来规范开发者，其投入成本跟Material Design也有天壤之别。

  • Element UI

    仅仅是一个UI组件库， 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 指南 了解设计指南,帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。 其设计理念是参考Antd Design设计体系。

  • Ant Design Antd Design介于Material Design 和 Bootstrap之间，给出框架的同时，也给出了设计规范。

    作为设计规范的Ant Design，只能说中规中矩，不像Material Design那样背后有统一的隐喻支撑(也没必要)，设计原则、排版这些，基本是现有设计语言中都已经表达的相当清楚的部分，有相当成熟的路线可循。Ant Design虽不像Material Design那样卓越，但单独拿出来也是很杰出的。

三、Ant Design生态

随着 Web 前端技术的发展，以及蚂蚁自身金融业务的发展，蚂蚁金服技术团队还创造了移动端组件库、企业级中后台管理系统、页面生成工具、脚手架市场、动效库、数据可视化库等。为保证用户得到最好的视觉体验，以上所有组件全部遵循一致的设计风格，即 Ant Design。因此，Ant Design 的生态可以说是非常强大。蚂蚁金服的各个项目中，都有使用到 Ant Design。

1.png

1. 设计语言和Antd design组件库

Antd Design不单纯是一种设计语言，还有配套的前端代码实现方案，也就是说采用Antd Design后，UI设计和前端解码研发可同步完成，效率大大提升。

Ant Design 提供了精美全面的组件库，主要用于开发企业级中后台产品，支持现在主流的三大前端开发框架 React(主要)、Vue、Angular，并提供了详细的文档，能够帮助开发者快速上手。

Ant Design Web版： ant.design/index-cn

Ant Design of React 文档： ant.design/docs/react/…

Ant Design of Angular 文档： ng.ant.design/docs/introd…

Ant Design of Vue： www.antdv.com/docs/vue/in…

2、Ant Design Mobile

移动端流行的时代，怎么能少了移动 UI 库呢？Ant Design Mobile 就是 Ant Design 组件库的移动端版本，支持 React 和 Angular 两个主流开发框架，提供了丰富的组件，直接打开文档，复制代码略加修改即可使用组件。

2.png

Ant Design Mobile of React 文档： mobile.ant.design/docs/react/…

Ant Design Mobile of Angular 文档： ng.mobile.ant.design/#/docs/intr…

3、Ant Design Pro

开箱即用的中后台前端系统 ，封装了各种企业后台系统常用的页面和组件，比如监控页、表单页等等，甚至还有强大的图形编辑器！非常适合有 React 开发经验的同学直接使用(不建议小白直接使用，可能不会修改)！

3.png 地址： pro.ant.design/index-cn

4、Ant Design Landing

Ant Design Landing 可以说是前端开发者「偷懒」的神器，不用写代码，就能开发一个个精美的网站首页。 平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用。

4.png 还可以在现有模板的基础上进行定制化编辑，快速搭建一个属于你的专属首页：

5.png

地址： landing.ant.design/index-cn

5、Scaffolds 脚手架

And Design 脚手架市场，允许开发者开发自己的模板页面、项目启动框架、组件、工具等并在此分享。可以在这里找到很多节省开发工作量的现成优秀代码。

6.png 地址： scaffold.ant.design

6、Ant Motion （动效解决方案） motion.ant.design/

使用 Ant Motion 能够快速在 React 框架中使用动画。我们提供了单项，组合动画，以及整套解决方案。

Ant Design里的前端代码实现方案可不是搭建静态的界面这么简单，还包含动效的解决方案，也提供动效设计风格和原则，要知道大部分动效做不出来的场景，都是因为设计师方案和研发代码实现存在一定的鸿沟，有了Ant Motion完整的解决方案，设计和研发工程师沟通协作无障碍，动效实现将会非常轻松。

7.png 地址： motion.ant.design/index-cn

7、AntD Library（Ant Design官方Axure控件库）

其实类似于Ant Design的设计语言搭配前端实现方案的也不止支付宝这一家，但是牛逼的是支付宝还将Ant Design做成了Axure控件库并公开下载，Web和Mobile全都有，简直是造福行业，功德无量。

AntD Library下载地址: library.ant.design/

8、AntUX（站点地图模板）

除了Axure控件库以外，还提供Axure、Sketch、OmniGraffle三种格式的站点地图模板。提升流程图、站点地图、产品整体结构图的绘制效率。据悉，未来还会提供Illustrator版本。

AntUX下载地址： ux.ant.design/

9、Ant V（可视化图表解决方案）

可视化图表能让复杂的逻辑和臃肿的数字变动更清晰更容易理解，Ant V对不同的图表类型提供了详细的介绍、案例和使用建议,并总结出图表设计原则和相关文献推荐，所有的图表的Web和Moblie前端实现方案也一应俱全。

提供了各种类型的图表、数据可视化引擎、地理空间数据可视化、图分析组件、跨平台兼容的移动端数据可视化，还提供了在线制作图表的工具 ChartCube 图表魔方。每一个产品都是大制作！

8.png 用图表魔方制作图表：

9.png AntV 官网： antv.vision/zh

10、Ant Design Charts 图表库

对 AntV 数据可视化组件的封装** ，能够以 Ant Design React 组件的方式直接使用图表，不得不说，真是太贴心了！

10.png 地址： charts.ant.design/

四、企业级前端中后台特点：

  • 比较统一、复杂并、功能丰富的UI交互
  • 典型的UI模板、通用型业务组件、配套设计资源、业务编排可扩展
  • 提供通用型基础功能：主题、布局、图标库、富文本、图表、系统配置、菜单、权限、数据流、API、代理、通讯、调试、单元测试、等等
  • 丰富的基建：技术文档、主题模板、脚手架工具、全链路开发和设计工具体系

五、电商PC管理后台系统

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践。

1、Ant Design Pro基本提供了电商pc大部分业务场景模板和组件：

  • 菜单和按钮的权限、导航
  • 布局(页面容器、卡片、水印组件、指标卡、多选卡)
  • 列表(筛选、分页、批量操作、可编辑表格、拖动排序表格、自定义列表)
  • 表单(表单项、数据结构化、筛选表单、分步表单、浮层表单)
  • 图表(流程图、折线图、区域地图、行政区域地图、散点地图、热力地图、面积图、条形图、饼图、双轴图、进度图、关系图...)
  • 移动端适配：极致的移动端适配
  • 国际化(多语言)

2、缺点：

  • 文档过于详细，前期投入相比element组件要多
  • 对React框架友好，对于vue只有社区做了部分生态
  • 顶部导航，阿里设计理念与通常习惯有别(antd design无顶部导航)
  • 对于自由度很高的PC后台，antd显得有点过渡封装
  • 对于中小型项目，显得略重，储备知识要求丰富

六、电商H5商城系统

Ant Design 组件库的移动端版本，支持 React 和 Angular 两个主流开发框架，提供了丰富的组件，直接打开文档，复制代码略加修改即可使用组件。

特性待探索...

七、总结

Ant Design，可不单纯只是设计原则、控件规范和视觉尺寸，还配套有前端代码实现方案。也就是说采用Ant Design后，UI设计和前端界面研发可同步完成，效率大大提升。

  • 大厂背书
  • 设计语言
  • 面向企业级中后台前端/设计一整套解决方案
  • 一整套前端代码实现方案，产品、UI、前端界面研发同步完成
  • 丰富且活跃的 设计/技术/业务 生态

Ant Design生态可大大提高前端及产研团队的业务迭代效率，是一个值得重视和资源投入的技术积累方向。

avatar
文章
阅读
粉丝