點(diǎn)擊必看!超全Banner設(shè)計(jì)秘籍,打造吸睛之作

2025-2-28    天宇 設(shè)計(jì)思維

Banner設(shè)計(jì)是最常見(jiàn)的一種廣告運(yùn)營(yíng)形式,是我們?cè)O(shè)計(jì)師在日常工作中經(jīng)常接觸到的需求。Banner設(shè)計(jì)看似簡(jiǎn)單,實(shí)則囊括了平面設(shè)計(jì)、設(shè)計(jì)心理學(xué)、用戶研究、文案設(shè)計(jì)等多領(lǐng)域的知識(shí)點(diǎn),那么我們?cè)撊绾巫龊靡粡?ldquo;優(yōu)質(zhì)banner”呢?下面我總結(jié)歸納了自己平時(shí)做banner的一些心得經(jīng)驗(yàn)與各位大佬交流探討,有不足之處,歡迎指出。
超全面的banner設(shè)計(jì)指南
 
 
一、banner的作用
Banner在運(yùn)營(yíng)工作中具有吸引注意力、提高轉(zhuǎn)化率、傳達(dá)信息、增強(qiáng)品牌形象、引導(dǎo)用戶行為和營(yíng)造活動(dòng)氛圍等多種作用。因此,在運(yùn)營(yíng)工作中,需要根據(jù)具體的需求和目標(biāo),精心設(shè)計(jì)并合理運(yùn)用Banner,以實(shí)現(xiàn)更好的運(yùn)營(yíng)效果。
超全面的banner設(shè)計(jì)指南
 
 
二、banner的常見(jiàn)類(lèi)型
在banner設(shè)計(jì)中,我們常見(jiàn)的幾種設(shè)計(jì)類(lèi)型,大致分為照片類(lèi)、文字類(lèi)、插畫(huà)類(lèi)、綜合類(lèi)四種設(shè)計(jì)類(lèi)型。
 
