編輯導語：在設計和創建複雜產品的過程中，自動化發揮着日益重要的作用。文章對中後台產品自動化設計開發的流程進行了詳細梳理，對遇到的一些問題進行了分析總結，供大家參考學習。
在一個產品的設計過程中需要做大量的決策，做什麼、如何做都需要經過縝密的思考。做為設計師或開發者，你是否在相似度較高的後台類需求中耗費了大量的精力，並被這類重複的問題浪費了大量的設計決策與開發決策的成本？做為一位專業的產品PM，你是否希望畫出的產品原型能夠符合設計的標準，讓你能夠把更多的精力專注在產品功能的本身？
所以我們需要進一步去建立一套開發體系，將設計師、開發者從大量的重複工作中解救出來，並從產品源頭就開始統一UI的框架形態，使此類產品的能夠保持一致的用户體驗。
02 什麼是中後台產品自動化開發中後台產品自動化開發體系，是一個將設計資源做為中颱，並從產品端到開發側的完整流程閉環，它將標準化的設計資源集成到產品側與開發側，來打通中後台產品開發的各個環節。通過整合設計資產，並建立自動化開發工具的形式，來重新定義中後台產品的開發方式。
中後台產品自動化官網首頁
03 如何做到自動化1. 設計側的資源中台建立我們基於中台的理念，不斷的從各業務線的實際產品中，對通用性的場景進行提煉，整合出高可複用性的區塊與模板頁面，對其進行規範化設計後，將其進行封裝，再通過任務形式對區塊進行歸類，從而形成各種的中後台區塊化設計資產。這些設計資源可以在不同的業務場景中進行共享，形成場景設計中台。
設計中台的區塊資源
同時我們建立了自動化開發工具集，包含前端開發使用的自動化開發工具，產品同學使用的產品原型繪製資源，並將設計中台所沉澱的資產，同步共享至開發側與產品側，從而形成從設計到產品、設計到開發的全流程閉環。
流程閉環
2. 產品側的原型繪製AXURE的元件庫資源：在產品側，我們為產品團隊設計了AXURE的元件庫，此元件庫集成了設計中台的全部設計資源，以組件、區塊、模板頁面、圖標集等形式進行分類。使用此元件庫，能夠從產品源頭統一交互規則與UI框架形態，並可以創建出完全符合設計規範的高保真產品原型，並輸送到前端進行開發。
Axure元件庫
墨刀原型繪製工具：目前我們已經與墨刀產品達成合作共識，在未來，我們設計中台的所有資源，將集成到墨刀產品中，這將為產品同學的原型繪製提供更多的工具選擇。
3. 開發側的前端自動化工具在開發側，我們打造了前端開發自動化工具，此工具同樣集成了設計中台的全部資源，所有設計資源的結構與產品側保持一致。開發同學得到產品輸出的高保真原型後，可以使用此工具，以所見即所得的方式對頁面進行開發。
前端自動化工具的工作方式：
（1）創建項目：通過前端自動化工具新建或選擇項目模板，來完成項目的建立。
創建項目
（2）建立項目頁面：完成項目創建後，開始逐個建立項目的具體頁面，首先建立頁面骨骼（頁面佈局）
建立頁面佈局
（3）填充頁面內容：創建佈局之後，在區塊市場中選擇適用於業務場景的區塊，以所見即所得的方式對佈局進行填充，並完成頁面內容的建立。
建立頁面內容
（4）自定義場景區塊或模板：我們的區塊與模板支持自定義，目的是能夠靈活應對更復雜的業務場景。當模板庫與區塊庫中的資源不能滿足業務需要時，即可以通過WEB端的在線工具進行區塊與模板的自行創建。
WEB端在線工具，集成了我們所有的組件資源，通過對組件的自由組合，即可簡單快捷的完成場景區塊或模板頁面的創建，發佈代碼後，這些通過自定義的內容即可自由調取，並同步保存至物料庫中以豐富設計資源。
自定義場景區塊或模板
線上區塊物料資源
完成以上所有工作後，即可啓動調試，最終完成前端頁面的開發。
完成前端頁面建立
04 寫在最後中後台產品自動化開發，通過模塊化思維和流程化的開發方式，將設計中台沉澱的資源更靈活的的利用了起來，具備了更進一步的實用性，符合了B端產品設計與開發的“大局觀”，通過自動化工具所進一步沉澱出的設計資源，將成為新的設計能力並不斷的應用到新的業務當中去。
作者：李國明，視覺設計師
本文來源於人人都是產品經理合作媒體@58用户體驗設計中心（微信公眾號@58UXD），作者@馬亞薈
題圖來自pexels，基於CC0協議