前不久那篇爆🔥的文章 阿里重磅开源中后台UI解决方案 Fusion,相信大家很多人都看过。不少同学使用过 Fusion Design。 Fusion Design 整个体系还是比较庞大的。接下来笔者从一个小白的角度科普 Fusion Design.
Fusion Design 体系
- 组件库 @alifd/next
- Fusion站点
- FusionCool Sketch插件
- Iceworks 客户端
组件库
@alifd/next (后文中简称为 Fusion 组件) 是一套基于 React 的组件库, 我们内部称之为骨架 DPL(Design Pattern Library)。 Github 仓库地址: github.com/alibaba-fus… 文档见: fusion.design/component
简单安利一下 Fusion 组件 的基本特性：
- 组件丰富 50+个组件,覆盖绝大多数场景
- 体积小 next.min.js 702 KB next.min.css 337 KB
- 组件单测覆盖率近 90%
当然,拥有以上的特性只能保证 Fusion 组件可以放心地用在生产环境,不输任何现有的主流组件库的体验。另外,Fusion 组件的杀手锏,最强大的一个能力:
- 主题配置能力，可以通过 Fusion 站点可视化配置主题
- 主题配置能力，可以通过 Fusion 站点可视化配置主题
- 主题配置能力，可以通过 Fusion 站点可视化配置主题
重要的事情说三遍。
Fusion 站点
Fusion 站点是 Fusion Design 管理等能力的集散地。
主要提供以下能力:
- 自有站点管理
- 主题配置
- 其他能力,就不在这篇入门文章一一详述
自有站点
简单理解自有站点就是用户自己创造的一个集合，主题、物料都必须依附于站点。一个站点可以有多套主题,多种物料，多个成员。站点管理管理能力包含新建站点、站点成员管理、主题管理、物料管理。这个就不一一细说,本文后续涉及到的会细说。
主题配置
主题这个词用的一看笔者就是一个前端。用设计师领域,这个类似东西叫做 Design System。在 Fusion Design 站点上, 设计师可以基于 Fusion Design 官方的 Design System 改造成自己专属的 Design System。每个Design System 就是一个自有站点。一个自有站点可以拥有多个主题。主题配置可以编辑 Design Token (这也是设计师语言,前端同学可以把这个等价于 SCSS 变量), 生成主题。
- 主题代码包,可以直接提供给前端使用
- 基础设计素材, 可以通过FusionCool插件直接在Sketch中使用
目前Fusion Design提供4套官方主题
对外正式开放短短一个月,新建 2500 个站点,已经沉淀 2800+ 套主题。 阿里集团内, 天猫 MUI、淘宝 ICE Design、阿里云 Wind、盒马鲜生 Hippo、菜鸟 Walle 等 Design System 都是基于 Fusion Design 深度定制, 满足各个 BU 不同的业务需求。目前集团内服务 40+ BU、项沉淀主题 1500+ 套,服务 2000+ 项目。
物料管理
即可以管理设计师的物料,也就是设计师自己画的设计素材。也可以管理前端程序员用的代码。
文档
帮助文档无需赘言,主要是 站点、Fusion 组件、FusionCool 的文档,以及设计师阐述设计理念的文档。
FusionCool
FusionCool 是一个 Sketch 插件, 辅助设计师做设计稿。 FusionCool 提供以下素材:
- 基础组件
- 图标 Icon
- 图表
- 模块
- 模板
其中 1-3 是根据设计师在配置平台完成的 Design System 自动生成的, Design System 中的某个主题发生变动并且发布以后, FusionCool 中的设计素材就会自动跟着变化。 4-5 素材,目前都是 Fusion Design 官方设计师手绘。
后续设计师自己完成的设计素材也支持通过 FusionCool 导入 Design System,可以很方便地复用。
Iceworks 客户端
Fusion 组件库本身是不依赖任何脚手架, 完全可以通过 cdn 引入，或者整合到 create-react-app 。Fusion 组件库为了方便应用到前端项目,需要一个快速帮忙生成工程项目的脚手架。
ICE 团队开源了 ICE 体系的一系列产品,Fusion Design 把 Iceworks 作为 Fusion 官方主推的开发工具。
Fusion Design 完整工作流程
介绍过 Fusion Design 的 4 大部分。再来说说在 Fusion Design 体系下,工程师和设计师配合,简单来说就 4 个步骤。
- 设计师配置完成一个 Design System,并发布。获得 Sketch Symbol 和 Fusion 组件库主题包
- 设计师使用 Sketch 创作设计稿。
- 工程师安装 Fusion 组件库 与 设计师给予的 主题包。
- 工程师 Coding 实现设计师的稿件
画成简图如下:
更详细的步骤见流程图:
常见问题
Fusion 开始大规模推广也有一段时间了,下面选几个FAQ回复一下。
Fusion Design 和 Ant Design 有什么差异?
简单地回答就是 Ant Design 是一套组件库, Fusion Design 是一个组件库生成工厂。
Ant Design 是一款很优秀的组件库,在社区深受欢迎,影响力极大。代码质量优秀,Fusion 组件库在开发过程中也有所借鉴。Fusion Design 也在阿里内部沉淀打磨了三年, 覆盖大量的BU和业务场景。单从组件库的层面而言, Fusion和AntD的体验差异不大。
参与过SEE Conf的同学都会为AntD优秀的设计理念所折服。可是一千个人眼里有一千个哈姆雷特,各个公司(BU/部门/产品线)对于美的认知是由差异的,而且业务形态的不同也对设计风格有着不同的要求,所有各个公司(BU/部门/产品线)对组件库默认的样式进行定制就常常成为刚需。当用户想要定制组件库的时候, AntD就不是特别方便，需要前端工程师大量修改LESS变量,反复与设计师确定设计稿还原的准确性。AntD 定制主题 / Issue: support dark theme
Fusion 组件库由集团多个 BU 的设计师共同参与设计的，目标是帮助每个 BU 都能定制属于自己的 XXXX Design。所以 Fusion Design 会在 UI 的定制能力上比 Antd 设计得更为通用，以满足各业务线的定制能力。设计师通过Fusion Design 的平台,能够可视化编辑 Fusion 组件库的样式，全程无需工程师参与。
阿里集团内, 天猫 MUI、淘宝 ICE Design、阿里云 Wind、盒马鲜生 Hippo、菜鸟 Walle 等 Design System 都是基于 Fusion Design 深度定制, 满足各个 BU 不同的业务需求。目前集团内服务 40+ BU、项沉淀主题 1500+ 套,服务 2000+ 项目。
Fusion Design和飞冰 (ICE) 是什么关系？
ICE 是 Fusion 的好基友。 Fusion 解决的是前端与设计师的协同问题。 ICE 解决的是前端开发的效率问题。通过海量可复用物料，配套桌面工具极速构建前端应用，提升开发效率。 Fusion 与 ICE 的合作主要体现在以下几点:
- ICE 使用
fusion组件库作为基础组件库 - Fusion 推荐使用 ICE 的 GUI 客户端 Iceworks 作为首选开发工具
- ICE 官方 React 物料和 Fusion官方物料是互通的,双方共同丰富物料生态,推动区块/模板物料的开发模式落地。
设计师使用 FusionCool 创作的设计稿能不能导出成代码?
FusionCool 导出的 HTMl,是带标注的设计稿。
设计稿想要转换成代码,"路漫漫其修远兮,吾将上下而求索"。想要直接导出代码,短期内还做不到。Fusion 团队目前在这方面也有投入和摸索。可以期待一下。
Vue 用户可以用 Fusion Design 么?
Fusion 组件库是基于 React 技术栈实现的。但是 Fusion Design 的组件配置能力和组件的技术栈是无关的。 只要一套组件库按照 Fusion Design 组件开发规范进行开发,就可以接入到 Fusion Design, 获取配置能力。
目前还没有vue组件库接入Fusion Design设计体系，如果你想让你的vue组件库接入进来，欢迎联系讨论~
移动端可以用 Fusion Design 么?
Fusion Design Mobile Web 组件正在开发中，React Native、Weex、flutter 以及小程序用的组件暂无排期......