1.照片類(lèi)
照片類(lèi)banner以照片為主題,照片具有直觀性和視覺(jué)沖擊力強(qiáng)的特點(diǎn),能夠迅速吸引人們的注意力,增強(qiáng)視覺(jué)效果??梢灾庇^地表達(dá)產(chǎn)品的特點(diǎn)和賣(mài)點(diǎn),使得信息傳達(dá)更加簡(jiǎn)潔明了。具有記憶性和識(shí)別性,能夠讓人們快速地回憶起品牌或產(chǎn)品,增強(qiáng)品牌形象和知名度。可以結(jié)合不同的創(chuàng)意元素和設(shè)計(jì)手法,如手繪、攝影、合成等,營(yíng)造出獨(dú)特的視覺(jué)效果和品牌形象,提升宣傳品質(zhì)。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
2.文字類(lèi)
文字型Banner以文字為主要元素,能夠直接傳達(dá)信息,清晰地表達(dá)廣告的主題和內(nèi)容。不需要過(guò)多的視覺(jué)轉(zhuǎn)換,用戶可以快速地理解廣告內(nèi)容,提高廣告的接受度??梢酝ㄟ^(guò)運(yùn)用各種文字技巧,如標(biāo)題、內(nèi)容、標(biāo)語(yǔ)等,吸引用戶的注意力,激發(fā)他們的興趣和好奇心。可以針對(duì)不同的受眾群體,通過(guò)文字的精準(zhǔn)表達(dá),達(dá)到精準(zhǔn)傳播的效果。文字型Banner的內(nèi)容易于復(fù)制和分享,可以通過(guò)社交媒體等渠道進(jìn)行傳播,擴(kuò)大廣告的覆蓋面。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
3.插畫(huà)類(lèi)
插畫(huà)類(lèi)型Banner以插畫(huà)為主要元素,具有強(qiáng)烈的視覺(jué)沖擊力和藝術(shù)感,能夠吸引用戶的注意力并留下深刻的印象。可以結(jié)合各種創(chuàng)意元素和設(shè)計(jì)手法,如手繪、矢量圖形、水彩等,營(yíng)造出獨(dú)特的視覺(jué)效果和品牌形象,提升宣傳品質(zhì)。插畫(huà)類(lèi)型Banner的插畫(huà)具有記憶性和識(shí)別性,能夠讓人們快速地回憶起品牌或產(chǎn)品,增強(qiáng)品牌形象和知名度。可以適應(yīng)不同的宣傳渠道和媒體,如網(wǎng)頁(yè)、社交媒體、戶外廣告等,使得宣傳效果更加廣泛和有效。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
4.綜合類(lèi)
綜合型Banner綜合運(yùn)用文字、圖像、視頻等多種元素,結(jié)合產(chǎn)品特點(diǎn)和宣傳目的,營(yíng)造出獨(dú)特的視覺(jué)效果和品牌形象??梢酝ㄟ^(guò)創(chuàng)意性的設(shè)計(jì)和排版,將各種元素巧妙地融合在一起,形成獨(dú)特的視覺(jué)效果,吸引用戶的注意力??梢酝ㄟ^(guò)精準(zhǔn)的文字和圖像傳達(dá)產(chǎn)品或服務(wù)的特點(diǎn)和賣(mài)點(diǎn),使得信息傳達(dá)更加精準(zhǔn)和有效。以包含交互元素,如按鈕、鏈接等,使用戶能夠與廣告進(jìn)行互動(dòng),增強(qiáng)用戶體驗(yàn)和參與度。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
三、banner的常見(jiàn)布局
在banner設(shè)計(jì)中,我們常見(jiàn)的幾種設(shè)計(jì)布局分為居中布局、左右布局、上下布局、發(fā)射狀布局、對(duì)角線布局五種常見(jiàn)布局。
超全面的banner設(shè)計(jì)指南
 
 
1.居中布局
居中構(gòu)圖是一種將主體文案放在畫(huà)面的正中心進(jìn)行構(gòu)圖的方法。這種構(gòu)圖方式能夠突出主體,使畫(huà)面容易取得左右平衡的效果。居中構(gòu)圖的特點(diǎn)在于能夠?qū)?huà)面的各個(gè)元素有機(jī)地組織起來(lái),形成一個(gè)有機(jī)的整體,使畫(huà)面具有強(qiáng)烈的視覺(jué)沖擊力和平衡感。同時(shí),居中構(gòu)圖還能夠強(qiáng)調(diào)畫(huà)面的主體元素,突出主題和重點(diǎn),提高視覺(jué)沖擊力和藝術(shù)感。
超全面的banner設(shè)計(jì)指南
 
 
2.左右布局
簡(jiǎn)單理解就是將banner文案主題排版在畫(huà)面的左邊或右邊,這里的左右不僅僅指的是居中左右,也可以是左上或者右上。其余的空間可以擺放商品、模特、點(diǎn)綴等元素。對(duì)于橫版海報(bào)來(lái)說(shuō),左右對(duì)齊是將背景元素和文字放置在相對(duì)的區(qū)域,從而達(dá)到一個(gè)畫(huà)面的平衡,這是常見(jiàn)的橫版排版方式。這種構(gòu)圖形式最常見(jiàn),容錯(cuò)率也比較高??梢愿鶕?jù)版面內(nèi)容的信息量劃分畫(huà)面的空間,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
3.環(huán)繞式布局
環(huán)繞式布局能夠有效地吸引讀者的注意力,因?yàn)樗ㄟ^(guò)向四周擴(kuò)散的方式,引導(dǎo)讀者的視線,從而強(qiáng)調(diào)重點(diǎn)信息。相關(guān)元素圍繞文字形成環(huán)繞效果,有效的強(qiáng)調(diào)文字,但在單一的文字排版會(huì)造成視覺(jué)中心留白空間過(guò)大,畫(huà)面太空,這時(shí)的文字設(shè)計(jì)就需要更大更加突出,字間距相對(duì)拉小。設(shè)計(jì)上裝飾性會(huì)更多一些將文字設(shè)計(jì)更加偏向圖形化。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
4.上下布局
上下布局通過(guò)將信息按照重要程度進(jìn)行排列,能夠更好地展示出信息的層次感和主次關(guān)系。通常會(huì)把重要的信息放在頂部,次要的信息放在底部,從而使得整個(gè)banner的信息展示更加有邏輯性和條理性。通過(guò)將圖片和文字進(jìn)行合理的排版和搭配,可以創(chuàng)造出強(qiáng)烈的視覺(jué)沖擊力,從而更好地吸引消費(fèi)者的眼球。上下布局比較適合在長(zhǎng)頁(yè)面上進(jìn)行展示,因?yàn)檫@種布局方式可以更好地利用頁(yè)面空間,使得整個(gè)頁(yè)面的信息展示更加流暢和連貫。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
5.對(duì)角線布局
"對(duì)角線布局"是一種在Banner設(shè)計(jì)中打破常規(guī)的布局方式,其特點(diǎn)是將文案和圖形等元素放置在對(duì)角線上,以形成視覺(jué)上的沖擊力和平衡感。對(duì)角線布局改變了常規(guī)的橫豎排版方式,能夠吸引讀者的注意力,增強(qiáng)畫(huà)面的新穎感和創(chuàng)意性。通過(guò)在兩個(gè)對(duì)角線上放置相應(yīng)的元素,可以保持畫(huà)面的平衡感和穩(wěn)定性,避免過(guò)于傾斜或偏重。對(duì)角線布局可以將重點(diǎn)信息放在畫(huà)面的對(duì)角線上,通過(guò)位置的特殊處理,突出信息的傳達(dá)效果,增強(qiáng)記憶度??梢杂行У乩卯?huà)面的空間,將元素放置在對(duì)角線上,增強(qiáng)畫(huà)面的空間感和立體感。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
四、banner設(shè)計(jì)的四大要素
首先我們將一個(gè)一個(gè)運(yùn)營(yíng) banner 按照組件層級(jí)進(jìn)行拆分。分為:文字層、配圖層、裝飾層、背景層。
 
