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

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

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

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

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

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

本文目錄:

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

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

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

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

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

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

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

第一部分：顏色

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

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

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

2．Banner顏色簡單至上

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

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

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

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

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

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

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

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

均衡不是對稱

對比：在構(gòu)圖上來說就是大小對比，粗細(xì)對比，方圓對比，曲線與直線對比等等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(6)框架式構(gòu)圖：單個或多個產(chǎn)品框架式構(gòu)圖，產(chǎn)品展示效果好，有畫中畫的感覺。構(gòu)圖規(guī)整平衡，穩(wěn)定堅固。此類構(gòu)圖給用戶心情：穩(wěn)定可信賴，產(chǎn)品可靠。

3．軟文（Slogan）

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

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

Slogan只有四個字，終于來了，白色iphone4吊足了apple迷門近兩年的胃口，這四個字恐怕是他們最想聽到的。用戶從不會質(zhì)疑apple的性

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

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

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

一、背景

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

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

二、主視覺元素

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

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

三、標(biāo)題文字

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

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

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

2.頁面元素要以組為單位；（如文字和文字之間的間距不要過大，讓人看起來是一組）

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

4.主次對比分明，合理安排頁面布局；

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

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

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

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

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

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

字體在Banner中表現(xiàn)出來的作用無可替代，因為字體的氣質(zhì)和樣式以及畫質(zhì)直接決定banner設(shè)計中好壞，如果Banner中字體設(shè)計出來特別難看，這在用戶心中就會直接大打折扣。因此，我們在選擇字體就就需要采用宋體和細(xì)黑體兩種形式，這樣設(shè)計出來Banner整體看起來更符合網(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é)飽和度和明度。例如，我們在設(shè)計網(wǎng)站Banner的時候，可以采取黃黑白這三種顏色搭配的方式進(jìn)行，這樣做出來的效果更加顏色效果對比鮮明，而且視覺效果更加具有沖擊力。推薦閱讀:網(wǎng)站優(yōu)化首頁輪播圖設(shè)計的技巧

4、Banner裝飾

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

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

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

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

1、重心型

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

2、分割型

分割型主要可以分成上下分割和左右分割。因為banner一般是高度比較窄，所以左右分割型會比較常見。上下分割的banner會比較少見。

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

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

3、傾斜型

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

4、滿版型

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

5、曲線型

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

6、對稱型

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

7、三角形

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

8、四角型

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

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

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

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

推薦閱讀：

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

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

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

韓國定妝粉排行榜（韓國定妝粉排行榜前十名）

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