您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 視覺(jué)設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

電商實(shí)戰(zhàn)[一]之如何做一個(gè)牛逼的直通車

電商設(shè)計(jì)之道常見(jiàn)問(wèn)題:

第一個(gè)疑問(wèn)其實(shí)不算朋友提出來(lái)的,是飛魚(yú)的@YC哥說(shuō)的質(zhì)疑,后來(lái)發(fā)現(xiàn)原來(lái)是我自己寫(xiě)錯(cuò)了,嘿嘿~

問(wèn):詳情的長(zhǎng)度在多少像素(px)合適呢?

答:其實(shí)詳情的像素高度官方木有太多的限制以及官方介紹,不過(guò)在天貓的生意參謀里有這么一個(gè)介紹(如下圖)



上圖的建議是正常的寶貝詳情高度為8000px,而8000px之上則為偏高,超過(guò)20000px則為過(guò)高.大家先別著急噴慕歌,其

實(shí)這個(gè)不無(wú)道理:

加載速度,圖片過(guò)多即使你保存的十分小,它的加載速度也會(huì)持續(xù)增加,導(dǎo)致跳失率增加,因?yàn)楦鶕?jù)數(shù)據(jù)顯示90%的顧客

都只會(huì)瀏覽1-10屏的內(nèi)容,而大眾買家的寬帶可能只有200-400kb(一般公司的常規(guī)電腦寬帶限速)。這些數(shù)據(jù)均來(lái)源于網(wǎng)絡(luò)

統(tǒng)計(jì)以及淘寶官方的視覺(jué)數(shù)據(jù).所以可信度還是很高的哈.

第二個(gè)疑問(wèn)是@影天醬MM提出的關(guān)于配件物流和企業(yè)實(shí)力的問(wèn)題,那么到底有木有用呢?

問(wèn): 身為一個(gè)設(shè)計(jì)師總覺(jué)得配件物流和企業(yè)實(shí)力都是P的確定這么長(zhǎng)的玩意真的有用嗎?

答:哈尼,這真的是有用的.當(dāng)你的品牌并不是十分大的時(shí)候而產(chǎn)品又客單價(jià)稍貴的時(shí)候就需要體現(xiàn)你企業(yè)的硬實(shí)力,從

而增加顧客對(duì)于你的信任感.至于假或不信任的問(wèn)題,那可能就要看你的設(shè)計(jì)方式了.實(shí)話實(shí)說(shuō)腳踏實(shí)地是比海闊天空胡亂吹

牛要好得多的.而物流問(wèn)題的話不僅僅是給予圖片的介紹,主要是給予物流相關(guān)信息的介紹:如派送時(shí)間,派送區(qū)域,費(fèi)用問(wèn)題

售后問(wèn)題等等.

本篇的主要內(nèi)容是直通車的理論課還有實(shí)戰(zhàn)課程.直通車,這是每個(gè)美工必學(xué)的一個(gè)科目,大家也都會(huì)做~那么如何做

一個(gè)好的直通車是一個(gè)不小的學(xué)問(wèn).下面進(jìn)入正題啦~

**************************************************************************************************



如何讓你的直通車報(bào)表好,不僅僅是你一個(gè)人的工作.要及時(shí)和你的推廣溝通!比如:投放的關(guān)鍵詞類目,展示的位置,以

及他的一些設(shè)計(jì)建議板式建議等等.你不是大神你就要學(xué)會(huì)聽(tīng)取意見(jiàn).

首先向大家介紹一下直通車的位置,如果已經(jīng)知道了的朋友也順帶看下,反正閑著也是閑著:

產(chǎn)品直通車



如上圖所示,在淘寶搜索的頁(yè)面亮色部位則為直通車的展示處(淘寶搜索的右側(cè)”掌柜熱賣”),這就是產(chǎn)品直通車,

這是針對(duì)于單品所做的直通車.顧名思義點(diǎn)擊進(jìn)去直接進(jìn)入產(chǎn)品頁(yè).

**************************************************************************************************

店鋪直通車



如圖所示,亮色部位則為直通車的展示處(處于淘寶搜索右側(cè)的”掌柜熱賣”的下部”店家精選”),這是針對(duì)于店鋪

做的直通車,這也是首頁(yè)流量最主要的來(lái)源之一.

話不多說(shuō),既然我已經(jīng)為你們做了掃盲課程,下面就進(jìn)入制作過(guò)程吧~

首先讓我們來(lái)看一組五圖的直通車對(duì)比展示:



那么摸著你們的良心說(shuō)第幾張照片對(duì)于你來(lái)說(shuō)是第一眼看到的?不管你有沒(méi)有良心我覺(jué)得我看到的是第二張.

