正文

優(yōu)秀的電商banner圖（電商banner設(shè)計(jì)作品）

發(fā)布時(shí)間：2023-03-11 22:25:12 稿源：創(chuàng)意嶺閱讀： 102 問大家

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于優(yōu)秀的電商banner圖的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

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

本文目錄:

1、如何讓Banner做的更好看？
2、首頁banner應(yīng)展示哪些內(nèi)容
3、新手設(shè)計(jì)師該如何搞定電商Banner?
4、電商設(shè)計(jì)需要學(xué)什么？

優(yōu)秀的電商banner圖（電商banner設(shè)計(jì)作品）

一、如何讓Banner做的更好看？

①文字排版Banner中的文字信息傳達(dá)應(yīng)與口語表述相似，需要抑揚(yáng)頓挫、重點(diǎn)突出地進(jìn)行。在文字排版上，要求重點(diǎn)突出，大小粗細(xì)錯(cuò)落有致。字與字之間的結(jié)構(gòu)、布局、留白、組織、呼應(yīng)等要疏密有序。字體保持在兩種左右，加入一些跟內(nèi)容有關(guān)聯(lián)的元素或者形狀，可以很好地表達(dá)整個(gè)設(shè)計(jì)的情緒。在明確主題以及內(nèi)容之后，我們就要根據(jù)主題和內(nèi)容來設(shè)計(jì)版式，版式就是畫面的整體布局，好的版式能夠清楚的表達(dá)核心思路，正確的展示想要給用戶看的東西；大體上排版一般分為兩種：圖文左右排版和文字居中排版。1、圖文左右排版因?yàn)槲覀兊囊曈X瀏覽習(xí)慣都是從左往右還有從上到下的，所以我們在做 Banner 的時(shí)候會經(jīng)常性的選擇使用左右排版，那么使用左圖右文還是左文右圖也是需要根據(jù)主題和內(nèi)容來決定的。當(dāng)配圖示意比較模糊的時(shí)候，我們使用左文字右圖的形式，強(qiáng)調(diào)文字的吸引力，有一定指導(dǎo)作用。圖片來自花瓣這里文字能夠精準(zhǔn)地將信息帶給用戶，文字所占比例比圖片多些，這也解釋了為何大部分左文右圖排版的 Banner 都是文字占比大于圖片。當(dāng)配圖示意比較明確，同時(shí)圖片能夠強(qiáng)調(diào)吸引的時(shí)候，我們采用左圖右文字，如下圖：使用左圖右文字，也是因?yàn)閳D片的內(nèi)容更吸引用戶多一些，所以對圖像的品質(zhì)要求更高，精致感品質(zhì)感也有要求，這種類型大多使用在家居，護(hù)膚等產(chǎn)品上。小結(jié)：圖文左右排版，以分割排版的方式構(gòu)圖，畫面有明確的獨(dú)立性和引導(dǎo)性，這種方式留白更多，較好的視覺引導(dǎo)和方向使信息更明確，更顯品質(zhì)感。 2、文字居中文字居中的排版多用于電商促銷、公眾號的文章封面等，大多是突出文字的內(nèi)容，比如促銷的折扣，文章的主題等，其余的產(chǎn)品或者圖片都是為了搭配文字做出的氣氛烘托，吸引用戶點(diǎn)擊。圖片來自花瓣使用這種方式讓畫面展示規(guī)整穩(wěn)定、醒目大方，視覺更聚焦，信息更集中，在突出主體的同時(shí)能使整體畫面具有一定的沖擊力。小結(jié)：文字居中布局對于實(shí)物（人，商品，創(chuàng)造形象）要求并不高，文字信息本身的處理要求就會高一點(diǎn)。在確認(rèn)好主題和內(nèi)容后，我們根據(jù)產(chǎn)品所要突出的重點(diǎn)來決定我們的版式，是要突出文字還是突出產(chǎn)品，突出產(chǎn)品即使用左圖右文字，這種版式對產(chǎn)品的圖片要求比較高；想要突出文字，則可以選擇左文字右圖或者文字居中排版，但都對文字的設(shè)計(jì)要求比較高。不確定用什么版式，我們可以在設(shè)計(jì)的時(shí)候不妨多做幾個(gè)版本，大膽嘗試。 ②文字設(shè)計(jì)Banner的文字信息是其表達(dá)中心思想的靈魂，如果在設(shè)計(jì)文字的時(shí)候全部使用自帶字體，會使 Banner顯得太過生硬，不富有情感，應(yīng)該更多地采用字體變形，重新組合。通過不同的筆觸粗細(xì)和寬高比例，展現(xiàn) Banner的視覺沖擊力和活力。文案內(nèi)容要高效的傳遞信息，吸引用戶注意力，讓人一下子看到主題，文案中文字的排版要區(qū)分主次，把控好信息層級；使用合適的字體，明確字體適用的場合，同一畫面中字體的使用盡量不要超過三種，過多會顯得雜亂，要使用識別度高的字體。而 Banner 中常用的字體有三種：襯線體、非襯線體和書法體。 1、襯線體襯線體筆畫有粗細(xì)之分，它模仿的是中國古代字體和古代碑文上的字體，簡單且易變形，襯線體能給人古典，經(jīng)典，文藝的感覺，適合用于文藝氣息的家居用品或文娛類的相關(guān)宣傳設(shè)計(jì)上。圖片來自花瓣以上圖為例：文案內(nèi)容中的“全面淪陷”，讓人一目了然；下面一行的內(nèi)容，更加詳細(xì)解釋了上面的主標(biāo)題。畫面顏色凸顯主題，所以字體變形，使用白色，反而在畫面中更加突出。襯線字體一般推薦使用方正經(jīng)黑簡體、方正俊黑、方正蘭亭顯黑簡體、華文細(xì)黑等，使用的時(shí)候注意版權(quán)問題。 2、非襯線體非襯線體較簡潔，筆畫較粗，很容易產(chǎn)生視覺重點(diǎn)，非襯線字體體現(xiàn)現(xiàn)代、簡約的特性，適合用于蒼勁有力、促銷類的相關(guān)設(shè)計(jì)，吸引用戶注意力，提高Banner點(diǎn)擊率。圖片來自花瓣以上圖為例：主副標(biāo)題區(qū)分清楚，在字體筆畫變形上，結(jié)合科技感的氣氛，增加了光的流動(dòng)感，讓標(biāo)題不會過于死板。非襯線字體常用的有：漢儀潤圓、方正綜藝簡體、造字工房勁黑、造字工坊版黑、方正蘭亭粗黑、冬青黑體、思源黑體等。 3、書法體書法體源自中國古代，能體現(xiàn)中國文化和揮灑墨水的豪氣，適用于傳統(tǒng)、中國風(fēng)、意境的文藝主題和金戈鐵馬般的豪邁主題。圖片來自花瓣上圖為例：中秋節(jié)是中國的傳統(tǒng)文化，使用書法體能夠?qū)⒄w畫面營造的中國古典風(fēng)更好的融合起來，書法體推薦李旭科書法、漢儀尚巍手書、葉根友行書繁體等字體。

