UI設(shè)計師如何高效支援Banner設(shè)計

1、目錄為什么需要高效？Banner構(gòu)成拆解模板化沉淀設(shè)計規(guī)范制定視覺走查流程化閉環(huán)案例實操總結(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)品的

2、Banner而言。其構(gòu)成一般由標題文案、主體元素（人物、物品等）、背景（場景、底色等）元素構(gòu)成。模板化沉淀面向設(shè)計師：模板化運營設(shè)計 + 素材資源同步盤第一種方法是本文的核心方法，原理很簡單，其實就是利用Sketch和或者Figma的組件化（為了統(tǒng)一語義本文統(tǒng)一稱為組件，其子集為用例）進行設(shè)計。我們將這些元素分別打包成組件.把組件的用例調(diào)整后放置在預覽區(qū)所有不同尺寸的畫板中。當出現(xiàn)需要特殊調(diào)整的時候可以解綁微調(diào)。如果希望給畫面添加一些細節(jié)的話，再另外添加即可這么一波操作，大概1個多鐘就可以輸出一整套7個圖，足以應(yīng)付一周22套運營圖的需求了（悲傷的故事）當然要達到這種速度還需要一個通用素材庫的加

3、持?？臻e時間把一些KV的圖素拆出來放到Eagle共享盤，這樣你和你的小伙伴們就可以高效愉快地拉圖了.面向運營同學：創(chuàng)客貼等第三方設(shè)計平臺在創(chuàng)客貼搞個團隊模式，然后設(shè)計師把常用的一些模板上傳上去，運營同學只要自己改改文案，換換人就可以啦！設(shè)計規(guī)范制定雖然有了模板化的設(shè)計工具，但如果缺少了設(shè)計規(guī)范的引導，就會宛如脫韁野馬，設(shè)計出各種偏離業(yè)務(wù)需求或風格不一致的Banner出來。設(shè)計規(guī)范需要與運營同學共同協(xié)商制定，比如標題最長長度、排版構(gòu)圖、圖素尺寸等等。具體規(guī)范需要根據(jù)不同的業(yè)務(wù)需求進行定制化。下面就以我們團隊的制定方式作為范例說明一下。排版構(gòu)圖常規(guī)的排版構(gòu)圖模式有居中式構(gòu)圖、左右構(gòu)圖。居中式構(gòu)圖：

4、居中式構(gòu)圖是將主體放置畫面的中心進行構(gòu)圖。這種構(gòu)圖方式這種構(gòu)圖方式的最大優(yōu)點就在于主體突出、明確而且畫面容易取得左右平衡的效果。左右式構(gòu)圖：左右構(gòu)圖將文字標題元素和主體物按照比例分割進行位置安排。符合用戶閱讀習慣：閱讀視線要符合用戶從左到右或從上到下的瀏覽習慣。尺寸Banner的尺寸需要根據(jù)UI界面的需求進行制定。例如針對我司的產(chǎn)品，一個活動最多有7個運營位的樣式，分別在首頁、搜索位、文章封面、活動中心、閃屏等。標題長度限制由于運營同學有時候?qū)τ跇祟}的長度沒有經(jīng)過精簡優(yōu)化，標題特別長長長長長長長長，加上Banner本身就小，在手機屏幕上基本看不清，也就沒有意義了。因此需要共同制定好主標題副標題長度限制，超過就直接打回重改。出血設(shè)置制定出血位的原因是某些尺寸的圖素可能出現(xiàn)在多個不同的入口，以及不同尺寸的手機屏幕可能會出現(xiàn)裁剪的現(xiàn)象。視覺走查不論是設(shè)計師也好，運營同學也好，完成設(shè)計之后最好建立一個視覺自查表進行對照，目的是盡量減少一些原則性錯誤，減少來回改稿的情況。流程化閉環(huán)為了更完美的提升整個流程效率，不僅需要升級中部流程，前后端的流程都需要進行優(yōu)化。首先是最好在需求的前端建立需求排期表進行需求的篩選。分門別類地將需求的詳細信息進行可視化展示，對應(yīng)的需求文檔接入。這里不得不吹一波飛書文檔，太