跨企業(yè)級協(xié)作的圖片設計平臺設計
本文分享了一個(gè)跨企業(yè)、中心化的設計平臺的設計過(guò)程。從開(kāi)始的問(wèn)題出發(fā)到設計方案，作者從中收獲了很多，希望也能幫到大家。
一、產(chǎn)品背景
在一家具備較多分公司或者業(yè)務(wù)組織的大型企業(yè)組織中，在對外宣發(fā)的圖片資源方面遇到了兩個(gè)問(wèn)題：
各個(gè)組織對外宣傳的圖片，如何把控整體審美和保持輸出設計的規范和統一；
一些分公司中并沒(méi)有專(zhuān)業(yè)的設計師，但是也有需要圖片的需求，我們如何讓各組織掌握一定的設計自主權，同時(shí)，可以能夠根據具體場(chǎng)景在業(yè)務(wù)需要時(shí)快速產(chǎn)出，讓沒(méi)有設計基礎的普通人也能夠隨時(shí)輸出優(yōu)美的作品，能夠及時(shí)、快速的支持一線(xiàn)業(yè)務(wù)的營(yíng)銷(xiāo)和推廣。
基于以上兩點(diǎn)問(wèn)題，我們做了一套跨企業(yè)協(xié)作，中心化的設計平臺，這套設計平臺在集團已經(jīng)成功投入應用，產(chǎn)出了大量的圖片作品，降本增效效果明顯，為行業(yè)和上下游的供應商、客戶(hù)賦能。
二、整體方案
系統定位：在設計之初，我們經(jīng)過(guò)廣泛的調研之后，明確把這套設計平臺定位為總線(xiàn)上設計平臺，承載整個(gè)組織的線(xiàn)上宣發(fā)能力和設計資源管理能力，設計資源全部由線(xiàn)下轉為線(xiàn)上管理，未來(lái)需要支持包括但不限于設計圖片、H5頁(yè)面、短視頻的設計能力和輸出模版的能力，把集團宣發(fā)資源這塊的能力整合到一起，統一管理，所以這套平臺需要具備良好的擴展性。
總體流程是：由總公司設計師在設計師平臺設計規范化的模版，通過(guò)權限和“鎖定”控制可改區域，再把模版分配給對應的組織，子組織在平臺查看自己所屬業(yè)務(wù)的精選模版，進(jìn)行個(gè)性化修改再對外發(fā)布使用。
工作流程圖-1
面向人群：產(chǎn)品面向的主要角色有：
管理層：總公司的管理人員，需要把控設計平臺的全部功能權限和數據管理權限；
設計師：把歷史的作品和素材上傳到平臺統一管理，負責為各組織設計產(chǎn)出規范的模版；
資源管理員：負責上傳和管理素材，為各個(gè)組織分配素材的可用權限，包括字體、圖片素材等；
分公司管理層：負責管理對應的分組織內的員工、圖片等設計工作；
分公司業(yè)務(wù)人員：根據業(yè)務(wù)需求，負責產(chǎn)出圖片，下載對外宣發(fā)。
三、細化方案 3.1 產(chǎn)品架構圖
產(chǎn)品架構圖-2
產(chǎn)品架構上以主數據為基礎，在此基礎上設計了獨立的模版庫、圖片編輯器和管理后臺，主數據由用戶(hù)數據、組織數據、權限管理、數字字典、資源庫等組成，接入公司統一的主數據管理平臺，圖片編輯器和管理后臺將會(huì )是本次設計的重點(diǎn)。
3.2 編輯器設計
在開(kāi)始編輯器的正式設計前，我們繼續下沉去調研了當下和未來(lái)的業(yè)務(wù)發(fā)展計劃，我們需要支持的幾個(gè)重點(diǎn)場(chǎng)景：
1.需要設計的圖片尺寸。業(yè)務(wù)中需要設計最長(cháng)20000px的圖片輸出，編輯器的畫(huà)布需要對應支持這個(gè)高度和對應的操作交互（畫(huà)布坐標尺寸、展示比例、最佳尺寸、移動(dòng)畫(huà)布、上下滑動(dòng)等）；
2.需要設計的圖片種類(lèi)。業(yè)務(wù)中需要設計單圖、多圖的設計，多圖分模塊設計合成長(cháng)圖，圖片分模塊下載、圖片整張下載，對應平臺需要單畫(huà)布、多畫(huà)布、長(cháng)圖合成等功能；
3.圖片的鎖定功能：設計師在設計模版時(shí)鎖定畫(huà)布內的組件，可選鎖定位置和鎖定內容，已經(jīng)鎖定的屬性不可修改，分公司拿到模版后，只能修改未鎖定的內容；
4.考慮平臺總設計師設計模版的效率。平臺必須給總設計師提供有力的設計支持能力，讓設計師可以快速的產(chǎn)出模版，包括但不限于素材批量導入、已設計的模塊復用、PSD文件導入解析、參考線(xiàn)、自動(dòng)對齊、豐富的組件庫等能力；
5.考慮分公司的業(yè)務(wù)人員的易用性。平臺的操作必須簡(jiǎn)潔明了，符合大眾普通人的認知和習慣，傻瓜式的簡(jiǎn)便操作，讓人人都可以修改設計出優(yōu)秀的圖片作品。
產(chǎn)品圖-3
編輯器的設計界面主要由三大模塊組成：
組件區域：為設計師專(zhuān)門(mén)設計了搭建、模塊，在搭建頁(yè)面可以通過(guò)組件庫在線(xiàn)設計圖片作品，支持了基礎組件、圖表組件、形狀組件等豐富的組件庫，在畫(huà)布支持批量選中多個(gè)組件生成模塊，模塊可以在多次設計中進(jìn)行復用；
畫(huà)布區域：支持單畫(huà)布、多畫(huà)布，畫(huà)布均采用自由布局+圖層設計，還提供了畫(huà)布移動(dòng)、批量選中、參考線(xiàn)、自動(dòng)對齊等本次業(yè)務(wù)必須的能力，來(lái)提供設計師的設計效率；
配置區域：配置區域是對畫(huà)布中使用的組件的參數進(jìn)行配置的修改，方便設計師靈活定義組件的使用。
3.3 管理后臺設計
后臺為設計師平臺提供管理服務(wù)，包括主數據、業(yè)務(wù)資源、作品管理等：
產(chǎn)品圖-4
四、產(chǎn)品總結
在做這款圖片編輯平臺的過(guò)程中，我自己也收獲很多，僅分享給大家作為一點(diǎn)參考：
這個(gè)產(chǎn)品在內外部的使用中，產(chǎn)品的架構設計是基礎，決定了產(chǎn)品的當下和未來(lái)的擴展性，但是諸多細節設計決定了產(chǎn)品是否好用，這些細節設計的考慮其實(shí)是在考驗產(chǎn)品設計者對業(yè)務(wù)和操作場(chǎng)景的深刻理解，有時(shí)候一個(gè)好的細節的功能，會(huì )讓使用者體驗極好；
產(chǎn)品能力上自由和限制的權衡，本次產(chǎn)品中我們花費了不少的精力來(lái)做權限隔離和編輯器的鎖定能力，基于中心化的自由設計，做必要的控制，然后分發(fā)給各個(gè)分中心進(jìn)行修改使用，這種方式在產(chǎn)業(yè)方面確實(shí)有非常不錯的適用性，在各類(lèi)零代碼、低代碼盛行的當下，這種中心化的能力反而有值得借鑒的空間。
本文由@大風(fēng)吹 原創(chuàng )發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
提供信息存儲空間服務(wù)。
