一、目前有哪些提升設(shè)計(jì)與前端生產(chǎn)力的方案

D2C（Design to code）這個(gè)模式我們非常熟悉，其本質(zhì)是將設(shè)計(jì)師的設(shè)計(jì)資產(chǎn)轉(zhuǎn)化為代碼，讓前端工程師可以快速的復(fù)用，在這個(gè)成熟的領(lǐng)域主要分成兩大類(lèi)：「設(shè)計(jì)資產(chǎn)類(lèi)」和「設(shè)計(jì)對(duì)接類(lèi)」

a. 設(shè)計(jì)資產(chǎn)類(lèi)

設(shè)計(jì)資產(chǎn)類(lèi)是完整系統(tǒng)的規(guī)范和代碼進(jìn)行沉淀形成設(shè)計(jì)類(lèi)的資產(chǎn)，這一類(lèi)的產(chǎn)品在市面上目前是屬于主流，產(chǎn)品有網(wǎng)易的Fish Design（網(wǎng)易自研）、Ant Design、Arco Design、Element 等，這些產(chǎn)品都是將組件化的設(shè)計(jì)資產(chǎn)轉(zhuǎn)化為代碼資產(chǎn)，方便前端工程師在開(kāi)發(fā) B 端產(chǎn)品頁(yè)面時(shí)可以快速引用，提升開(kāi)發(fā)的效率。

b. 設(shè)計(jì)對(duì)接類(lèi)

設(shè)計(jì)對(duì)接類(lèi)又分成「設(shè)計(jì)稿查看類(lèi)」和「設(shè)計(jì)稿代碼生成類(lèi)」兩種類(lèi)型：

設(shè)計(jì)稿查看類(lèi)：主要是 D-box（網(wǎng)易自研）、figma、藍(lán)湖等可以讓前端工程師在線(xiàn)查看設(shè)計(jì)師的設(shè)計(jì)稿并提供一定的轉(zhuǎn)化代碼方案，主要是為了保障產(chǎn)品的還原度。

設(shè)計(jì)稿代碼生成類(lèi)：最近兩年為了徹底的解決還原度的問(wèn)題，讓前端工程師專(zhuān)注的解決代碼問(wèn)題「設(shè)計(jì)稿代碼生成類(lèi)」也開(kāi)始在市場(chǎng)嶄露頭角。

比如：Imgcook、Codefun，直接復(fù)制設(shè)計(jì)稿地址進(jìn)入軟件內(nèi)部轉(zhuǎn)為代碼文件，直接導(dǎo)出完整的靜態(tài)頁(yè)面代碼，減少開(kāi)發(fā)過(guò)程中的樣式調(diào)整問(wèn)題。

直接導(dǎo)出整頁(yè)代碼模式的小缺陷是無(wú)法滿(mǎn)足開(kāi)發(fā)中：代碼精簡(jiǎn)（ai 智能生成的代碼對(duì)目前還達(dá)不到開(kāi)發(fā)人員喜歡的程度，較為冗余）、控件交互、綁定數(shù)據(jù)等幾方面的需求，但是比如在一次性的靜態(tài)頁(yè)面的實(shí)現(xiàn)中還是能夠達(dá)到提效的目的。

結(jié)論：D2C模式的產(chǎn)品相對(duì)獨(dú)立，從定義還原度「設(shè)計(jì)資產(chǎn)類(lèi)」、保障還原度「設(shè)計(jì)稿查看類(lèi)」、解決還原度「設(shè)計(jì)稿代碼生成類(lèi)」層層遞進(jìn)，可以有效提升設(shè)計(jì)師和前端工程師的生產(chǎn)效率和協(xié)同效率。

但在目前競(jìng)爭(zhēng)激烈的大環(huán)境中，優(yōu)秀團(tuán)隊(duì)的效率提升已經(jīng)達(dá)到瓶頸，而提效的本質(zhì)是為了比競(jìng)爭(zhēng)對(duì)手更快更好，當(dāng)所有人都有了相同的東西時(shí)，提效的目標(biāo)可能就需要從別的地方打開(kāi)缺口。

2、C2D（Code To Design）

C2D（Code To Design)「前端代碼轉(zhuǎn)設(shè)計(jì)稿」這個(gè)模式對(duì)于設(shè)計(jì)師相對(duì)模糊，不過(guò)國(guó)外的企業(yè)已經(jīng)做出了探索。

比如：2017 年Airbnb 發(fā)布的前端開(kāi)源模塊 React Sketch.app，其核心理念是用代碼做設(shè)計(jì)。第一次看到的時(shí)候感覺(jué)真的很酷，通過(guò) React Sketch.app 直接在 Sketch 設(shè)計(jì)軟件中編譯出設(shè)計(jì)界面，代碼也可以直接在項(xiàng)目中使用。

