本文分享了一個(gè)跨企業(yè)、中心化的設(shè)計(jì)平臺的設(shè)計(jì)過程。從開始的問題出發(fā)到設(shè)計(jì)方案，作者從中收獲了很多，希望也能幫到大家。

一、產(chǎn)品背景

在一家具備較多分公司或者業(yè)務(wù)組織的大型企業(yè)組織中，在對外宣發(fā)的圖片資源方面遇到了兩個(gè)問題：

1. 各個(gè)組織對外宣傳的圖片，如何把控整體審美和保持輸出設(shè)計(jì)的規(guī)范和統(tǒng)一；
2. 一些分公司中并沒有專業(yè)的設(shè)計(jì)師，但是也有需要圖片的需求，我們?nèi)绾巫尭鹘M織掌握一定的設(shè)計(jì)自主權(quán)，同時(shí)，可以能夠根據(jù)具體場景在業(yè)務(wù)需要時(shí)快速產(chǎn)出，讓沒有設(shè)計(jì)基礎(chǔ)的普通人也能夠隨時(shí)輸出優(yōu)美的作品，能夠及時(shí)、快速的支持一線業(yè)務(wù)的營銷和推廣。

基于以上兩點(diǎn)問題，我們做了一套跨企業(yè)協(xié)作，中心化的設(shè)計(jì)平臺，這套設(shè)計(jì)平臺在集團(tuán)已經(jīng)成功投入應(yīng)用，產(chǎn)出了大量的圖片作品，降本增效效果明顯，為行業(yè)和上下游的供應(yīng)商、客戶賦能。

二、整體方案

系統(tǒng)定位：在設(shè)計(jì)之初，我們經(jīng)過廣泛的調(diào)研之后，明確把這套設(shè)計(jì)平臺定位為總線上設(shè)計(jì)平臺，承載整個(gè)組織的線上宣發(fā)能力和設(shè)計(jì)資源管理能力，設(shè)計(jì)資源全部由線下轉(zhuǎn)為線上管理，未來需要支持包括但不限于設(shè)計(jì)圖片、H5頁面、短視頻的設(shè)計(jì)能力和輸出模版的能力，把集團(tuán)宣發(fā)資源這塊的能力整合到一起，統(tǒng)一管理，所以這套平臺需要具備良好的擴(kuò)展性。

總體流程是：由總公司設(shè)計(jì)師在設(shè)計(jì)師平臺設(shè)計(jì)規(guī)范化的模版，通過權(quán)限和“鎖定”控制可改區(qū)域，再把模版分配給對應(yīng)的組織，子組織在平臺查看自己所屬業(yè)務(wù)的精選模版，進(jìn)行個(gè)性化修改再對外發(fā)布使用。

工作流程圖-1

面向人群：產(chǎn)品面向的主要角色有：

• 管理層：總公司的管理人員，需要把控設(shè)計(jì)平臺的全部功能權(quán)限和數(shù)據(jù)管理權(quán)限；
• 設(shè)計(jì)師：把歷史的作品和素材上傳到平臺統(tǒng)一管理，負(fù)責(zé)為各組織設(shè)計(jì)產(chǎn)出規(guī)范的模版；
• 資源管理員：負(fù)責(zé)上傳和管理素材，為各個(gè)組織分配素材的可用權(quán)限，包括字體、圖片素材等；
• 分公司管理層：負(fù)責(zé)管理對應(yīng)的分組織內(nèi)的員工、圖片等設(shè)計(jì)工作；
• 分公司業(yè)務(wù)人員：根據(jù)業(yè)務(wù)需求，負(fù)責(zé)產(chǎn)出圖片，下載對外宣發(fā)。

三、細(xì)化方案

3.1 產(chǎn)品架構(gòu)圖

產(chǎn)品架構(gòu)圖-2

產(chǎn)品架構(gòu)上以主數(shù)據(jù)為基礎(chǔ)，在此基礎(chǔ)上設(shè)計(jì)了獨(dú)立的模版庫、圖片編輯器和管理后臺，主數(shù)據(jù)由用戶數(shù)據(jù)、組織數(shù)據(jù)、權(quán)限管理、數(shù)字字典、資源庫等組成，接入公司統(tǒng)一的主數(shù)據(jù)管理平臺，圖片編輯器和管理后臺將會是本次設(shè)計(jì)的重點(diǎn)。

3.2 編輯器設(shè)計(jì)

在開始編輯器的正式設(shè)計(jì)前，我們繼續(xù)下沉去調(diào)研了當(dāng)下和未來的業(yè)務(wù)發(fā)展計(jì)劃，我們需要支持的幾個(gè)重點(diǎn)場景：

