編輯導(dǎo)語(yǔ)：Banner是推廣產(chǎn)品的一大利器，覆蓋面廣、廣告持久、方式靈活、互動(dòng)性強(qiáng)，運(yùn)營(yíng)banner一般起到運(yùn)營(yíng)活動(dòng)入口的功能，不同需求的商家需要的Banner設(shè)計(jì)也不同；本文作者詳細(xì)介紹了制定運(yùn)營(yíng)Banner的過(guò)程。

運(yùn)營(yíng)banner是線上產(chǎn)品運(yùn)營(yíng)最重要的輸出之一，相信大家或多或少都接觸過(guò)；運(yùn)營(yíng)banner一般起到運(yùn)營(yíng)活動(dòng)入口的功能，設(shè)計(jì)上要求有視覺(jué)沖擊力，能夠吸引人。

在互聯(lián)網(wǎng)公司中，運(yùn)營(yíng)banner往往是由不同的運(yùn)營(yíng)團(tuán)隊(duì)去完成，甚至一些跨國(guó)企業(yè)，運(yùn)營(yíng)banner是由不同國(guó)家的運(yùn)營(yíng)團(tuán)隊(duì)完成的。

那么如何保證大家輸出的運(yùn)營(yíng)banner在保證視覺(jué)沖擊力的同時(shí)，也能體現(xiàn)統(tǒng)一的設(shè)計(jì)語(yǔ)言呢？

最近筆者參與了運(yùn)營(yíng)banner規(guī)范的制定，服務(wù)的目標(biāo)主要是我司海外不同的運(yùn)營(yíng)團(tuán)隊(duì)，主要是為了規(guī)范整體的運(yùn)營(yíng)banner以及提高設(shè)計(jì)品質(zhì)的可控度。

以下制定運(yùn)營(yíng)banner規(guī)范的過(guò)程，希望能給大家?guī)?lái)一些幫助。

一、基石——Banner的設(shè)計(jì)原則

設(shè)計(jì)Banner，最基本是要做到讓用戶清晰知道活動(dòng)的內(nèi)容，即可用性/可讀性。這意味著我們不管用什么設(shè)計(jì)風(fēng)格及形式，都需要遵循一些最基礎(chǔ)核心的設(shè)計(jì)原則。

1. 對(duì)齊原則

我們的眼睛和大腦在觀察事物，接收認(rèn)知刺激的時(shí)候，會(huì)傾向于識(shí)別靠近的、相似的、完整的東西。因此，將相關(guān)的內(nèi)容對(duì)齊，有助于用戶快速獲取活動(dòng)信息。

常見(jiàn)的對(duì)齊方式有左對(duì)齊、右對(duì)齊、居中對(duì)齊，建議一個(gè)板式只使用其中一種對(duì)齊方式。一個(gè)小小的banner版面，如果使用了多種對(duì)齊方式，實(shí)際上在用戶看來(lái)這些信息都是零散的，增加了認(rèn)知成本。

2. 對(duì)比原則

關(guān)于banner上的重點(diǎn)信息，如優(yōu)惠折扣、活動(dòng)主旨，建議加大其與周圍元素的視覺(jué)差異?？赏ㄟ^(guò)顏色的對(duì)比、字重的粗細(xì)、色塊的運(yùn)用等方式，這樣既可以讓用戶快速獲取重點(diǎn)信息，又能增加banner的視覺(jué)豐富度，更多吸引用戶

3. 留白原則

這里的留白原則主要指2點(diǎn)：

1. 安全距離的留白：留出適當(dāng)?shù)陌踩吘?，可以保證banner在適配過(guò)程中不會(huì)出現(xiàn)重要信息看不全的情況。
2. 呼吸感：在排版時(shí)，元素之間需要留出空間，不建議過(guò)于緊湊密集。這樣才能讓整個(gè)畫面看起來(lái)是“輕松透氣”的，減少用戶認(rèn)知信息的負(fù)擔(dān)。

4. 聚焦原則

banner整體只需要一個(gè)視覺(jué)重點(diǎn)，其他的元素需要對(duì)應(yīng)的弱化，即需要有視覺(jué)層次。當(dāng)有過(guò)多的視覺(jué)焦點(diǎn)時(shí)，用戶反而無(wú)法快速獲取信息。處處強(qiáng)調(diào)，其實(shí)就是沒(méi)有強(qiáng)調(diào)。

5. 降噪原則

有時(shí)候一些設(shè)計(jì)師為了增加視覺(jué)的吸引力，使用過(guò)多的字體、顏色或者過(guò)于復(fù)雜的圖形，這種不斷做“乘法”的行為，實(shí)際上是在增加用戶認(rèn)知的“噪音”。

二、骨架——Banner的版式規(guī)范

主要版式構(gòu)圖有圖文左右排版以及文字居中排版，其中圖文左右排版又分為：左文右圖、左圖右文。

下面是關(guān)于不同版式的使用建議：

1. 圖文左右排版

當(dāng)配圖的示意不明確時(shí)，建議優(yōu)先使用左文右圖的版式。

配圖示意不明確通常指：配圖主要是根據(jù)文案內(nèi)容繪制的輔助圖形，這個(gè)時(shí)候用戶只看圖無(wú)法明確活動(dòng)內(nèi)容。

