跨企業(yè)級(jí)協(xié)作的圖片設(shè)計(jì)平臺(tái)設(shè)計(jì)

0 評(píng)論 2154 瀏覽 3 收藏 9 分鐘

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

一、產(chǎn)品背景

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

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

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

二、整體方案

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

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

工作流程圖-1

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

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

三、細(xì)化方案

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

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

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

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

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

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

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

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

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

5.考慮分公司的業(yè)務(wù)人員的易用性。平臺(tái)的操作必須簡(jiǎn)潔明了,符合大眾普通人的認(rèn)知和習(xí)慣,傻瓜式的簡(jiǎn)便操作,讓人人都可以修改設(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ì),還提供了畫布移動(dòng)、批量選中、參考線、自動(dòng)對(duì)齊等本次業(yè)務(wù)必須的能力,來提供設(shè)計(jì)師的設(shè)計(jì)效率;
  3. 配置區(qū)域:配置區(qū)域是對(duì)畫布中使用的組件的參數(shù)進(jìn)行配置的修改,方便設(shè)計(jì)師靈活定義組件的使用。

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

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

產(chǎn)品圖-4

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

在做這款圖片編輯平臺(tái)的過程中,我自己也收獲很多,僅分享給大家作為一點(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ì)者對(duì)業(yè)務(wù)和操作場(chǎng)景的深刻理解,有時(shí)候一個(gè)好的細(xì)節(jié)的功能,會(huì)讓使用者體驗(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)下,這種中心化的能力反而有值得借鑒的空間。

本文由@大風(fēng)吹 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!