網站設計banner

1、怎麼設計網頁banner

Banner規格尺寸大小不一，文件大小也有一定的限制，這就使得在設計上增加了許多障礙，顏色不能太豐富，否則會在文件大小的限制下失真，軟文不
能太多，否則會沒有重點，得不償失，怎麼在方寸間把握平衡，變得十分重要。接下來，我為大家總結累一些，如有鄙陋，請指正，萬分感謝。

第一部分：顏色

1．Banner與環境對比

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

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

2．Banner顏色簡單至上

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

哪個更吸引你的注意力呢?大多數人肯定會覺得後者給用戶帶來的視覺傳達力更強，簡潔明確、樸素有力的效果，給人一種重量感和力量感。前者顏色雖多，卻沒有帶來更好的視覺傳達效果，為什麼呢?顏色過度使用會打亂色彩節奏，並且，減弱了顏色間的對比，使整體效果變弱。

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

所以，顏色簡單有力，載入清晰快速，對於banner的視覺傳達很重要，只要讓用戶產生點擊慾望，我們推廣的目的就達到了。

第二部分：構圖

1．構圖的定義及規則

構圖其實說白了就是經營畫面，進行布局，如何在你構圖的引導下吸引用戶點擊，產生慾望，了解內容，如果都能達到，那說明你的構圖成功了。構圖的基本規則是：均衡、對比和視點。

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

均衡不是對稱

對比：在構圖上來說就是大小對比，粗細對比，方圓對比，曲線與直線對比等等。

白色線條的對比產生了空間感

視點：就是如何將用戶的目光集中在畫面的中心點上，我們可以用構圖去引導用戶的視點

將視點集中引導到slogan上

介紹完構圖的基本規則，舉例子檢視下：一張X-MEN的宣傳banner，這張banner人物排布既平衡又不對稱，人物大小不一，產生出對比，突
出了部分劇中人物。Banner正中一個大大的X，把視點集中到了畫面的最中心，很好的利用基本構圖規則進行banner設計。

2．構圖的樣式

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

(1)垂直水平式構圖：

平行排列每一個產品，每個產品展示效果都很好，各個產品所佔比重相同，秩序感強，此類構圖給用戶心情：產品規矩正式、高大、安全感強。

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

多個產品進行正三角構圖，產品立體感強，各個產品所佔比重有輕有重，構圖穩定自然，空間感強。此類構圖給用戶心情：安全感極強、穩定可靠。

多個產品進行倒三角構圖，產品立體感極強，各個產品所佔比重有輕有重，構圖動感活潑失衡，運動感空間感強。此類構圖給用戶心情：不穩定感激發用戶心情，給用戶運動的感覺。

(3)對角線構圖：一個產品或兩個產品進行組合對角線構圖，產品的空間感強，各個產品所佔比重相對平衡，構圖動感活潑穩定，運動感空間感強。此類構圖給用戶心情：動感十足且穩定。

(4)漸次式構圖：多個產品進行漸次式排列，產品展示空間感強，各個產品所佔比重不同，由大及小，構圖穩定，次序感強，利用透視引導指向slogan。此類構圖給用戶心情：穩定自然，產品豐富可靠。

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

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

3．軟文（Slogan）

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

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

Slogan只有四個字，終於來了，白色iphone4吊足了apple迷門近兩年的胃口，這四個字恐怕是他們最想聽到的。用戶從不會質疑apple的性
能，科技領先性及用戶體驗性，他們最想的恐怕就是擁有自己夢寐以求的白色iphone4。所以，apple的slogan簡約而不簡單。

2、網頁Banner怎麼設計?

1、點擊才是王道

一般我們做的banner都是為了宣傳、推廣某個產品或新功能等，它本身就是引導用戶點擊參與的入口，我們目的就是要吸引用戶點擊。所以我們可以用不同形式和手法來表現，但相同處，通情達意，突出主題，富有樂趣，那它們則能讓瀏覽者產生興趣。

2、主題明確

在著手設計之前，設計師應該先與需求方溝通，並從中獲取需求方想要表達的主題和需要重點突出的點。然後在針對性地對廣告對象進行訴求，形象鮮明的展示所要表達的內容。不要放一些沒用的東西，除非你想趕走你的用戶。

3、與整個頁面相協調

當我們確定表達的主題之後，要在banner實際放置的環境中展開後續的設計工作。色彩搭配要明亮干凈，要與整個頁面相協調。不能為了使banner更加吸引用戶的眼球而大面積的使用一些濃重的顏色(特殊需求除外)。

