V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tao1991123
V2EX  ›  程序员

可配置组件库 Fusion Design 了解一下

  •  1
     
  •   tao1991123 · 2019-01-14 10:18:01 +08:00 · 11174 次点击
    这是一个创建于 1900 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前不久那篇爆🔥的文章 阿里重磅开源中后台 UI 解决方案 Fusion,相信大家很多人都看过。不少同学使用过 Fusion Design。 Fusion Design 整个体系还是比较庞大的。接下来笔者从一个小白的角度科普 Fusion Design.

    Fusion Design 体系

    Fusion Design 主要就是 4 个组成部分

    • 组件库 @alifd/next
    • Fusion 站点
    • FusionCool Sketch 插件
    • Iceworks 客户端

    组件库

    @alifd/next (后文中简称为 Fusion 组件) 是一套基于 React 的组件库, 我们内部称之为骨架 DPL(Design Pattern Library)。 Github 仓库地址: https://github.com/alibaba-fusion/next 文档见: https://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 提供以下素材:

    1. 基础组件
    2. 图标 Icon
    3. 图表
    4. 模块
    5. 模板

    其中 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 个步骤。

    1. 设计师配置完成一个 Design System,并发布。获得 Sketch Symbol 和 Fusion 组件库主题包
    2. 设计师使用 Sketch 创作设计稿。
    3. 工程师安装 Fusion 组件库 与 设计师给予的 主题包。
    4. 工程师 Coding 实现设计师的稿件

    画成简图如下: 上图就是由 FusionCool 辅助创作完成

    更详细的步骤见流程图:

    常见问题

    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 的合作主要体现在以下几点:

    1. ICE 官方 react 物料使用fusion 组件库作为默认组件库
    2. Fusion 推荐使用 ICE 的 GUI 客户端 Iceworks 作为首选开发工具
    3. ICE 官方 React 物料和 Fusion 官方物料是互通的(春节前完成),双方共同丰富物料生态,推动区块 /模板物料的开发模式落地。

    设计师使用 FusionCool 创作的设计稿能不能导出成代码?

    FusionCool 导出的 HTMl,是带标注的设计稿。 设计稿想要转换成代码, "路漫漫其修远兮,吾将上下而求索"。想要直接导出代码,短期内还做不到。Fusion 团队目前在这方面也有投入和摸索。可以期待一下。

    Vue 用户可以用 Fusion Design 么?

    Fusion 组件库是基于 React 技术栈实现的。但是 Fusion Design 的组件配置能力和组件的技术栈是无关的。 只要一套组件库按照 Fusion Design 组件开发规范进行开发,就可以接入到 Fusion Design, 获取配置能力。 ElementUI 团队已经开始 Fusion Design 配置能力的对接工作,敬请期待....

    移动端可以用 Fusion Design 么?

    Fusion Design Mobile Web 组件正在开发中,React Native、Weex、flutter 以及小程序用的组件暂无排期......

    30 条回复    2019-08-13 09:46:34 +08:00
    o0
        1
    o0  
       2019-01-14 10:23:27 +08:00   ❤️ 2
    有彩蛋( di lei )么?
    CDL
        2
    CDL  
       2019-01-14 10:29:17 +08:00
    呵呵,手动狗头
    tao1991123
        3
    tao1991123  
    OP
       2019-01-14 10:30:33 +08:00
    @CDL Why ?
    southsala
        4
    southsala  
       2019-01-14 11:50:50 +08:00
    和 Ant 有什么区别啊
    tanranran
        5
    tanranran  
       2019-01-14 12:00:36 +08:00
    @southsala #4 #4 设计师设计完之后,直接生成 对应的组件
    hilbertz
        6
    hilbertz  
       2019-01-14 12:01:33 +08:00
    阿里系的东西,不敢用
    tao1991123
        7
    tao1991123  
    OP
       2019-01-14 12:14:20 +08:00
    @southsala #4 文章后面的常见问题部分有这个问题 Fusion Design 和 Ant Design 有什么差异?
    tao1991123
        8
    tao1991123  
    OP
       2019-01-14 12:15:10 +08:00
    @hilbertz #6 为啥 o(╯□╰)o
    ideacco
        9
    ideacco  
       2019-01-14 14:31:31 +08:00
    然而我们用 VUE 啊。
    liang511
        10
    liang511  
       2019-01-14 14:43:28 +08:00
    @tao1991123 之前 ant 的圣诞彩蛋了解一下
    tao1991123
        11
    tao1991123  
    OP
       2019-01-14 14:51:42 +08:00   ❤️ 1
    @ideacco #9 与 elementui 的合作进行中 (*^__^*) ……
    drush
        12
    drush  
       2019-01-14 14:53:12 +08:00
    害怕清明节时会自动上香
    tao1991123
        13
    tao1991123  
    OP
       2019-01-14 16:40:32 +08:00
    @drush #12 老哥 别闹 不会的放心
    acthtml
        14
    acthtml  
       2019-01-14 16:47:19 +08:00
    @drush - -!
    ywisax
        15
    ywisax  
       2019-01-14 17:10:44 +08:00
    关注下
    milllky
        16
    milllky  
       2019-01-14 17:41:56 +08:00
    首页做得比控件好太多,不如 ant design 好看。
    myljs
        17
    myljs  
       2019-01-14 20:53:17 +08:00
    @milllky 组件样式可以自己配置的。
    NetCobra
        18
    NetCobra  
       2019-01-14 22:33:23 +08:00
    @tao1991123 放心不放心不是你说了能算的,信任这种东西崩溃很容易,要建立起来很难。
    我是真心害怕什么时候蹦出来个彩蛋(被知乎某回答称为跳蛋……)
    maemolee
        19
    maemolee  
       2019-01-14 23:23:07 +08:00
    阿里的啊?算了算了。
    hellowes
        20
    hellowes  
       2019-01-14 23:36:49 +08:00
    这种项目最好不要踩坑进去,阿里的东西实在不敢恭维,彩蛋+封闭+不负责任
    hellowes
        21
    hellowes  
       2019-01-14 23:37:16 +08:00
    彩蛋再来一波如何?猪头
    hellowes
        22
    hellowes  
       2019-01-14 23:37:36 +08:00
    猪头->狗头
    手误
    joouis
        23
    joouis  
       2019-01-15 01:18:25 +08:00 via Android   ❤️ 1
    在内部时用了小一年,总的来说理想很美好,现实很... 结论是不推荐
    yexiaoxing
        24
    yexiaoxing  
       2019-01-15 02:10:03 +08:00
    登录 fusion.design 默认生成的用户名不符合你们的用户名规则……
    生成了个 username_milesecondtimestamp 这样格式的用户名……
    yexiaoxing
        25
    yexiaoxing  
       2019-01-15 02:12:08 +08:00
    然后,创建了站点之后,跳到了 https://fusion.design/<id>/setting。这个不是问题,问题是,为什么我点了配置主题之后,没有 tooltip 新手引导,但是点下 首页( https://fusion.design/<id>/) 就出现了?
    loading
        26
    loading  
       2019-01-15 06:54:58 +08:00 via Android
    我这种菜鸡只能等 vue 版了,大概什么时候呢
    tao1991123
        27
    tao1991123  
    OP
       2019-01-15 12:20:17 +08:00
    @yexiaoxing #24 可以扫码加一下钉钉群反馈一下 V2EX 感谢试用 O(∩_∩)O 哈哈~
    tao1991123
        28
    tao1991123  
    OP
       2019-01-15 12:20:58 +08:00   ❤️ 1
    @loading #26 具体的进度 由 elementui 团队把控
    Jhonson
        29
    Jhonson  
       2019-06-18 15:08:23 +08:00
    百花齐放!顶~
    a7217107
        30
    a7217107  
       2019-08-13 09:46:34 +08:00
    有些人真的为了黑而黑,antd,antv,egg,weex,druid,fastjson,dubbo 等等一系列的开源项目,给社区做了多少贡献。 (来 v 站大半年了,感觉社区环境越来越....
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1061 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:58 · PVG 02:58 · LAX 11:58 · JFK 14:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.