banner網(wǎng)頁(yè)設(shè)計(jì)（banner網(wǎng)頁(yè)設(shè)計(jì)模板）

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于banner網(wǎng)頁(yè)設(shè)計(jì)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話(huà)答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線(xiàn)網(wǎng)頁(yè)版、PC客戶(hù)端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，如需了解相關(guān)業(yè)務(wù)請(qǐng)撥打電話(huà)175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、怎么設(shè)計(jì)網(wǎng)頁(yè)banner

• 2、網(wǎng)頁(yè)banner設(shè)計(jì)經(jīng)驗(yàn)分享！?

• 3、網(wǎng)站建設(shè)Banner設(shè)計(jì)關(guān)鍵性要素?

• 4、banner設(shè)計(jì)常用的8種版式設(shè)計(jì)

一、怎么設(shè)計(jì)網(wǎng)頁(yè)banner

Banner規(guī)格尺寸大小不一，文件大小也有一定的限制，這就使得在設(shè)計(jì)上增加了許多障礙，顏色不能太豐富，否則會(huì)在文件大小的限制下失真，軟文不

能太多，否則會(huì)沒(méi)有重點(diǎn)，得不償失，怎么在方寸間把握平衡，變得十分重要。接下來(lái)，我為大家總結(jié)累一些，如有鄙陋，請(qǐng)指正，萬(wàn)分感謝。

第一部分：顏色

1．Banner與環(huán)境對(duì)比

試想如果在一個(gè)以淺色調(diào)為基準(zhǔn)的網(wǎng)站上投放Banner，是不是從明度上拉開(kāi)對(duì)比會(huì)很好的提高用戶(hù)的注意力呢(相反亦然)。

以此也可推想出，如果在一個(gè)有顏色基調(diào)的網(wǎng)站上投放補(bǔ)色或者對(duì)比色的Banner，效果就會(huì)變得更矚目(補(bǔ)色和對(duì)比色案例)。

2．Banner顏色簡(jiǎn)單至上

(1)試想一個(gè)Banner五顏六色，是不是就能夠吸引眼球了呢?首先，先對(duì)比一下

哪個(gè)更吸引你的注意力呢?大多數(shù)人肯定會(huì)覺(jué)得后者給用戶(hù)帶來(lái)的視覺(jué)傳達(dá)力更強(qiáng)，簡(jiǎn)潔明確、樸素有力的效果，給人一種重量感和力量感。前者顏色雖多，卻沒(méi)有帶來(lái)更好的視覺(jué)傳達(dá)效果，為什么呢?顏色過(guò)度使用會(huì)打亂色彩節(jié)奏，并且，減弱了顏色間的對(duì)比，使整體效果變?nèi)酢?/p>

(2)其次， 使用顏色越多，最后保存時(shí)文件體積越大，加載起來(lái)越慢，讓用戶(hù)等待就意味著和用戶(hù)說(shuō)再見(jiàn)了，如果靠降低品質(zhì)來(lái)達(dá)到Banner的上傳要求，那展現(xiàn)給用戶(hù)的是低質(zhì)量的banner，也一樣會(huì)丟失一些用戶(hù)。

所以，顏色簡(jiǎn)單有力，加載清晰快速，對(duì)于banner的視覺(jué)傳達(dá)很重要，只要讓用戶(hù)產(chǎn)生點(diǎn)擊欲望，我們推廣的目的就達(dá)到了。

第二部分：構(gòu)圖

1．構(gòu)圖的定義及規(guī)則

構(gòu)圖其實(shí)說(shuō)白了就是經(jīng)營(yíng)畫(huà)面，進(jìn)行布局，如何在你構(gòu)圖的引導(dǎo)下吸引用戶(hù)點(diǎn)擊，產(chǎn)生欲望，了解內(nèi)容，如果都能達(dá)到，那說(shuō)明你的構(gòu)圖成功了。構(gòu)圖的基本規(guī)則是：均衡、對(duì)比和視點(diǎn)。

均衡：均衡不是對(duì)稱(chēng)，是一種力量上的平衡感，使畫(huà)面具有穩(wěn)定性。

均衡不是對(duì)稱(chēng)

對(duì)比：在構(gòu)圖上來(lái)說(shuō)就是大小對(duì)比，粗細(xì)對(duì)比，方圓對(duì)比，曲線(xiàn)與直線(xiàn)對(duì)比等等。

白色線(xiàn)條的對(duì)比產(chǎn)生了空間感