4、順應用戶的瀏覽習慣

我們知道大多數的用戶在瀏覽網頁的時候都是從上到下，從左到右的瀏覽。為使banner更容易被用戶瀏覽,我們應該順應用戶這樣的瀏覽習慣，糟糕的設計會讓用戶無所適從，焦點到處都是。

5、文字的排列設計

由於是以文字為主體部分，背景其實就無關緊要了，大多數這樣的設計，我們都可以拿純色背景或者是風景、科幻類的壁紙，取其整體的部分作為你需要的設計背景，通常我在截取時都習慣選擇大部分能吸引眼球的圖案又或者是漸變漸現的純色部分。

3、網站設計如何做好banner設計?

1、突出產品主題，避免繁瑣

關於廣告的主題，很多人會犯一個錯誤，認為傳達的信息越多，用戶越有興趣，其實不然，現在人們的時間很有限，信息泛濫的時代，如何能突出產品主題，讓用戶一眼就能識別廣告含義，才是最重要的，避免繁鎖內容，減少客戶的閱讀負擔。

2、要善於突出重點文字

文字描述是用來給用戶看的，所以一定要把重點文字突出，比如五一打折活動，一定要把五一吐出來，字樣一定要大，要醒目，其餘的則需要相應的弱化。

3、按照客戶的閱讀習慣來設計

一般人們的閱讀習慣都是從左到右、從上到下的，所以網站設計網站banner時候也要遵循這個規律，不要相反，會讓人很不舒服。

4、產品展示要能激發客戶的慾望

信息爆炸的時代，客戶瀏覽網頁的注意力是幾秒鍾，所以要第1時間進行產品的展示，命中主題。

5、過度的色彩不要太耀眼

色彩搭配固然重要，但是不能太過誇張，會讓訪問者感覺刺眼、不友好甚至產生反感。產品圖片，色彩不是多多益善，適合最重要，易於識別是關鍵。如果太多，產品信息就會被淹沒，視覺效果大打折扣。

關於網站設計如何做好banner設計，環球青藤小編今天就和您暫時分享到這里了。如果您對網站設計、頁面排版、圖像處理方面比較感興趣，希望分享的這篇文章可以給您的學習或工作提供幫助。如若您還想了解更多關於平面設計的素材及技巧等內容，可以點擊本站的其他文章進行學習。

4、怎麼設計網頁banner?

設計網頁banner的方法如下：
1、以文字為主
雖然現在網站的圖片大多都提倡圖文並茂，這樣能夠提高用戶體驗，但是我們現在看到很多網站上的圖片很多都是以圖片為主，這樣就是容易陷入一個誤區：banner圖只是為了用圖片的形式來展示網站的主要產品或者企業的總體形象。其實這樣的banner是很難能吸引到用戶的。因為有些用戶還是需要一定的文字來理解廣告中的內容的。如果是文字為主，做到言簡意賅，這樣的圖文並茂才能有利於提高點擊率。
2、不要出現價格信息
一般的消費者對於價格都是非常敏感的，除非是你的產品價格相比同行業的產品價格低出很多，很有價格上的優勢，否則不建議在banner上出現價格信息。因為價格一旦不是用戶心理能接受的，這個banner就會被用戶無視。
3、添加免費或者巨大優惠等字樣
根據眾多消費者的消費心理，他們對於那些物美價廉的產品都是非常熱衷的。對於企業網站的推廣和banner的設計也是這樣，在banner上添加免費或者巨大優惠等字樣也是能很有效地吸引到用戶。
4、設計帶有行為號召力
我們平時上網看到有些banner上會有個類似點擊的按鈕或者鏈接，潛意識會有著想點擊的念頭，可能會情不自禁地點擊進去。這種方法也能很好地提高點擊率。

5、怎樣做好一個網頁的banner設計?