二、首頁banner應(yīng)展示哪些內(nèi)容

一、走心的文案

好的標(biāo)題能夠吸引你的注意，而糟糕的標(biāo)題，讓人看都不想看，掃一眼便略過去了。所以做好Banner第一件事情，就是需要設(shè)計(jì)走心的文案。所謂走心，就是觸動(dòng)你的心靈，或者說讓你感興趣，激發(fā)你的點(diǎn)擊欲望。

我們時(shí)常會看見這樣的廣告：文案內(nèi)容直接羅列了公司經(jīng)營產(chǎn)品或業(yè)務(wù)，抑或是像說明書一樣詳盡介紹產(chǎn)品或服務(wù)的主要功能。從廣告主的角度來看這是合理

的，用戶需要知道我們產(chǎn)品有這些特點(diǎn)，這樣我的的產(chǎn)品和服務(wù)才能被記住。但事實(shí)往往是：這些平淡無趣的廣告，除了廣告主自己以外，很難有用戶真的愿意關(guān)注

它。

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

但用戶真正的A點(diǎn)可能并不是“想買記錄儀，不知道哪家記錄儀比較好”，而是我為什么需要行車記錄儀?所以對于這樣的用戶A點(diǎn)，可能更合適的文案思路是告訴用戶：

當(dāng)然用戶絕對不會因?yàn)槟銓懥藥拙湓?，就買下產(chǎn)品，還會考慮價(jià)格品質(zhì)等等因素。不過我們這個(gè)Banner的使命就是吸引用戶點(diǎn)擊，提高頁面轉(zhuǎn)化率。用戶感興趣點(diǎn)了，你就成功了。

一篇幫你快速學(xué)會寫文案的經(jīng)典好文：《年度最佳教程！7招教你寫出互聯(lián)網(wǎng)頂尖文案！》

二、均衡的構(gòu)圖

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

第一眼睛看到這個(gè)banner這個(gè)圖完全抓不到重點(diǎn)啊，滿眼的小文字，另外加上兩個(gè)傲嬌的大叔。完全不知道想表達(dá)什么。等等，下面四個(gè)小方塊是什么鬼？構(gòu)圖感覺實(shí)在糟糕。那么下面來說下banner的構(gòu)圖，構(gòu)圖規(guī)則分以下幾種：

