電商直通車這樣設計轉化率將飆升！

什么是淘寶直通車?

淘寶直通車是為淘寶賣家量身定制的，按點擊付費的效果營銷工具，實現(xiàn)寶貝的精準推廣。用如何開網(wǎng)店的小編一席話總結：淘寶直通車推廣，在給寶貝帶來曝光 量的同時，精準的搜索匹配也給寶貝帶來了精準的潛在買家。淘寶直通車推廣，用一個點擊，讓買家進入你的店鋪，產(chǎn)生一次甚至多次的店鋪內跳轉流量，這種以點 帶面的關聯(lián)效應可以降低整體推廣的成本和提高整店的關聯(lián)營銷效果。

【直通車是付費流量，是按點擊收費的營銷工具】

尺寸說明

直通車又分為店鋪直通車和產(chǎn)品直通車，其區(qū)別除了設計尺寸不一樣外，其連接方式也不一樣，店鋪直通車鏈接落地頁是到店鋪首頁或者自定義活動頁面，而產(chǎn)品直通車鏈接落地頁是到產(chǎn)品詳情頁面。

為什么要說到最小呢?因為圖片的尺寸會根據(jù)顯示器的大小調整不同尺寸，這就是所謂的自適應，把瀏覽器縮小便可以看到效果，在設計直通車時應該注意到不同環(huán)境下的展示效果。

展示位置

店鋪直通車展現(xiàn)在搜索列表右側店鋪推廣的位置，不過要往下拉4-5屏才能看到(一般是PC端搜索頁右側最下面的店家精選)

產(chǎn)品直通車展現(xiàn)在搜索列表右側與列表底部的商品推廣位置(PC在搜索結果前1-3個，和右側上面的掌柜熱賣等位置，無線就與搜索混排，左上角會標記為HOT)

影響點擊要素

①直通車的位置

②直通車選詞

③行業(yè)搜索量

④關鍵詞出價

⑤關鍵詞質量得分

⑥文案、賣點的提煉

⑦圖片創(chuàng)意

⑧文字排版

當然，上面的前6條與我們設計師的關系不大，一般由運營調整，而且運營操作尤為重要，關系到整個店鋪的流量、轉化率、銷量，設計師要做的是第7、8兩點，把文案產(chǎn)品結合起來，設計要符合產(chǎn)品店鋪風格、產(chǎn)品特性。

直通車如何構圖?

由于直通車是點擊付費，所以產(chǎn)品一定要放在顯眼的位置，以免誤導點擊產(chǎn)生不必要的扣費，而直通車圖展示效果一般很小，所以構圖的方式比較拮據(jù)，大部分情況下排版方式都要根據(jù)產(chǎn)品圖的特性來進行構圖，下面給大家介紹幾種常規(guī)構圖方法。

左右構圖

因為商品圖片比較細長，所以排版采用左右格式，文字在左邊商品在右邊，或者相反;這類設計比較嚴謹大方、常規(guī)，設計中一般不會出現(xiàn)什么錯誤，但選圖要適合，文案層次要清晰。

上下結構

這類排版一般商品比較寬，完全放置到畫面中后，下方會有空余，所以這類商品盡量采用上下結構的排版方式，商品偏向穩(wěn)重、大氣、有質量等，文字一般排在商品上面;商品偏向輕盈、小物品等，文字一般排列在商品下面。

對角結構

此類構圖同樣是根據(jù)商品圖來的，分為兩分構圖和三分構圖(如圖2、5為三分構圖)，并且這類直通車的產(chǎn)品圖一般為傾斜的。同時在做一些電器、需要有動感的設計時也會用到對角線構圖方式;另外，當商品圖特別細長的時候，如釣魚竿，我們采用對角線構圖的方式可以把商品展示的更大、更直觀。

壓住四角

當商品放置在頁面居中的地方時，通過把文案或圖形分散排放在各個角落，合理控制文字 或圖形的大小來使頁面整體具有平衡感。當然這里并不是說都使用文字去壓住四角，比如第一張案例，商品本身的翅膀就已經(jīng)壓住了一個角落，所以使用產(chǎn)品圖時就應該控制好構圖，預留出文案排版的位置。

