58UXD - 揭密！如何為公司每年節省1000萬－鑽石舞台

58是一個多業務並存的集團公司，多年來一直處於快速增長的狀態；58內部擁有龐大的產研團隊，有龐大的產品量級、快速的產品迭代節奏，同時要面對多團隊的協作質量與效率問題，如果不能很好的解決不管是對個人還是對企業都將是一場災難。2020年疫情爆發，形勢所迫，國內傳統辦公需要打破諸多限制，對於無固定場所辦公、異地辦公、居家辦公等協作辦公工具需求劇增。互聯網的發展，技術的進步，要求我們不能固步自封，需要我們探索更多的可能性，加入產研協同工具探索中來，為我司與中小企業貢獻一些力量。

從2010年開始，互聯網體驗設計與協同工具進入了百花齊放的時代，因為日益成熟的互聯網企業擁有龐大的產研團體，高效協同擺在了檯面上。同時國內外不少獨立的設計工具日趨成熟，有很多新產品與新視角層出不窮。也在此時，諸多互聯網公司也加大自研設計與協同工具的投入，開始探索工具與業務深度融合、協同與協作降本提效的課題。

互聯網設計工具的五大演進階段1）大型通用能力單體工具：Ps、Ai互聯網起步階段，出現大型圖片編輯工具，用於完成精細化圖像設計，被廣泛用於各行各業。2）細分垂直領域工具：Sketch、Principle隨着互聯網技術發展和移動設備普及，以往大而全的工具不能解決精細化問題，針對UX/UI領域的垂直化設計工具開始代替傳統設計工具。3)雲端化在線協作工具：Figma互聯網企業規模逐漸擴大，單兵作戰的模式逐漸被大型團隊協作所取代，組織結構中心化要求工具不受平台和系統的限制，在線多人實時協作工具應運而生。4）工具化平台：Invision、摹客隨着團隊角色和分工細化以及產研流程規範化，串聯設計全流程的平台化工具出現，致力於提升全鏈路信息傳遞和交接效率。5）自動化和職能化工具隨着AI技術逐漸成熟，智能化設計工具通過深度學習+神經網絡，開始代替人力解決大量重複性工作，解放生產力。

目前很多產品、設計、研發等團隊的協作模式基本處於瀑布式，瀑布式的做法就是一級一級的完成，產品經理寫完產品文檔交給交互設計師、交互設計師畫完交互原型後給到UI、UI設計完成視覺設計後交付開發、開發完成後提交測試、走查bug、走查交互UI、最後上線，循環往復。每個階段、每個環節少不了各種評審、各種會議以及分享。這種流程長此以往，問題非常明顯：

1）多工種多平台內容雜而散不管是那個崗位成員都需要記錄保存多個鏈接（各種文檔鏈接、各種項目表格、各種輸出鏈接等等，而且許多的產品、設計因個人喜好總能輸出各種奇奇怪怪的鏈接），在工作中要隨時切換不同的平台，查看不同的內容，給每個產研同學帶來極大的困擾，協作帶來不便。

2）設計規範執行不徹底大多數成規模的設計團隊都有一套自己的設計規範，用規範來解決設計產出的一致性，提升設計效率。多年來58一直處於快速增長的狀態，整個平台的設計一致性沒有得到很好地統一，並且在長期的協作過程中因規範標準執行地不徹底，導致各種問題凸顯。58採用sketch作為基礎設計工具，但是Sketch原生組件庫可視化程度比較低，層級比較深，搜索和查找不便利，組件庫更新同步效率低。設計源文件文件共享不便利，重複設計問題比較突出。復用率較高的設計場景缺少共享工具承載，設計師之間溝通成本較高，重複設計導致人力資源浪費。

3）團隊間溝通效率較低多平台、多文件造成產研團隊信息割裂，需要花費時間管理線下文件，線上也需要各種切換各種收藏，需要付出更多的時間成本。對於各種會議結論和其他形式的溝通結果很難通過一個平台完全收攬，造成團隊協作效率低下。

