正文

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

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

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

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

本文目錄:

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

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

一、走心的文案

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

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

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

它。

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

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

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

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

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

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

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

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

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

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

標(biāo)題文字居中，分別把主題元素環(huán)繞在文字周?chē)?，用在著重?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)品所占比重相對(duì)平衡，構(gòu)圖動(dòng)感活潑穩(wěn)定，運(yùn)動(dòng)感空間感強(qiáng)。此類(lèi)構(gòu)圖適合科技、汽車(chē)、潮流題材，不過(guò)好像電商一般不賣(mài)汽車(chē)？

三、合適的字體

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

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

擇字體。

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

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

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

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

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

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

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

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

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

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

先從Banner中的文字排版說(shuō)起，如何能通過(guò)排版給人以視覺(jué)上的美感。

一.文字排版

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

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

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

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

況且瀏覽者不會(huì)把太多精力放在banner上，3秒以?xún)?nèi)看不懂就過(guò)了，沒(méi)機(jī)會(huì)了。

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

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

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