直通車如何分類設計?

除了要掌握排版的方法以外，不同的類目，還要搞清楚需求方向，了解產(chǎn)品，分析競品等;然后有針對性的突出產(chǎn)品某個特點，掩蓋不足，提升點擊率和轉化率。

形象類商品

此類商品主要是產(chǎn)品本身形象和產(chǎn)品價格(例如服飾、鞋子，買家更關心的是款式、價格)，所以盡可能真實、完整的展現(xiàn)商品本身，通過不同的角度，合理的色彩搭配來烘托商品;文字設計要求簡潔易懂，不需要過多的修飾。

功能類商品

功能類商品當然是要突出功能了，這類直通車文案可能會很多，所以，展現(xiàn)排版功底的時候就到了，排版的時候要做到文字的排列要有一定的規(guī)律、有層次、有重點。同時背景的烘托效果也上不了哦。

下圖雖然圖片的整體設計很好看，但是因為文字過多，排版層次不清晰，沒有規(guī)律，不知從何開始閱讀，也不知道哪是頭哪是尾，如果采用規(guī)律的排版方式，買家一眼即可看完整體文案結構，再看一眼即可看清所有功能，所以在追求視覺的同時也要注重用戶體驗。

促銷、活動類

不用多說，促銷類的設計相信大家做的肯定不少，首先是用色，選擇常用的大促色彩，添加活動的氛圍元素，文案相對于其他類直通車，更加厚重、更加突出現(xiàn)眼。

品牌、品質、逼格類

為什么高端?因為自信!商品本身就非常具有獨特風格特點，所以設計時，我們需要弱化文字，用盡可能大的空間展示商品和留白。

如何提高圖片吸引力?

搞定了前面的那些，是時候來點加分項了，這個不僅考驗到設計師的設計能力，也考驗對生活的了解和熱愛，然并卵，你造嗎?

網(wǎng)絡熱詞、表情、隱喻、電影等

通過時下非常流行的網(wǎng)絡用語，或者是比較創(chuàng)新有意思的用語打動消費者，此類設計因為用詞比較新穎，色彩、文字排版一般采用比較活潑的表現(xiàn)形式，圖文結合效果更好;因為重點在文案，所以主要文字層次要求清晰，但也不能太弱化商品。

創(chuàng)意合成圖片

通過夸張、比喻的手法突出商品的某個賣點，非常考驗設計師的閱歷和合成技巧，因為不但要效果做得好，還得完美貼合文案主題。此類設計含金量非常高，所以這類創(chuàng)意都會給用戶創(chuàng)造深刻印象，從而達到品牌營銷的效果。

意境、氛圍、情景模式

通過一個畫面表達一種意境，它或是唯美清晰，或是百花環(huán)繞，或是威武霸氣，通過對比襯托形象的突出商品和其功能。此類對色彩、光影應用的要求比較高，需要深厚的合成功底。

情調感情

通過一些特殊的方法來吸引注意力，要注意淘寶規(guī)則，如果使用的圖片有侵權、明星等，遭到投訴后后果不堪設想。

使用應季色彩/元素

設計中的色彩、素材元素，不一定要用類似色;可以嘗試使用一些隨季節(jié)變化而變化的色調，這樣不僅可以看到產(chǎn)品與不同顏色、風格搭配的多樣性，還能展現(xiàn)的與眾不同。

拉近距離

在適當?shù)那闆r下，拉近產(chǎn)品與眼睛的距離(近大遠小)，讓產(chǎn)品更有質感、更真實、讓版面更加豐滿、整潔，從而更具有視覺沖擊力。

本文版權歸黑馬程序員視覺設計學院所有，歡迎轉載，轉載請注明作者出處。謝謝！

作者：黑馬程序員視覺設計培訓學院

首發(fā)：http://3rdspacecomics.com/special/uijpzly/index.html