一個好的banner設計的好，主要體現在點擊率方面，好的banner應該是非常容易吸引用戶的眼球的，讓用戶看到了這個banner後有強烈的點擊進去了解的慾望，而不是普通的一個廣告banner展示的形式。
主要體現在以下的幾方面：
1，以文字為主
雖然現在網站的圖片大多都提倡圖文並茂，這樣能夠提高用戶體驗，但是我們現在看到很多網站上的圖片很多都是以圖片為主，這樣就是容易陷入一個誤區：banner圖只是為了用圖片的形式來展示網站的主要產品或者企業的總體形象。其實這樣的banner是很難能吸引到用戶的。因為有些用戶還是需要一定的文字來理解廣告中的內容的。如果是文字為主，做到言簡意賅，這樣的圖文並茂才能有利於提高點擊率。
2，不要出現價格信息
一般的消費者對於價格都是非常敏感的，除非是你的產品價格相比同行業的產品價格低出很多，很有價格上的優勢，否則小編建議最好不要在banner上出現價格信息。因為價格一旦不是用戶心理能接受的，這個banner就會被用戶無視。
3，添加免費或者巨大優惠等字樣
根據眾多消費者的消費心理，他們對於那些物美價廉的產品都是非常熱衷的。對於企業網站的推廣和banner的設計也是這樣，在banner上添加免費或者巨大優惠等字樣也是能很有效地吸引到用戶，但是小編還是要提醒一句，一定要實事求是，如果點擊進去，發現只是一個圈套，這樣的作為會引起用戶強烈的不滿。
4，設計帶有行為號召力
我們平時上網看到有些banner上會有個類似點擊的按鈕或者鏈接，潛意識會有著想點擊的念頭，可能會情不自禁地點擊進去。這種方法也能很好地提高點擊率哦。

6、網頁藝術設計banner的製作技巧有哪些？?

簡單且完整的設計
當Larry Page和Sergey Brin向潛在投資者介紹他們的產品——「Google」的時候，他們將Adwords作為後備選擇——萬一他們不能獲取任何利潤的話。最後他們採用了後備計劃，同時我們也看到了他們的選擇是多麼明智。是什麼讓枯燥乏味的廣告得這么成功?與其他廣告不同的是，他們既沒有喚起瀏覽者的好奇心也沒有影響網頁的主流思想。事實上，其相反面是正確的。Adwords看起來像搜索結果的一部分，讓人們感覺這些廣告是由需而生的。這個簡單的設計不僅幫助Google提升了他們的搜索引擎同時也促進了Adwords廣告的發展，對此我們毫無疑問。
參與互動
Banner設計者會巧妙地運用一些類似Flash的工具設計一種可以邀請用於參與互動的banner。讓用戶參與互動的方法多種多樣。一些網站設計者利用一種在以前很流行的游戲元素設計banner。我們都知道pacman(吃豆人)這個很流行的游戲。我以前見過一個我最喜歡的banner就是讓pacman去「吃」美元。結果就是出現了一個很漂亮的標語要求你開儲蓄帳號，幫助你用固定的利率存錢。這個互動banner後面的目的很簡單就是讓用戶參與互動，然後當他們的意志不是很堅定的時候在恰當的時機向他們介紹銷售信息。
經過實踐證明這些互動banner是很有效果的。這樣的banner的最大的缺點就是大部分網站管理者不允許在他們的網站上使用。因為他會影響網頁內容。

7、網站Banner 應該如何設計

一般網路banner設計都需要文案，都是根據文案來做的，所以需要文案才能設計，配圖需要和文案有聯系，這種設計主要考慮構圖，構圖技巧可以在花瓣上面有許多模版，

8、官網banner的設計尺寸一般多少

官網Banner設計尺寸一般是468*60像素，大小如果gif格式是14K，如果是swf格式是16K。

全尺寸banner是468*60px，半尺寸banner是234*60px，小banner是88*31px，另外還有120*90，120*60也是小圖標的標准尺寸。

336*280、300*250、以及160*600 這三種大小的Banner廣告在宣傳效果上較好。在高度一定的情況下，寬度越大，效果也會越好，因為這樣廣告會給用戶帶來了較好的閱讀體驗。Banner位置在網頁的頂。

(8)網站設計banner擴展資料：

隨著大屏幕的顯示器出現,banner的表現尺寸越來越大,760X70;1000X70像素的大尺寸banner也有。

根據IAB國際廣告局2001年第二次標准公布的尺寸有：

1、"摩天大樓"形尺寸：120×600 

2、 寬"摩天大樓"形尺寸：160×600

3、 長方形尺寸：180×150

4、中級長方形尺寸：300×250 

5、大長方形尺寸：336×280

6、 豎長方形尺寸：240×400

7、 "正方形彈出式"廣告尺寸：250×250

9、網頁設計如何做好banner設計?