還有另外一個(gè)產(chǎn)品叫 html-sketchapp，通過(guò)在輸入框中輸入網(wǎng)頁(yè)地址就可以直接在 Sketch 中生成可編輯的設(shè)計(jì)界面「網(wǎng)頁(yè)轉(zhuǎn)設(shè)計(jì)文件」，通過(guò)任何前端代碼都可以轉(zhuǎn)為設(shè)計(jì)資產(chǎn)的文件，甚至直白一些說(shuō)就是參考成熟產(chǎn)品做設(shè)計(jì)，適度借鑒吧。

結(jié)論：目前的 C2D 的市場(chǎng)方案對(duì)于設(shè)計(jì)師而言不夠友好，無(wú)法讓設(shè)計(jì)師可以直接使用，都需要工程師來(lái)完成轉(zhuǎn)換，同樣也會(huì)遏制設(shè)計(jì)創(chuàng)新，陷入同質(zhì)化的泥潭中。

但這個(gè)模式，卻非常適合“有意”借鑒參考成熟或者競(jìng)爭(zhēng)對(duì)手的項(xiàng)目團(tuán)隊(duì)，可以快速達(dá)到同類(lèi)型產(chǎn)品的基準(zhǔn)水平。

從我們當(dāng)前的工作流程來(lái)看

在這個(gè)流程中設(shè)計(jì)最在乎的就是設(shè)計(jì)階段的表現(xiàn)需求和前端的設(shè)計(jì)還原，為了保障精準(zhǔn)的表現(xiàn)需求，在設(shè)計(jì)階段需要大量的溝通和風(fēng)格嘗試。

在前端還原階段需要和前端不斷的扣細(xì)節(jié)，輸出幾百條信息的走查文檔，那應(yīng)該如何解決這些問(wèn)題？

答案就是「 C2D2C」的模式

1、C2D2C（Code To Design To Code）

C2D2C（Design to code to design）的模式，將流程中的設(shè)計(jì)表現(xiàn)和前端還原階段的通過(guò)設(shè)計(jì)標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式進(jìn)行流程優(yōu)化，減少設(shè)計(jì)和前端開(kāi)發(fā)的參與，實(shí)現(xiàn)中后臺(tái)研發(fā)流程的整體提效。

在十幾年的發(fā)展里互聯(lián)網(wǎng)行業(yè)積累了大量的設(shè)計(jì)資產(chǎn)。

這些設(shè)計(jì)資產(chǎn)的沉淀是設(shè)計(jì)標(biāo)準(zhǔn)化的基礎(chǔ)，將設(shè)計(jì)資產(chǎn)轉(zhuǎn)為封裝好的代碼組件也就是 D2C 的過(guò)程。將封裝好的組件通過(guò)低代碼平臺(tái)進(jìn)行屬性配置、搭建頁(yè)面、布局調(diào)整實(shí)現(xiàn)頁(yè)面的設(shè)計(jì)就是 C2D 的過(guò)程。

通過(guò)平臺(tái)設(shè)定交互行為和綁定后臺(tái)數(shù)據(jù)，完成整個(gè)系統(tǒng)，最后在進(jìn)行站點(diǎn)發(fā)布，就實(shí)現(xiàn)了 C2D2C 的完整流程。

C2D2C 的模式是設(shè)計(jì)資產(chǎn)與線(xiàn)上智能化布局的代碼方案（低代碼平臺(tái)）以及后臺(tái)數(shù)據(jù)綁定的結(jié)合，將以前的人工分工通過(guò)智能化方案綜合一體去解決。

但這個(gè)過(guò)程不是僵化死板的模式，在C2D環(huán)節(jié)實(shí)現(xiàn)“設(shè)計(jì)->前端”的高還原度下快速落地，在D2C環(huán)節(jié)下實(shí)現(xiàn)“低代碼平臺(tái)->自有產(chǎn)品”的靈活調(diào)整下快速?gòu)?fù)制。

結(jié)論：隨著社會(huì)的發(fā)展，標(biāo)準(zhǔn)化和智能化的產(chǎn)品線(xiàn)都將會(huì)被人工智能取代，互聯(lián)網(wǎng)行業(yè)也正在向這個(gè)方向發(fā)展，所以設(shè)計(jì)的標(biāo)準(zhǔn)化和開(kāi)發(fā)的工業(yè)化就像手工業(yè)向工業(yè)化的轉(zhuǎn)型，這是一個(gè)大的趨勢(shì)，未來(lái)可能一天的時(shí)間就可以生產(chǎn)數(shù)套后臺(tái)產(chǎn)品，這樣的生產(chǎn)效率才能跟上中國(guó)的數(shù)字化轉(zhuǎn)型浪潮。

2.、C2D2C 的市場(chǎng)化