文字層:
文字是banner中必不可少的元素,包括標(biāo)題、副標(biāo)題、標(biāo)語(yǔ)等,用于傳達(dá)banner的主題和信息。
 
配圖層:
配圖是banner核心部分,通常包括產(chǎn)品、品牌、人物等圖像,以及與之相關(guān)的文字內(nèi)容。
 
裝飾層:
裝飾元素可以增強(qiáng)banner的美感和吸引力,通常包括圖形、線條、顏色等。
 
背景層:
背景是banner的基礎(chǔ),可以選擇不同的顏色、圖片或紋理作為背景,以襯托出整個(gè)banner的主題和風(fēng)格。
超全面的banner設(shè)計(jì)指南
 
 
1.文字層
在banner設(shè)計(jì)中,文字層是核心內(nèi)容展示,以展示主要文字信息為主。通常包括標(biāo)題、副標(biāo)題、標(biāo)語(yǔ)等元素。文字層的作用是傳達(dá)信息,幫助用戶快速了解banner的主題和內(nèi)容。在文字層的排版設(shè)計(jì)中,需要注意以下幾點(diǎn):
 
字體選擇:
根據(jù)banner的主題和風(fēng)格選擇合適的字體,通常情況下,簡(jiǎn)潔、清晰的字體更具有可讀性和辨識(shí)度。
 
文字排版
:文字排版要合理,要注意字體大小、行距、對(duì)齊方式等,使得文字更加易讀易懂。
 
文字內(nèi)容:
文字內(nèi)容要簡(jiǎn)潔明了,突出重點(diǎn),避免過(guò)多的文字堆砌和重復(fù),以免讓用戶感到混亂和困惑。
 
文字與背景的對(duì)比:
文字與背景的對(duì)比要強(qiáng)烈,以提高文字的辨識(shí)度和可讀性。通常情況下,深色背景上使用淺色字體,淺色背景上使用深色字體。
 
文字裝飾:
為了提高文字的吸引力和視覺(jué)效果,可以使用一些文字裝飾技巧,如加粗、斜體、下劃線等。
 
