編輯導(dǎo)語：在設(shè)計(jì)和創(chuàng)建復(fù)雜產(chǎn)品的過程中，自動(dòng)化發(fā)揮著日益重要的作用。文章對中后臺(tái)產(chǎn)品自動(dòng)化設(shè)計(jì)開發(fā)的流程進(jìn)行了詳細(xì)梳理，對遇到的一些問題進(jìn)行了分析總結(jié)，供大家參考學(xué)習(xí)。

01?寫在開始

在一個(gè)產(chǎn)品的設(shè)計(jì)過程中需要做大量的決策，做什么、如何做都需要經(jīng)過縝密的思考。做為設(shè)計(jì)師或開發(fā)者，你是否在相似度較高的后臺(tái)類需求中耗費(fèi)了大量的精力，并被這類重復(fù)的問題浪費(fèi)了大量的設(shè)計(jì)決策與開發(fā)決策的成本？做為一位專業(yè)的產(chǎn)品PM，你是否希望畫出的產(chǎn)品原型能夠符合設(shè)計(jì)的標(biāo)準(zhǔn)，讓你能夠把更多的精力專注在產(chǎn)品功能的本身？

所以我們需要進(jìn)一步去建立一套開發(fā)體系，將設(shè)計(jì)師、開發(fā)者從大量的重復(fù)工作中解救出來，并從產(chǎn)品源頭就開始統(tǒng)一UI的框架形態(tài)，使此類產(chǎn)品的能夠保持一致的用戶體驗(yàn)。

02?什么是中后臺(tái)產(chǎn)品自動(dòng)化開發(fā)

中后臺(tái)產(chǎn)品自動(dòng)化開發(fā)體系，是一個(gè)將設(shè)計(jì)資源做為中臺(tái)，并從產(chǎn)品端到開發(fā)側(cè)的完整流程閉環(huán)，它將標(biāo)準(zhǔn)化的設(shè)計(jì)資源集成到產(chǎn)品側(cè)與開發(fā)側(cè)，來打通中后臺(tái)產(chǎn)品開發(fā)的各個(gè)環(huán)節(jié)。通過整合設(shè)計(jì)資產(chǎn)，并建立自動(dòng)化開發(fā)工具的形式，來重新定義中后臺(tái)產(chǎn)品的開發(fā)方式。

中后臺(tái)產(chǎn)品自動(dòng)化官網(wǎng)首頁

03?如何做到自動(dòng)化

1. 設(shè)計(jì)側(cè)的資源中臺(tái)建立

我們基于中臺(tái)的理念，不斷的從各業(yè)務(wù)線的實(shí)際產(chǎn)品中，對通用性的場景進(jìn)行提煉，整合出高可復(fù)用性的區(qū)塊與模板頁面，對其進(jìn)行規(guī)范化設(shè)計(jì)后，將其進(jìn)行封裝，再通過任務(wù)形式對區(qū)塊進(jìn)行歸類，從而形成各種的中后臺(tái)區(qū)塊化設(shè)計(jì)資產(chǎn)。這些設(shè)計(jì)資源可以在不同的業(yè)務(wù)場景中進(jìn)行共享，形成場景設(shè)計(jì)中臺(tái)。

設(shè)計(jì)中臺(tái)的區(qū)塊資源

同時(shí)我們建立了自動(dòng)化開發(fā)工具集，包含前端開發(fā)使用的自動(dòng)化開發(fā)工具，產(chǎn)品同學(xué)使用的產(chǎn)品原型繪制資源，并將設(shè)計(jì)中臺(tái)所沉淀的資產(chǎn)，同步共享至開發(fā)側(cè)與產(chǎn)品側(cè)，從而形成從設(shè)計(jì)到產(chǎn)品、設(shè)計(jì)到開發(fā)的全流程閉環(huán)。

流程閉環(huán)

2. 產(chǎn)品側(cè)的原型繪制