【導讀】在網站設計的時候，關於網站banner設計，是非常考驗設計師的水平的，因為很多客戶既要求節約成本，又要效率高，短時間可以設計出出彩的作品。那麼，網頁設計如何做好banner設計呢?今天就跟隨小編一起來了解下吧!

1、突出產品主題，避免繁瑣

關於廣告的主題，很多人會犯一個錯誤，認為傳達的信息越多，用戶越有興趣，其實不然，現在人們的時間很有限，信息泛濫的時代，如何能突出產品主題，讓用戶一眼就能識別廣告含義，才是最重要的，避免繁鎖內容，減少客戶的閱讀負擔。

2、要善於突出重點文字

文字描述是用來給用戶看的，所以一定要把重點文字突出，比如五一打折活動，一定要把五一吐出來，字樣一定要大，要醒目，其餘的則需要相應的弱化。

3、按照客戶的閱讀習慣來設計

一般人們的閱讀習慣都是從左到右、從上到下的，所以網站設計網站banner時候也要遵循這個規律，不要相反，會讓人很不舒服。

4、產品展示要能激發客戶的慾望

信息爆炸的時代，客戶瀏覽網頁的注意力是幾秒鍾，所以要第1時間進行產品的展示，命中主題。

5、過度的色彩不要太耀眼

色彩搭配固然重要，但是不能太過誇張，會讓訪問者感覺刺眼、不友好甚至產生反感。產品圖片，色彩不是多多益善，適合最重要，易於識別是關鍵。如果太多，產品信息就會被淹沒，視覺效果大打折扣。

6、做好信息的平衡和協調

信息並非越多越好，不要把所有信息都突出，要做好各種信息的平衡和協調，才能真正地吸引人。

7、學會留空

在banner畫面中，有經驗的設計師都會留空，從而使圖形和文字有呼吸的空間，視覺效果更勝一籌。

以上就是小編今天給大家整理分享的關於「網頁設計如何做好banner設計?」的相關內容，希望對正在備考的你有所幫助。為了幫助各位小夥伴更快的上手工作，小編特此還整理了平面設計小白入門寶典，需要的自取哦!

10、網頁設計中banner設計尺寸是多少

不同的環境下設置的尺寸都不一樣

1、800*600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。

2、1024*768下，網頁寬度保持在1002以內，就不會出現水平滾動條，高度則視版面和內決定。

3、在ps裡面做網頁可以在800*600狀態下顯示全屏，頁面的下方又不會出現滑動條，尺寸為740*560左右。

4、1024*768 下網頁的尺寸:width=955,height=600                                             

800*600 下網頁的尺寸:width=760,height=420。

5、一般解析度在800*600的情況下，頁面的顯示尺寸為：780*428px，

解析度在640*480的情況下，頁面的顯示尺寸為:620*311px，

解析度在1024*768的情況下，頁面的顯示尺寸為：1007*600px。

(10)網站設計banner擴展資料：

banner設計標准尺寸大全

Internet Advertising Bureau
(IAB，國際廣告局)的"標准和管理委員會"聯合Coalition for Advertising Supported Informatiln
and
Entertainment(CASIE，廣告支持信息和娛樂聯合會)聯合推出了一系列網路廣告宣傳物的標准尺寸。

這些尺寸作為建議，提供給廣告生產省和消費者，使大家都能接受。現在網站上的廣告幾乎都遵循IAC/CASIE標准。

1997年第一次標准公布

Num Size(pix) Name

1、468×60 全尺寸banner

2、392×72 全尺寸帶導航條banner

3、234×60 半尺寸banner

4、125×125 方形按鈕

5、120×90 按鈕＃1或小圖標

6、120×60 按鈕＃2或小圖標

7、88×31 小按鈕或banner

8、120×240 垂直banner

2001年第二次標准公布

Num Size(pix) Name

1、120×600 "摩天大樓"形

2、160×600 寬"摩天大樓"形

3、180×150 長方形

4、300×250 中級長方形

6、240×400 豎長方形

7、250×250 "正方形彈出式"廣告

IAB 將不再支持1997年第一次公布標准中的392×72形。

從banner自身的設計大小看

1、全尺寸banner橫幅設計為468*60px，半尺寸banner為234*60px，小banner為88*31px，另外120*90，120*60也是小圖標的標准尺寸。

2、頁面長度原則上不超過3屏，寬度不超過1屏。

3、每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不超過14K。

4、每個標准頁面為A4幅面大小，即8.5*11英寸。

參考資料來源：網路-網頁設計標准