開源二期項目專題系列
（一）
1. 開源項目名稱：Picasso
2. github地址：
? ?https://github.com/wuba/Picasso
3. 簡介：Picasso是58同城推出的一款sketch設(shè)計稿智能解析工具，可將sketch設(shè)計稿自動解析成還原精準(zhǔn)，可用度高的前端代碼；從而提高前端開發(fā)效率，助力業(yè)務(wù)快速發(fā)展。
?Picasso于2020年9月份開源，具備以下特點：
UI還原度高，設(shè)計稿還原精準(zhǔn)。
生成代碼可用度高，可維護(hù)性好。
解析工具使用方便、操作簡單，完全自動化解析。
針對不同的應(yīng)用場景，提供運營版和普通版兩種模式。
支持導(dǎo)出多種尺寸(1倍 1.5倍 2倍 3倍)圖片，滿足不同屏幕尺寸適配需求。
項目背景
UI自動化已經(jīng)成為當(dāng)前行業(yè)研究的趨勢，各大公司都在進(jìn)行相關(guān)方向的研究，sketch設(shè)計稿存儲的是結(jié)構(gòu)化數(shù)據(jù)，這給我們進(jìn)行UI自動化解析生成代碼提供了契機；為了提升前端開發(fā)效率，減少頁面重構(gòu)的工作，甚至某些場景下完全自動化生成代碼，Picasso智能解析工具應(yīng)運而生。
核心設(shè)計
Picasso的核心解析流程主要包括Symbol解析、圖層重構(gòu)、屬性解析、布局處理。
1. Symbol解析
1). Symbol模塊整合
設(shè)計稿源文件中包含以下兩個json文件：Page頁面json和Symbol模塊json。
我們通過SymbolID的引用關(guān)系來推導(dǎo)出模塊之間的依賴關(guān)系，將symbol模塊json整合到各個Page頁面json中，便于后續(xù)的解析。
2). Symbol模塊傳參
參數(shù)只作用于其子Symbol模塊。
相同參數(shù)傳值：外層(父父級)參數(shù)值的權(quán)重高于內(nèi)層(父級)。
3). Symbol模塊縮放
根據(jù)SymbolInstance和SymbolMaster的尺寸比例，等比例轉(zhuǎn)換symbolMaster的坐標(biāo)尺寸，作為實例SymbolInstance的坐標(biāo)尺寸。
通過對Symbol的解析，我們得了一個包含頁面重構(gòu)所需的完整信息的json。
2. 圖層重構(gòu)
圖層重構(gòu)主要包含五個步驟，如下圖：
第一步. 去掉分組
由于UI設(shè)計師并不了解前端的布局習(xí)慣，他們對圖層進(jìn)行的分組，往往和前端期望的結(jié)果差別較大，幾乎不可用；看下這張設(shè)計稿：
該設(shè)計稿的原始分組如下：
前端開發(fā)期望的分組如下：
因此，我們需要去掉設(shè)計稿中已有的分組，在后續(xù)的流程中進(jìn)行重新分組。
第二步. 分層
UI設(shè)計稿中經(jīng)常會出現(xiàn)多層重疊的結(jié)構(gòu)，例如彈層,吸底欄等；這時候需要我們進(jìn)行分層處理，然后再對每層進(jìn)行單獨處理。
第三步. 重新排序和組合
UI設(shè)計稿主要專注于視覺效果，對設(shè)計稿中圖層的順序沒有特別的要求，這就造成我們拿到的設(shè)計稿中圖層的順序是混亂的。
通過我們的排序算法，將圖層的按照從左上到右下的順序排列，如此同時處理圖層之間的父子關(guān)系,優(yōu)化后的順序如下：
第四步. 特征分組
特征分組是Picasso解析過程的關(guān)鍵環(huán)節(jié)，我們通過提取圖層的結(jié)構(gòu)特征，如位置，尺寸，類型等因素，進(jìn)行特征分析，尋找相似圖層等方法，優(yōu)化圖層的結(jié)構(gòu)及組合方式，來提升代碼可用度。
特征分組的主要流程如下：
我們來看下，在不同場景下經(jīng)過特征分組處理后的解析效果：
場景一.列表頁
場景二. 大類頁
第五步. 結(jié)構(gòu)簡化
經(jīng)歷了去組、分層、結(jié)構(gòu)重組、特征分組這四個環(huán)節(jié)，圖層發(fā)生了多次聚合和重組，這個過程中會產(chǎn)生冗余的無用結(jié)構(gòu)，需要對冗余結(jié)構(gòu)進(jìn)行優(yōu)化。
結(jié)構(gòu)優(yōu)化規(guī)則:
a. 容器:子元素屬于無意義元素 => 刪除子元素；
b. 容器:子元素有意義，父元素?zé)o意義 => 刪除父元素；
c. 圖片:父元素?zé)o背景及邊框 => 刪除父元素；
d. 圖片:子元素與父元素位置大小完全相同 => 刪除父元素；
e. 畫板:父元素為畫板的情況 => 不處理父元素，只處理子元素。
3. 屬性解析
屬性解析主要是將sketch源文件中的屬性一一對應(yīng)成CSS樣式，這樣就得到了細(xì)節(jié)的視覺效果。
解析規(guī)則
4. 布局
在結(jié)構(gòu)和樣式解析完成之后，接下來就是布局處理，如下圖：
布局完成之后，會進(jìn)行相應(yīng)的代碼生成；至此，解析工作全部完成，我們得到了前端開發(fā)需要的UI代碼。
總結(jié)
Picasso經(jīng)過模塊解析、圖層重構(gòu)、屬性解析、布局流程，完成了sketch源文件到代碼的自動化解析，同時保證了生成的代碼還原精準(zhǔn)、可用度高。
未來規(guī)劃
Picasso擁抱開源之后，會繼續(xù)進(jìn)行UI自動化探索，未來規(guī)劃如下：
持續(xù)優(yōu)化解析算法，提升解析還原度和代碼可用度。
支持自定義DSL，便于生成小程序、RN、客戶端等多端代碼。
擴展解析源，例如PS設(shè)計稿的解析。
如何貢獻(xiàn)&問題反饋
感謝對 Picasso 的支持，可以在 https://github.com/wuba/Picasso 了解我們的項目，歡迎大家提交PR或Issue，向我們提建議或者反饋問題。
作者簡介：
黃文存：58同城 本地服務(wù)技術(shù)部 前端資深工程師 ；主要負(fù)責(zé)UI自動化、前端工程化相關(guān)工作。
張志華：58同城 本地服務(wù)技術(shù)部 高級前端架構(gòu)師；技術(shù)委員會委員 、負(fù)責(zé)本地服務(wù)前端團隊管理工作。
鞠美玉：58同城 本地服務(wù)技術(shù)部 高級前端工程師 ; 主要負(fù)責(zé)微信生態(tài)前端相關(guān)工作。
推薦閱讀：
深度學(xué)習(xí)在58商業(yè)排序的應(yīng)用實踐
開源｜qa_match更新啦——支持輕量級預(yù)訓(xùn)練、提高問答通用性
58技術(shù)沙龍｜第十一期：基于深度學(xué)習(xí)的自動問答工具——qa_match開源項目解析
