-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當(dāng)前位置：首頁 > 創(chuàng)意學(xué)院 > 景觀設(shè)計(jì) > 專題列表 > 正文
banner優(yōu)秀設(shè)計(jì)圖（banner優(yōu)秀設(shè)計(jì)圖包包）
發(fā)布時間：2023-04-07 02:10:37
稿源：
創(chuàng)意嶺 閱讀：
76
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于banner優(yōu)秀設(shè)計(jì)圖的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對話答疑等等
只需要輸入關(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
本文目錄:
秀設(shè)計(jì)圖（banner優(yōu)秀設(shè)計(jì)圖包包）.jpg)
一、如何在網(wǎng)站首頁Banner設(shè)計(jì)就抓住用戶注意力呢?
2、讓網(wǎng)站首圖設(shè)計(jì)成為核心
首圖是承載內(nèi)容的重要容器。你想要讓內(nèi)容不同凡響，又能夠從整個設(shè)計(jì)中脫穎而出，那么就要用好首圖。在視覺上設(shè)計(jì)優(yōu)秀的首圖能夠讓用戶每次打開網(wǎng)站的時候都為之駐足。
3、拿出情感化的網(wǎng)站設(shè)計(jì)必殺技
將情感融入設(shè)計(jì)，并且用情感來說法用戶，才是首圖的設(shè)計(jì)之道。只有能夠觸動用戶情緒的設(shè)計(jì)更具有說服力。很多時候，我們使用創(chuàng)意也好，借助熱門IP也好，精心打磨文案也好，也只是希望讓首圖能夠讓用戶驚喜、喜歡、需要，最終是要通過它調(diào)動起用戶的情緒。
4、一定要高清的網(wǎng)頁設(shè)計(jì)圖
想要用戶對你的網(wǎng)站擁有積極的情緒，那么圖片的素質(zhì)一定要有保證，高素質(zhì)的圖片能夠讓用戶準(zhǔn)確地獲得信息，清晰的圖片總能讓人看著更加舒服。
5、突顯CTA按鈕設(shè)計(jì)
網(wǎng)頁首圖常常和行為召喚(CTA)按鈕搭配著使用。由于首圖配圖通常在視覺上極其突出，但是搭配有行為召喚按鈕的首圖，其本質(zhì)上是用來吸引用戶，傳遞信息，并引導(dǎo)用戶去點(diǎn)擊按鈕的，所以行為召喚按鈕和視覺信息豐富的圖片之間，不應(yīng)該互相干預(yù)，而是通過設(shè)計(jì)，讓CTA按鈕更加突出，讓圖片處于輔助的位置，最終達(dá)到吸引、引導(dǎo)的目的。
6、控制好對比度網(wǎng)站設(shè)計(jì)
對比度是任何設(shè)計(jì)中都必須注意的點(diǎn)，在設(shè)計(jì)首圖的時候同樣需要注意。首圖中的文本和排版也需要用心設(shè)計(jì)，通常需要選擇加粗且易讀的字體。如果你的圖片和文字疊加到了一起，那么需要注意背景的圖片和前景的文字之間的對比，確保文本是能夠被清晰分辨的。通常，設(shè)計(jì)師會在圖片上疊加上一個半透明的有色圖層來降低繁復(fù)色彩的視覺信息量和干擾。
7、兼顧不同的屏幕尺寸設(shè)計(jì)
如今的內(nèi)容都需要考慮跨平臺、跨設(shè)備、跨平臺的兼容和適配性，當(dāng)你的圖片出現(xiàn)在不同尺寸的屏幕上的時候，它是否能夠正常顯示，正確顯示，并且符合不同平臺、不同屏幕的顯示需求。
8、頁面設(shè)計(jì)考慮使用插畫
在網(wǎng)頁首圖中使用插畫能夠賦予首圖以個性。相比于圖片，插畫更加個性化，插畫的內(nèi)容更加自由，也更容易控制，從內(nèi)容到技術(shù)均是如此。當(dāng)你打算在首圖當(dāng)中使用插畫的時候，請盡量保持插畫和整體設(shè)計(jì)之間的一致性，盡量讓它們看起來來源是相同的。
二、如何設(shè)計(jì)一個好的banner？
世界看臉，網(wǎng)站看Banner，門面當(dāng)然要漂亮，不過很多同學(xué)以為做Banner是門技術(shù)活兒，自己學(xué)藝不精做不了。那小編今天為大家分享的這篇文章會讓你覺得即使你沒有很專業(yè)的技術(shù)也可以做banner設(shè)計(jì)，就會明白，技術(shù)于Banner，就像刀法于人，雖有招式，但無內(nèi)功支撐，久戰(zhàn)必?cái) ６@篇文章，就按6個步驟來，就樂意水出一款好的banner：
首先你要知道為什么要做banner？
banner是用來傳達(dá)信息的。一切不以傳達(dá)有效信息、有效傳達(dá)信息的banner都是yy.baner是用來促使用戶行動的，也即Call To Action。無法讓用戶產(chǎn)生你所期望的banner都是無效的。所以，先擺脫一個錯誤的認(rèn)識：banner僅僅是用來裝飾用的，僅僅是為了吸引人注意啥的想法。因此，我們既然是非專業(yè)設(shè)計(jì)師，就要回歸到做banner的本源，為了達(dá)到以上效果，同時兼顧美觀、大方、好看。
大方和好看的banner未必需要高深的視覺技巧，和繁瑣的PS功能，但是要兼顧視覺的幾個原則：
第一步：定義要傳達(dá)什么信息
這一步，和視覺、審美什么的都沒關(guān)系。
比如，品牌logo我們要傳達(dá)的信息有：品牌LOGO，讓用戶一眼就知道哪里出品，下次形成條件反射，所謂的視覺認(rèn)知是需要一定的重復(fù)的，只有不斷重復(fù)才能加深用戶印象。子品牌LOGO，讓用戶知道我們出了什么東西，并且有系列感。
以上就是我們要傳達(dá)的核心信息了。你也可以認(rèn)為這就是一個banner，只是——看起來沒那么好看而已。
但是，我們發(fā)現(xiàn)信息還不夠，我們還想要傳達(dá)：我們的內(nèi)容大概是什么，從而讓用戶形成期待。既然是系列，我們希望用戶能夠知道這是第幾期，從而當(dāng)他們想要從某一期有興趣時點(diǎn)擊到全部，也有地方去。所以，我們把信息又放出來。
第二步：定義信息的優(yōu)先級
雖然我們有信息，但是優(yōu)先級肯定不一樣的，所以對應(yīng)到設(shè)計(jì)上，我們給它放的版塊的大小、顏色的突出是不一樣的。
第三步：考慮用戶視覺路徑
是指你想引導(dǎo)用戶先看哪里，再看哪里，然后再做什么。通常，用戶的閱讀從上到下，從左到右邊，所以一般重要的內(nèi)容會放到左上角。
不過這個規(guī)則可以用醒目的圖片、刺眼的顏色輕易打破，但是一般建議你不要輕易這么做，所有的圖片和顏色都要有意義，為什么要用這個圖片為什么要用這個顏色。
確保用戶一開始有視覺中心，如果用戶一眼不知道先看什么，那么這個banner就是失敗的。
有了視覺焦點(diǎn)后，你可以從視覺焦點(diǎn)引申開來，使用視覺里的親密性原則（把內(nèi)容相近的地理位置靠近一些、對比原則等等），引導(dǎo)用戶從視覺焦點(diǎn)進(jìn)而關(guān)注到其他細(xì)節(jié)、或者促使行動的東西。
第四步：考慮標(biāo)準(zhǔn)識別顏色
既然我們要傳達(dá)品牌形象，請確保用色從我們的標(biāo)準(zhǔn)VI色盤中選擇，而不要隨便用。
記住，品牌傳達(dá)，重復(fù)性很重要。就像我們看到紅、黃、白配色會想到麥當(dāng)勞，看到綠和黑就想到星巴克一樣。
第五步：做視覺的排版
排版上，信息已經(jīng)完整，優(yōu)先級已經(jīng)出來，無非就是把它變得好看一些而已。
讓banner好看的幾個要訣：
1. 對齊
很好辦吧，讓內(nèi)容縱向、橫向都有一條線，可以對齊。要么居中，要么底部。盡量確保頁面上不要有一個元素，沒有任何元素和它能夠形成對齊的關(guān)系。
2. 親密
不要讓所有內(nèi)容都沒有聚集地堆在一起，讓那些關(guān)系比較親密的內(nèi)容聚合成一個區(qū)域，不要讓一個banner上的區(qū)域超過4個。
3. 簡單質(zhì)感：
千萬不要加任何PS的濾鏡、陰影、能不漸變就不漸變，因?yàn)橐呀?jīng)不流行了，不要盲目使用各種樣式。
4. 如果要用圖標(biāo)，盡量選擇樣式統(tǒng)一，且能夠保持你的優(yōu)先級次序的圖表。比如我們引導(dǎo)用戶先看左邊，再看右邊，結(jié)果你在右邊的圖標(biāo)里選擇了一個血紅的，可能用戶的視線立馬被吸引過來了。
5. 不要讓字體超過3種。盡量用宋體、黑體、方正黑體，不要用什么魏碑體、行楷等，一看就比較山寨。
第六步：做更多的美化
如果你不想做，其實(shí)上面也可以了。想做的話，我們可以：
比如花點(diǎn)時間去做一個流行的扁平化背景裝飾——還是要強(qiáng)調(diào)一點(diǎn)，不要為了裝飾而裝飾，所有的裝飾都要有意義。
讓背景更加有質(zhì)感。比如加點(diǎn)磨砂感覺。比如，你還可以適當(dāng)變換下別的排版，比如：居中的排版，更容易引導(dǎo)用戶從上到下的閱讀視角，也是很多人偷懶比較喜歡的排版風(fēng)格。
綜上所述，做banner有一大半的精力是梳理信息、設(shè)定優(yōu)先級、設(shè)定用戶瀏覽次序，和PS的技能沒有太多關(guān)系，所以，每個人都可以去嘗試做好一張看似很有設(shè)計(jì)感，但是實(shí)際上又沒花什么精力的banner。
三、優(yōu)雅banner圖設(shè)計(jì)有什么技巧?
一、雙色冰淇淋漸變
首圖當(dāng)作全屏出血大圖處理時，你可以將圖片調(diào)色成為雙色漸變，有點(diǎn)像我們吃的雙色冰淇淋球，選一組你認(rèn)為能激發(fā)心理氛圍的配色，最好是對比色，帶來強(qiáng)烈的視覺落差。由于要作為背景而存在，整體的色彩明度要區(qū)別于文字的顏色。這里推薦的這一方式只需要利用PS中的“漸變映射”工具，就能輕松獲得。
二、線條引流
這也不失為一種設(shè)計(jì)方式。讓線條來引導(dǎo)實(shí)現(xiàn)去穿越你想要焦點(diǎn)停留的地方。
三、動態(tài)情景
對于首圖的選擇，你可以焦距到動態(tài)場景。這類動態(tài)場景由于本身模特的動態(tài)造型，會調(diào)動觀眾的運(yùn)動神經(jīng)，激發(fā)頁面的活力。大家可以想象，如果將首圖的主角換成一個靜物，效果將是不同的。這里將模特的方向加以改變后重新降低透明度的做法，帶來一定的虛實(shí)結(jié)合的感受。
四、謹(jǐn)慎配色
我們希望大家在運(yùn)用首圖時，盡量不要去觸屏普通的風(fēng)景圖。自然風(fēng)光雖然好，但大片風(fēng)景會表現(xiàn)出一團(tuán)飽和的顏色堆疊，其實(shí)運(yùn)用在網(wǎng)頁設(shè)計(jì)中略顯得沒有重點(diǎn)。因?yàn)槟阋獮樽罱K配圖運(yùn)用以后所出現(xiàn)的顏色負(fù)責(zé)，色彩盡量控制在三種顏色之內(nèi)，這條道理相信設(shè)計(jì)師們都會贊同，因此，這里的配圖的色彩最好也能有所節(jié)制。
五、虛擬現(xiàn)實(shí)
當(dāng)然，我們這里談的不是虛擬現(xiàn)實(shí)，而是在首圖設(shè)計(jì)時，試著將靜物表現(xiàn)得更為“現(xiàn)實(shí)”，好像它們就在你的屏幕上，隨手可以取到。但這個表達(dá)法，最緊要的是要為虛擬尋找出口，也就是說，不能完全寫實(shí)，要讓用戶看出虛擬的破綻，從而讓形象更為立體。這類表達(dá)技巧在首圖中有手機(jī)，利用APP產(chǎn)品展示等最為常見。
六、文字本身的美
每張首圖也許我們都希望能配上文字，其實(shí)文字本身也能成為一種風(fēng)景，有時候適當(dāng)運(yùn)用一些具有圖像風(fēng)格的文字，更能傳遞文字本身的能量。
如果能將文字看作圖像，書法文字是最合適不過了。書法本身的隨意瀟灑，和普通的印刷字體相比有著不可比擬的個性感。這里，運(yùn)用了書法作為主角，本身書法作為傳統(tǒng)國粹，在東方傳統(tǒng)的行業(yè)里運(yùn)用非常應(yīng)景。當(dāng)然，這里的書法本身還可以寫得更好。
七、靜止的力量
對稱能帶來一種莊重靜止的力量，因此，在首圖設(shè)計(jì)中，你不妨采用對稱的布局方式來設(shè)計(jì)首圖。但由于對稱本身略顯得靜止呆板，因此在設(shè)計(jì)上更需要多一些匠心，增加一些比較能突破規(guī)則小細(xì)節(jié)。
對稱的布局最好采用倒三角的構(gòu)圖，這樣視線會更靈活，從上往下會顯得更流暢，否則就會有一種滯澀不前的感受。
八、左圖右文
首圖的設(shè)計(jì)除了全屏展示，還有一種方式是可以放左邊圖片右邊文字的方式，這樣的網(wǎng)頁設(shè)計(jì)技巧帶來的好處就是可以分割圖文，特別在圖片信息也同樣重要的時候，如果把圖文混合，雙方都不夠凸顯，不如左右各凸出主角，跟隨先左后右的視線也能傳遞本身的視覺效果。
四、怎么設(shè)計(jì)網(wǎng)頁banner
Banner規(guī)格尺寸大小不一，文件大小也有一定的限制，這就使得在設(shè)計(jì)上增加了許多障礙，顏色不能太豐富，否則會在文件大小的限制下失真，軟文不
能太多，否則會沒有重點(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)圖其實(shí)說白了就是經(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è)計(jì)。
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)定堅(jiān)固。此類構(gòu)圖給用戶心情：穩(wěn)定可信賴，產(chǎn)品可靠。
3．軟文（Slogan）
(1)俗話說得好“話不在多，精辟就行”當(dāng)今炙手火熱的微博就是一個例子“140字概括你要說的”，Slogan也是一樣。
(2)要言之有物，第一要抓住用戶的心里，了解用戶的想法很重要。第二我們要推給用戶什么，用戶對什么感興趣。下面舉個例子：
Slogan只有四個字，終于來了，白色iphone4吊足了apple迷門近兩年的胃口，這四個字恐怕是他們最想聽到的。用戶從不會質(zhì)疑apple的性
能，科技領(lǐng)先性及用戶體驗(yàn)性，他們最想的恐怕就是擁有自己夢寐以求的白色iphone4。所以，apple的slogan簡約而不簡單。
以上就是關(guān)于banner優(yōu)秀設(shè)計(jì)圖相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。
推薦閱讀：
哪里可以免費(fèi)推廣廣告（哪里可以免費(fèi)推廣廣告呢）
贛公網(wǎng)安備 50019002502384號
