前不久那篇爆?的文章 阿里重磅開源中後臺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 倉庫地址: 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 實現設計師的稿件
畫成簡圖如下:
上圖就是由 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 的合作主要體現在以下幾點:
- ICE 使用
fusion元件庫作為基礎元件庫 - Fusion 推薦使用 ICE 的 GUI 客戶端 Iceworks 作為首選開發工具
- 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 以及小程式用的元件暫無排期……