在banner設(shè)計(jì)中,大標(biāo)題通常會(huì)采用較大的字體和粗筆畫(huà),以吸引用戶的注意力。為了不與大標(biāo)題搶風(fēng)頭,小標(biāo)題則會(huì)相應(yīng)地變細(xì)變小,并且顏色選擇也會(huì)更加弱化。字體越大,其在畫(huà)面中的占比就越大,用戶在看到畫(huà)面時(shí)就會(huì)直接被大文案所吸引。同樣地,字重越大(即字體越粗、顏色比例越重),也會(huì)增加對(duì)用戶的吸引力。相反,如果字號(hào)過(guò)小、字重過(guò)輕,就很難被用戶注意到。因此,在banner設(shè)計(jì)中,需要根據(jù)要傳達(dá)的信息和設(shè)計(jì)風(fēng)格,恰當(dāng)?shù)剡x擇字體大小、粗細(xì)和顏色,以引導(dǎo)用戶的視線,并突出最重要的信息。。
超全面的banner設(shè)計(jì)指南
 
 
在我們?cè)O(shè)計(jì)banner的時(shí)候,一定要突出我們的文字信息,避免過(guò)多的元素干擾。如下圖所示,左圖文字信息過(guò)于分散且沒(méi)有主次之分,除了一個(gè)90%可以看到外,別的文字信息都看起來(lái)很吃力,無(wú)法正確讓用戶了解到我們的banner傳遞的活動(dòng)信息。右圖層次分明,主層級(jí)明顯,用戶第一眼就可以識(shí)別圖片所傳達(dá)的信息內(nèi)容。
超全面的banner設(shè)計(jì)指南
 
 
字體的選擇上也是衡量當(dāng)前產(chǎn)品用戶定位的標(biāo)準(zhǔn),首先文字結(jié)構(gòu)不能太過(guò)于復(fù)雜,再者就是符合產(chǎn)品的定位。比如教育類(lèi)banner在字體的選擇上需要字形簡(jiǎn)單而且飽滿有趣,所以一些藝術(shù)手寫(xiě)可愛(ài)字體比較適合。
例如:站酷銳銳體、站酷彤彤體、沐瑤軟筆手寫(xiě)體、站酷快樂(lè)體、鄭慶科黃油體、站酷小薇 LOGO 體等。
超全面的banner設(shè)計(jì)指南
 
 
在人物banner或者知識(shí)分享和知識(shí)付費(fèi)的場(chǎng)景中,為了體現(xiàn)高端,文字應(yīng)該簡(jiǎn)潔明了,不要過(guò)于花哨或隨意。一些簡(jiǎn)單的襯線字體或黑體字形可以很好地滿足這個(gè)需求。這些字體具有簡(jiǎn)潔、清晰的特點(diǎn),能夠有效地傳達(dá)信息,同時(shí)又不會(huì)過(guò)于張揚(yáng)或喧賓奪主。
例如:漢儀瑞意宋、方正清刻本悅宋、方正蘭亭、造字工房朗宋、造字工房黃金時(shí)代體、造字工房尚雅體。思源黑、思源宋、站酷文藝體、方正書(shū)宋簡(jiǎn)體。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
2.配圖層
在banner設(shè)計(jì)中,配圖層是吸引用戶注意力和提高視覺(jué)效果的重要因素之一。配圖層通常包括產(chǎn)品圖片、背景圖片、圖標(biāo)等,需要根據(jù)banner的主題和風(fēng)格進(jìn)行選擇和設(shè)計(jì)。在配圖層的設(shè)計(jì)中,需要注意以下幾點(diǎn):
 
圖片質(zhì)量
:選擇的圖片要清晰、高質(zhì)量,以提高整體的視覺(jué)效果。
 
圖片比例:
圖片的比例要合理,避免過(guò)大或過(guò)小,影響整體的視覺(jué)效果。
 
圖片風(fēng)格:
選擇的圖片要與banner的主題和風(fēng)格相符合,以營(yíng)造出整體的視覺(jué)效果。
 
圖片排版:
圖片的排版要合理,避免過(guò)多的圖片堆砌和重復(fù),以免讓用戶感到混亂和困惑。
 
圖片與文字的配合:
圖片與文字的配合要協(xié)調(diào),避免出現(xiàn)文字與圖片的沖突和不和諧的情況。
 
在我們?cè)O(shè)計(jì)banner的時(shí)候,圖片的傳達(dá)信息一定要清晰明確,如果將精準(zhǔn)傳達(dá)信息的圖片放在畫(huà)面中,無(wú)論是否有文案,用戶的直覺(jué)思維所想到的內(nèi)容都會(huì)非常接近。
 
