網(wǎng)站制作如何做好Banner設(shè)計(jì)

本文作者針對(duì)Banner的以下幾點(diǎn)做出具體分析：版式，字體，配色，點(diǎn)綴。
一、關(guān)于版式
在明確主題以及內(nèi)容之后，我們就要根據(jù)主題和內(nèi)容來(lái)設(shè)計(jì)版式，版式就是畫(huà)面的整體布局，好的版式能夠清楚的表達(dá)核心思路，正確的展示想要給用戶(hù)看的東西；大體上排版一般分為兩種：圖文左右排版和文字居中排版。
1、圖文左右排版
我們一般設(shè)計(jì) Banner 的時(shí)候都會(huì)使用圖文左右排版，那么為什么會(huì)大部分都是使用左右排版呢，這是運(yùn)用到一個(gè)方法論，即尼爾森F視覺(jué)模型。
因?yàn)槲覀兊囊曈X(jué)瀏覽習(xí)慣都是從左往右還有從上到下的，所以我們?cè)谧?Banner 的時(shí)候會(huì)經(jīng)常性的選擇使用左右排版，那么使用左圖右文還是左文右圖也是需要根據(jù)主題和內(nèi)容來(lái)決定的。
當(dāng)配圖示意比較模糊的時(shí)候，我們使用左文字右圖的形式，強(qiáng)調(diào)文字的吸引力，有一定指導(dǎo)作用。
這里文字能夠精準(zhǔn)地將信息帶給用戶(hù)，文字所占比例比圖片多些，這也解釋了為何大部分左文右圖排版的 Banner 都是文字占比大于圖片。
當(dāng)配圖示意比較明確，同時(shí)圖片能夠強(qiáng)調(diào)吸引的時(shí)候，我們采用左圖右文字，如下圖：
使用左圖右文字，也是因?yàn)閳D片的內(nèi)容更吸引用戶(hù)多一些，所以對(duì)圖像的品質(zhì)要求更高，精致感品質(zhì)感也有要求，這種類(lèi)型大多使用在家居，護(hù)膚等產(chǎn)品上。
小結(jié)：圖文左右排版，以分割排版的方式構(gòu)圖，畫(huà)面有明確的獨(dú)立性和引導(dǎo)性，這種方式留白更多，較好的視覺(jué)引導(dǎo)和方向使信息更明確，更顯品質(zhì)感。
2、文字居中
文字居中的排版多用于電商促銷(xiāo)、公眾號(hào)的文章封面等，大多是突出文字的內(nèi)容，比如促銷(xiāo)的折扣，文章的主題等，其余的產(chǎn)品或者圖片都是為了搭配文字做出的氣氛烘托，吸引用戶(hù)點(diǎn)擊。
使用這種方式讓畫(huà)面展示規(guī)整穩(wěn)定、醒目大方，視覺(jué)更聚焦，信息更集中，在突出主體的同時(shí)能使整體畫(huà)面具有一定的沖擊力。
小結(jié)：文字居中布局對(duì)于實(shí)物（人，商品，創(chuàng)造形象）要求并不高，文字信息本身的處理要求就會(huì)高一點(diǎn)。在確認(rèn)好主題和內(nèi)容后，我們根據(jù)產(chǎn)品所要突出的重點(diǎn)來(lái)決定我們的版式，是要突出文字還是突出產(chǎn)品，突出產(chǎn)品即使用左圖右文字，這種版式對(duì)產(chǎn)品的圖片要求比較高；想要突出文字，則可以選擇左文字右圖或者文字居中排版，但都對(duì)文字的設(shè)計(jì)要求比較高。 不確定用什么版式，我們可以在設(shè)計(jì)的時(shí)候不妨多做幾個(gè)版本，大膽嘗試。
二、關(guān)于文字
文案內(nèi)容要高效的傳遞信息，吸引用戶(hù)注意力，讓人一下子看到主題，文案中文字的排版要區(qū)分主次，把控好信息層級(jí)；使用合適的字體，明確字體適用的場(chǎng)合，同一畫(huà)面中字體的使用盡量不要超過(guò)三種，過(guò)多會(huì)顯得雜亂，要使用識(shí)別度高的字體。
而 Banner 中常用的字體有三種：襯線(xiàn)體、非襯線(xiàn)體和書(shū)法體。
1、襯線(xiàn)體
襯線(xiàn)體筆畫(huà)有粗細(xì)之分，它模仿的是中國(guó)古代字體和古代碑文上的字體，簡(jiǎn)單且易變形，襯線(xiàn)體能給人古典，經(jīng)典，文藝的感覺(jué)，適合用于文藝氣息的家居用品或文娛類(lèi)的相關(guān)宣傳設(shè)計(jì)上。
以上圖為例：文案內(nèi)容中的“全面淪陷”，讓人一目了然；下面一行的內(nèi)容，更加詳細(xì)解釋了上面的主標(biāo)題。畫(huà)面顏色凸顯主題，所以字體變形，使用白色，反而在畫(huà)面中更加突出。襯線(xiàn)字體一般推薦使用方正經(jīng)黑簡(jiǎn)體、方正俊黑、方正蘭亭顯黑簡(jiǎn)體、華文細(xì)黑等，使用的時(shí)候注意版權(quán)問(wèn)題。
2、非襯線(xiàn)體
非襯線(xiàn)體較簡(jiǎn)潔，筆畫(huà)較粗，很容易產(chǎn)生視覺(jué)重點(diǎn)，非襯線(xiàn)字體體現(xiàn)現(xiàn)代、簡(jiǎn)約的特性，適合用于蒼勁有力、促銷(xiāo)類(lèi)的相關(guān)設(shè)計(jì)，吸引用戶(hù)注意力，提高Banner點(diǎn)擊率。

