開(kāi)源二期項(xiàng)目專題系列（一）
1. 開(kāi)源項(xiàng)目名稱：Picasso
2. github地址： https://github.com/wuba/Picasso
3. 簡(jiǎn)介：Picasso是58同城推出的一款sketch設(shè)計(jì)稿智能解析工具，可將sketch設(shè)計(jì)稿自動(dòng)解析成還原精準(zhǔn)，可用度高的前端代碼；從而提高前端開(kāi)發(fā)效率，助力業(yè)務(wù)快速發(fā)展。
Picasso于2020年9月份開(kāi)源，具備以下特點(diǎn)：

• UI還原度高，設(shè)計(jì)稿還原精準(zhǔn)。
• 生成代碼可用度高，可維護(hù)性好。
• 解析工具使用方便、操作簡(jiǎn)單，完全自動(dòng)化解析。
• 針對(duì)不同的應(yīng)用場(chǎng)景，提供運(yùn)營(yíng)版和普通版兩種模式。
• 支持導(dǎo)出多種尺寸(1倍 1.5倍 2倍 3倍)圖片，滿足不同屏幕尺寸適配需求。

項(xiàng)目背景UI自動(dòng)化已經(jīng)成為當(dāng)前行業(yè)研究的趨勢(shì)，各大公司都在進(jìn)行相關(guān)方向的研究，sketch設(shè)計(jì)稿存儲(chǔ)的是結(jié)構(gòu)化數(shù)據(jù)，這給我們進(jìn)行UI自動(dòng)化解析生成代碼提供了契機(jī)；為了提升前端開(kāi)發(fā)效率，減少頁(yè)面重構(gòu)的工作，甚至某些場(chǎng)景下完全自動(dòng)化生成代碼，Picasso智能解析工具應(yīng)運(yùn)而生。核心設(shè)計(jì)Picasso的核心解析流程主要包括Symbol解析、圖層重構(gòu)、屬性解析、布局處理。

1. Symbol解析1). Symbol模塊整合

• 設(shè)計(jì)稿源文件中包含以下兩個(gè)json文件：Page頁(yè)面json和Symbol模塊json。
• 我們通過(guò)SymbolID的引用關(guān)系來(lái)推導(dǎo)出模塊之間的依賴關(guān)系，將symbol模塊json整合到各個(gè)Page頁(yè)面json中，便于后續(xù)的解析。

2). Symbol模塊傳參

• 參數(shù)只作用于其子Symbol模塊。
• 相同參數(shù)傳值：外層(父父級(jí))參數(shù)值的權(quán)重高于內(nèi)層(父級(jí))。

3). Symbol模塊縮放

• 根據(jù)SymbolInstance和SymbolMaster的尺寸比例，等比例轉(zhuǎn)換symbolMaster的坐標(biāo)尺寸，作為實(shí)例SymbolInstance的坐標(biāo)尺寸。

通過(guò)對(duì)Symbol的解析，我們得了一個(gè)包含頁(yè)面重構(gòu)所需的完整信息的json。2. 圖層重構(gòu)圖層重構(gòu)主要包含五個(gè)步驟，如下圖：

第一步. 去掉分組
由于UI設(shè)計(jì)師并不了解前端的布局習(xí)慣，他們對(duì)圖層進(jìn)行的分組，往往和前端期望的結(jié)果差別較大，幾乎不可用；看下這張?jiān)O(shè)計(jì)稿：

該設(shè)計(jì)稿的原始分組如下：

前端開(kāi)發(fā)期望的分組如下：

因此，我們需要去掉設(shè)計(jì)稿中已有的分組，在后續(xù)的流程中進(jìn)行重新分組。第二步. 分層
UI設(shè)計(jì)稿中經(jīng)常會(huì)出現(xiàn)多層重疊的結(jié)構(gòu)，例如彈層,吸底欄等；這時(shí)候需要我們進(jìn)行分層處理，然后再對(duì)每層進(jìn)行單獨(dú)處理。

第三步. 重新排序和組合
UI設(shè)計(jì)稿主要專注于視覺(jué)效果，對(duì)設(shè)計(jì)稿中圖層的順序沒(méi)有特別的要求，這就造成我們拿到的設(shè)計(jì)稿中圖層的順序是混亂的。

通過(guò)我們的排序算法，將圖層的按照從左上到右下的順序排列，如此同時(shí)處理圖層之間的父子關(guān)系,優(yōu)化后的順序如下：

