01.契機(jī)

每一個(gè)偉大的項(xiàng)目背后總有一個(gè)必要的契機(jī)和一個(gè)有趣的故事，而我們的故事是這樣開始的。

在我們團(tuán)隊(duì)設(shè)計(jì)師之間經(jīng)常會(huì)聽到這樣一些問(wèn)題：

1、這個(gè)項(xiàng)目是誰(shuí)做的？有沒(méi)有源文件？
2、這個(gè)產(chǎn)品是設(shè)計(jì)規(guī)范是什么？我這樣做符合規(guī)范嗎？
3、之前那誰(shuí)誰(shuí)離職了，文件誰(shuí)能找到？

總體說(shuō)來(lái)就是設(shè)計(jì)文件管理難，規(guī)范一致性統(tǒng)一難，設(shè)計(jì)師對(duì)接協(xié)同難

在技術(shù)同學(xué)之間也會(huì)存在一些問(wèn)題：

1、這部分代碼是誰(shuí)寫的，怎么這么亂？
2、技術(shù)框架已經(jīng)落后了，我們現(xiàn)在不這么寫了，再優(yōu)化也沒(méi)有價(jià)值，我們計(jì)劃重構(gòu)代碼
3、大量重復(fù)的UI還原工作，研發(fā)變身”切圖仔”
4、明明是按照設(shè)計(jì)稿還原，設(shè)計(jì)同學(xué)總說(shuō)差1px

而在產(chǎn)品側(cè)的問(wèn)題卻是這樣的：
每次都做了很多重復(fù)的事，我們版本需求量太有限了，這些問(wèn)題大大影響了產(chǎn)品節(jié)湊和業(yè)務(wù)擴(kuò)展的要求。

我們?cè)诠ぷ鲄f(xié)同開發(fā)過(guò)程中，一直缺少一個(gè)連通器，導(dǎo)致產(chǎn)品、設(shè)計(jì)、技術(shù)溝通協(xié)作不便，設(shè)計(jì)和技術(shù)規(guī)范落地較難。同時(shí)因?yàn)槿鄙偃萜鞒休d導(dǎo)致各種資源和文件共享不便。因此使得我們重復(fù)設(shè)計(jì)和重復(fù)開發(fā)內(nèi)容較多，影響了我們版本需求的吞吐量。

對(duì)于一款成熟的產(chǎn)品來(lái)說(shuō)，夯實(shí)設(shè)計(jì)與技術(shù)的框架基礎(chǔ)地基，這樣才能助力我們?cè)谏峡丈w更壯麗的樓閣，基于這種契機(jī)，我們希望做一次徹底的改變

1

02.故事

生逢亂世總有一些拯救世界的英雄出現(xiàn)。當(dāng)我們帶著想法和前端專家“存哥”一起聊的時(shí)候，沒(méi)想到我們雙方的想法不謀而合，甚至在細(xì)節(jié)和方向都出奇的一致。經(jīng)過(guò)幾次深度的協(xié)商溝通，我們快速制定了解決方案，同時(shí)招募研發(fā)團(tuán)隊(duì)，快速的開展項(xiàng)目，帶著激情與理想，「58UXD」與「前端技術(shù)委員會(huì)」發(fā)起了共建項(xiàng)目「風(fēng)火輪」。

主要通過(guò)兩方面來(lái)解決問(wèn)題：

設(shè)計(jì)插件提效：通過(guò)Sketch插件進(jìn)入設(shè)計(jì)師的工作流程，聚合設(shè)計(jì)資產(chǎn)，解決設(shè)計(jì)規(guī)范落地、設(shè)計(jì)資產(chǎn)可視化承載，提升設(shè)計(jì)規(guī)范和設(shè)計(jì)資產(chǎn)的使用率，增強(qiáng)資源共享避免重復(fù)設(shè)計(jì)。

設(shè)計(jì)協(xié)同管理：通過(guò)風(fēng)火輪協(xié)作平臺(tái)進(jìn)行團(tuán)隊(duì)資產(chǎn)、項(xiàng)目管理，實(shí)現(xiàn)設(shè)計(jì)稿在線標(biāo)注解析，供研發(fā)同學(xué)在線查看研發(fā)。

在這里有的同學(xué)就會(huì)說(shuō)，這不就是做了一個(gè)藍(lán)湖嗎？

那可就想簡(jiǎn)單了，我們的終極目標(biāo)是：“把設(shè)計(jì)稿變成終端代碼”。通過(guò)智能解析，將設(shè)計(jì)稿自動(dòng)化解析生成代碼，提升產(chǎn)研效率。

那么背后的邏輯和我們的思路又是什么呢？

3

03.代碼生成

在我們集團(tuán)設(shè)計(jì)師Sketch的使用率高達(dá)90%，因此我們選擇了Sketch作為UI自動(dòng)生成代碼的設(shè)計(jì)源，通過(guò)Picasso解析工具進(jìn)行智能解析，高精度還原設(shè)計(jì)稿，支持多種代碼格式，滿足各種場(chǎng)景需求。