如下面兩張圖片,哪怕去掉了文字,我們也可以聯(lián)想兩家視頻播放平臺(tái)會(huì)員卡、促銷(xiāo)、打折這些信息。這就是圖片給我們帶來(lái)的最直觀的信息呈現(xiàn)方式。
超全面的banner設(shè)計(jì)指南
 
 
但當(dāng)我們的banner出現(xiàn)配圖與文案不契合的情況下,如果沒(méi)有文案,我們沒(méi)有辦法準(zhǔn)確的了解信息內(nèi)容。整個(gè)banner不管從氛圍還是傳達(dá)信息的功能都會(huì)弱化很多。
 
例如下圖漢字書(shū)寫(xiě)大賽,左圖的配圖是科技風(fēng)的建模圖片,如果去掉文字,我們完全無(wú)法獲知這與漢字書(shū)寫(xiě)有任何關(guān)系,相反右圖的配圖我們就很容易獲取到正確的信息傳遞。
超全面的banner設(shè)計(jì)指南
 
 
在我們?cè)O(shè)計(jì)的時(shí)候注意主體物要突出飽滿,適當(dāng)?shù)脑黾赢?huà)面的元素。主題太小或者太少,會(huì)使會(huì)面變得很空。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
3.裝飾層
在banner設(shè)計(jì)中,裝飾層是一種能夠豐富視覺(jué)效果、提高吸引力和品牌形象的重要因素。裝飾層可以包括各種圖形、線條、顏色等元素,用于增強(qiáng)banner的美感和吸引力。裝飾層的設(shè)計(jì)需要注意以下幾點(diǎn):
 
保持簡(jiǎn)潔:
裝飾層的設(shè)計(jì)不能過(guò)于復(fù)雜或花哨,以免喧賓奪主,影響主要內(nèi)容的傳達(dá)。
 
與主題和風(fēng)格相符
:裝飾層的設(shè)計(jì)需要與整個(gè)banner的主題和風(fēng)格相符,不能與主題相悖,影響整體視覺(jué)效果。
 
運(yùn)用對(duì)比和協(xié)調(diào):
在裝飾層的設(shè)計(jì)中,可以運(yùn)用對(duì)比和協(xié)調(diào)的技巧,以增強(qiáng)banner的視覺(jué)沖擊力和品牌形象。例如,可以使用與背景色對(duì)比強(qiáng)烈的顏色,或者使用與主題相符的紋理和圖形等。
 
避免使用過(guò)于夸張的元素:
在裝飾層的設(shè)計(jì)中,避免使用過(guò)于夸張的元素,如過(guò)于復(fù)雜的圖形、刺眼的顏色等,以免影響用戶的閱讀體驗(yàn)和品牌形象。
 
注意細(xì)節(jié)處理:
在裝飾層的設(shè)計(jì)中,需要注意細(xì)節(jié)處理,如線條的粗細(xì)、圓角的大小、圖形的平滑度等,以保證整體視覺(jué)效果的協(xié)調(diào)性和美觀性。
 
裝飾層的核心是突出主體物,過(guò)于復(fù)雜或花哨的裝飾往往起到適得其反的作用,例如下面左圖則過(guò)度添加元素導(dǎo)致過(guò)度設(shè)計(jì),從而干擾用戶對(duì)運(yùn)營(yíng)活動(dòng)的理解和其表意性。右圖為了讓畫(huà)面更加豐富,設(shè)計(jì)師添加一些輔助元素或圖形使整個(gè)banner飽滿的同時(shí)主體更加突出。
超全面的banner設(shè)計(jì)指南
 
 
然而裝飾元素簡(jiǎn)單不等于裝元素粗糙,例如下面左圖裝飾雖然簡(jiǎn)單,但是過(guò)于粗糙,使整個(gè)banner變得廉價(jià)感滿滿,傳宣作用大打折扣。右圖則使用了更為細(xì)致的裝飾元素,更有利于增強(qiáng)品牌形象。
超全面的banner設(shè)計(jì)指南
 
 
下面說(shuō)一下我們?cè)O(shè)計(jì)中常用到的幾種裝飾類(lèi)型。
 
