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每次都需要對高保真進行規范說明以及關鍵內容的標注。

舊模式如下圖：紅框部分是我們經常重復的內容。

https://zhuanlan.zhihu.com/p/53117538

Fusion Design提供了哪些能力來解決上訴的痛點：

• 物料中心：各種組件、區塊、模板（包含官方（Next等）+其它第三方+咱們自研的）

• UI的可定制能力，設計師根據物料中心的內容定制UI，還可沉淀設計模板。

• 研發都能配合前端工具（iceworks等），開發模塊模板更高效，沉淀業務模板，后續可直接套用模板不用再開發。

• 快速定制、切換主題。

應用fusion design之后，產出過程應該就會像下圖：

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），如不需要則跳過此步。

3.啟動服務

當然你也可以本地運行

4.當頁面變成這樣說明已經啟動成功:(會自動跳轉到項目頁面)

5.打開編輯器