阿里中後臺UI解決方案 - Fusion

布達發表於2019-01-05
2018年12月16號,Fusion 在 OSC 深圳源創會年終盛典 上對外開源開放了, 這個在阿里內部跑了三年的產品,終於正式對外了。
阿里中後臺UI解決方案 - Fusion
可能一些業界的同學已經在某些渠道聽說過阿里的 Fusion Design
距離上次對外發聲,Fusion 在阿里內部又走了兩年,這兩年內我們技術領域又有了一些突破。這次重點介紹我們的突破吧。不過介紹前還是要說下 Fusion 是做什麼的,畢竟還是有很多同學是第一次聽說的!

1. Fusion 是做什麼的

1.1 解決設計師和前端工作協同的問題

一般一個專案的上線流程基本都要經歷,評審、設計、開發、測試 這幾個階段。
阿里中後臺UI解決方案 - Fusion
而各個階段又可以再深入進去的拆分,大致如下:
  • 評審: 業務互動(產品功能互動),業務邏輯的評審
  • 設計:設計規範(設計師對整個產品在視覺規範上面的定義),視覺設計(繪製視覺稿),標註稿(產出標註搞給到前端)
  • 開發:前端一般都會有一套元件庫;但是元件庫可能和自己業務線的品牌並不是對應的(比如阿里橙、天空藍,基本沒類業務線都會有個自己的品牌),所以第一步需要在元件層面做UI的定製,然後是業務邏輯的開發。
  • 測試:最常見的就是設計師和前端坐在一起兩天專門做UI還原度review;業務邏輯測試是必做流程不多說。
這裡重點說下流程中的兩個問題。

問題1:重複工作

這裡面標黃了的部分表示可能是各個業務線間的重複工作
  • 比如中後臺 UI 的互動都是確定的;
  • 比如設計規範都可以在一個基礎的規範上面做繼承和擴充套件;
  • 比如標註可以通過外掛統一進行規範,而視覺還原、還原度 review 這部分設計師最關心的部分,但是做完了設計稿只是第一步,還是要找前端對真實的頁面再去調整一遍。

問題2:協同問題

協同遇到的問題,上面知乎連結裡面周源的回答已經非常清楚了,我這裡再大概總結下。
  • 因為使用的工具不同對概念的認知不同
阿里中後臺UI解決方案 - Fusion
對陰影的理解不同
  • 設計師的理想和前端的現實問題之間的差別
阿里中後臺UI解決方案 - Fusion
同樣 margin-top:12px 但是得到的間距不一致
  • 每隔一段時間品牌就會升級一次,基礎 UI 翻新,帶來了較大的工作量
  • 設計師間約定的規範沒有很好的落實,已經設計好的設計稿大家共享不便
  • 已經開發好的元件、模組在團隊內沒有形成很好的共享、複用。

Fusion 的工作流

阿里中後臺UI解決方案 - Fusion
去除重複流程,只關注業務
  • 設計師更加方便的做設計
  • 而前端只需關注業務邏輯
阿里中後臺UI解決方案 - Fusion
通過抽象骨架 DPL -> 通過平臺定製產出定製好UI的元件、模板 -> 流入設計師的工具裡面直接拖拽使用 -> 前端直接使用定製好的元件(不需關注元件UI)
  • 設計師使用的同一套規範的元件,產出的設計稿都是同一套規範。(這裡使用sketch外掛名字叫FusionCool)
  • 前端不需要關注元件 UI 還原度。(還原度有問題 = 設計配置的問題)

1.2 不需要再做從0~1的事情

阿里中後臺UI解決方案 - Fusion
  • 設計端使用 sketch 外掛(FusionCool)在 sketch 既能設計頁面,又能沉澱已經設計完成的模板
  • 開發端使用 開發工具 (Iceworks)在專案中既能使用現成的模組,又能沉澱已經開發完成的模組
那未來在Fusion 模組模板達到極度豐富後,使用可以方便的找到各個領域的模組模板來使用,不需要從0開始搭建

2. Fusion 能力點

一個平臺,兩個端
阿里中後臺UI解決方案 - Fusion
一個平臺:fusion.design
兩個工具:1. 開發者工具 Iceworks 2. 設計師工具 FusionCool

2.1 一個平臺

https://fusion.design 可以定製自己的 Design System(以下簡稱DS)

建立自己的 Design System

每個人或者團隊都可以通過 https://fusion.design/sites/new 可以建立自己的站點
阿里中後臺UI解決方案 - Fusion
建立站點
站點提供三種能力:文件編輯、主題管理、物料託管

文件編輯