4）外部協作平台成本高對於58這種體量的產研團隊，每年在協作平台花費的成本達到500多萬，是一筆非常大的支出，因此內部為了控制成本，導致賬號較少，對於產研協作的便利性產生很大的影響。綜上所述，每一個問題的出現，都直接影響着我們團隊的協作效率和協作質量。因此，58UXD聯合58前端技術委員會打造了一款連接產品、設計、研發的一站式工作檯——風火輪。

風火輪分為Sketch插件和協作平台兩部分1、風火輪Sketch插件

1）插件承載各類設計資產：插件能夠承載公共設計資產和個人設計資產，快速查找並拖拽使用。

設計資產庫目前分為icon庫、色彩庫、圖片庫、UI組件庫、業務場景庫、2D/3D插畫庫、運營素材庫等7種類型的設計組件庫，目前公共資源庫總計設計資產承載量10000+，所有類型的設計資產應有盡有，一鍵設計不再是未來。2）上傳與解析：通過風火輪Sketch插件上傳設計稿到風火輪協作平台，自動解析設計稿，輸出標註、切圖（支持SVG）、代碼（支持多種代碼結構）。

2、風火輪協作平台

1）團隊管理：風火輪協作平台的採用自上而下的團隊和項目管理模式，快速便捷的團隊管理路徑，將項目與團隊緊密連接在一起，提升團隊協作效率。2）項目和文件管理：項目是從屬於團隊的，想使用項目相關功能，需要先創建/加入一個團隊，為便於管理，一個團隊下可建立多個項目。項目可存在於任何一級文件夾下，團隊成員均可進行項目管理，項目文件中承載了項目中的全部內容（設計稿、切圖、源文件、代碼等）。3）多方協作-編輯器：編輯器提供研發查看標註、下載切圖和複製代碼，平台生成代碼高精度還原設計稿，設計稿還原效果高達95%，目前我司代碼使用量非常高。

同時，我們實現了設計走查在線化，讓之前繁瑣的設計走查流程一去不復返，節省設計走查時長60%3、風火輪未來功能計劃1）實現文檔和資源承載：產品、交互、設計、研發、測試等項目團隊，統一在風火輪進行項目管理，實現文檔、交互原型、設計稿、研發測試、走查等統一通過項目形式承載，解決內容散亂的問題。

2）設計線上化：實現設計元素在線編輯、布局與設計等。

3）3D效果在線化：解析3D文件輸出代碼、生成多角度圖片等。

「風火輪」自從2020年12月30日上線以來，逐步覆蓋了全公司所有的產研團隊，完全替代了其他協作平台，成為公司產研提效唯一的協作平台，並且帶到內部團隊較高的評價。「風火輪」上線至今，我們快速響應迭代，通過好多個版本的更新優化，使其達到了一個穩定且且持續更新的狀態。目前「風火輪」插件承載了10000+多個可復用的設計資產，解決的大多數重複設計、開發的狀態，累計設計資產復用次數45000+次，累計節省設計時常55000+小時。通過自動化解析生成代碼量超過10000+，生成圖片量300W+，累計節省研發時常10000+小時，提升整體協同效率30%。節省產研協同工具採買成本約500+W/年，節省人力成本500+W/年，年度節省成本千萬！

「風火輪」目前已免費開放給大家使用，大家再次記住這個網址：https://fhl.58.com，這是我們風火輪協作平台的網址，大家可以下載插件進行使用。同時我們也開放了一部分設計資產，為大家提供一些便捷。我們開放的平台目前只開放了部分功能，其他更多高級功能會陸續開放給大家，請大家多多關注我們「風火輪」平台，有新的進展我們會第一時間公知大家。我們內部所使用的豪華高級版本，歡迎有私有化部署意願的公司和團隊前來洽談合作。如在其他方面想要合作的團隊，也歡迎來撩，我們的主旨是開放共贏，有興趣可掃描下方二維碼，我們可以進行深入的探討，一起來搞事情。