第四步. 特征分組
特征分組是Picasso解析過(guò)程的關(guān)鍵環(huán)節(jié)，我們通過(guò)提取圖層的結(jié)構(gòu)特征，如位置，尺寸，類型等因素，進(jìn)行特征分析，尋找相似圖層等方法，優(yōu)化圖層的結(jié)構(gòu)及組合方式，來(lái)提升代碼可用度。特征分組的主要流程如下：

我們來(lái)看下，在不同場(chǎng)景下經(jīng)過(guò)特征分組處理后的解析效果：場(chǎng)景一.列表頁(yè)

場(chǎng)景二. 大類頁(yè)

第五步. 結(jié)構(gòu)簡(jiǎn)化
經(jīng)歷了去組、分層、結(jié)構(gòu)重組、特征分組這四個(gè)環(huán)節(jié)，圖層發(fā)生了多次聚合和重組，這個(gè)過(guò)程中會(huì)產(chǎn)生冗余的無(wú)用結(jié)構(gòu)，需要對(duì)冗余結(jié)構(gòu)進(jìn)行優(yōu)化。

結(jié)構(gòu)優(yōu)化規(guī)則:a. 容器:子元素屬于無(wú)意義元素 => 刪除子元素；b. 容器:子元素有意義，父元素?zé)o意義 => 刪除父元素；c. 圖片:父元素?zé)o背景及邊框 => 刪除父元素；d. 圖片:子元素與父元素位置大小完全相同 => 刪除父元素；e. 畫(huà)板:父元素為畫(huà)板的情況 => 不處理父元素，只處理子元素。

3. 屬性解析
屬性解析主要是將sketch源文件中的屬性一一對(duì)應(yīng)成CSS樣式，這樣就得到了細(xì)節(jié)的視覺(jué)。

4.布局
在結(jié)構(gòu)和樣式解析完成之后，接下來(lái)就是布局處理，布局完成之后，會(huì)進(jìn)行相應(yīng)的代碼生成；至此，解析工作全部完成，我們得到了前端開(kāi)發(fā)需要的UI代碼。

總結(jié)

Picasso經(jīng)過(guò)模塊解析、圖層重構(gòu)、屬性解析、布局流程，完成了sketch源文件到代碼的自動(dòng)化解析，同時(shí)保證了生成的代碼還原精準(zhǔn)、可用度高。

未來(lái)規(guī)劃

Picasso擁抱開(kāi)源之后，會(huì)繼續(xù)進(jìn)行UI自動(dòng)化探索，未來(lái)規(guī)劃如下：

• 持續(xù)優(yōu)化解析算法，提升解析還原度和代碼可用度。
• 支持自定義DSL，便于生成小程序、RN、客戶端等多端代碼。
• 擴(kuò)展解析源，例如PS設(shè)計(jì)稿的解析。

如何貢獻(xiàn)&問(wèn)題反饋

感謝對(duì) Picasso 的支持，可以在 https://github.com/wuba/Picasso 了解我們的項(xiàng)目，歡迎大家提交PR或Issue，向我們提建議或者反饋問(wèn)題。

作者簡(jiǎn)介：

黃文存：58同城 本地服務(wù)技術(shù)部 前端資深工程師 ；主要負(fù)責(zé)UI自動(dòng)化、前端工程化相關(guān)工作。張志華：58同城 本地服務(wù)技術(shù)部 高級(jí)前端架構(gòu)師；技術(shù)委員會(huì)委員 、負(fù)責(zé)本地服務(wù)前端團(tuán)隊(duì)管理工作。
鞠美玉：58同城 本地服務(wù)技術(shù)部 高級(jí)前端工程師 ; 主要負(fù)責(zé)微信生態(tài)前端相關(guān)工作。推薦閱讀：深度學(xué)習(xí)在58商業(yè)排序的應(yīng)用實(shí)踐
多樣性算法在58部落的實(shí)踐和思考
58技術(shù)沙龍 | 第十五期 走進(jìn)微前端
開(kāi)源｜qa_match更新啦——支持輕量級(jí)預(yù)訓(xùn)練、提高問(wèn)答通用性
58技術(shù)沙龍｜第十一期：基于深度學(xué)習(xí)的自動(dòng)問(wèn)答工具——qa_match開(kāi)源項(xiàng)目解析

總結(jié)

以上是生活随笔為你收集整理的sketch 将动图转换为json_开源 | Picasso：sketch设计稿智能解析工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。