設(shè)計(jì)稿生成代碼的主要流程如下圖：

設(shè)計(jì)稿生成代碼的實(shí)際效果展示：

為了提升操作效率，我們將Picasso工具在風(fēng)火輪協(xié)作平臺(tái)直接內(nèi)置，這樣設(shè)計(jì)師上傳設(shè)計(jì)稿交付需求的同時(shí)，風(fēng)火輪自動(dòng)將設(shè)計(jì)稿轉(zhuǎn)換成代碼。代碼生成的UI界面與設(shè)計(jì)稿幾乎完全一致，并且代碼的可用度高，生成代碼的結(jié)構(gòu)布局合理、可維護(hù)性高，提供了兩種模式: 專注于高精度解析的運(yùn)營(yíng)版和專注于代碼可用度的普通版，并且支持多種格式、尺寸的切圖，導(dǎo)出來(lái)滿足不同平臺(tái)、不同尺寸屏幕的需求。

為了保證智能解析代碼的還原度，我們通過(guò)以下幾個(gè)方式來(lái)處理解析問(wèn)題：

1、還原度計(jì)算—感知哈希算法

我們將自動(dòng)生成的UI頁(yè)面通過(guò)puppeteer進(jìn)行截圖，通過(guò)感知哈希算法與原圖進(jìn)行像素對(duì)比，計(jì)算出生成頁(yè)面的真實(shí)還原度。

2、樣式解析-漸變解析方案

在漸變處理方面，首先根據(jù)漸變類型分為線性漸變、徑向漸變、環(huán)形漸變?nèi)N，然后根據(jù)漸變值、位置等信息計(jì)算漸變方向距離及漸變節(jié)點(diǎn)之間的比例，最終生成漸變樣式代碼。

3、圖片處理—精準(zhǔn)切圖方案

為了精準(zhǔn)還原圖片，我們通過(guò)調(diào)用sketch API進(jìn)行圖層截圖的方式，計(jì)算不規(guī)則圖形的精準(zhǔn)位置及大小，精準(zhǔn)切圖是保證我們的高精度還原頁(yè)面的關(guān)鍵；

為了保證智能解析代碼的可用度，我們通過(guò)以下三個(gè)方式來(lái)處理可用度問(wèn)題：

1、結(jié)構(gòu)重組

由于設(shè)計(jì)同學(xué)輸出設(shè)計(jì)稿是以視覺(jué)為主，不太關(guān)注分組結(jié)構(gòu)的合理性，因此我們需要將原有的分組去掉，按照符合開發(fā)習(xí)慣的方式進(jìn)行重新分組。

2、特征分組

針對(duì)列表這種重復(fù)結(jié)構(gòu)的場(chǎng)景，我們通過(guò)特征分組算法識(shí)別相似結(jié)構(gòu)，減少代碼重復(fù)，提升生成代碼的合理性

3、樣式優(yōu)化-樣式精簡(jiǎn)、樣式排序

樣式精簡(jiǎn)及排序，使得生成代碼更貼近工程師”手寫代碼”，代碼可維護(hù)性更高。

w

04.能力與規(guī)劃

我們做一下回顧，20年12月30日成功將「風(fēng)火輪」研發(fā)上線以來(lái)，歷經(jīng)7個(gè)月的時(shí)間，用戶覆蓋了集團(tuán)85%的產(chǎn)研團(tuán)隊(duì)，并且覆蓋了大多數(shù)的子公司。Sketch Plugin以容器的形式承載了6000+的設(shè)計(jì)資產(chǎn)和14調(diào)業(yè)務(wù)的設(shè)計(jì)規(guī)范，智能生成了1500+代碼。

風(fēng)火輪上線7個(gè)多月的時(shí)間，經(jīng)歷的3次版本迭代，上線核心功能點(diǎn)20+；風(fēng)火輪插件發(fā)布了2個(gè)大版本，20多個(gè)小版本迭代，快速解決了100+的線上BUG，不斷完善功能和優(yōu)化體驗(yàn)。并且建立了完善的用戶反饋機(jī)制，以最快的的方式解決用戶訴求。

目前為止我們生成代碼覆蓋了常見終端代碼格式：Web、Mini Programs、React Native、Flutter、iOS、Android等。代碼解析還原精度達(dá)99.8%，生成終端代碼可用度85%（目前行業(yè)頂級(jí)）

在未來(lái)我們要以解放生產(chǎn)力為目標(biāo)，繼續(xù)深耕從設(shè)計(jì)到代碼的路線，以風(fēng)火輪為媒介，將產(chǎn)品、設(shè)計(jì)、開發(fā)緊密的連接起來(lái)，為我們內(nèi)部協(xié)同發(fā)光發(fā)熱。同時(shí)也歡迎更多的設(shè)計(jì)師和研發(fā)工程師加入我們，共同構(gòu)建風(fēng)火輪生態(tài)，編寫故事的下一篇章。

原文地址： 58UXD（公眾號(hào)）

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》把設(shè)計(jì)變成終端代碼｜風(fēng)火輪背后的故事和規(guī)劃

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)