面對(duì)不同運(yùn)營(yíng)團(tuán)隊(duì),如何規(guī)范運(yùn)營(yíng)Banner設(shè)計(jì)?

3 評(píng)論 24915 瀏覽 99 收藏 11 分鐘

編輯導(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ì)上要求有視覺沖擊力,能夠吸引人。

在互聯(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在保證視覺沖擊力的同時(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)信息。

常見的對(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)主旨,建議加大其與周圍元素的視覺差異。可通過(guò)顏色的對(duì)比、字重的粗細(xì)、色塊的運(yùn)用等方式,這樣既可以讓用戶快速獲取重點(diǎn)信息,又能增加banner的視覺豐富度,更多吸引用戶

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è)視覺重點(diǎn),其他的元素需要對(duì)應(yīng)的弱化,即需要有視覺層次。當(dāng)有過(guò)多的視覺焦點(diǎn)時(shí),用戶反而無(wú)法快速獲取信息。處處強(qiáng)調(diào),其實(shí)就是沒有強(qiáng)調(diào)。

5. 降噪原則

有時(shí)候一些設(shè)計(jì)師為了增加視覺的吸引力,使用過(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視覺模型,我們的瀏覽習(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ì)形式常見的有:上下組合、上中下組合、一體式組合。

一般來(lái)說(shuō),上下組合和上中下組合的方式在使用上沒有太多的限制,主要根據(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)用的視覺處理形式非常豐富。

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

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

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

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

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

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

設(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)化,是非常重要的。

 

本文由 @設(shè)計(jì)牛奶盒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 學(xué)到好多~

    來(lái)自廣東 回復(fù)
  2. 學(xué)習(xí)了

    回復(fù)
    1. ??謝謝,共勉~

      回復(fù)