01.契機(jī)
每一個偉大的項(xiàng)目背后總有一個必要的契機(jī)和一個有趣的故事，而我們的故事是這樣開始的。
在我們團(tuán)隊設(shè)計師之間經(jīng)常會聽到這樣一些問題：
1、這個項(xiàng)目是誰做的？有沒有源文件？
2、這個產(chǎn)品是設(shè)計規(guī)范是什么？我這樣做符合規(guī)范嗎？
3、之前那誰誰離職了，文件誰能找到？
總體說來就是設(shè)計文件管理難，規(guī)范一致性統(tǒng)一難，設(shè)計師對接協(xié)同難
在技術(shù)同學(xué)之間也會存在一些問題：
1、這部分代碼是誰寫的，怎么這么亂？
2、技術(shù)框架已經(jīng)落后了，我們現(xiàn)在不這么寫了，再優(yōu)化也沒有價值，我們計劃重構(gòu)代碼
3、大量重復(fù)的UI還原工作，研發(fā)變身”切圖仔”
4、明明是按照設(shè)計稿還原，設(shè)計同學(xué)總說差1px
而在產(chǎn)品側(cè)的問題卻是這樣的：
每次都做了很多重復(fù)的事，我們版本需求量太有限了，這些問題大大影響了產(chǎn)品節(jié)湊和業(yè)務(wù)擴(kuò)展的要求。
我們在工作協(xié)同開發(fā)過程中，一直缺少一個連通器，導(dǎo)致產(chǎn)品、設(shè)計、技術(shù)溝通協(xié)作不便，設(shè)計和技術(shù)規(guī)范落地較難。同時因?yàn)槿鄙偃萜鞒休d導(dǎo)致各種資源和文件共享不便。因此使得我們重復(fù)設(shè)計和重復(fù)開發(fā)內(nèi)容較多，影響了我們版本需求的吞吐量。
對于一款成熟的產(chǎn)品來說，夯實(shí)設(shè)計與技術(shù)的框架基礎(chǔ)地基，這樣才能助力我們在上空蓋更壯麗的樓閣，基于這種契機(jī)，我們希望做一次徹底的改變
1
02.故事
生逢亂世總有一些拯救世界的英雄出現(xiàn)。當(dāng)我們帶著想法和前端專家“存哥”一起聊的時候，沒想到我們雙方的想法不謀而合，甚至在細(xì)節(jié)和方向都出奇的一致。經(jīng)過幾次深度的協(xié)商溝通，我們快速制定了解決方案，同時招募研發(fā)團(tuán)隊，快速的開展項(xiàng)目，帶著激情與理想，「58UXD」與「前端技術(shù)委員會」發(fā)起了共建項(xiàng)目「風(fēng)火輪」。
主要通過兩方面來解決問題：
設(shè)計插件提效：通過Sketch插件進(jìn)入設(shè)計師的工作流程，聚合設(shè)計資產(chǎn)，解決設(shè)計規(guī)范落地、設(shè)計資產(chǎn)可視化承載，提升設(shè)計規(guī)范和設(shè)計資產(chǎn)的使用率，增強(qiáng)資源共享避免重復(fù)設(shè)計。
設(shè)計協(xié)同管理：通過風(fēng)火輪協(xié)作平臺進(jìn)行團(tuán)隊資產(chǎn)、項(xiàng)目管理，實(shí)現(xiàn)設(shè)計稿在線標(biāo)注解析，供研發(fā)同學(xué)在線查看研發(fā)。
在這里有的同學(xué)就會說，這不就是做了一個藍(lán)湖嗎？
那可就想簡單了，我們的終極目標(biāo)是：“把設(shè)計稿變成終端代碼”。通過智能解析，將設(shè)計稿自動化解析生成代碼，提升產(chǎn)研效率。
那么背后的邏輯和我們的思路又是什么呢？
3
03.代碼生成
在我們集團(tuán)設(shè)計師Sketch的使用率高達(dá)90%，因此我們選擇了Sketch作為UI自動生成代碼的設(shè)計源，通過Picasso解析工具進(jìn)行智能解析，高精度還原設(shè)計稿，支持多種代碼格式，滿足各種場景需求。
設(shè)計稿生成代碼的主要流程如下圖：
設(shè)計稿生成代碼的實(shí)際效果展示：
為了提升操作效率，我們將Picasso工具在風(fēng)火輪協(xié)作平臺直接內(nèi)置，這樣設(shè)計師上傳設(shè)計稿交付需求的同時，風(fēng)火輪自動將設(shè)計稿轉(zhuǎn)換成代碼。代碼生成的UI界面與設(shè)計稿幾乎完全一致，并且代碼的可用度高，生成代碼的結(jié)構(gòu)布局合理、可維護(hù)性高，提供了兩種模式: 專注于高精度解析的運(yùn)營版和專注于代碼可用度的普通版，并且支持多種格式、尺寸的切圖，導(dǎo)出來滿足不同平臺、不同尺寸屏幕的需求。
為了保證智能解析代碼的還原度，我們通過以下幾個方式來處理解析問題：
1、還原度計算—感知哈希算法
我們將自動生成的UI頁面通過puppeteer進(jìn)行截圖，通過感知哈希算法與原圖進(jìn)行像素對比，計算出生成頁面的真實(shí)還原度。
2、樣式解析-漸變解析方案
在漸變處理方面，首先根據(jù)漸變類型分為線性漸變、徑向漸變、環(huán)形漸變?nèi)N，然后根據(jù)漸變值、位置等信息計算漸變方向距離及漸變節(jié)點(diǎn)之間的比例，最終生成漸變樣式代碼。
3、圖片處理—精準(zhǔn)切圖方案
為了精準(zhǔn)還原圖片，我們通過調(diào)用sketch API進(jìn)行圖層截圖的方式，計算不規(guī)則圖形的精準(zhǔn)位置及大小，精準(zhǔn)切圖是保證我們的高精度還原頁面的關(guān)鍵；
為了保證智能解析代碼的可用度，我們通過以下三個方式來處理可用度問題：
1、結(jié)構(gòu)重組
由于設(shè)計同學(xué)輸出設(shè)計稿是以視覺為主，不太關(guān)注分組結(jié)構(gòu)的合理性，因此我們需要將原有的分組去掉，按照符合開發(fā)習(xí)慣的方式進(jìn)行重新分組。
2、特征分組
針對列表這種重復(fù)結(jié)構(gòu)的場景，我們通過特征分組算法識別相似結(jié)構(gòu)，減少代碼重復(fù)，提升生成代碼的合理性
3、樣式優(yōu)化-樣式精簡、樣式排序
樣式精簡及排序，使得生成代碼更貼近工程師”手寫代碼”，代碼可維護(hù)性更高。
w
04.能力與規(guī)劃
我們做一下回顧，20年12月30日成功將「風(fēng)火輪」研發(fā)上線以來，歷經(jīng)7個月的時間，用戶覆蓋了集團(tuán)85%的產(chǎn)研團(tuán)隊，并且覆蓋了大多數(shù)的子公司。Sketch Plugin以容器的形式承載了6000+的設(shè)計資產(chǎn)和14調(diào)業(yè)務(wù)的設(shè)計規(guī)范，智能生成了1500+代碼。
風(fēng)火輪上線7個多月的時間，經(jīng)歷的3次版本迭代，上線核心功能點(diǎn)20+；風(fēng)火輪插件發(fā)布了2個大版本，20多個小版本迭代，快速解決了100+的線上BUG，不斷完善功能和優(yōu)化體驗(yàn)。并且建立了完善的用戶反饋機(jī)制，以最快的的方式解決用戶訴求。
目前為止我們生成代碼覆蓋了常見終端代碼格式：Web、Mini Programs、React Native、Flutter、iOS、Android等。代碼解析還原精度達(dá)99.8%，生成終端代碼可用度85%（目前行業(yè)頂級）
在未來我們要以解放生產(chǎn)力為目標(biāo)，繼續(xù)深耕從設(shè)計到代碼的路線，以風(fēng)火輪為媒介，將產(chǎn)品、設(shè)計、開發(fā)緊密的連接起來，為我們內(nèi)部協(xié)同發(fā)光發(fā)熱。同時也歡迎更多的設(shè)計師和研發(fā)工程師加入我們，共同構(gòu)建風(fēng)火輪生態(tài)，編寫故事的下一篇章。
原文地址： 58UXD
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》把設(shè)計變成終端代碼｜風(fēng)火輪背后的故事和規(guī)劃
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)