-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當前位置：首頁 > 創(chuàng)意學院 > 景觀設計 > 專題列表 > 正文
banner網(wǎng)頁設計（banner網(wǎng)頁設計模板）
發(fā)布時間：2023-04-04 10:09:16
稿源：
創(chuàng)意嶺 閱讀：
54
當前文章關鍵詞排名出租
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于banner網(wǎng)頁設計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等
只需要輸入關鍵詞，就能返回你想要的內(nèi)容，越精準，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端
官網(wǎng)：https://ai.de1919.com。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務客戶遍布全球各地，如需了解相關業(yè)務請撥打電話175-8598-2043，或添加微信：1454722008
本文目錄:
頁設計（banner網(wǎng)頁設計模板）.jpg)
一、怎么設計網(wǎng)頁banner
Banner規(guī)格尺寸大小不一，文件大小也有一定的限制，這就使得在設計上增加了許多障礙，顏色不能太豐富，否則會在文件大小的限制下失真，軟文不
能太多，否則會沒有重點，得不償失，怎么在方寸間把握平衡，變得十分重要。接下來，我為大家總結累一些，如有鄙陋，請指正，萬分感謝。
第一部分：顏色
1．Banner與環(huán)境對比
試想如果在一個以淺色調(diào)為基準的網(wǎng)站上投放Banner，是不是從明度上拉開對比會很好的提高用戶的注意力呢(相反亦然)。
以此也可推想出，如果在一個有顏色基調(diào)的網(wǎng)站上投放補色或者對比色的Banner，效果就會變得更矚目(補色和對比色案例)。
2．Banner顏色簡單至上
(1)試想一個Banner五顏六色，是不是就能夠吸引眼球了呢?首先，先對比一下
哪個更吸引你的注意力呢?大多數(shù)人肯定會覺得后者給用戶帶來的視覺傳達力更強，簡潔明確、樸素有力的效果，給人一種重量感和力量感。前者顏色雖多，卻沒有帶來更好的視覺傳達效果，為什么呢?顏色過度使用會打亂色彩節(jié)奏，并且，減弱了顏色間的對比，使整體效果變?nèi)酢?/p>
(2)其次， 使用顏色越多，最后保存時文件體積越大，加載起來越慢，讓用戶等待就意味著和用戶說再見了，如果靠降低品質來達到Banner的上傳要求，那展現(xiàn)給用戶的是低質量的banner，也一樣會丟失一些用戶。
所以，顏色簡單有力，加載清晰快速，對于banner的視覺傳達很重要，只要讓用戶產(chǎn)生點擊欲望，我們推廣的目的就達到了。
第二部分：構圖
1．構圖的定義及規(guī)則
構圖其實說白了就是經(jīng)營畫面，進行布局，如何在你構圖的引導下吸引用戶點擊，產(chǎn)生欲望，了解內(nèi)容，如果都能達到，那說明你的構圖成功了。構圖的基本規(guī)則是：均衡、對比和視點。
均衡：均衡不是對稱，是一種力量上的平衡感，使畫面具有穩(wěn)定性。
均衡不是對稱
對比：在構圖上來說就是大小對比，粗細對比，方圓對比，曲線與直線對比等等。
白色線條的對比產(chǎn)生了空間感
視點：就是如何將用戶的目光集中在畫面的中心點上，我們可以用構圖去引導用戶的視點
將視點集中引導到slogan上
介紹完構圖的基本規(guī)則，舉例子檢視下：一張X-MEN的宣傳banner，這張banner人物排布既平衡又不對稱，人物大小不一，產(chǎn)生出對比，突
出了部分劇中人物。Banner正中一個大大的X，把視點集中到了畫面的最中心，很好的利用基本構圖規(guī)則進行banner設計。
2．構圖的樣式
構圖大概分以下幾種：(1).垂直水平式構圖 (2).三角形構圖(正三角和倒三角)(3)漸次式構圖 (4).輻射式構圖 (5).框架式構圖 (6)對角線構圖
(1)垂直水平式構圖：
平行排列每一個產(chǎn)品，每個產(chǎn)品展示效果都很好，各個產(chǎn)品所占比重相同，秩序感強，此類構圖給用戶心情：產(chǎn)品規(guī)矩正式、高大、安全感強。
(2)正三角形和倒三角構圖：
多個產(chǎn)品進行正三角構圖，產(chǎn)品立體感強，各個產(chǎn)品所占比重有輕有重，構圖穩(wěn)定自然，空間感強。此類構圖給用戶心情：安全感極強、穩(wěn)定可靠。
多個產(chǎn)品進行倒三角構圖，產(chǎn)品立體感極強，各個產(chǎn)品所占比重有輕有重，構圖動感活潑失衡，運動感空間感強。此類構圖給用戶心情：不穩(wěn)定感激發(fā)用戶心情，給用戶運動的感覺。
(3)對角線構圖：一個產(chǎn)品或兩個產(chǎn)品進行組合對角線構圖，產(chǎn)品的空間感強，各個產(chǎn)品所占比重相對平衡，構圖動感活潑穩(wěn)定，運動感空間感強。此類構圖給用戶心情：動感十足且穩(wěn)定。
(4)漸次式構圖：多個產(chǎn)品進行漸次式排列，產(chǎn)品展示空間感強，各個產(chǎn)品所占比重不同，由大及小，構圖穩(wěn)定，次序感強，利用透視引導指向slogan。此類構圖給用戶心情：穩(wěn)定自然，產(chǎn)品豐富可靠。
(5)輻射式構圖：多個產(chǎn)品進行輻射式構圖，產(chǎn)品空間感強，各個產(chǎn)品所占比重不同，由大及小。構圖動感活潑，次序感強，利用透視指向slogan，此類構圖給用戶心情：活潑動感，產(chǎn)品豐富可靠。
(6)框架式構圖：單個或多個產(chǎn)品框架式構圖，產(chǎn)品展示效果好，有畫中畫的感覺。構圖規(guī)整平衡，穩(wěn)定堅固。此類構圖給用戶心情：穩(wěn)定可信賴，產(chǎn)品可靠。
3．軟文（Slogan）
(1)俗話說得好“話不在多，精辟就行”當今炙手火熱的微博就是一個例子“140字概括你要說的”，Slogan也是一樣。
(2)要言之有物，第一要抓住用戶的心里，了解用戶的想法很重要。第二我們要推給用戶什么，用戶對什么感興趣。下面舉個例子：
Slogan只有四個字，終于來了，白色iphone4吊足了apple迷門近兩年的胃口，這四個字恐怕是他們最想聽到的。用戶從不會質疑apple的性
能，科技領先性及用戶體驗性，他們最想的恐怕就是擁有自己夢寐以求的白色iphone4。所以，apple的slogan簡約而不簡單。
二、網(wǎng)頁banner設計經(jīng)驗分享！?
關于Banner的設計，相信已經(jīng)有很多人都看過這方面經(jīng)驗的分享了，我來公司也做過了一些Banner的設計，那在這其中通過不斷的學習、實踐積累了自己的一些小小經(jīng)驗和方法給大家分享。
一、背景
我們畫畫的同學可能都知道，一個畫面不可能都面面俱到，重點的需要細致刻畫，有的一筆帶過即可。設計一個Banner有時候就像畫畫似的，首先要有大的環(huán)境，那Banner的背景就好比大環(huán)境，其實主要是起到襯托、烘托氣氛的作用。一個新需求過來，首先我們考慮要營造一個什么樣的環(huán)境，什么樣的氣氛，是歡快的、悲傷的、可愛的還是…比如過年，可能就用紅橙色，比如兒童類的，顏色上就要純一點，活潑點等等。
但是需要注意一點，背景不能太花，否則會影響整體的一個可讀識性，簡單，清晰即可。
二、主視覺元素
設計中的主視覺要清楚，符合主題，元素不可太多，否則看起來跟人感覺就會亂。有的人在做時只要是有地，就全放滿，其實頁面適當?shù)摹傲舭住币彩翘嵘嬅嫫焚|的一個好方法。視覺元素不論是人物，還是其他，一定要清晰，在我們找素材的時候也要找像素質量高的，我一般會去站酷、昵圖網(wǎng)、花瓣或者直接google搜，不要太多。還有一點注意的是不可盜用他人的作品，頭像等等。
東西太多，想表達的也太多，這時候需要用戶去花時間思考它想告訴我們什么，而往往這時候用戶是不愿意是思考的，一是畫面不知道他要表達什么，二是整體上沒有吸引住用戶的眼睛，這種情況下這個Banner設計是做到比較失敗的。
三、標題文字
標題文字非常重要，是整個Banner的主題，重點文字一定要在背景中突出出來，不論用顏色對比、放大、變形設計還是即便做立體效果等等。（這里我分享一個經(jīng)驗，就是在頁面上新建一個黑色的圖層，樣式改成飽和度，整體上成黑白的效果后一眼就能看出來了）
最后總結幾點：
1.畫面整體統(tǒng)一，顏色搭配的看起來舒服；
2.頁面元素要以組為單位；（如文字和文字之間的間距不要過大，讓人看起來是一組）
3.采用吸引力的用語，或者添加“火速參與”等刺激性的詞語按鈕等，讓用戶在最短的時間內(nèi)有去點擊他的欲望。
4.主次對比分明，合理安排頁面布局；
5.輸出K數(shù)不宜過大，否則加載速度會慢；
6.最后最重要的一點是，前期工作一定要與需求方溝通好，要知道，在工作中，溝通是非常重要的一件事情。
三、網(wǎng)站建設Banner設計關鍵性要素?
1、網(wǎng)站Banner圖構圖
構圖是網(wǎng)站建設和設計中最重要也是最基礎的一部分，我們在設計網(wǎng)站Banner圖中都需要先經(jīng)過排版，確定出Banner整體效果之后，我們在進行創(chuàng)意性的整體填充，這樣做的目的就是讓Banner樣式更加豐富。其實網(wǎng)站Banner中最根本還是圖文的集合，我們在設計Banner中可以按照下面幾種圖文集合的方式進行：左字右圖、左圖右字、左中右構圖、上下構圖、文字作為主體居中、不規(guī)則構圖按照這種排版方式我們就可以做出效果和內(nèi)容更加豐富的Banner。
2、Banner中字體呈現(xiàn)出來的效果
字體在Banner中表現(xiàn)出來的作用無可替代，因為字體的氣質和樣式以及畫質直接決定banner設計中好壞，如果Banner中字體設計出來特別難看，這在用戶心中就會直接大打折扣。因此，我們在選擇字體就就需要采用宋體和細黑體兩種形式，這樣設計出來Banner整體看起來更符合網(wǎng)站，也更符合整體網(wǎng)站和諧性。
3、Banner配色
Banner配色通常都是根據(jù)網(wǎng)站內(nèi)容和網(wǎng)站整體風格進行適當搭配，這樣做的好處就在于讓網(wǎng)站Banner圖中顏色調(diào)節(jié)飽和度和明度。例如，我們在設計網(wǎng)站Banner的時候，可以采取黃黑白這三種顏色搭配的方式進行，這樣做出來的效果更加顏色效果對比鮮明，而且視覺效果更加具有沖擊力。推薦閱讀:網(wǎng)站優(yōu)化首頁輪播圖設計的技巧
4、Banner裝飾
無論做任何網(wǎng)站都需要進行內(nèi)容、顏色和圖片的裝飾，因此在網(wǎng)站Banner中同樣也是如此，我們在Banner中加入一些小的元素和小裝飾這樣讓Banner更加具有設計感，起到點綴和豐富畫面的作用。
我們再設計Banner中就需要進行點、線、面相互組合，相互平衡，設計出來的Banner圖更加豐富多彩，再加上字體的選擇與設計、配色的分析、裝飾的應用彰顯出Banner與眾不同。
四、banner設計常用的8種版式設計
在banner設計當中，主要有以下幾種排版形式：重心型、分割型、傾斜型、滿版型、曲線型、對稱型、三角形、四角型。這幾種形式會比較常出現(xiàn)在banner設計當中，所以我們一一來分析以下幾種排版方式。
1、重心型
重心型版式的banner容易讓瀏覽者產(chǎn)生視覺焦點，界面效果強烈且突出。
2、分割型
分割型主要可以分成上下分割和左右分割。因為banner一般是高度比較窄，所以左右分割型會比較常見。上下分割的banner會比較少見。
上下分割，顧名思義，就是把整個版面分為上下兩個部分?？梢栽谏习氩炕蛳掳氩颗渲脠D片，另一部分則配置文案。配置有圖片的部分感性而有活力，而文案部分則理性而靜止。上下部分配置的圖片可以是一幅或多幅。上下分割的banner布局比較少見，上下分割之后，版面的設計要求也比較高。
左右分割，就把整個版面分割為左右兩個部分，分別在左或右配置文案。當左右兩部分形成強弱對比時，則造成視覺心理的不平衡。不過，倘若將分割線虛化處理，或用文字進行左右重復或穿插，左右圖文則變得自然和諧。左右分割布局在banner的設計中最為常見。
3、傾斜型
傾斜型的banner比較偏個性化一些，多在一些設計公司或是運動品牌的網(wǎng)站中出現(xiàn)。版面的主體形象做傾斜設計，造成版面強烈的動感和不穩(wěn)定因素，這種設計比較引人注目。
4、滿版型
滿版型的banner比較好理解，通常是版面以圖象充滿整版，主要以圖象為訴求，視覺傳達直觀而強烈。文字的配置壓置在上下、左右或中部的圖象上。滿版型給人以大方、舒展的感覺。
5、曲線型
圖片或文字在版面結構上作曲線的編排構成，產(chǎn)生節(jié)奏和韻律。多出現(xiàn)在運動型的banner設計中。
6、對稱型
對稱的版式給人穩(wěn)定、莊重理性的感覺。對稱有絕對對稱和相對對稱。一般多采用相對對稱。以避免過于嚴謹。banner對稱一般以左右對稱居多。
7、三角形
在圓形、四方形、三角形等基本形態(tài)中，正三角形(金字塔形)是最具安全穩(wěn)定因素的形態(tài)，而圓形和倒三角形則給人以動感和不穩(wěn)定感。
8、四角型
四角型指在版面四角以及連接四角的對角線結構上編排的圖形。這種結構的版面，給人以嚴謹，規(guī)范的感覺。下圖是四角型的一種，同時也用到了左右分割的排版設計。
以上簡單給大家分析講解了常見的幾種版式形式，每種版式設計并非以一種表現(xiàn)形態(tài)出現(xiàn)，比如四角型的banner可能會結合對稱性的出現(xiàn)或是中軸型，所以大家在分析banner的時候不要以單一的一種視角去分析。因為一張banner的設計可能同時存在好幾種版式形式。
不同的排版可以給人不同的視覺感受，好的排版會讓banner更加的出彩。版式也沒有絕對的好壞，只有適合和不適合。希望今天給大家分享的內(nèi)容可以幫助到大家。
以上就是關于banner網(wǎng)頁設計相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。
推薦閱讀：
贛公網(wǎng)安備 50019002502384號
