產(chǎn)品設(shè)計師如何高效支援Banner設(shè)計需求

0 評論 3887 瀏覽 15 收藏 9 分鐘

編輯導語:當下互聯(lián)網(wǎng)進入以內(nèi)容運營為核心的時代,市場競爭激烈,需要對于市場的熱點進行快速反應(yīng)、持續(xù)迭代,且不管是大廠還是小廠的UI設(shè)計師都需要支援運營需求。本文作者就產(chǎn)品設(shè)計師如何高效支援Banner的設(shè)計需求進行了總結(jié),一起來看一下。

一、為什么需要高效?

當下互聯(lián)網(wǎng)進入以內(nèi)容運營為核心的時代,市場競爭激烈,需要對于市場的熱點進行快速反應(yīng),持續(xù)迭代。不管是大廠還是小廠的UI設(shè)計師多多少少需要支援運營需求。U1S1 做簡單運營圖對于體驗設(shè)計方向的設(shè)計師來說,性價比確實有點低,一般難度較高的運營設(shè)計需求都由專業(yè)的視覺設(shè)計師來做,體驗設(shè)計師一般接到的都是比較簡單或者緊急的需求,這對于設(shè)計的能力提升來說是比較有限的,大量的時間被占用在運營設(shè)計上,持續(xù)被榨干,有些本末倒置,但人生就是這么無奈,總得想辦法解決。

二、Banner構(gòu)成拆解

就目前大部分互聯(lián)產(chǎn)品的Banner而言。

其構(gòu)成一般由標題文案、主體元素(人物、物品等)、背景(場景、底色等)元素構(gòu)成。

三、模板化沉淀

1. 面向設(shè)計師:模板化運營設(shè)計 + 素材資源同步盤

第一種方法是本文的核心方法,原理很簡單,其實就是利用Sketch和或者Figma的組件化(為了統(tǒng)一語義本文統(tǒng)一稱為組件,其子集為用例)進行設(shè)計。

我們將這些元素分別打包成組件。

把組件的用例調(diào)整后放置在預(yù)覽區(qū)所有不同尺寸的畫板中。

當出現(xiàn)需要特殊調(diào)整的時候可以解綁微調(diào)。如果希望給畫面添加一些細節(jié)的話,再另外添加即可~

這么一波操作,大概1個多鐘就可以輸出一整套7個圖,足以應(yīng)付一周22套運營圖的需求了(悲傷的故事)。

當然要達到這種速度還需要一個通用素材庫的加持??臻e時間把一些KV的圖素拆出來放到Eagle共享盤,這樣你和你的小伙伴們就可以高效愉快地拉圖了……

2. 面向運營同學:創(chuàng)客貼等第三方設(shè)計平臺

在創(chuàng)客貼搞個團隊模式,然后設(shè)計師把常用的一些模板上傳上去,運營同學只要自己改改文案,換換人就可以啦。

四、設(shè)計規(guī)范制定

雖然有了模板化的設(shè)計工具,但如果缺少了設(shè)計規(guī)范的引導,就會宛如脫韁野馬,設(shè)計出各種偏離業(yè)務(wù)需求或風格不一致的Banner出來。

設(shè)計規(guī)范需要與運營同學共同協(xié)商制定,比如標題最長長度、排版構(gòu)圖、圖素尺寸等等。具體規(guī)范需要根據(jù)不同的業(yè)務(wù)需求進行定制化。

下面就以我們團隊的制定方式作為范例說明一下。

1. 排版構(gòu)圖

常規(guī)的排版構(gòu)圖模式有居中式構(gòu)圖、左右構(gòu)圖。

居中式構(gòu)圖:居中式構(gòu)圖是將主體放置畫面的中心進行構(gòu)圖。這種構(gòu)圖方式的最大優(yōu)點就在于主體突出、明確而且畫面容易取得左右平衡的效果。

左右式構(gòu)圖:左右構(gòu)圖將文字標題元素和主體物按照比例分割進行位置安排。符合用戶閱讀習慣:閱讀視線要符合用戶從左到右或從上到下的瀏覽習慣。

2. 尺寸

Banner的尺寸需要根據(jù)UI界面的需求進行制定。

例如針對我司的產(chǎn)品,一個活動最多有7個運營位的樣式,分別在首頁、搜索位、文章封面、活動中心、閃屏等。

3. 標題長度限制

由于運營同學有時候?qū)τ跇祟}的長度沒有經(jīng)過精簡優(yōu)化,標題特別長長長長長長長長,加上Banner本身就小,在手機屏幕上基本看不清,也就沒有意義了。因此需要共同制定好主標題副標題長度限制,超過就直接打回重改。

4. 出血設(shè)置

制定出血位的原因是某些尺寸的圖素可能出現(xiàn)在多個不同的入口,以及不同尺寸的手機屏幕可能會出現(xiàn)裁剪的現(xiàn)象。

五、視覺走查

不論是設(shè)計師也好,運營同學也好,完成設(shè)計之后最好建立一個視覺自查表進行對照,目的是盡量減少一些原則性錯誤,減少來回改稿的情況。

六、流程化閉環(huán)

為了更完美的提升整個流程效率,不僅需要升級中部流程,前后端的流程都需要進行優(yōu)化。

首先是最好在需求的前端建立需求排期表進行需求的篩選。

分門別類地將需求的詳細信息進行可視化展示,對應(yīng)的需求文檔接入。

針對需求的后端即設(shè)計交付環(huán)節(jié),最好是在設(shè)計稿導出的時候使用工具進行壓縮,更小的體積意味著更快的加載速度,這對于提升產(chǎn)品的用戶體驗是毋庸置疑的。這里推薦2個工具:

  1. imageOptim
  2. Picdiet https://www.picdiet.com/zh-cn (個人推薦JPG使用這個網(wǎng)站,壓縮的質(zhì)量最高)

七、總結(jié)

最后,如果實在人力不足的情況下,就把項目外包出去吧,畢竟占用UI設(shè)計師太多時間產(chǎn)出如果沒什么價值的話,其實roi也是很低的,設(shè)計師的人力成本也是錢!

能用錢解決的問題,就用錢解決!
—— 魯迅

如果運營經(jīng)常提出很多無理的需求,比如量很大,沒有什么依據(jù)都是拍腦袋想的,那可以考慮把項目外包出去,一旦外包出去,花的就是真金白銀,讓運營也知道,這是設(shè)計師嘔心瀝血畫的,市場的價格就擺在那,整天搞些有的沒的是否真的能對項目帶來價值。

這就是我們團隊目前的解決方案,如果有更好的方式請多指教哦!

大家自己斟酌選擇大不了就走人,喜歡就記得點個贊哦~

 

本文由 @坡安Chris 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

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

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