視點(diǎn)：就是如何將用戶(hù)的目光集中在畫(huà)面的中心點(diǎn)上，我們可以用構(gòu)圖去引導(dǎo)用戶(hù)的視點(diǎn)

將視點(diǎn)集中引導(dǎo)到slogan上

介紹完構(gòu)圖的基本規(guī)則，舉例子檢視下：一張X-MEN的宣傳banner，這張banner人物排布既平衡又不對(duì)稱(chēng)，人物大小不一，產(chǎn)生出對(duì)比，突

出了部分劇中人物。Banner正中一個(gè)大大的X，把視點(diǎn)集中到了畫(huà)面的最中心，很好的利用基本構(gòu)圖規(guī)則進(jìn)行banner設(shè)計(jì)。

2．構(gòu)圖的樣式

構(gòu)圖大概分以下幾種：(1).垂直水平式構(gòu)圖 (2).三角形構(gòu)圖(正三角和倒三角)(3)漸次式構(gòu)圖 (4).輻射式構(gòu)圖 (5).框架式構(gòu)圖 (6)對(duì)角線(xiàn)構(gòu)圖

(1)垂直水平式構(gòu)圖：

平行排列每一個(gè)產(chǎn)品，每個(gè)產(chǎn)品展示效果都很好，各個(gè)產(chǎn)品所占比重相同，秩序感強(qiáng)，此類(lèi)構(gòu)圖給用戶(hù)心情：產(chǎn)品規(guī)矩正式、高大、安全感強(qiáng)。

(2)正三角形和倒三角構(gòu)圖：

多個(gè)產(chǎn)品進(jìn)行正三角構(gòu)圖，產(chǎn)品立體感強(qiáng)，各個(gè)產(chǎn)品所占比重有輕有重，構(gòu)圖穩(wěn)定自然，空間感強(qiáng)。此類(lèi)構(gòu)圖給用戶(hù)心情：安全感極強(qiáng)、穩(wěn)定可靠。

多個(gè)產(chǎn)品進(jìn)行倒三角構(gòu)圖，產(chǎn)品立體感極強(qiáng)，各個(gè)產(chǎn)品所占比重有輕有重，構(gòu)圖動(dòng)感活潑失衡，運(yùn)動(dòng)感空間感強(qiáng)。此類(lèi)構(gòu)圖給用戶(hù)心情：不穩(wěn)定感激發(fā)用戶(hù)心情，給用戶(hù)運(yùn)動(dòng)的感覺(jué)。

(3)對(duì)角線(xiàn)構(gòu)圖：一個(gè)產(chǎn)品或兩個(gè)產(chǎn)品進(jìn)行組合對(duì)角線(xiàn)構(gòu)圖，產(chǎn)品的空間感強(qiáng)，各個(gè)產(chǎn)品所占比重相對(duì)平衡，構(gòu)圖動(dòng)感活潑穩(wěn)定，運(yùn)動(dòng)感空間感強(qiáng)。此類(lèi)構(gòu)圖給用戶(hù)心情：動(dòng)感十足且穩(wěn)定。

(4)漸次式構(gòu)圖：多個(gè)產(chǎn)品進(jìn)行漸次式排列，產(chǎn)品展示空間感強(qiáng)，各個(gè)產(chǎn)品所占比重不同，由大及小，構(gòu)圖穩(wěn)定，次序感強(qiáng)，利用透視引導(dǎo)指向slogan。此類(lèi)構(gòu)圖給用戶(hù)心情：穩(wěn)定自然，產(chǎn)品豐富可靠。

(5)輻射式構(gòu)圖：多個(gè)產(chǎn)品進(jìn)行輻射式構(gòu)圖，產(chǎn)品空間感強(qiáng)，各個(gè)產(chǎn)品所占比重不同，由大及小。構(gòu)圖動(dòng)感活潑，次序感強(qiáng)，利用透視指向slogan，此類(lèi)構(gòu)圖給用戶(hù)心情：活潑動(dòng)感，產(chǎn)品豐富可靠。

(6)框架式構(gòu)圖：?jiǎn)蝹€(gè)或多個(gè)產(chǎn)品框架式構(gòu)圖，產(chǎn)品展示效果好，有畫(huà)中畫(huà)的感覺(jué)。構(gòu)圖規(guī)整平衡，穩(wěn)定堅(jiān)固。此類(lèi)構(gòu)圖給用戶(hù)心情：穩(wěn)定可信賴(lài)，產(chǎn)品可靠。

3．軟文（Slogan）