儲存設計師文件和開發文件
阿里中後臺UI解決方案 - Fusion
設計/開發文件

主題配置管理

整合了可以管理、定製、釋出元件的主題的能力(下文會簡稱為配置平臺)

阿里中後臺UI解決方案 - Fusion

物料託管

可以使用開發好的區塊、模板
阿里中後臺UI解決方案 - Fusion
區塊-程式碼片段
阿里中後臺UI解決方案 - Fusion
模板-腳手架

2.2 兩個工具端

2.2.1 設計師工具 - FusionCool

主題釋出完成後就到了 Sketch 的外掛端 FusionCool,設計師可以在 FusionCool 裡面搜尋 iconfont 所有素材、使用配置好的元件、使用站點的模組模板。

阿里中後臺UI解決方案 - Fusion

阿里中後臺UI解決方案 - Fusion

阿里中後臺UI解決方案 - Fusion

阿里中後臺UI解決方案 - Fusion

2.2.2 開發者工具 - Iceworks

Iceworks 是淘寶飛冰團隊開發的面向前端開發者的 GUI 工具,開發者無須關注環境的問題,並且有海量物料可用。目前已經和 Fusion 的物料體系打通,可以輕鬆使用 Fusion 站點的物料。
阿里中後臺UI解決方案 - Fusion
每個站點有自己的物料源
阿里中後臺UI解決方案 - Fusion
可直接在 Iceworks 配置物料源地址
阿里中後臺UI解決方案 - Fusion
專案開發

3. Fusion 的技術實現

Next 元件

Fusion Next 是基於 React 實現的一套 PC 端的元件庫,這套元件庫已經在阿里內部服務了三年。
github 地址:https://github.com/alibaba-fusion/next
這次開源出來的版本是最近一年基於之前兩年的使用經驗、問題反饋進行重新整理和優化過。具備以下特性

易用性

對比上一個版本 80 + 功能,進行 300+ 優化,元件整體程式碼體積卻減小30%
  • next.min.js 910KB -> 702KB
  • next.min.css 428KB -> 337KB
一共 50+元件,打包下來卻只有 700 多K,這個目前在業界比較少元件有能力做到這點。元件之間依賴關係清晰,複用度高也是體積小的原因。

穩定性

元件單測覆蓋率近90%,提供服務以來沒有產生過起線上事故。

能力增強

國際化、RTL、無障礙能力全面支援。
另外針對中後臺表單大資料量場景做了大量效能優化,比如普通 table 隨著資料不斷增長 render 會越來越慢,大致如下:
                                     
阿里中後臺UI解決方案 - Fusion
Next 引入了 virtual-list ,目前用在了 table 和 select 這兩個使用頻率較高的元件。因為在大資料量(測試過1w節點)下只渲染需要展示的節點(比如20個),所以可以將渲染時長永遠的控制在 0.3s 之內。

FusionCool

程式碼到視覺稿的無損還原

突破 html2svg 的弊端,做到無損還原
早在一年前我們是把設計師在主題配置平臺(直接在web頁面配置元件的主題)的元件直接通過 html2svg 技術直接把元件直接轉換為svg檔案,從而讓設計師可以直接在 sketch 裡面使用。但是這種方案存在的弊端就是還原度不夠(大概95%還原度)。
阿里中後臺UI解決方案 - Fusion
html2svg 的還原度問題
主要原因是 html 採用盒模型 和 svg 的轉換並不是一一對應的,所以這裡永遠有修不完的bug。雖然95% 是好的,但是對於設計端來說是完全不能忍受的。
所以 Fusion 專案小組經過近半年的努力終於突破了還原度的問題,流程圖如下
阿里中後臺UI解決方案 - Fusion
從配置平臺匯出的不再是 html,而是 DesignToken (設計變數),FusionCool 底層使用 Airbnb 提供的 react-sketch 能力寫成的一份 Next 元件,直接通過 DesignToken 覆蓋預設變數,最終在 Sketch 端實時渲染。
阿里中後臺UI解決方案 - Fusion
元件的型別、大小、內容都可以直接在皮膚配置
阿里中後臺UI解決方案 - Fusion
圖表配置可以直接喚起配置皮膚
sketch 端的任何點選都可以通過 Event 的方式在 FusionCool 產生配置皮膚。

4. Fusion 未來

  • 我們會在這半年內讓 Fusion 的物料倉庫能夠極度豐富,可以覆蓋到各行業領域。讓設計師和開發者都不需要再做0-1的事情。
  • 我們期望能夠突破視覺稿轉程式碼的技術難題,讓視覺稿到可用程式碼成為可能。

相關連結


相關文章