超實(shí)用！3個(gè)方法教你設(shè)計(jì)頂尖電商Banner

編者按：Banner的重要性無(wú)需贅言，今天這篇文章從走心的文案、不同的構(gòu)圖方法和如何字體選擇3個(gè)方面，聊聊如何迅速提升Banner的質(zhì)量 >>>

當(dāng)用戶訪問(wèn)電商網(wǎng)站的時(shí)候，第一屏的信息展示是非常重要的，很大程度上影響了用戶是否決定停留，然而光靠文字大面積的堆積，很難直觀而迅速的告訴用戶來(lái)到這里會(huì)得到什么有用的信息，因此網(wǎng)頁(yè)Banner設(shè)計(jì)在這里起到了至關(guān)重要的展示作用，特別是對(duì)于首頁(yè)Banner，有效的信息傳達(dá)可以快速提高頁(yè)面轉(zhuǎn)化率。那么竹子來(lái)教你如何設(shè)計(jì)一個(gè)好的電商Banner。

作者：風(fēng)尾竹，公眾賬號(hào)：liaosheji2010。

本文為作者授權(quán)優(yōu)設(shè)發(fā)布，未經(jīng)作者本人授權(quán)請(qǐng)勿轉(zhuǎn)載，謝謝 ：）

一、走心的文案

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

我們時(shí)常會(huì)看見這樣的廣告：文案內(nèi)容直接羅列了公司經(jīng)營(yíng)產(chǎn)品或業(yè)務(wù)，抑或是像說(shuō)明書一樣詳盡介紹產(chǎn)品或服務(wù)的主要功能。從廣告主的角度來(lái)看這是合理的，用戶需要知道我們產(chǎn)品有這些特點(diǎn)，這樣我的的產(chǎn)品和服務(wù)才能被記住。但事實(shí)往往是：這些平淡無(wú)趣的廣告，除了廣告主自己以外，很難有用戶真的愿意關(guān)注它。

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

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

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

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

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

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

第一眼睛看到這個(gè)banner這個(gè)圖完全抓不到重點(diǎn)啊，滿眼的小文字，另外加上兩個(gè)傲嬌的大叔。完全不知道想表達(dá)什么。等等，下面四個(gè)小方塊是什么鬼？構(gòu)圖感覺實(shí)在糟糕。那么下面來(lái)說(shuō)下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)品所占比重相對(duì)平衡，構(gòu)圖動(dòng)感活潑穩(wěn)定，運(yùn)動(dòng)感空間感強(qiáng)。此類構(gòu)圖適合科技、汽車、潮流題材，不過(guò)好像電商一般不賣汽車？

三、合適的字體

看到這個(gè)banner竹子總感覺好像那里不對(duì)，女性的特點(diǎn)是細(xì)致優(yōu)雅，為什么字體如此粗壯了？和女性化妝品的氣氛完成不符啊。每個(gè)字體好像人一樣，都有自己的性格與氣質(zhì)。選擇使用一款字體的時(shí)候，除了考慮它的易讀性，更多考慮的是這款字體能否準(zhǔn)確地傳達(dá)出對(duì)產(chǎn)品獨(dú)有的氣質(zhì)。下面竹子告訴你應(yīng)該如何選擇字體。

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

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

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

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

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

字如其人，女性的特點(diǎn)是細(xì)致優(yōu)雅、苗條細(xì)長(zhǎng)；常被用作化妝品、女性雜志、藝術(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ì)。

超全的字體性格分析：《字體教程還能這么玩！聊聊文字的性取向》

四、未完待續(xù)

【字體設(shè)計(jì)經(jīng)驗(yàn)三部曲】

Step 1：先從基礎(chǔ)的字體結(jié)構(gòu)學(xué)起！
《字體科普文！手把手帶你認(rèn)識(shí)最基礎(chǔ)的字體結(jié)構(gòu)》

Step 2：再了解字體設(shè)計(jì)的方法大全！
《推薦：17種設(shè)計(jì)字體的創(chuàng)意方法》

Step 3：實(shí)戰(zhàn)經(jīng)驗(yàn)幫你全面掌握！
《經(jīng)驗(yàn)分享：超詳細(xì)的字體設(shè)計(jì)方法+案例分析》

作者：鳳尾竹
原文地址：weixin

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量96萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：