1.簡(jiǎn)單的幾何形狀
有時(shí)候,為了使傳達(dá)的主題更加明確,簡(jiǎn)潔化的設(shè)計(jì)是必要的。在這種情境下,使用簡(jiǎn)單的圓形、方形、波浪曲線等圖形元素可以幫助設(shè)計(jì)更加簡(jiǎn)潔、明了。這種設(shè)計(jì)方法也符合“少即是多”的理念,通過(guò)精簡(jiǎn)的圖形元素來(lái)突出主題,提高用戶的理解和關(guān)注度。在知識(shí)付費(fèi)和學(xué)習(xí)類(lèi)設(shè)計(jì)中,這種簡(jiǎn)潔的設(shè)計(jì)方法可以幫助用戶更好地聚焦于內(nèi)容本身,提高學(xué)習(xí)效果和知識(shí)傳遞的效率。
超全面的banner設(shè)計(jì)指南
 
 
2.不規(guī)則流體
在促銷(xiāo)類(lèi)電商中,為了營(yíng)造促銷(xiāo)氛圍、激發(fā)購(gòu)買(mǎi)欲望,通常會(huì)使用多色彩的不規(guī)則流體來(lái)傳達(dá)降價(jià)、折扣、滿減、超值、限時(shí)等促銷(xiāo)信息。這些不規(guī)則的流體通常會(huì)圍繞在主體物周?chē)?,以突出主體元素。通過(guò)這種方式,可以有效地吸引用戶的注意力,并引導(dǎo)他們關(guān)注促銷(xiāo)活動(dòng)中的重點(diǎn)信息。同時(shí),這種設(shè)計(jì)方式還可以增強(qiáng)頁(yè)面的視覺(jué)沖擊力和動(dòng)態(tài)感,使整個(gè)頁(yè)面看起來(lái)更加生動(dòng)和有吸引力。
超全面的banner設(shè)計(jì)指南
 
 
3.立體幾何
為了讓設(shè)計(jì)風(fēng)格顯得高質(zhì)感和精簡(jiǎn),需要注重細(xì)節(jié)和品質(zhì)。高品質(zhì)的設(shè)計(jì)通常會(huì)使用相對(duì)規(guī)整的圖形和形狀,避免過(guò)于隨意和繁瑣的設(shè)計(jì)元素。多使用方塊形狀和立體幾何形狀可以增強(qiáng)設(shè)計(jì)的整體感和現(xiàn)代感,同時(shí)也可以更好地突出主題和內(nèi)容。在設(shè)計(jì)過(guò)程中,要注意圖形的比例、線條的流暢性和色彩的搭配,以營(yíng)造出高質(zhì)感和精簡(jiǎn)的設(shè)計(jì)風(fēng)格。
超全面的banner設(shè)計(jì)指南
 
 
4.線框
人們往往會(huì)不自覺(jué)地關(guān)注被框起來(lái)的內(nèi)容,因?yàn)檫@會(huì)引導(dǎo)視覺(jué)焦點(diǎn)。如果要營(yíng)造更為嚴(yán)肅的氣氛,可以使用封閉的線框來(lái)包圍內(nèi)容。而如果想要營(yíng)造更為輕松和時(shí)尚的氛圍,可以打破部分線框,添加一些跨越線框的裝飾,以增加透氣感和視覺(jué)上的趣味性。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
4.背景層
在banner設(shè)計(jì)中,背景層是整個(gè)畫(huà)面最底層的部分,是襯托主體元素的重要因素。背景層的設(shè)計(jì)需要注意以下幾點(diǎn):
 
背景風(fēng)格一致性
:背景層的設(shè)計(jì)需要與整個(gè)banner的風(fēng)格一致,如果背景與圖形元素風(fēng)格不一致或沒(méi)有處理好,二者就會(huì)顯得不融合,會(huì)使畫(huà)面看起來(lái)非常有“山寨感”。
 
背景作用:
背景層的作用是襯托文字層和主體元素,背景切不可喧賓奪主,弱化了文字信息或者主體元素。
 
背景顏色選擇
:在選擇背景顏色時(shí),建議使用與主要內(nèi)容相關(guān)的顏色,或者使用漸變色、紋理等來(lái)增強(qiáng)視覺(jué)效果。同時(shí),背景顏色也需要與主要內(nèi)容形成對(duì)比,以提高文字的可讀性和識(shí)別度。
 
背景圖片運(yùn)用:
在背景層的設(shè)計(jì)中,可以運(yùn)用真實(shí)的圖片或抽象的圖形元素,以增強(qiáng)視覺(jué)效果和傳達(dá)信息的效果。例如,可以使用漸變背景、插畫(huà)場(chǎng)景、放射性背景等。
 