AXURE的元件庫資源：在產(chǎn)品側(cè)，我們?yōu)楫a(chǎn)品團(tuán)隊(duì)設(shè)計(jì)了AXURE的元件庫，此元件庫集成了設(shè)計(jì)中臺(tái)的全部設(shè)計(jì)資源，以組件、區(qū)塊、模板頁面、圖標(biāo)集等形式進(jìn)行分類。使用此元件庫，能夠從產(chǎn)品源頭統(tǒng)一交互規(guī)則與UI框架形態(tài)，并可以創(chuàng)建出完全符合設(shè)計(jì)規(guī)范的高保真產(chǎn)品原型，并輸送到前端進(jìn)行開發(fā)。

Axure元件庫

墨刀原型繪制工具：目前我們已經(jīng)與墨刀產(chǎn)品達(dá)成合作共識(shí)，在未來，我們設(shè)計(jì)中臺(tái)的所有資源，將集成到墨刀產(chǎn)品中，這將為產(chǎn)品同學(xué)的原型繪制提供更多的工具選擇。

3. 開發(fā)側(cè)的前端自動(dòng)化工具

在開發(fā)側(cè)，我們打造了前端開發(fā)自動(dòng)化工具，此工具同樣集成了設(shè)計(jì)中臺(tái)的全部資源，所有設(shè)計(jì)資源的結(jié)構(gòu)與產(chǎn)品側(cè)保持一致。開發(fā)同學(xué)得到產(chǎn)品輸出的高保真原型后，可以使用此工具，以所見即所得的方式對頁面進(jìn)行開發(fā)。

前端自動(dòng)化工具的工作方式：

（1）創(chuàng)建項(xiàng)目：通過前端自動(dòng)化工具新建或選擇項(xiàng)目模板，來完成項(xiàng)目的建立。

創(chuàng)建項(xiàng)目

（2）建立項(xiàng)目頁面：完成項(xiàng)目創(chuàng)建后，開始逐個(gè)建立項(xiàng)目的具體頁面，首先建立頁面骨骼（頁面布局）

建立頁面布局

（3）填充頁面內(nèi)容：創(chuàng)建布局之后，在區(qū)塊市場中選擇適用于業(yè)務(wù)場景的區(qū)塊，以所見即所得的方式對布局進(jìn)行填充，并完成頁面內(nèi)容的建立。

建立頁面內(nèi)容

（4）自定義場景區(qū)塊或模板：我們的區(qū)塊與模板支持自定義，目的是能夠靈活應(yīng)對更復(fù)雜的業(yè)務(wù)場景。當(dāng)模板庫與區(qū)塊庫中的資源不能滿足業(yè)務(wù)需要時(shí)，即可以通過WEB端的在線工具進(jìn)行區(qū)塊與模板的自行創(chuàng)建。

WEB端在線工具，集成了我們所有的組件資源，通過對組件的自由組合，即可簡單快捷的完成場景區(qū)塊或模板頁面的創(chuàng)建，發(fā)布代碼后，這些通過自定義的內(nèi)容即可自由調(diào)取，并同步保存至物料庫中以豐富設(shè)計(jì)資源。

自定義場景區(qū)塊或模板

線上區(qū)塊物料資源

完成以上所有工作后，即可啟動(dòng)調(diào)試，最終完成前端頁面的開發(fā)。

完成前端頁面建立

04?寫在最后

中后臺(tái)產(chǎn)品自動(dòng)化開發(fā)，通過模塊化思維和流程化的開發(fā)方式，將設(shè)計(jì)中臺(tái)沉淀的資源更靈活的的利用了起來，具備了更進(jìn)一步的實(shí)用性，符合了B端產(chǎn)品設(shè)計(jì)與開發(fā)的“大局觀”，通過自動(dòng)化工具所進(jìn)一步沉淀出的設(shè)計(jì)資源，將成為新的設(shè)計(jì)能力并不斷的應(yīng)用到新的業(yè)務(wù)當(dāng)中去。

作者：李國明，視覺設(shè)計(jì)師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@李國明

題圖來自pexels，基于CC0協(xié)議