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