圖片來(lái)自花瓣

以上圖為例：主副標(biāo)題區(qū)分清楚，在字體筆畫(huà)變形上，結(jié)合科技感的氣氛，增加了光的流動(dòng)感，讓標(biāo)題不會(huì)過(guò)于死板。非襯線(xiàn)字體常用的有：漢儀潤(rùn)圓、方正綜藝簡(jiǎn)體、造字工房勁黑、造字工坊版黑、方正蘭亭粗黑、冬青黑體、思源黑體等。
3、書(shū)法體

書(shū)法體源自中國(guó)古代，能體現(xiàn)中國(guó)文化和揮灑墨水的豪氣，適用于傳統(tǒng)、中國(guó)風(fēng)、意境的文藝主題和金戈鐵馬般的豪邁主題。

上圖為例：中秋節(jié)是中國(guó)的傳統(tǒng)文化，使用書(shū)法體能夠?qū)⒄w畫(huà)面營(yíng)造的中國(guó)古典風(fēng)更好的融合起來(lái)，書(shū)法體推薦李旭科書(shū)法、漢儀尚巍手書(shū)、葉根友行書(shū)繁體等字體 。
小結(jié)：不管是使用哪種類(lèi)型的字體，在制作 Banner 時(shí)，我們都需要清楚的知道整張 Banner 所要表達(dá)的情緒，從而在字體的設(shè)計(jì)上也能夠表現(xiàn)出情緒，這樣才能夠更好地融合進(jìn) Banner ，進(jìn)而更好的表達(dá)出你想要的主題。
三、關(guān)于配色
在整個(gè)風(fēng)格中色彩設(shè)定出主色調(diào)、輔色調(diào)。主色調(diào)不難理解是在整個(gè)畫(huà)面中色彩占用最多的顏色，作為輔色調(diào)也是在整個(gè)畫(huà)面所點(diǎn)綴對(duì)比的一個(gè)顏色，就好比一個(gè)電影劇中一定是有主角和配角。主角的戲份就多一些。配角只是作為整個(gè)劇中的點(diǎn)綴輔助而已。
在設(shè)計(jì)色彩設(shè)定中也要根據(jù)行業(yè)屬性配比相關(guān)顏色，比如:
黃色代表比較有食欲的顏色、活潑、青春，一般用在食物或者用戶(hù)較年輕一點(diǎn)的產(chǎn)品上。
黑色代表高端、科技，一般用在汽車(chē)、智能科技產(chǎn)品和作品及消息發(fā)布上。

圖片來(lái)自花瓣

白：代表簡(jiǎn)約，清新，素雅，一般是用在飾品、家居、化妝品等，在做整個(gè)主視覺(jué)畫(huà)面的時(shí)候第一時(shí)間與顏色關(guān)聯(lián)。