那么為什么呢?答案:色系獨(dú)立。請(qǐng)同學(xué)們拿出你的筆記下來(lái):在你做直通車的時(shí)候一定要了解你的對(duì)手主要產(chǎn)品

直通車是什么色系,比如夏天的落地扇都是走藍(lán)色系因?yàn)榭梢越o別人一種涼爽舒適的視覺(jué)感受.

那么你可以獨(dú)特的做一個(gè)黑色/或者與他們相近但是做一個(gè)紫色等等.這些色系首先不會(huì)影響你的視覺(jué)感受,比如你的

產(chǎn)品是黑色你也用一個(gè)黑色的圖,這就是逗比行為,下面會(huì)有反面教材.比如你是一個(gè)風(fēng)扇或者空調(diào)之類的夏季產(chǎn)品,你給

一把火,給一個(gè)紅色系.你是要熱死who?

世界之大無(wú)奇不有,下面讓我們欣賞本篇五大錯(cuò)誤直通車類型(不是歧視只是教材):



左上1圖錯(cuò)誤:你是不是可以寫(xiě)的更少一點(diǎn)呢?就放一個(gè)產(chǎn)品是不是就好了,寫(xiě)字真的辛苦你了,圖片摳圖可以負(fù)責(zé)任點(diǎn)

嗎?(咆哮體)

左上2圖錯(cuò)誤:陛下,你的產(chǎn)品這么擺臣妾做不到啊,你的產(chǎn)品是黑色背景也用暗色臣妾做不到啊,干脆你產(chǎn)品是黑色,背

景也用黑色就好了,臣妾…這個(gè)做得到~

右上1圖錯(cuò)誤:促銷信息不明顯,你看到了血拼到底那四個(gè)字了么?反正我是沒(méi)看到~你不信?拉倒~

左下1圖錯(cuò)誤:典型的狗不理包子,呸呸,狗皮膏藥式的直通車.對(duì)于遇到這樣的美工,我想說(shuō):你可以挑戰(zhàn)我的審美,但是

你不能強(qiáng)奸我的眼睛!!

右下2圖錯(cuò)誤:產(chǎn)品擺放不當(dāng),做直通車的時(shí)候請(qǐng)合理的選擇最佳的產(chǎn)品角度.你這個(gè)角度腿也太短了,你就算穿上黑絲

我也硬不起來(lái)啊!

總結(jié)直通車錯(cuò)誤盲區(qū)”六別讓”:

①別讓產(chǎn)品有小短腿雙下巴

②別讓你的促銷變成背景的一部分

③別讓你的文案閑著心發(fā)慌

④別讓你的產(chǎn)品變成背景的一部分

⑤別讓你的背景猶如好萊塢一樣絢麗多彩

⑥別把你的直通車圖當(dāng)做首圖第一張或者首圖第一張是直通車圖~

*********************************************************************************************************

先給你們反面教材有個(gè)心理暗示再來(lái)一些大神直通車圖進(jìn)行實(shí)戰(zhàn)演練:

首先呢為了避免有一些腹黑的小心眼的或者嫉妒慕歌長(zhǎng)得帥的人說(shuō)我打廣告,所以呢我所選的圖片的商家一般都是某個(gè)類

目的TOP10的賣家或者大家耳熟能詳?shù)馁u家.再說(shuō)我打廣告,我就..我就..我就掛機(jī)送人頭!(好沒(méi)出息的感覺(jué).)

栗子一號(hào):



上圖的直通車圖是某落地扇類目的TOP賣家

優(yōu)秀解說(shuō):

①以淺色系綠色為底色可以很好地突出暗色系的產(chǎn)品

②而采用對(duì)比色的促銷信息以及價(jià)格信息可以在第一時(shí)間抓住顧客的視覺(jué)重心

③畫(huà)龍點(diǎn)睛之處是輔助圖片:遙控器以及風(fēng)扇罩電池的添加可以告訴直觀顧客你的產(chǎn)品功能以及贈(zèng)品.

栗子二號(hào):



上圖的直通車是知名電商品牌旗下的一款干衣機(jī)

優(yōu)秀解說(shuō):

①同樣采用淺色系的黃色進(jìn)行作為底色凸顯暗藍(lán)色系的產(chǎn)品

②而右上角的產(chǎn)品功能信息已同樣產(chǎn)品主色的暗藍(lán)色進(jìn)行編輯可以更好的有呼應(yīng)性

③左上角的特色服務(wù)以暗色進(jìn)行描邊的技巧可以使得原本同色系的文字變得凸顯出來(lái)