(1)俗話(huà)說(shuō)得好“話(huà)不在多，精辟就行”當(dāng)今炙手火熱的微博就是一個(gè)例子“140字概括你要說(shuō)的”，Slogan也是一樣。

(2)要言之有物，第一要抓住用戶(hù)的心里，了解用戶(hù)的想法很重要。第二我們要推給用戶(hù)什么，用戶(hù)對(duì)什么感興趣。下面舉個(gè)例子：

Slogan只有四個(gè)字，終于來(lái)了，白色iphone4吊足了apple迷門(mén)近兩年的胃口，這四個(gè)字恐怕是他們最想聽(tīng)到的。用戶(hù)從不會(huì)質(zhì)疑apple的性

能，科技領(lǐng)先性及用戶(hù)體驗(yàn)性，他們最想的恐怕就是擁有自己夢(mèng)寐以求的白色iphone4。所以，apple的slogan簡(jiǎn)約而不簡(jiǎn)單。

二、網(wǎng)頁(yè)banner設(shè)計(jì)經(jīng)驗(yàn)分享！?

關(guān)于Banner的設(shè)計(jì)，相信已經(jīng)有很多人都看過(guò)這方面經(jīng)驗(yàn)的分享了，我來(lái)公司也做過(guò)了一些Banner的設(shè)計(jì)，那在這其中通過(guò)不斷的學(xué)習(xí)、實(shí)踐積累了自己的一些小小經(jīng)驗(yàn)和方法給大家分享。

一、背景

我們畫(huà)畫(huà)的同學(xué)可能都知道，一個(gè)畫(huà)面不可能都面面俱到，重點(diǎn)的需要細(xì)致刻畫(huà)，有的一筆帶過(guò)即可。設(shè)計(jì)一個(gè)Banner有時(shí)候就像畫(huà)畫(huà)似的，首先要有大的環(huán)境，那Banner的背景就好比大環(huán)境，其實(shí)主要是起到襯托、烘托氣氛的作用。一個(gè)新需求過(guò)來(lái)，首先我們考慮要營(yíng)造一個(gè)什么樣的環(huán)境，什么樣的氣氛，是歡快的、悲傷的、可愛(ài)的還是…比如過(guò)年，可能就用紅橙色，比如兒童類(lèi)的，顏色上就要純一點(diǎn)，活潑點(diǎn)等等。

但是需要注意一點(diǎn)，背景不能太花，否則會(huì)影響整體的一個(gè)可讀識(shí)性，簡(jiǎn)單，清晰即可。

二、主視覺(jué)元素

設(shè)計(jì)中的主視覺(jué)要清楚，符合主題，元素不可太多，否則看起來(lái)跟人感覺(jué)就會(huì)亂。有的人在做時(shí)只要是有地，就全放滿(mǎn)，其實(shí)頁(yè)面適當(dāng)?shù)摹傲舭住币彩翘嵘?huà)面品質(zhì)的一個(gè)好方法。視覺(jué)元素不論是人物，還是其他，一定要清晰，在我們找素材的時(shí)候也要找像素質(zhì)量高的，我一般會(huì)去站酷、昵圖網(wǎng)、花瓣或者直接google搜，不要太多。還有一點(diǎn)注意的是不可盜用他人的作品，頭像等等。

東西太多，想表達(dá)的也太多，這時(shí)候需要用戶(hù)去花時(shí)間思考它想告訴我們什么，而往往這時(shí)候用戶(hù)是不愿意是思考的，一是畫(huà)面不知道他要表達(dá)什么，二是整體上沒(méi)有吸引住用戶(hù)的眼睛，這種情況下這個(gè)Banner設(shè)計(jì)是做到比較失敗的。

三、標(biāo)題文字

標(biāo)題文字非常重要，是整個(gè)Banner的主題，重點(diǎn)文字一定要在背景中突出出來(lái)，不論用顏色對(duì)比、放大、變形設(shè)計(jì)還是即便做立體效果等等。（這里我分享一個(gè)經(jīng)驗(yàn)，就是在頁(yè)面上新建一個(gè)黑色的圖層，樣式改成飽和度，整體上成黑白的效果后一眼就能看出來(lái)了）

最后總結(jié)幾點(diǎn)：

1.畫(huà)面整體統(tǒng)一，顏色搭配的看起來(lái)舒服；

2.頁(yè)面元素要以組為單位；（如文字和文字之間的間距不要過(guò)大，讓人看起來(lái)是一組）