1、左右式構(gòu)圖

最常見的構(gòu)圖方式，分別把主題元素和主標(biāo)題左右擺放。

2、居中輻射式構(gòu)圖

標(biāo)題文字居中，分別把主題元素環(huán)繞在文字周圍，用在著重強(qiáng)調(diào)標(biāo)題的環(huán)境。

3、三角形構(gòu)圖

倒三角構(gòu)圖，標(biāo)題突出，構(gòu)圖自然穩(wěn)定，空間感強(qiáng)。

4、斜線構(gòu)圖

產(chǎn)品所占比重相對平衡，構(gòu)圖動(dòng)感活潑穩(wěn)定，運(yùn)動(dòng)感空間感強(qiáng)。此類構(gòu)圖適合科技、汽車、潮流題材，不過好像電商一般不賣汽車？

三、合適的字體

看到這個(gè)banner竹子總感覺好像那里不對，女性的特點(diǎn)是細(xì)致優(yōu)雅，為什么字體如此粗壯了？和女性化妝品的氣氛完成不符啊。每個(gè)字體好像人一樣，

都有自己的性格與氣質(zhì)。選擇使用一款字體的時(shí)候，除了考慮它的易讀性，更多考慮的是這款字體能否準(zhǔn)確地傳達(dá)出對產(chǎn)品獨(dú)有的氣質(zhì)。下面竹子告訴你應(yīng)該如何選

擇字體。

男性氣質(zhì)：方正粗譚黑、站酷高端黑、造字工房版黑、蒙納超剛黑

黑體給人感覺粗壯緊湊，頗有力量感，可塑性很強(qiáng)。適用于各種大促類的電商廣告。

文藝氣質(zhì)：方正大小標(biāo)宋、方正靜蕾體、方正清刻本悅宋、康熙字典體

宋體的衍生有很多，又長有扁，有胖有瘦。旅游類電商網(wǎng)站經(jīng)常會用到此類字體。運(yùn)用宋體進(jìn)行排版處理，既顯得清新又文藝。

女性氣質(zhì)：方正蘭亭超細(xì)黑、漢儀秀英體

字如其人，女性的特點(diǎn)是細(xì)致優(yōu)雅、苗條細(xì)長；常被用作化妝品、女性雜志、藝術(shù)等女性主題領(lǐng)域。

文化氣質(zhì)：王羲之書法字體、顏真卿顏體

書法字體具有很強(qiáng)的設(shè)計(jì)感與藝術(shù)表現(xiàn)力，運(yùn)用好的話往往是點(diǎn)睛之筆。各式各樣的書法字體有著自己獨(dú)特的細(xì)膩的特點(diǎn)，把握好這一點(diǎn)，既能增加文化內(nèi)涵，也能襯托出產(chǎn)品的氣質(zhì)。

三、新手設(shè)計(jì)師該如何搞定電商Banner?

既然說經(jīng)驗(yàn)?zāi)蔷驼f明是有一定規(guī)律可循的，只有符合一定規(guī)律才會更好看一些。

先從Banner中的文字排版說起，如何能通過排版給人以視覺上的美感。

一.文字排版

不管給到什么文字，先想怎么對齊。一般都是左對齊、右對齊、居中對齊三種形式。

這三種形式中又有，文字中間大，上下小，大部分的排版都在遵循著這個(gè)規(guī)律。

因?yàn)槿藗円暰€是發(fā)散性的，文字大小、粗細(xì)、長短、錯(cuò)落排布，而且這樣的做法可以讓畫面更具有靈性。

banner上的字要看清不能讓人去猜，也就是大家經(jīng)常說的，形式服務(wù)于內(nèi)容。就是要簡單。研究半天才能看明白的文字會讓人反感。

況且瀏覽者不會把太多精力放在banner上，3秒以內(nèi)看不懂就過了，沒機(jī)會了。

文字內(nèi)容要集中，不能分散，不要讓用戶到處找信息，這樣也可以讓畫面看的更加整體，不會使畫面看著一團(tuán)亂糟糟。

文字盡量采用容易辨認(rèn)的字體，因?yàn)槲淖值哪康木褪亲屓丝炊?，文字太花哨，會感覺很亂。

文字顏色可以吸取圖片顏色，或者產(chǎn)品顏色。但顏色也不能太靠，保證文字清晰可見，這樣整體畫面顏色和諧統(tǒng)一，不會出現(xiàn)大的問題。