在背景的制作上,我們要嚴(yán)格按照行業(yè)屬性來(lái)制作。
在挑選顏色時(shí),我們會(huì)首先考慮教育行業(yè)的通用色調(diào),這樣可以保持整體設(shè)計(jì)的專(zhuān)業(yè)性和一致性。接著,我們會(huì)選擇那些在畫(huà)面中引人注目的亮色調(diào),它們能夠突出核心信息,抓住用戶的注意力。最后,我們會(huì)根據(jù)文案的內(nèi)容和情感表達(dá),選取最能呼應(yīng)這些情感的顏色,以增強(qiáng)設(shè)計(jì)的吸引力和情感共鳴。
 
例如在教育行業(yè)banner設(shè)計(jì)時(shí),通常使用明亮、清新的顏色,如黃色、綠色、藍(lán)色等,以突出品牌或課程的創(chuàng)新、活力和學(xué)術(shù)水平。這些顏色不僅能夠吸引用戶的注意力,還能夠傳遞出積極、向上的情緒。教育類(lèi)banner通常會(huì)強(qiáng)調(diào)品牌色,通過(guò)使用品牌標(biāo)志性的顏色來(lái)強(qiáng)化品牌形象。例如,一些知名的教育機(jī)構(gòu)可能會(huì)有特定的標(biāo)志性顏色
超全面的banner設(shè)計(jì)指南
 
 
金融類(lèi)banner不僅需要傳遞出積極的情緒,還需要表達(dá)出與金融相關(guān)的情感。例如,深藍(lán)色通常被視為代表穩(wěn)健、可靠和信任的顏色,適合用于銀行、保險(xiǎn)和證券類(lèi)產(chǎn)品的banner設(shè)計(jì);金色和黃色則通常被視為代表財(cái)富、成功和機(jī)遇的顏色,適合用于理財(cái)、投資和金融衍生品類(lèi)的banner設(shè)計(jì)。
超全面的banner設(shè)計(jì)指南
 
 
在banner設(shè)計(jì)中,配色比例是一個(gè)重要的考慮因素。根據(jù)業(yè)界的研究,當(dāng)色彩搭配比例為6:3:1時(shí),是最和諧美觀的。這個(gè)比例指的是主色、輔助色、點(diǎn)綴色=6:3:1。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
在配色方案中,我們常常使用同色系、相似色、互補(bǔ)色和對(duì)比色進(jìn)行搭配。其中,互補(bǔ)色搭配是一種特別重要的配色方式。然而,在互補(bǔ)色搭配中,為了達(dá)到更為柔和的視覺(jué)效果,我們可以采用補(bǔ)色分割和單邊補(bǔ)色分割的配色方式。
 
補(bǔ)色分割是將互補(bǔ)色的兩個(gè)相鄰顏色進(jìn)行分割,以形成更為柔和的對(duì)比效果。這種配色方式能夠保持互補(bǔ)色的鮮明對(duì)比,同時(shí)又能夠提高顏色的融入度,使其看起來(lái)更加和諧。
 
單邊補(bǔ)色分割則是在互補(bǔ)色的基礎(chǔ)上,僅選擇其中一種顏色與另一種顏色進(jìn)行搭配。這種配色方式可以突出兩種顏色的特點(diǎn),同時(shí)降低對(duì)比度,使配色看起來(lái)更加柔和。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
五、案例思考
1、需求分析
在與客戶對(duì)接需求的時(shí)候,我們經(jīng)常會(huì)遇到很含糊的的需求,比如高大上、有逼格這種非常概念的需求。如果在沒(méi)有了解清楚具體需求的情況下開(kāi)工,很有可能交付的時(shí)候完全沒(méi)有g(shù)et到客戶的點(diǎn),造成反工,增加工作量。
 
當(dāng)我們接到需求的時(shí)候,第一步不要著急馬上開(kāi)工,先要找對(duì)需求的方向,才能提高工作效率,避免重復(fù)改稿,與需求方溝通的時(shí)候需要主要以下幾個(gè)方面:
超全面的banner設(shè)計(jì)指南
 
 
2、頭腦風(fēng)暴
在banner設(shè)計(jì)過(guò)程中,頭腦風(fēng)暴是一種非常有用的方法,可以幫助設(shè)計(jì)師們激發(fā)靈感、產(chǎn)生創(chuàng)意并最終創(chuàng)造出吸引人的banner。以下是一些關(guān)于如何進(jìn)行banner頭腦風(fēng)暴的建議:
 