1.需要設(shè)計(jì)的圖片尺寸。業(yè)務(wù)中需要設(shè)計(jì)最長20000px的圖片輸出，編輯器的畫布需要對應(yīng)支持這個(gè)高度和對應(yīng)的操作交互（畫布坐標(biāo)尺寸、展示比例、最佳尺寸、移動畫布、上下滑動等）；

2.需要設(shè)計(jì)的圖片種類。業(yè)務(wù)中需要設(shè)計(jì)單圖、多圖的設(shè)計(jì)，多圖分模塊設(shè)計(jì)合成長圖，圖片分模塊下載、圖片整張下載，對應(yīng)平臺需要單畫布、多畫布、長圖合成等功能；

3.圖片的鎖定功能：設(shè)計(jì)師在設(shè)計(jì)模版時(shí)鎖定畫布內(nèi)的組件，可選鎖定位置和鎖定內(nèi)容，已經(jīng)鎖定的屬性不可修改，分公司拿到模版后，只能修改未鎖定的內(nèi)容；

4.考慮平臺總設(shè)計(jì)師設(shè)計(jì)模版的效率。平臺必須給總設(shè)計(jì)師提供有力的設(shè)計(jì)支持能力，讓設(shè)計(jì)師可以快速的產(chǎn)出模版，包括但不限于素材批量導(dǎo)入、已設(shè)計(jì)的模塊復(fù)用、PSD文件導(dǎo)入解析、參考線、自動對齊、豐富的組件庫等能力；

5.考慮分公司的業(yè)務(wù)人員的易用性。平臺的操作必須簡潔明了，符合大眾普通人的認(rèn)知和習(xí)慣，傻瓜式的簡便操作，讓人人都可以修改設(shè)計(jì)出優(yōu)秀的圖片作品。

產(chǎn)品圖-3

編輯器的設(shè)計(jì)界面主要由三大模塊組成：

1. 組件區(qū)域：為設(shè)計(jì)師專門設(shè)計(jì)了搭建、模塊，在搭建頁面可以通過組件庫在線設(shè)計(jì)圖片作品，支持了基礎(chǔ)組件、圖表組件、形狀組件等豐富的組件庫，在畫布支持批量選中多個(gè)組件生成模塊，模塊可以在多次設(shè)計(jì)中進(jìn)行復(fù)用；
2. 畫布區(qū)域：支持單畫布、多畫布，畫布均采用自由布局+圖層設(shè)計(jì)，還提供了畫布移動、批量選中、參考線、自動對齊等本次業(yè)務(wù)必須的能力，來提供設(shè)計(jì)師的設(shè)計(jì)效率；
3. 配置區(qū)域：配置區(qū)域是對畫布中使用的組件的參數(shù)進(jìn)行配置的修改，方便設(shè)計(jì)師靈活定義組件的使用。

3.3 管理后臺設(shè)計(jì)

后臺為設(shè)計(jì)師平臺提供管理服務(wù)，包括主數(shù)據(jù)、業(yè)務(wù)資源、作品管理等：

產(chǎn)品圖-4

四、產(chǎn)品總結(jié)

在做這款圖片編輯平臺的過程中，我自己也收獲很多，僅分享給大家作為一點(diǎn)參考：

1. 這個(gè)產(chǎn)品在內(nèi)外部的使用中，產(chǎn)品的架構(gòu)設(shè)計(jì)是基礎(chǔ)，決定了產(chǎn)品的當(dāng)下和未來的擴(kuò)展性，但是諸多細(xì)節(jié)設(shè)計(jì)決定了產(chǎn)品是否好用，這些細(xì)節(jié)設(shè)計(jì)的考慮其實(shí)是在考驗(yàn)產(chǎn)品設(shè)計(jì)者對業(yè)務(wù)和操作場景的深刻理解，有時(shí)候一個(gè)好的細(xì)節(jié)的功能，會讓使用者體驗(yàn)極好；
2. 產(chǎn)品能力上自由和限制的權(quán)衡，本次產(chǎn)品中我們花費(fèi)了不少的精力來做權(quán)限隔離和編輯器的鎖定能力，基于中心化的自由設(shè)計(jì)，做必要的控制，然后分發(fā)給各個(gè)分中心進(jìn)行修改使用，這種方式在產(chǎn)業(yè)方面確實(shí)有非常不錯(cuò)的適用性，在各類零代碼、低代碼盛行的當(dāng)下，這種中心化的能力反而有值得借鑒的空間。