3.采用吸引力的用語(yǔ)，或者添加“火速參與”等刺激性的詞語(yǔ)按鈕等，讓用戶(hù)在最短的時(shí)間內(nèi)有去點(diǎn)擊他的欲望。

4.主次對(duì)比分明，合理安排頁(yè)面布局；

5.輸出K數(shù)不宜過(guò)大，否則加載速度會(huì)慢；

6.最后最重要的一點(diǎn)是，前期工作一定要與需求方溝通好，要知道，在工作中，溝通是非常重要的一件事情。

三、網(wǎng)站建設(shè)Banner設(shè)計(jì)關(guān)鍵性要素?

1、網(wǎng)站Banner圖構(gòu)圖

構(gòu)圖是網(wǎng)站建設(shè)和設(shè)計(jì)中最重要也是最基礎(chǔ)的一部分，我們?cè)谠O(shè)計(jì)網(wǎng)站Banner圖中都需要先經(jīng)過(guò)排版，確定出Banner整體效果之后，我們?cè)谶M(jìn)行創(chuàng)意性的整體填充，這樣做的目的就是讓Banner樣式更加豐富。其實(shí)網(wǎng)站Banner中最根本還是圖文的集合，我們?cè)谠O(shè)計(jì)Banner中可以按照下面幾種圖文集合的方式進(jìn)行：左字右圖、左圖右字、左中右構(gòu)圖、上下構(gòu)圖、文字作為主體居中、不規(guī)則構(gòu)圖按照這種排版方式我們就可以做出效果和內(nèi)容更加豐富的Banner。

2、Banner中字體呈現(xiàn)出來(lái)的效果

字體在Banner中表現(xiàn)出來(lái)的作用無(wú)可替代，因?yàn)樽煮w的氣質(zhì)和樣式以及畫(huà)質(zhì)直接決定banner設(shè)計(jì)中好壞，如果Banner中字體設(shè)計(jì)出來(lái)特別難看，這在用戶(hù)心中就會(huì)直接大打折扣。因此，我們?cè)谶x擇字體就就需要采用宋體和細(xì)黑體兩種形式，這樣設(shè)計(jì)出來(lái)Banner整體看起來(lái)更符合網(wǎng)站，也更符合整體網(wǎng)站和諧性。

3、Banner配色

Banner配色通常都是根據(jù)網(wǎng)站內(nèi)容和網(wǎng)站整體風(fēng)格進(jìn)行適當(dāng)搭配，這樣做的好處就在于讓網(wǎng)站Banner圖中顏色調(diào)節(jié)飽和度和明度。例如，我們?cè)谠O(shè)計(jì)網(wǎng)站Banner的時(shí)候，可以采取黃黑白這三種顏色搭配的方式進(jìn)行，這樣做出來(lái)的效果更加顏色效果對(duì)比鮮明，而且視覺(jué)效果更加具有沖擊力。推薦閱讀:網(wǎng)站優(yōu)化首頁(yè)輪播圖設(shè)計(jì)的技巧

4、Banner裝飾

無(wú)論做任何網(wǎng)站都需要進(jìn)行內(nèi)容、顏色和圖片的裝飾，因此在網(wǎng)站Banner中同樣也是如此，我們?cè)贐anner中加入一些小的元素和小裝飾這樣讓Banner更加具有設(shè)計(jì)感，起到點(diǎn)綴和豐富畫(huà)面的作用。

我們?cè)僭O(shè)計(jì)Banner中就需要進(jìn)行點(diǎn)、線(xiàn)、面相互組合，相互平衡，設(shè)計(jì)出來(lái)的Banner圖更加豐富多彩，再加上字體的選擇與設(shè)計(jì)、配色的分析、裝飾的應(yīng)用彰顯出Banner與眾不同。

四、banner設(shè)計(jì)常用的8種版式設(shè)計(jì)

在banner設(shè)計(jì)當(dāng)中，主要有以下幾種排版形式：重心型、分割型、傾斜型、滿(mǎn)版型、曲線(xiàn)型、對(duì)稱(chēng)型、三角形、四角型。這幾種形式會(huì)比較常出現(xiàn)在banner設(shè)計(jì)當(dāng)中，所以我們一一來(lái)分析以下幾種排版方式。

1、重心型

重心型版式的banner容易讓瀏覽者產(chǎn)生視覺(jué)焦點(diǎn)，界面效果強(qiáng)烈且突出。

2、分割型