這種時(shí)候則建議優(yōu)先使用左文右圖的版式。根據(jù)尼爾森F視覺(jué)模型，我們的瀏覽習(xí)慣通常是從左往右以及從上到下的，因此將文字信息放在左邊有助于用戶快速瀏覽，獲取重點(diǎn)信息。

Tips：如果閱讀習(xí)慣是從右往左的話這一原則就不適用，如運(yùn)營(yíng)活動(dòng)的目標(biāo)地區(qū)是阿拉伯國(guó)家，這時(shí)候就建議使用左圖右文版式且文字為右對(duì)齊的方式。

當(dāng)配圖示意明確時(shí)，則可以考慮左圖右文的版式。

配圖示意明確通常指：用戶根據(jù)圖片即可明白活動(dòng)的對(duì)象。

如果活動(dòng)的對(duì)象還具有較強(qiáng)的吸引力，則建議優(yōu)先使用左圖右文的版式，通過(guò)有吸引力的活動(dòng)圖片獲得用戶的注意力。

2. 文字居中排版

當(dāng)運(yùn)營(yíng)對(duì)象的品類多、范圍大時(shí)，建議使用文字居中板式，突出文字內(nèi)容，如折扣優(yōu)惠等信息。

其他元素作為輔助圖形，營(yíng)造運(yùn)營(yíng)氛圍，增加用戶點(diǎn)擊吸引力。

三、外衣——Banner的顏色

根據(jù)產(chǎn)品的品牌配色，以下是色彩的搭配建議：

選取顏色時(shí)可以采用這2種思路：

1. 主色+同色系的輔色
2. 主色+對(duì)比色

可以避免顏色過(guò)多，導(dǎo)致畫面過(guò)于凌亂，增加用戶認(rèn)知負(fù)擔(dān)。

當(dāng)采用“主色+同色系輔色”時(shí)，優(yōu)惠信息建議使用色塊等方式去突出；當(dāng)采用“主色+對(duì)比色”思路時(shí)，優(yōu)惠信息建議可使用對(duì)比色去強(qiáng)調(diào)。

圖里的顏色建議僅供參考，大家在制定顏色規(guī)范的時(shí)候需要結(jié)合自身產(chǎn)品的品牌調(diào)性去定義，不能憑空捏來(lái)。

四、層次——Banner的元素

我們可以將構(gòu)成Banner的元素分為三個(gè)層次：

1. 文案層
2. 元素層
3. 背景層

1. 文案層

文案的對(duì)齊方式有：左對(duì)齊、居中對(duì)齊、右對(duì)齊。

文案組合設(shè)計(jì)形式常見(jiàn)的有：上下組合、上中下組合、一體式組合。

一般來(lái)說(shuō)，上下組合和上中下組合的方式在使用上沒(méi)有太多的限制，主要根據(jù)文案內(nèi)容去選擇使用；但一體式的文案組合方式建議是搭配居中布局的banner版式。

2. 元素層

將banner的元素層拆解的更細(xì)致的話有可以分為主體元素、點(diǎn)綴元素。

這部分的圖形元素是相當(dāng)于是組件庫(kù)，是設(shè)計(jì)積木，當(dāng)這個(gè)組件庫(kù)足夠豐富時(shí)，設(shè)計(jì)師就可以減少重復(fù)的勞動(dòng)，提高設(shè)計(jì)效率。

以我司為例子，我們可以將常用的元素分為：人物形態(tài)、折扣相關(guān)、旅行場(chǎng)景、地標(biāo)景點(diǎn)等，我們需要做的就是是維護(hù)并豐富這個(gè)組件庫(kù)。

3. 背景層

背景層是整個(gè)畫面最底層的部分，可運(yùn)用的視覺(jué)處理形式非常豐富。

例如：漸變色背景、插畫場(chǎng)景、放射性背景等，這些都可以歸類為點(diǎn)線面背景，還有真實(shí)照片背景等，這里就不一一列舉。

選擇背景時(shí)建議：

1. 背景需要與圖形元素風(fēng)格一致，如果背景與圖形元素風(fēng)格不一致或沒(méi)有處理好，二者就會(huì)顯得不融合，會(huì)使畫面看起來(lái)非常有“山寨感”。
2. 背景的作用是襯托文字層和主體元素，背景切不可喧兵奪主，弱化了文字信息或者主體元素。

五、規(guī)范是需要不斷迭代的

整個(gè)流程下來(lái)，大家可以看到整個(gè)規(guī)范的大框架，然而框架里的細(xì)節(jié)是需要不斷去填充及優(yōu)化的。

比如banner的設(shè)計(jì)庫(kù)，里面各元素需要大家一起去補(bǔ)充完善的，讓“積木”更豐富，這樣才能搭建出既滿足設(shè)計(jì)的統(tǒng)一性又有豐富視覺(jué)變化的“作品”。

設(shè)計(jì)規(guī)范是基于當(dāng)前團(tuán)隊(duì)的情況以及對(duì)未來(lái)的基本判斷制定的。規(guī)范的使用者在使用過(guò)程中會(huì)遇到新的問(wèn)題，同時(shí)外界的影響因素也是不斷在變化的，因此定期對(duì)設(shè)計(jì)規(guī)范進(jìn)行復(fù)盤優(yōu)化，是非常重要的。