Fusion Design

发表于 更新于 分类于

背景

因为团队要用fusion design，所以按我的习惯我得先知道他是什么、为什么、能做什么，我才好下手。

开始

先不负责任的下一个结论，fusion design是个撒子？

答案：

一个平台： fusion.design

两个工具：

  1. 开发者工具 Iceworks
  2. 设计师工具 FusionCool

可以看作是下图这样纠缠：

Fusion Design

fusion design = 一套基础组件库 @alifd/next + 主题定制平台 https://fusion.design + 设计师工具 FusionCool+ 物料中心 。

所以更确切的说 Fusion Design算是一套体系，是一种旨在提升设计与开发之间 UI 构建效率的工作方式 ，我认为理解这点很重要，不然可能咱们用半天还以为他就是另一个库就像我们之前用的antd一样，其实完全不是一回事。

Fusion Design能解决哪些痛点：

  1. 【协作成本】内部（UCD和研发）协作问题，不再需要因为对概念、规范、复用性等问题UCD和研发不断沟通。

  2. 用户体验一致性问题 ，不同业务功能或者不同迭代功能，同样功能的交互和组件用户体验不一致。

  3. 【时间成本】重复工作问题，比如不断的review还原度不断的修正、UCD每次都需要对高保真进行规范说明以及关键内容的标注。

    旧模式如下图：红框部分是我们经常重复的内容。

Fusion Design提供了哪些能力来解决上诉的痛点：

  • 物料中心：各种组件、区块、模板（包含官方（Next等）+其它第三方+咱们自研的）

  • UI的可定制能力，设计师根据物料中心的内容定制UI，还可沉淀设计模板。

  • 研发都能配合前端工具（iceworks等），开发模块模板更高效，沉淀业务模板，后续可直接套用模板不用再开发。

  • 快速定制、切换主题。

    应用fusion design之后，产出过程应该就会像下图：

@alifd/next

  • Next 是基于 Alibaba Fusion Design 的设计理念实现的一套骨架DPL(Design Pattern Library)类似于咱们之前使用的antd。配合 fusion.design 使用可以实现换肤的能力。
  • 基于React的组件库。 可以理解**Next**是fusion design的技术实现。

小结一下

所以综上所述，引人fusion design后，理想状态下设计师和研发产出页面（功能）的过程应该会如下面两张图所示：

物料中心

可以理解成一个仓库，类似maven仓库或者npm仓库，里面可包含用开发好的物料(区块、模板、组件)，该物料中心与sketch、iceworks是互通的，相互间可上传可下载。

FusionCool

FusionCool：组件分发工具，主要面向所有设计师。当组件构建者完成组件设计发布组件后，每位设计师手上的Fusion Cool都会“自动”接收到构建者的发布的组件样式，确保无缝衔接组件更新。

FusionCool也可以简单理解为是设计端使用的sketch 插件，达到sketch 既能设计页面，又能沉淀已经设计完成的模板。即设计师使用的同一套规范的组件，产出的设计稿都是同一套规范。

IceWorks

飞冰(ICE) 是一套基于 React 的中后台应用解决方案，ICE 包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用，开发者无须关注环境的问题，并且有海量物料可用。目前已经和 Fusion 的物料体系打通，可以轻松使用 Fusion 站点的物料。

Iceworks 是淘宝飞冰团队开发的面向前端开发者的 GUI 工具，开发者无须关注环境的问题，并且有海量物料可用。目前已经和 Fusion 的物料体系打通，可以轻松使用 Fusion 站点的物料。

fusion design的御用开发者工具，基于其开发各种组件丰富fusion design站点的物料中心，当然iceworks也能轻松使用 Fusion 站点的物料，两者互通。

总之

我个人认为fusion design的价值在于提升工作效率，因为它改造了前端（设计师和研发）的工作方式，减少了重复工作的内容，减少了沟通以及甩锅的成本，通过fusion design这个平台，让设计师和研发都能深度参与产品中来且这种参与是互补共赢的，它让设计师和研发之间的一些壁垒或者冲突点慢慢的消失了。

另外

对于角色（设计、研发）来说：可能最大变化就是对于通用性的、沉淀下来的物料，UCD才是老板，这块的样式布局等需要UCD统一把关收口，研发只需要更新包就行。总体上就是UCD的工作内容会增加但是研发时间会减少，协作时间也会减少，同时体验一致性也能达到要求。我估计能达到这种状态应该就可以要自行车了吧？

但是这玩意都是线上的，不知道能不能支持本地搭一套（如果不能搭是不是又不能要自行车了）？

题外篇：iceworks server

如需使用iceworks提供的一些快捷能力，比如新建项目（基于fusion design、react、typescript）、项目管理等。

用于练手刚好。

1.安装iceworks

npm install iceworks -g –registry=https://registry.npm.taobao.org

每个命令大家都可以玩一玩，我下面只介绍start的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
D:\baymax_projects\fusion-design-one>iceworks -h
Usage: iceworks <command> [options]

Options:
  -V, --version                           output the version number
  -h, --help                              output usage information

Commands:
  start                                   start and open the iceworks
  init [type] [npmName]                   init project/material/component by template
  add [options] [materialType] [npmName]  add block to current directory
  generate                                generate material collection data(material.json)
  sync [options]                          sync materials data to Fusion Material Center
  use <version>                           specify the iceworks-core version
  config [type] [key] [value]             operate iceworks global config

  Run iceworks <command> --help for detailed usage of given command.
2.启动 安装iceworks-server

windows:

1
iceworks  start

linux：

1
2
3
#!/bin/sh
# iceworks start
iceworks # open http://localhost:8000/

3.若提示是否安装iceworks-server 直接Enter 默认是 稍等几分钟 自动启动浏览器

iceworks server使用方法

1.打开项目,(首先你要有项目包)

2.安装依赖

如果要切换cnpm源，设置包管理工具cnpm（前提是现状了cnpm），如不需要则跳过此步。

img

img

3.启动服务

当然你也可以本地运行

4.当页面变成这样说明已经启动成功:(会自动跳转到项目页面)

5.打开编辑器

img

感谢：