建站百科|如何做好網(wǎng)站Banner設(shè)計(jì)，我總結(jié)了這些干貨

時(shí)間：2023-09-23 03:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-23 03:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

建站百科|如何做好網(wǎng)站Banner設(shè)計(jì)，我總結(jié)了這些干貨：這是【建站百科】專欄第17篇原創(chuàng)內(nèi)容，由我在建站行業(yè)從業(yè)10年、給上萬(wàn)公司搭建過(guò)網(wǎng)站的經(jīng)驗(yàn)總結(jié)而來(lái)。

這次要講的是如何設(shè)計(jì)網(wǎng)站banner，昨天大夢(mèng)已經(jīng)給大家分析過(guò)網(wǎng)站banner的風(fēng)格與樣式，這次我們來(lái)開(kāi)啟下一步，實(shí)操。

為方便大家閱讀和理解，這次我根據(jù)網(wǎng)站banner的整個(gè)設(shè)計(jì)過(guò)程來(lái)進(jìn)行講解。

整個(gè)設(shè)計(jì)過(guò)程：明確需求→確定尺寸→確定設(shè)計(jì)風(fēng)格和版式→構(gòu)成元素（字體∕圖片∕背景色∕點(diǎn)綴）→調(diào)整配色→注意事項(xiàng)

一、確定尺寸

根據(jù)放置的位置不同，banner的尺寸也有區(qū)別。

根據(jù)谷歌Adsense統(tǒng)計(jì)，最有效、標(biāo)準(zhǔn)的Banner尺寸是:

導(dǎo)航欄Banner：728×90 px

半屏Banner：300×600px

中等矩形Banner：300×250px

長(zhǎng)矩形Banner：336×280px

二、文案

1、字體選擇

banner中常用的字體主要有襯線體、非襯線體、書(shū)法體。

襯線體是模仿中國(guó)古代字體和古代碑文上的字體，筆畫(huà)有粗細(xì)之分，簡(jiǎn)單易變形，修飾性強(qiáng)。推薦使用字體：宋體、方正俊黑、華文細(xì)黑等。

非襯線體筆畫(huà)粗細(xì)相同，簡(jiǎn)潔有力，容易吸引用戶目光。推薦使用字體黑體、方正蘭亭粗黑、漢儀潤(rùn)圓等。

書(shū)法體源于中國(guó)古代，適合中國(guó)風(fēng)、傳統(tǒng)文化和國(guó)人豪邁氣質(zhì)的主題。推薦使用字體漢儀尚巍手書(shū)、李旭科書(shū)法等。

小tips：

商用字體要注意版權(quán)問(wèn)題。
同一畫(huà)面中使用的字體最好不要超過(guò)三種，太多會(huì)顯得畫(huà)面雜亂無(wú)章。

2、文案內(nèi)容

在banner的設(shè)計(jì)中，文案內(nèi)容不需要長(zhǎng)篇大論，頁(yè)面上的文字最好不要超過(guò)4行，只要能高效的吸引用戶的注意力，準(zhǔn)確傳達(dá)信息就可以。文字篇幅過(guò)多會(huì)消耗用戶的耐心，也會(huì)導(dǎo)致排版布局不美觀。

小tips：

同等級(jí)的文案內(nèi)容盡量保持字體、字號(hào)、顏色上的一致性，不然頁(yè)面會(huì)顯得太雜亂。
如果字體顏色相同，可以根據(jù)字號(hào)的大小來(lái)區(qū)分信息層級(jí)。

三、背景選擇

banner的結(jié)構(gòu)包括文案層、背景層、裝飾層，背景層又包括圖片背景和背景色。




1、圖片背景

圖片元素是banner背景層的重要部分，既包括整個(gè)頁(yè)面的背景圖片，也有產(chǎn)品圖。尤其是精修過(guò)后的產(chǎn)品圖，顯得更加精美、有品質(zhì)，提高用戶的信任感。

2、背景色選擇

一般色彩的選擇與行業(yè)性質(zhì)相關(guān)。不同的顏色、不同的色調(diào)能夠引起人們不同的情感反應(yīng)，這就是所謂的色彩聯(lián)想作用。

以下是不同的顏色所產(chǎn)生的的感受一覽表。

紅色：是一種激奮的色彩，傳達(dá)了興奮、激情、奔放和歡樂(lè)的情感，能使人產(chǎn)生沖動(dòng)、憤怒、熱情、活力的感覺(jué)，對(duì)眼睛刺激較大，容易產(chǎn)生視覺(jué)疲勞，使用時(shí)需要慎重考慮。

