一、目前有哪些提升設(shè)計與前端生產(chǎn)力的方案
1、D2C(Design To Code)
D2C(Design to code)這個模式我們非常熟悉,其本質(zhì)是將設(shè)計師的設(shè)計資產(chǎn)轉(zhuǎn)化為代碼,讓前端工程師可以快速的復(fù)用,在這個成熟的領(lǐng)域主要分成兩大類:「設(shè)計資產(chǎn)類」和「設(shè)計對接類」
a. 設(shè)計資產(chǎn)類
設(shè)計資產(chǎn)類是完整系統(tǒng)的規(guī)范和代碼進(jìn)行沉淀形成設(shè)計類的資產(chǎn),這一類的產(chǎn)品在市面上目前是屬于主流,產(chǎn)品有網(wǎng)易的Fish Design(網(wǎng)易自研)、Ant Design、Arco Design、Element 等,這些產(chǎn)品都是將組件化的設(shè)計資產(chǎn)轉(zhuǎn)化為代碼資產(chǎn),方便前端工程師在開發(fā) B 端產(chǎn)品頁面時可以快速引用,提升開發(fā)的效率。
b. 設(shè)計對接類
設(shè)計對接類又分成「設(shè)計稿查看類」和「設(shè)計稿代碼生成類」兩種類型:
設(shè)計稿查看類:主要是 D-box(網(wǎng)易自研)、figma、藍(lán)湖等可以讓前端工程師在線查看設(shè)計師的設(shè)計稿并提供一定的轉(zhuǎn)化代碼方案,主要是為了保障產(chǎn)品的還原度。
設(shè)計稿代碼生成類:最近兩年為了徹底的解決還原度的問題,讓前端工程師專注的解決代碼問題「設(shè)計稿代碼生成類」也開始在市場嶄露頭角。
比如:Imgcook、Codefun,直接復(fù)制設(shè)計稿地址進(jìn)入軟件內(nèi)部轉(zhuǎn)為代碼文件,直接導(dǎo)出完整的靜態(tài)頁面代碼,減少開發(fā)過程中的樣式調(diào)整問題。
直接導(dǎo)出整頁代碼模式的小缺陷是無法滿足開發(fā)中:代碼精簡(ai 智能生成的代碼對目前還達(dá)不到開發(fā)人員喜歡的程度,較為冗余)、控件交互、綁定數(shù)據(jù)等幾方面的需求,但是比如在一次性的靜態(tài)頁面的實(shí)現(xiàn)中還是能夠達(dá)到提效的目的。
結(jié)論:D2C模式的產(chǎn)品相對獨(dú)立,從定義還原度「設(shè)計資產(chǎn)類」、保障還原度「設(shè)計稿查看類」、解決還原度「設(shè)計稿代碼生成類」層層遞進(jìn),可以有效提升設(shè)計師和前端工程師的生產(chǎn)效率和協(xié)同效率。
但在目前競爭激烈的大環(huán)境中,優(yōu)秀團(tuán)隊的效率提升已經(jīng)達(dá)到瓶頸,而提效的本質(zhì)是為了比競爭對手更快更好,當(dāng)所有人都有了相同的東西時,提效的目標(biāo)可能就需要從別的地方打開缺口。
2、C2D(Code To Design)
C2D(Code To Design)「前端代碼轉(zhuǎn)設(shè)計稿」這個模式對于設(shè)計師相對模糊,不過國外的企業(yè)已經(jīng)做出了探索。
比如:2017 年Airbnb 發(fā)布的前端開源模塊 React Sketch.app,其核心理念是用代碼做設(shè)計。第一次看到的時候感覺真的很酷,通過 React Sketch.app 直接在 Sketch 設(shè)計軟件中編譯出設(shè)計界面,代碼也可以直接在項目中使用。
還有另外一個產(chǎn)品叫 html-sketchapp,通過在輸入框中輸入網(wǎng)頁地址就可以直接在 Sketch 中生成可編輯的設(shè)計界面「網(wǎng)頁轉(zhuǎn)設(shè)計文件」,通過任何前端代碼都可以轉(zhuǎn)為設(shè)計資產(chǎn)的文件,甚至直白一些說就是參考成熟產(chǎn)品做設(shè)計,適度借鑒吧。
結(jié)論:目前的 C2D 的市場方案對于設(shè)計師而言不夠友好,無法讓設(shè)計師可以直接使用,都需要工程師來完成轉(zhuǎn)換,同樣也會遏制設(shè)計創(chuàng)新,陷入同質(zhì)化的泥潭中。
但這個模式,卻非常適合“有意”借鑒參考成熟或者競爭對手的項目團(tuán)隊,可以快速達(dá)到同類型產(chǎn)品的基準(zhǔn)水平。
二、針對目前現(xiàn)狀,什么樣的方式可以實(shí)現(xiàn)提效?
從我們當(dāng)前的工作流程來看
在這個流程中設(shè)計最在乎的就是設(shè)計階段的表現(xiàn)需求和前端的設(shè)計還原,為了保障精準(zhǔn)的表現(xiàn)需求,在設(shè)計階段需要大量的溝通和風(fēng)格嘗試。
在前端還原階段需要和前端不斷的扣細(xì)節(jié),輸出幾百條信息的走查文檔,那應(yīng)該如何解決這些問題?
答案就是「 C2D2C」的模式
1、C2D2C(Code To Design To Code)
C2D2C(Design to code to design)的模式,將流程中的設(shè)計表現(xiàn)和前端還原階段的通過設(shè)計標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式進(jìn)行流程優(yōu)化,減少設(shè)計和前端開發(fā)的參與,實(shí)現(xiàn)中后臺研發(fā)流程的整體提效。
在十幾年的發(fā)展里互聯(lián)網(wǎng)行業(yè)積累了大量的設(shè)計資產(chǎn)。
這些設(shè)計資產(chǎn)的沉淀是設(shè)計標(biāo)準(zhǔn)化的基礎(chǔ),將設(shè)計資產(chǎn)轉(zhuǎn)為封裝好的代碼組件也就是 D2C 的過程。將封裝好的組件通過低代碼平臺進(jìn)行屬性配置、搭建頁面、布局調(diào)整實(shí)現(xiàn)頁面的設(shè)計就是 C2D 的過程。
通過平臺設(shè)定交互行為和綁定后臺數(shù)據(jù),完成整個系統(tǒng),最后在進(jìn)行站點(diǎn)發(fā)布,就實(shí)現(xiàn)了 C2D2C 的完整流程。
C2D2C 的模式是設(shè)計資產(chǎn)與線上智能化布局的代碼方案(低代碼平臺)以及后臺數(shù)據(jù)綁定的結(jié)合,將以前的人工分工通過智能化方案綜合一體去解決。
但這個過程不是僵化死板的模式,在C2D環(huán)節(jié)實(shí)現(xiàn)“設(shè)計->前端”的高還原度下快速落地,在D2C環(huán)節(jié)下實(shí)現(xiàn)“低代碼平臺->自有產(chǎn)品”的靈活調(diào)整下快速復(fù)制。
結(jié)論:隨著社會的發(fā)展,標(biāo)準(zhǔn)化和智能化的產(chǎn)品線都將會被人工智能取代,互聯(lián)網(wǎng)行業(yè)也正在向這個方向發(fā)展,所以設(shè)計的標(biāo)準(zhǔn)化和開發(fā)的工業(yè)化就像手工業(yè)向工業(yè)化的轉(zhuǎn)型,這是一個大的趨勢,未來可能一天的時間就可以生產(chǎn)數(shù)套后臺產(chǎn)品,這樣的生產(chǎn)效率才能跟上中國的數(shù)字化轉(zhuǎn)型浪潮。
2.、C2D2C 的市場化
低代碼平臺 是 C2D2C 模式得以實(shí)現(xiàn)的核心平臺,從2018 年開始海外投資開始關(guān)注低代碼平臺,OutSystem 平臺獲得 KKR 和高盛的 3.6 億美元的融資,成為了低代碼賽道的獨(dú)角獸,另一家低代碼創(chuàng)業(yè)公司 Mendix 被西門子以 7 億美元的價格收購,資本市場的關(guān)注讓低代碼賽道開始火熱起。
而國內(nèi)的低代碼平臺是從 2020 年疫情肆掠開始,疫情助推了在線辦公的發(fā)展,國家也在大力支持?jǐn)?shù)字化經(jīng)濟(jì),更多的企業(yè)開始數(shù)字化轉(zhuǎn)型,這也讓低代碼在國內(nèi)有了飛速發(fā)展的土壤。
目前海外比較成熟的平臺主要是 OutSystem和 Mendix,而國內(nèi)也有很多已經(jīng)商業(yè)化的低代碼產(chǎn)品,像網(wǎng)易輕舟等,已經(jīng)開始投入商業(yè)化的使用,可以從網(wǎng)易輕舟的低代碼產(chǎn)品架構(gòu),清晰完整的看到C2D2C模式的所需要具備的能力。
網(wǎng)易輕舟從業(yè)務(wù)角度出發(fā),具備持續(xù)迭代能力、組件具備可擴(kuò)展性,并且可以為企業(yè)進(jìn)行私有化部署,部署完成后可以和存量系統(tǒng)進(jìn)行集成,交付后具備非常好的可運(yùn)維性,是一個成熟的商業(yè)化平臺。
網(wǎng)易輕舟目前已經(jīng)服務(wù)了包括工商銀行、吉利汽車、申萬宏源證券、泰康人壽、臺州銀行等包括政府產(chǎn)業(yè)平臺30家,從服務(wù)的客戶我們也可以看的出來,低代碼產(chǎn)品在大型企業(yè)中落地更有優(yōu)勢。
結(jié)論:C2D2C 的模式已經(jīng)得到市場的驗(yàn)證,研發(fā)工業(yè)化可以更加高效的提升中后臺產(chǎn)品的研發(fā)效率,設(shè)計標(biāo)準(zhǔn)化也可以減少中后臺設(shè)計師大量的重復(fù)性勞動,對于中后臺的業(yè)務(wù)產(chǎn)品,可以大膽地選擇一個富有實(shí)力低代碼產(chǎn)品。
最后
低代碼平臺的使用需要同時具備一定的代碼能力和設(shè)計能力,這不管是對開發(fā)還是設(shè)計師都具備一定的門檻。目前的低代碼平臺使用角色應(yīng)該是前端工程師,復(fù)雜的后臺交互平臺還是需要設(shè)計師的深度介入。
低代碼平臺的誕生減少了中后臺設(shè)計師大量的重復(fù)性工作,可以讓中后臺設(shè)計師將更多的精力投入到用戶研究和提升用戶體驗(yàn)上。拖拽式的 UI 和智能化的布局以及良好的用戶體驗(yàn)和以前的開發(fā)相比較,在中后臺的開發(fā)上更加的高效也更加的智能。
在最初調(diào)研到低代碼平臺的時候,行業(yè)的快速發(fā)展和成熟,讓我下意識的反應(yīng)是中后臺的設(shè)計師可能要失業(yè)了,但是在調(diào)研了平臺的使用和深入的思考后,我覺得這是中后臺設(shè)計師的機(jī)會。C2D2C 模式的最優(yōu)解應(yīng)該是 0 代碼方案,而使用 0 代碼平臺最好的角色就是設(shè)計師。設(shè)計師專業(yè)的審美和對于用戶體驗(yàn)理解的深度都是其他職業(yè)所不具備的,未來的中后臺設(shè)計師更應(yīng)該將自己的精力投入到平臺流程的優(yōu)化和用戶體驗(yàn)的研究中去,這也在未來 0 代碼平臺到來后,我們才能更快更好的投入到新的生產(chǎn)中。
作者:程鑫
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》中后臺產(chǎn)品的產(chǎn)研協(xié)同提效調(diào)研
藍(lán)藍(lán)設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司