 01 寫在開始在一個產(chǎn)品的設(shè)計過程中需要做大量的決策，做什么、如何做都需要經(jīng)過縝密的思考。做為設(shè)計師或開發(fā)者，你是否在相似度較高的后臺類需求中耗費了大量的精力，并被這類重復(fù)的問題浪費了大量的設(shè)計決策與開發(fā)決策的成本？做為一位專業(yè)的產(chǎn)品PM，你是否希望畫出的產(chǎn)品原型能夠符合設(shè)計的標(biāo)準(zhǔn)，讓你能夠把更多的精力專注在產(chǎn)品功能的本身？ 所以我們需要進一步去建立一套開發(fā)體系，將設(shè)計師、開發(fā)者從大量的重復(fù)工作中解救出來，并從產(chǎn)品源頭就開始統(tǒng)一UI的框架形態(tài)，使此類產(chǎn)品的能夠保持一致的用戶體驗。 02 什么是中后臺產(chǎn)品自動化開發(fā)中后臺產(chǎn)品自動化開發(fā)體系，是一個將設(shè)計資源做為中臺，并從產(chǎn)品端到開發(fā)側(cè)的完整流程閉環(huán)，它將標(biāo)準(zhǔn)化的設(shè)計資源集成到產(chǎn)品側(cè)與開發(fā)側(cè)，來打通中后臺產(chǎn)品開發(fā)的各個環(huán)節(jié)。通過整合設(shè)計資產(chǎn)，并建立自動化開發(fā)工具的形式，來重新定義中后臺產(chǎn)品的開發(fā)方式。  中后臺產(chǎn)品自動化官網(wǎng)首頁 03 如何做到自動化1. 設(shè)計側(cè)的資源中臺建立我們基于中臺的理念，不斷的從各業(yè)務(wù)線的實際產(chǎn)品中，對通用性的場景進行提煉，整合出高可復(fù)用性的區(qū)塊與模板頁面，對其進行規(guī)范化設(shè)計后，將其進行封裝，再通過任務(wù)形式對區(qū)塊進行歸類，從而形成各種的中后臺區(qū)塊化設(shè)計資產(chǎn)。這些設(shè)計資源可以在不同的業(yè)務(wù)場景中進行共享，形成場景設(shè)計中臺。  設(shè)計中臺的區(qū)塊資源 同時我們建立了自動化開發(fā)工具集，包含前端開發(fā)使用的自動化開發(fā)工具，產(chǎn)品同學(xué)使用的產(chǎn)品原型繪制資源，并將設(shè)計中臺所沉淀的資產(chǎn)，同步共享至開發(fā)側(cè)與產(chǎn)品側(cè)，從而形成從設(shè)計到產(chǎn)品、設(shè)計到開發(fā)的全流程閉環(huán)。  流程閉環(huán) 2. 產(chǎn)品側(cè)的原型繪制AXURE的元件庫資源：在產(chǎn)品側(cè)，我們?yōu)楫a(chǎn)品團隊設(shè)計了AXURE的元件庫，此元件庫集成了設(shè)計中臺的全部設(shè)計資源，以組件、區(qū)塊、模板頁面、圖標(biāo)集等形式進行分類。使用此元件庫，能夠從產(chǎn)品源頭統(tǒng)一交互規(guī)則與UI框架形態(tài)，并可以創(chuàng)建出完全符合設(shè)計規(guī)范的高保真產(chǎn)品原型，并輸送到前端進行開發(fā)。  Axure元件庫 墨刀原型繪制工具：目前我們已經(jīng)與墨刀產(chǎn)品達(dá)成合作共識，在未來，我們設(shè)計中臺的所有資源，將集成到墨刀產(chǎn)品中，這將為產(chǎn)品同學(xué)的原型繪制提供更多的工具選擇。 3. 開發(fā)側(cè)的前端自動化工具在開發(fā)側(cè)，我們打造了前端開發(fā)自動化工具，此工具同樣集成了設(shè)計中臺的全部資源，所有設(shè)計資源的結(jié)構(gòu)與產(chǎn)品側(cè)保持一致。開發(fā)同學(xué)得到產(chǎn)品輸出的高保真原型后，可以使用此工具，以所見即所得的方式對頁面進行開發(fā)。 前端自動化工具的工作方式： （1）創(chuàng)建項目：通過前端自動化工具新建或選擇項目模板，來完成項目的建立。  創(chuàng)建項目 （2）建立項目頁面：完成項目創(chuàng)建后，開始逐個建立項目的具體頁面，首先建立頁面骨骼（頁面布局）  建立頁面布局 （3）填充頁面內(nèi)容：創(chuàng)建布局之后，在區(qū)塊市場中選擇適用于業(yè)務(wù)場景的區(qū)塊，以所見即所得的方式對布局進行填充，并完成頁面內(nèi)容的建立。  建立頁面內(nèi)容 （4）自定義場景區(qū)塊或模板：我們的區(qū)塊與模板支持自定義，目的是能夠靈活應(yīng)對更復(fù)雜的業(yè)務(wù)場景。當(dāng)模板庫與區(qū)塊庫中的資源不能滿足業(yè)務(wù)需要時，即可以通過WEB端的在線工具進行區(qū)塊與模板的自行創(chuàng)建。 WEB端在線工具，集成了我們所有的組件資源，通過對組件的自由組合，即可簡單快捷的完成場景區(qū)塊或模板頁面的創(chuàng)建，發(fā)布代碼后，這些通過自定義的內(nèi)容即可自由調(diào)取，并同步保存至物料庫中以豐富設(shè)計資源。  自定義場景區(qū)塊或模板  線上區(qū)塊物料資源 完成以上所有工作后，即可啟動調(diào)試，最終完成前端頁面的開發(fā)。  完成前端頁面建立 04 寫在最后中后臺產(chǎn)品自動化開發(fā)，通過模塊化思維和流程化的開發(fā)方式，將設(shè)計中臺沉淀的資源更靈活的的利用了起來，具備了更進一步的實用性，符合了B端產(chǎn)品設(shè)計與開發(fā)的“大局觀”，通過自動化工具所進一步沉淀出的設(shè)計資源，將成為新的設(shè)計能力并不斷的應(yīng)用到新的業(yè)務(wù)當(dāng)中去。 作者：李國明，視覺設(shè)計師 本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心（微信公眾號@58UXD），作者@馬亞薈 題圖來自pexels，基于CC0協(xié)議 |
|
|