黃色：代表陽(yáng)光、年輕、活力滿滿。一般適用于用戶偏年輕的產(chǎn)品上，或者食物上，黃色也能讓人產(chǎn)生食欲。

橙色：是充滿活力的顏色，可以讓人聯(lián)想到金色的秋天、豐碩的果實(shí)、跳動(dòng)的火苗，是一個(gè)歡樂(lè)而幸福的顏色。

綠色：代表健康、安全、新生和睦的情感，能夠創(chuàng)造出平衡和穩(wěn)定的頁(yè)面氛圍。常用于健康、生態(tài)、醫(yī)療領(lǐng)域的產(chǎn)品網(wǎng)站上。

黑色：代表權(quán)力、高貴、穩(wěn)重、現(xiàn)代感、科技、莊嚴(yán)的感覺(jué)。一般適用于汽車產(chǎn)品、智能科技產(chǎn)品和高端奢侈品上。

白色：代表科技、簡(jiǎn)單、純潔、素雅、高端、明快、和平的感覺(jué)。一般用在家居、化妝品、高端產(chǎn)品上。

紫色：代表了神秘、高貴、優(yōu)雅、浪漫的感受，如紫色的薰衣草被認(rèn)為是浪漫的。但眼睛對(duì)于紫色細(xì)微變化的分辨力很弱，容易引起疲勞。

藍(lán)色：具有沉穩(wěn)的特性，是最具涼爽、清新、專業(yè)特點(diǎn)的色彩，傳遞出冷靜、智慧、自信的情感。常用與強(qiáng)調(diào)科技和效率的商品或企業(yè)中，大多數(shù)男性產(chǎn)品也常使用藍(lán)色。

小tips：

顏色的選擇需要考慮到企業(yè)的VI 色；
顏色的飽和度不宜過(guò)高，背景就是背景，不能喧賓奪主；
如果想要豐富畫(huà)面的層次感可以考慮采用漸變效果。

四、點(diǎn)綴元素選擇

點(diǎn)綴元素在banner中可有可無(wú)，但是使用了就會(huì)讓整個(gè)畫(huà)面看上去精致很多。

一般來(lái)說(shuō)，點(diǎn)綴元素?cái)?shù)量越多，形式越多樣；色彩越多，明度越高，越不規(guī)則，畫(huà)面越活潑，反之，越高冷大牌，有逼格。




點(diǎn)綴元素分為光效、幾何元素、線條、實(shí)物等。

幾何元素，一般都會(huì)比背景深一些，有時(shí)也會(huì)采用漸變，可以更好的融入背景中。采用幾何點(diǎn)綴可以使畫(huà)面更加活潑。

實(shí)物點(diǎn)綴是很多圖片常用的手段。常出現(xiàn)在畫(huà)布邊緣且不顯示全貌，既能保證畫(huà)面不空洞，也不會(huì)喧賓奪主，這種手法需要注意虛實(shí)變化，多用高斯模糊做一些虛化，效果會(huì)更明顯。

最后，只有達(dá)到點(diǎn)綴元素與畫(huà)面的和諧統(tǒng)一，才能讓網(wǎng)站banner看起來(lái)更有質(zhì)感，更吸引人。

五、配色網(wǎng)站推薦

在banner設(shè)計(jì)的最后一步，需要調(diào)整整體的配色，使畫(huà)面看起來(lái)更加和諧。

上文也提到了不同顏色所表達(dá)的情感，但是要靈活運(yùn)用，合理搭配也需要多看多練培養(yǎng)審美。

下面大夢(mèng)就推薦大家一些好用的配色網(wǎng)站。

1、color hunt

一個(gè)非常好用的配色網(wǎng)站，網(wǎng)站提供了非常多的配色方案，對(duì)比色、鄰近色、相對(duì)色都有。點(diǎn)擊色彩就會(huì)出現(xiàn)色值，如果你喜歡某套配色，直接拿走就行。

2、Reeoo

這個(gè)網(wǎng)站通過(guò)顏色的分類來(lái)進(jìn)行檢索，提供手機(jī)App、iPad App、網(wǎng)頁(yè)設(shè)計(jì)、icon設(shè)計(jì)的精彩案例。

點(diǎn)擊顏色就會(huì)出現(xiàn)以這個(gè)顏色為主的案例設(shè)計(jì)。不僅對(duì)于色彩搭配的學(xué)習(xí)，對(duì)于設(shè)計(jì)審美的提高也有很大幫助。




好啦，今天就到這里啦，記得點(diǎn)贊+收藏+關(guān)注 @云夢(mèng)智能 讓我看到你們的熱情。