APP下载

阿里巴巴中后台UI解决方案——Fusion Design

消息来源:baojiabao.com 作者: 发布时间:2026-05-13

报价宝综合消息阿里巴巴中后台UI解决方案——Fusion Design

什么是Fusion Design?

Fusion Design是阿里巴巴开发的一套企业级的中后端UI解决方案。致力于解决设计师和前端在工作协同、产品体验一致性、开发效率方面的问题。

官网和Github地址

https://fusion.design/

https://github.com/alibaba-fusion/next

@alifd/next

@alifd/next 是 Fusion Design 中的面向 PC 端可配置元件库,基于 React 实现,支援所有现代浏览器和 IE9+;

特点

主题多样, 通过配置平台切换主题丰富且优质的 React 元件设计稿-> 元件 -> 区块 -> 专案模板,提供全流程的开发工具与设计工具

快速上手

安装:

推荐使用npm安装npm install @alifd/next --save

浏览器直接引用官方提供的js依赖:

@alifd/next 基于 [email protected] 开发,目前并不相容 [email protected] 及其以下的版本,且将 react/react-dom 作为 peerDependencies,需要使用者手动提前安装或引入。@alifd/next 在处理日期时间相关元件逻辑时,使用了 moment 库,且将 moment 作为 peerDependencies,需要使用者手动提前安装或引入。具体如何运用到专案中,大家可参考官网文件。

元件介绍

官网将元件分为两大部分,一部分是基础元件,另一部分是业务元件,一下截图是它一部分元件

基础元件

业务元件官方并未给出,但是选单栏有一个模组栏,内容如下

网站提供的模板

官方网站提供了适合很多专案的模板,截了几张图感受一下,我大致看了下,估计模板都快有上百种了,包括了各个行业各种场景使用的模板,还有大屏展示等等,下面只是我随便截得几张图,官网还提供了各个模板的体验地址,一时半会体验不完,使用也很简单,官方提供npn包,一起来感受下

模板截图:

官方模板icedesign体验:

CMS模板:

大屏展示:

总结

同antd Design相比,它的思想和理念更先进,提供了大量的模板可供使用,而且设计师和工程师无缝配合,大大提升了工作体验和工作效率。
2020-01-25 15:06:00

相关文章