確定主題和目標(biāo):
在開(kāi)始頭腦風(fēng)暴之前,需要明確banner的主題和目標(biāo),以便參與者能夠聚焦于討論的問(wèn)題和方向。
 
收集素材和參考:
在進(jìn)行頭腦風(fēng)暴之前,收集一些與主題相關(guān)的素材和參考,以便參與者能夠更好地理解主題和激發(fā)靈感。
 
自由暢談:
在頭腦風(fēng)暴過(guò)程中,鼓勵(lì)參與者自由暢談,不要限制任何想法或評(píng)論??梢砸龑?dǎo)參與者從不同角度思考問(wèn)題,并嘗試提出一些創(chuàng)新的解決方案。
 
記錄想法和創(chuàng)意:
將所有想法和創(chuàng)意記錄下來(lái),包括文字、圖形、顏色等元素。這些記錄可以作為后續(xù)設(shè)計(jì)和制作的基礎(chǔ)。
 
篩選和優(yōu)化:
在記錄下所有想法和創(chuàng)意之后,進(jìn)行篩選和優(yōu)化,找出最有潛力和可行性的方案??梢赃M(jìn)一步改進(jìn)和細(xì)化方案,以提高其吸引力和可執(zhí)行性。
 
得出結(jié)論:
在討論的基礎(chǔ)上,得出一些具體的結(jié)論或提出一些可行的建議。如果沒(méi)有明確的結(jié)論,也可以確定下一步的行動(dòng)計(jì)劃或研究方向。
 
我們以“淮北市中小學(xué)生機(jī)器人競(jìng)賽”為例,根據(jù)文案提取關(guān)鍵詞,然后將其具像化,在紙上手繪出場(chǎng)景草圖。
超全面的banner設(shè)計(jì)指南
 
 
3、定布局
我們采用左右排版的方式,將文案進(jìn)行主次分層,主標(biāo)題為“中小學(xué)生機(jī)器人競(jìng)賽”,副標(biāo)題為“淮北市中小學(xué)”。根據(jù)布局方式,確保信息層級(jí)關(guān)系,‌格局Z 型視覺(jué)模型引導(dǎo)控制用戶視覺(jué)動(dòng)線‌。
超全面的banner設(shè)計(jì)指南
 
 
4、制作步驟
根據(jù)banner四大要素進(jìn)行繪制,第一步定背景,框定banner整體風(fēng)格以及氛圍。第二步進(jìn)行文字排版,將文案信息進(jìn)行層級(jí)劃分。第三部根據(jù)我們的頭腦風(fēng)暴以及草圖進(jìn)行主體的繪制。第四部增加畫(huà)面的點(diǎn)綴元素,使整個(gè)畫(huà)面更加豐富有層次。最后一步對(duì)頁(yè)面進(jìn)行最后的細(xì)節(jié)優(yōu)化,一個(gè)教育類(lèi)banner就制作完成啦。
超全面的banner設(shè)計(jì)指南
 
 
設(shè)計(jì)的價(jià)值并非絕對(duì)的好與壞,而是取決于它是否能夠滿足用戶的需求并符合用戶體驗(yàn)的習(xí)慣。一個(gè)優(yōu)秀的設(shè)計(jì)不僅僅是追求視覺(jué)效果,更要以解決問(wèn)題為根本目的。如果設(shè)計(jì)不能解決用戶的問(wèn)題或滿足他們的需求,那么再華麗的外表也是空洞的。因此,設(shè)計(jì)師在創(chuàng)作過(guò)程中,應(yīng)始終關(guān)注用戶的需求和體驗(yàn),以便創(chuàng)造出真正有價(jià)值的設(shè)計(jì),希望這篇文章對(duì)你有用。
 
超全面的banner設(shè)計(jì)指南
 
 


作者:工頭新一
鏈接:https://www.zcool.com.cn/article/ZMTYwMTAwNA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

日歷

鏈接

個(gè)人資料

存檔