分割型主要可以分成上下分割和左右分割。因?yàn)閎anner一般是高度比較窄，所以左右分割型會(huì)比較常見(jiàn)。上下分割的banner會(huì)比較少見(jiàn)。

上下分割，顧名思義，就是把整個(gè)版面分為上下兩個(gè)部分?？梢栽谏习氩炕蛳掳氩颗渲脠D片，另一部分則配置文案。配置有圖片的部分感性而有活力，而文案部分則理性而靜止。上下部分配置的圖片可以是一幅或多幅。上下分割的banner布局比較少見(jiàn)，上下分割之后，版面的設(shè)計(jì)要求也比較高。

左右分割，就把整個(gè)版面分割為左右兩個(gè)部分，分別在左或右配置文案。當(dāng)左右兩部分形成強(qiáng)弱對(duì)比時(shí)，則造成視覺(jué)心理的不平衡。不過(guò)，倘若將分割線(xiàn)虛化處理，或用文字進(jìn)行左右重復(fù)或穿插，左右圖文則變得自然和諧。左右分割布局在banner的設(shè)計(jì)中最為常見(jiàn)。

3、傾斜型

傾斜型的banner比較偏個(gè)性化一些，多在一些設(shè)計(jì)公司或是運(yùn)動(dòng)品牌的網(wǎng)站中出現(xiàn)。版面的主體形象做傾斜設(shè)計(jì)，造成版面強(qiáng)烈的動(dòng)感和不穩(wěn)定因素，這種設(shè)計(jì)比較引人注目。

4、滿(mǎn)版型

滿(mǎn)版型的banner比較好理解，通常是版面以圖象充滿(mǎn)整版，主要以圖象為訴求，視覺(jué)傳達(dá)直觀而強(qiáng)烈。文字的配置壓置在上下、左右或中部的圖象上。滿(mǎn)版型給人以大方、舒展的感覺(jué)。

5、曲線(xiàn)型

圖片或文字在版面結(jié)構(gòu)上作曲線(xiàn)的編排構(gòu)成，產(chǎn)生節(jié)奏和韻律。多出現(xiàn)在運(yùn)動(dòng)型的banner設(shè)計(jì)中。

6、對(duì)稱(chēng)型

對(duì)稱(chēng)的版式給人穩(wěn)定、莊重理性的感覺(jué)。對(duì)稱(chēng)有絕對(duì)對(duì)稱(chēng)和相對(duì)對(duì)稱(chēng)。一般多采用相對(duì)對(duì)稱(chēng)。以避免過(guò)于嚴(yán)謹(jǐn)。banner對(duì)稱(chēng)一般以左右對(duì)稱(chēng)居多。

7、三角形

在圓形、四方形、三角形等基本形態(tài)中，正三角形(金字塔形)是最具安全穩(wěn)定因素的形態(tài)，而圓形和倒三角形則給人以動(dòng)感和不穩(wěn)定感。

8、四角型

四角型指在版面四角以及連接四角的對(duì)角線(xiàn)結(jié)構(gòu)上編排的圖形。這種結(jié)構(gòu)的版面，給人以嚴(yán)謹(jǐn)，規(guī)范的感覺(jué)。下圖是四角型的一種，同時(shí)也用到了左右分割的排版設(shè)計(jì)。

以上簡(jiǎn)單給大家分析講解了常見(jiàn)的幾種版式形式，每種版式設(shè)計(jì)并非以一種表現(xiàn)形態(tài)出現(xiàn)，比如四角型的banner可能會(huì)結(jié)合對(duì)稱(chēng)性的出現(xiàn)或是中軸型，所以大家在分析banner的時(shí)候不要以單一的一種視角去分析。因?yàn)橐粡坆anner的設(shè)計(jì)可能同時(shí)存在好幾種版式形式。

不同的排版可以給人不同的視覺(jué)感受，好的排版會(huì)讓banner更加的出彩。版式也沒(méi)有絕對(duì)的好壞，只有適合和不適合。希望今天給大家分享的內(nèi)容可以幫助到大家。

以上就是關(guān)于banner網(wǎng)頁(yè)設(shè)計(jì)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。

推薦閱讀：

cba打架十大排名（cba打架高手排名）

nba總排行榜（nba總助攻排行榜）

2017nba球隊(duì)排行榜（2017年nba最強(qiáng)球隊(duì)）

韓國(guó)定妝粉排行榜（韓國(guó)定妝粉排行榜前十名）

拼多多店鋪粉絲購(gòu)買(mǎi)（免費(fèi)漲粉工具）