小結(jié)：每一種顏色代表的含義都不同，我們要根據(jù)設(shè)定的主題和文案的內(nèi)容，包括品牌色來(lái)決定使用哪種顏色最為合適，烘托出想要表達(dá)的情緒和氛圍，使整體顏色及風(fēng)格和諧統(tǒng)一，抓住用戶(hù)注意力，吸引用戶(hù)點(diǎn)擊，提高轉(zhuǎn)化率。
四、關(guān)于點(diǎn)綴
點(diǎn)綴元素的存在主要是為了豐富畫(huà)面，使畫(huà)面看起來(lái)不單調(diào)并且更加協(xié)調(diào)，從運(yùn)營(yíng)的角度上來(lái)說(shuō)，也是為了增加畫(huà)面的熱鬧活躍氛圍，給用戶(hù)愉悅或刺激感，增加消費(fèi)者的購(gòu)買(mǎi)欲望。點(diǎn)綴元素存在的形式是多種多樣的，我們可以基本分為三種：基礎(chǔ)形狀點(diǎn)綴、抽象形狀點(diǎn)綴、賣(mài)點(diǎn)提煉點(diǎn)綴。
1、基礎(chǔ)形狀點(diǎn)綴
這種類(lèi)型的點(diǎn)綴操作起來(lái)難度不大，多使用矢量形狀利用漸變色來(lái)豐富畫(huà)面，建議初次嘗試設(shè)計(jì)師多嘗試，多注意細(xì)節(jié)和練習(xí)，就能夠比較好的使用起來(lái)，這種類(lèi)型的點(diǎn)綴多用戶(hù)電商促銷(xiāo)設(shè)計(jì)，目的是為了飽滿(mǎn)視覺(jué)，豐滿(mǎn)畫(huà)面，擁有較強(qiáng)的視覺(jué)沖擊力，能夠吸引用戶(hù)注意力，提高 Banner 點(diǎn)擊率。

2、抽象形狀點(diǎn)綴

這種點(diǎn)綴的注意細(xì)節(jié)是一般點(diǎn)綴都會(huì)比背景深一點(diǎn)，同時(shí)整體采用微漸變，適當(dāng)?shù)碾[去一些邊角，能夠更好的融合進(jìn)背景里，運(yùn)用水波紋和小三角等，能夠使 Banner 更年輕，活潑，大多使用在產(chǎn)品定位較年輕的產(chǎn)品或話(huà)題上，不適合使用在大品牌上。
3、賣(mài)點(diǎn)提煉點(diǎn)綴：標(biāo)簽
這種點(diǎn)綴比較簡(jiǎn)單，就是把產(chǎn)品的賣(mài)點(diǎn)提煉出來(lái)，使用背景的對(duì)比色或者鄰近色將賣(mài)點(diǎn)整個(gè)突顯出來(lái)，此類(lèi)點(diǎn)綴多使用在年輕女性為主導(dǎo)用戶(hù)的產(chǎn)品 Banner  中，比如衣服，首飾、護(hù)膚品等，難度系數(shù)不大，難點(diǎn)在于對(duì)色彩及賣(mài)點(diǎn)提煉的把控。五、總結(jié)
我們從版式、文字、配色及點(diǎn)綴等四個(gè)方面來(lái)說(shuō)明如何制作出優(yōu)秀的 Banner。
1、版式分為圖文左右排版和文字居中排版，根據(jù)要凸顯的主題來(lái)決定用哪種排版；
2、文字有襯線(xiàn)體、非襯線(xiàn)體和書(shū)法體三種，每種都有不同的風(fēng)格，襯線(xiàn)體偏古典和文藝，適用于宣傳，非襯線(xiàn)體蒼勁有力適用于促銷(xiāo)，書(shū)法體傳統(tǒng)豪邁，適用于中國(guó)風(fēng)；
3、配色需要根據(jù)產(chǎn)品選擇配色，每種顏色都有自己的情緒，抓住想要表達(dá)的情緒，選好配色；
4、點(diǎn)綴分為基礎(chǔ)形狀、抽象形狀和賣(mài)點(diǎn)提煉，每種點(diǎn)綴都是豐富畫(huà)面，讓整體看起來(lái)更加和諧，不同的點(diǎn)綴達(dá)到的效果也不同，但始終圍繞主旨就是所有的設(shè)計(jì)和創(chuàng)意都是圍繞著吸引用戶(hù)來(lái)進(jìn)行的，最后我們呈現(xiàn)出來(lái)的結(jié)果，一定要和諧統(tǒng)一、對(duì)比突出、畫(huà)面和諧、節(jié)奏韻律，才能讓我們的banner看起來(lái)更富有品質(zhì)感。

網(wǎng)頁(yè)標(biāo)題：網(wǎng)站制作如何做好Banner設(shè)計(jì)
網(wǎng)站URL：http://muchs.cn/news39/115539.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)