低代碼平臺(tái) 是 C2D2C 模式得以實(shí)現(xiàn)的核心平臺(tái)，從2018 年開(kāi)始海外投資開(kāi)始關(guān)注低代碼平臺(tái)，OutSystem 平臺(tái)獲得 KKR 和高盛的 3.6 億美元的融資，成為了低代碼賽道的獨(dú)角獸，另一家低代碼創(chuàng)業(yè)公司 Mendix 被西門(mén)子以 7 億美元的價(jià)格收購(gòu)，資本市場(chǎng)的關(guān)注讓低代碼賽道開(kāi)始火熱起。

而國(guó)內(nèi)的低代碼平臺(tái)是從 2020 年疫情肆掠開(kāi)始，疫情助推了在線(xiàn)辦公的發(fā)展，國(guó)家也在大力支持?jǐn)?shù)字化經(jīng)濟(jì)，更多的企業(yè)開(kāi)始數(shù)字化轉(zhuǎn)型，這也讓低代碼在國(guó)內(nèi)有了飛速發(fā)展的土壤。

目前海外比較成熟的平臺(tái)主要是 OutSystem和 Mendix，而國(guó)內(nèi)也有很多已經(jīng)商業(yè)化的低代碼產(chǎn)品，像網(wǎng)易輕舟等，已經(jīng)開(kāi)始投入商業(yè)化的使用，可以從網(wǎng)易輕舟的低代碼產(chǎn)品架構(gòu)，清晰完整的看到C2D2C模式的所需要具備的能力。

網(wǎng)易輕舟從業(yè)務(wù)角度出發(fā)，具備持續(xù)迭代能力、組件具備可擴(kuò)展性，并且可以為企業(yè)進(jìn)行私有化部署，部署完成后可以和存量系統(tǒng)進(jìn)行集成，交付后具備非常好的可運(yùn)維性，是一個(gè)成熟的商業(yè)化平臺(tái)。

網(wǎng)易輕舟目前已經(jīng)服務(wù)了包括工商銀行、吉利汽車(chē)、申萬(wàn)宏源證券、泰康人壽、臺(tái)州銀行等包括政府產(chǎn)業(yè)平臺(tái)30家，從服務(wù)的客戶(hù)我們也可以看的出來(lái)，低代碼產(chǎn)品在大型企業(yè)中落地更有優(yōu)勢(shì)。

結(jié)論：C2D2C 的模式已經(jīng)得到市場(chǎng)的驗(yàn)證，研發(fā)工業(yè)化可以更加高效的提升中后臺(tái)產(chǎn)品的研發(fā)效率，設(shè)計(jì)標(biāo)準(zhǔn)化也可以減少中后臺(tái)設(shè)計(jì)師大量的重復(fù)性勞動(dòng)，對(duì)于中后臺(tái)的業(yè)務(wù)產(chǎn)品，可以大膽地選擇一個(gè)富有實(shí)力低代碼產(chǎn)品。

最后

低代碼平臺(tái)的使用需要同時(shí)具備一定的代碼能力和設(shè)計(jì)能力，這不管是對(duì)開(kāi)發(fā)還是設(shè)計(jì)師都具備一定的門(mén)檻。目前的低代碼平臺(tái)使用角色應(yīng)該是前端工程師，復(fù)雜的后臺(tái)交互平臺(tái)還是需要設(shè)計(jì)師的深度介入。

低代碼平臺(tái)的誕生減少了中后臺(tái)設(shè)計(jì)師大量的重復(fù)性工作，可以讓中后臺(tái)設(shè)計(jì)師將更多的精力投入到用戶(hù)研究和提升用戶(hù)體驗(yàn)上。拖拽式的 UI 和智能化的布局以及良好的用戶(hù)體驗(yàn)和以前的開(kāi)發(fā)相比較，在中后臺(tái)的開(kāi)發(fā)上更加的高效也更加的智能。

在最初調(diào)研到低代碼平臺(tái)的時(shí)候，行業(yè)的快速發(fā)展和成熟，讓我下意識(shí)的反應(yīng)是中后臺(tái)的設(shè)計(jì)師可能要失業(yè)了，但是在調(diào)研了平臺(tái)的使用和深入的思考后，我覺(jué)得這是中后臺(tái)設(shè)計(jì)師的機(jī)會(huì)。C2D2C 模式的最優(yōu)解應(yīng)該是 0 代碼方案，而使用 0 代碼平臺(tái)最好的角色就是設(shè)計(jì)師。設(shè)計(jì)師專(zhuān)業(yè)的審美和對(duì)于用戶(hù)體驗(yàn)理解的深度都是其他職業(yè)所不具備的，未來(lái)的中后臺(tái)設(shè)計(jì)師更應(yīng)該將自己的精力投入到平臺(tái)流程的優(yōu)化和用戶(hù)體驗(yàn)的研究中去，這也在未來(lái) 0 代碼平臺(tái)到來(lái)后，我們才能更快更好的投入到新的生產(chǎn)中。