電商網站banner圖如何設計

1、怎樣設計出優秀的電商banner

一、走心的文案

好的標題能夠吸引你的注意，而糟糕的標題，讓人看都不想看，掃一眼便略過去了。所以做好Banner第一件事情，就是需要設計走心的文案。所謂走心，就是觸動你的心靈，或者說讓你感興趣，激發你的點擊慾望。

我們時常會看見這樣的廣告：文案內容直接羅列了公司經營產品或業務，抑或是像說明書一樣詳盡介紹產品或服務的主要功能。從廣告主的角度來看這是合理的，用戶需要知道我們產品有這些特點，這樣我的的產品和服務才能被記住。但事實往往是：這些平淡無趣的廣告，除了廣告主自己以外，很難有用戶真的願意關注它。

那我們來分析下寫文案人的心理：B點明確想讓用戶買我的記錄儀。那麼A點是用戶想買記錄儀不知道哪家好，我的記錄儀有這么多功能，那麼用戶一定需要這個記錄儀。

但用戶真正的A點可能並不是「想買記錄儀，不知道哪家記錄儀比較好」，而是我為什麼需要行車記錄儀?所以對於這樣的用戶A點，可能更合適的文案思路是告訴用戶：

當然用戶絕對不會因為你寫了幾句話，就買下產品，還會考慮價格品質等等因素。不過我們這個Banner的使命就是吸引用戶點擊，提高頁面轉化率。用戶感興趣點了，你就成功了。

一篇幫你快速學會寫文案的經典好文：《年度最佳教程！7招教你寫出互聯網頂尖文案！》

二、均衡的構圖

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

第一眼睛看到這個banner這個圖完全抓不到重點啊，滿眼的小文字，另外加上兩個傲嬌的大叔。完全不知道想表達什麼。等等，

2、網店Banner的設計原則是什麼？

與LOGO一樣，Banner是任何購物網站開發與建設過程中不可缺少的元素，LOGO與Banner都有動態和靜態之分，其創作的主要工具就是Photoshop與Flash。AdobeFlash是用來製作LOGO與Banner的動畫，造型、背景、素材編輯、圖像特效等用Photoshop來完成。Photoshop主要用於設計無動畫的LOGO與Banner。

在網路營銷術語中，Banner是一種網路廣告形式。Banner廣告一般是根據網站的風格和不同需要放置在網頁上的不同位置，在用戶瀏覽網頁信息的同時，吸引用戶對購物網站內容和廣告信息的關注，從而獲得網路營銷的效果。

在各類購物網站中，Banner有多種表現規格和形式，早期的網路廣告還有一種相對小一點的廣告，稱為按鈕式廣告（Button），常用的按鈕廣告尺寸有四種：

12525像素，1200像素，1200像素，881像素。隨著網路廣告的不斷發展，新形式和規格的網路廣告不斷出現，因此美國交互廣告署（IAB）也在不斷頒布新的網路廣告標准。其中最常用的是4860像素的標准標志廣告，由於這種規格曾一度處於主導地位，在早期的網路廣告領域，如沒有特別指名，通常都是指標准標志廣告。這種標志廣告有多種不同的稱呼，如橫幅廣告、全幅廣告、條幅廣告、旗幟廣告等。通常採用圖片、動畫、Flash等方式來製作Banner廣告。

對於網店來講，主要目的就是銷售商品，為消費者服務，所以網店Banner的設計也比較自由，形式多樣。在一些打折網店、時間性促銷網店，Banner的設計更加豐富。在各類平台的眾多網店中，Banner的形式也是非常豐富、多種多樣的。其中比較重要的一個類型是橫幅廣告，Banner尺寸一般在192060像素，或者950300像素等，有些高度數值會更大，要看具體的設計，要根據網店的情況來確定。

當用戶訪問一個網店的時候，主頁面的信息展示是非常重要的，它在很大程度上影響了用戶是否決定瀏覽本網站。在網店頁面設計中光靠文字大面積地堆積，很難直觀而迅速地告訴用戶來到這里會得到什麼有用的信息。因此，Banner設計在網店整體運行中起到了至關重要的展示作用，特別是首頁的Banner，能使有效的、重要的信息傳達給用戶，讓用戶和文字之間的互動變得生動而有趣，吸引其瀏覽網店的注意力。關於Banner的位置，一般在網店首頁的導航欄下面，處在視覺的核心位置。

圖5.55所示為聚劃算平台上的冬季保暖鞋Banner的定位與位置設計。

3、怎麼設計網頁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簡約而不簡單。

4、怎麼設計出好看的電商banner

這個得先要清楚自己想要表達個什麼樣的內容，再確定好你的受眾群體，根據你受眾群體的共同特徵去提煉賣點和找素材，基本上就差不多了。

5、如何設計電商Banner製作

banner圖製作根據產品的需求，介紹產品定位、產品文案、產品信息、產品設計。整個banner圖要看起來合理清晰，盡量不要太花哨啦。

6、網站Banner 應該如何設計

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

7、如何玩轉電商產品banner圖設計

設計感和層次感是作品的追求，電商banner設計，用有限的空間，展示店鋪的核心版元素，考驗的就是美工權的設計感。
層次感是banner主、次、輔的一種劃分，要分析出主次和裝飾元錄，然後進行准確的設計.使人在第一眼就看到重點突出地方，設計師在作圖的時候，有時候一 點點小小的細節和顏色都會影響到整個畫面的層次美觀感，一層一層的設計，雖然麻煩， 但是為了出更好的效果也值了!
過對版面的分割並且採用了傾斜性的分割形式等她手法，另版面活躍起來、有節奏感。通過對比色配色加大畫面對視覺的沖擊。

8、電商banner設計是什麼?

電商banner設計是指網站頁面copy的橫幅廣告，banner主要體現中心意旨，形象鮮明表達最主要的情感思想或宣傳中心。
電商，是在互聯網、內部網和增值網上以電子交易方式進行交易活動和相關服務活動，是傳統商業活動各環節的電子化、網路化。電子商務包括電子貨幣交換、供應鏈管理、電子交易市場、網路營銷、在線事務處理、電子數據交換、存貨管理和自動數據收集系統。在此過程中，利用到的信息技術包括互聯網、外聯網、電子郵件、資料庫、電子目錄和行動電話。

9、怎麼設計網頁banner?

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

10、電商banner怎麼設計

你百度一下 我的電商歷史圖庫，選海報牆。你看你是哪個類目的，選個類目大把的可以參考