④左部以十分明顯的黑白對(duì)比設(shè)計(jì)可以十分突出的顯示出產(chǎn)品的價(jià)格信息

⑤底部的附加信息可以很好地進(jìn)行品牌的宣傳以及轉(zhuǎn)化率點(diǎn)擊率的提升

栗子三號(hào):



上圖的直通車是家裝主材類目的當(dāng)之無(wú)愧TOP賣家所做

優(yōu)秀解說(shuō):

①十分巧妙的采用了Baby的人物進(jìn)行點(diǎn)綴(鄙人測(cè)試過(guò),同等情況下女人以及Baby還有寵物等的點(diǎn)擊率會(huì)有大幅度提升)

②雖然產(chǎn)品色系為淡色系底色也為淡色系但是依然很好地保存了產(chǎn)品的存在感,點(diǎn)個(gè)贊

③以相對(duì)于底色較為突出的顏色采用擬人對(duì)話形式進(jìn)行巧妙的介紹價(jià)格

④以相對(duì)于傳統(tǒng)但是不土氣的方式展現(xiàn)了自己的品牌信息

栗子四號(hào):



上圖的直通車是偶然間準(zhǔn)備叉掉網(wǎng)頁(yè)的時(shí)候看到的一個(gè)直通車

優(yōu)秀解說(shuō):

①構(gòu)圖方面以很巧妙的形式采用斜線的方法可以讓你的產(chǎn)品在顧客眼球中更加立體更加突出

②采用亮色系或者特效的方式體現(xiàn)出了產(chǎn)品的屬性以及賣點(diǎn).

待改進(jìn)內(nèi)容:

①當(dāng)你價(jià)格有明顯優(yōu)勢(shì)的時(shí)候,請(qǐng)著重突出它

②贈(zèng)品也算是賣點(diǎn)的重要一部分需要盡可能突出他.直通車設(shè)計(jì)存在感守則:產(chǎn)品為主,優(yōu)勢(shì)為輔.

上面的這些例子不是只是讓大家看熱鬧膜拜大神而已,它們的有點(diǎn)需要你用筆用腦子用word記下來(lái),將來(lái)作圖的時(shí)候不要

抓破腦袋去想如何去做這個(gè)直通車,如何排版如何構(gòu)圖,如何配色...

好記性不如爛筆頭,好學(xué)生一定寫(xiě)筆記.

*********************************************************************************************************

高潮結(jié)束了,大家累了嗎?滿頭大汗嗎?我們是不是忘記了什么?

對(duì)!店鋪直通車.其實(shí)店鋪直通車相對(duì)于產(chǎn)品直通車更為簡(jiǎn)單,他的組成部分和組成形式也很簡(jiǎn)單.下面我為大家最后馬賽

克剖析幾款優(yōu)秀的店鋪直通車圖:



三大黃金潤(rùn)滑油,隨你挑隨你選.親們等會(huì)結(jié)束之后你可以去店鋪直通車的位置看看他們的板式是不是就是上述的三大

潤(rùn)滑油板式呢?從今以后你想要爆什么菊花還不手到擒來(lái)?

店鋪直通車技巧:

1.巧用大局觀*做出好效果:雖然板式都是三大特色,功力不同所做出來(lái)的效果也不同噢

2.當(dāng)你的價(jià)格不是優(yōu)勢(shì)的時(shí)候可以換一個(gè)表達(dá)方式:“一折斷貨啦”“全國(guó)全場(chǎng)包郵啦”

3.店鋪直通車產(chǎn)品的選擇:一般選擇著陸頁(yè)*的主推款產(chǎn)品,或店鋪明星款(轉(zhuǎn)化率高)的產(chǎn)品.

4.不要局限三大黃金潤(rùn)滑油,可以通過(guò)稍微的改動(dòng)組合就變成屬于你的樣式啦~

5.背景不要選擇過(guò)于復(fù)雜的場(chǎng)景,最好以純色背景或不搶風(fēng)頭的實(shí)景為主噢

星號(hào)注解:

大局觀*:這里的大局觀是指上述的三個(gè)構(gòu)圖方式,采用不同的設(shè)計(jì)技巧可以比同樣板式的更加牛X.

著陸頁(yè)*:這個(gè)專業(yè)名詞可能大家不太懂,就是你的超鏈鏈接地址,比如你的店鋪直通車點(diǎn)擊進(jìn)去后是首頁(yè),那么著陸頁(yè)

就是首頁(yè)咯.


[教程作者:慕歌]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/ui1977.html
[圖說(shuō)趣解]文案設(shè)計(jì)也要有層級(jí)
移情讓設(shè)計(jì)有根據(jù)
圖趣網(wǎng)微信
建議反饋
×