淘寶店鋪首頁設(shè)計(jì)

1、淘寶店鋪首頁設(shè)計(jì)講師：寇老師認(rèn)識淘寶店鋪首頁一、淘寶店鋪首頁構(gòu)成元素 店鋪頁頭（頁頭區(qū)） ： 店招、導(dǎo)航 活動促銷（內(nèi)容區(qū)） ： 全屏海報(bào)、全屏輪播、優(yōu)惠券 店鋪產(chǎn)品（內(nèi)容區(qū)） ： 產(chǎn)品分類、主推產(chǎn)品 店鋪頁尾（頁尾區(qū)） ： 客服中心、購物保障、發(fā)貨須知等二、淘寶店鋪首頁設(shè)計(jì)思路 店鋪頁頭 頁頭店招放什么內(nèi)容，頁頭導(dǎo)航總共需要幾個導(dǎo)航分類內(nèi)容，是否需要放品牌文案，是否需要著重表現(xiàn)收藏店鋪，是否需要放活動內(nèi)容等等。二、淘寶店鋪首頁設(shè)計(jì)思路 活動促銷： 活動主題什么，內(nèi)容是什么，文案的主次順序，是否有需要重點(diǎn)展示的產(chǎn)品等等。二、淘寶店鋪首頁設(shè)計(jì)思路 產(chǎn)品分類： 店鋪產(chǎn)品總共有幾大分類，頁面從上至下

2、的擺放順序是什么樣的，每個分類模塊里面放幾個產(chǎn)品，產(chǎn)品是否需要主次區(qū)分，是用方格矩陣還是更靈活的展示方式，單個產(chǎn)品是否需要突出展示價(jià)格或折扣等等。二、淘寶店鋪首頁設(shè)計(jì)思路 主推產(chǎn)品： 主推產(chǎn)品有哪些，它們有怎樣的區(qū)別和定位，它們的推介順序是什么樣的，它們的核心賣點(diǎn)是什么，是否需要突出價(jià)格和折扣等等。二、淘寶店鋪首頁設(shè)計(jì)思路 店鋪頁尾： 頁尾模塊一定要符合店鋪風(fēng)格和主題，色彩要一致；內(nèi)容上可添加消保、7天無理由退換貨等保障服務(wù)、客服聯(lián)系方式、商品購物流程等。三、淘寶店鋪店招設(shè)計(jì)技法天貓店招990PX*120PX（不含導(dǎo)航）天貓店招990PX*150PX（含導(dǎo)航）淘寶店招950PX*150PX（含

3、導(dǎo)航）三、淘寶店鋪店招設(shè)計(jì)技法（一）店招設(shè)計(jì)思路： 以品牌宣傳為主的類型：一般有著雄厚的實(shí)力，給力的產(chǎn)品，想要打造自己的品牌。 名稱、LOGO、關(guān)注、收藏等 以活動促銷為主的店鋪：薄利多銷，店招風(fēng)格視活動主題來定，營造出一個活動氛圍。店招上適當(dāng)?shù)募尤胍恍┘t包或者優(yōu)惠券領(lǐng)取的按鈕。 以產(chǎn)品推廣為主的店鋪：增加店鋪主推產(chǎn)品的銷量，通常在店招上放上兩三款推廣的產(chǎn)品。三、淘寶店鋪店招設(shè)計(jì)技法（二）店招設(shè)計(jì)原則： 要直觀明確的告訴客戶自己店鋪是賣什么的，表現(xiàn)形式最好是實(shí)物照片 要直觀明確的告訴客戶自己店鋪的賣點(diǎn)（特點(diǎn)、優(yōu)勢、差異化）。三、淘寶店鋪店招設(shè)計(jì)技法（三）店招設(shè)計(jì)要點(diǎn)： 店鋪名字 告訴客戶自己是

4、賣什么的，品牌店鋪可以標(biāo)榜自己的品牌 實(shí)物照片 直觀形象的告訴客戶自己店鋪是賣什么的 產(chǎn)品特點(diǎn) 直接闡述自己店鋪的產(chǎn)品特點(diǎn)，第一時(shí)間打動客戶，吸引客戶 店鋪（產(chǎn)品）優(yōu)勢和差異化 告訴我的店鋪和產(chǎn)品的優(yōu)勢以及和其他的店鋪的不同，形成差異化競爭三、淘寶店鋪店招設(shè)計(jì)技法（四）店招制作規(guī)范、流程：確定風(fēng)格：視產(chǎn)品而定布局：店招尺寸、店招構(gòu)成、區(qū)塊劃分左邊或者中間放LOGO，LOGO之下放品牌詞或廣告詞中間留空或放品牌的相關(guān)文字，或放其它右邊放收藏店鋪等相關(guān)內(nèi)容之下是導(dǎo)航：首頁，所有寶貝等配色方案：LOGO提取顏色產(chǎn)品本身提取顏色產(chǎn)品聯(lián)想屬性提取顏色1. 顏色不超過3種三、淘寶店鋪店招設(shè)計(jì)技法（四）店招

5、制作規(guī)范、流程：規(guī)范字體：一般不超過3種字體重點(diǎn)部分加粗突出字體大小使用得體PS排版：越是簡約大氣的頁面，元素務(wù)必不要太多，清爽舒適的頁面多留白修改定稿：三、淘寶店鋪店招設(shè)計(jì)技法（四）店招制作規(guī)范、流程：圖片切割優(yōu)化：Photoshop切片Dreamweaver熱區(qū)切割優(yōu)化上傳圖片至淘寶圖片空間DW添加圖片超鏈接上傳網(wǎng)頁文件7. 發(fā)布四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法這是1920PX*500PX的全屏海報(bào)這是1920PX*600PX的全屏海報(bào)四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法這是950PX*400PX的普通海報(bào)四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（一）海報(bào)設(shè)計(jì)思路：海報(bào)要與大色調(diào)統(tǒng)一在設(shè)計(jì)海報(bào)時(shí)，先觀察大環(huán)境，海

6、報(bào)設(shè)計(jì)盡量避免與主色調(diào)產(chǎn)生強(qiáng)烈對比，必須要用對比色設(shè)計(jì)海報(bào)時(shí)，要考慮降低純度或明度四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（一）海報(bào)設(shè)計(jì)思路：觀察產(chǎn)品亮點(diǎn)定背景色背景選擇上不能單純當(dāng)海報(bào)設(shè)計(jì)，為了做出一張比較漂亮的圖片，最好要做到背景與產(chǎn)品的呼應(yīng)在海報(bào)設(shè)計(jì)中，大體分為兩種風(fēng)格：將拍攝的圖直接用作背景，板式排列活動文案將產(chǎn)品提取出來，背景根據(jù)產(chǎn)品靈活變動，再配合板式四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（一）海報(bào)設(shè)計(jì)思路：文案策劃排版式要明確自己的海報(bào)是給中國人看的，過度使用英文是不合適的，可將英文作為中文的輔助元素四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（一）海報(bào)設(shè)計(jì)思路：合理板式突出主題產(chǎn)品圖片展示與攝影圖片展示不同。攝影作

7、品突出原生態(tài)，添加文字是為了更好的突出畫面。設(shè)計(jì)作品是畫面烘托文案主題的，應(yīng)將主題文案放在首位重點(diǎn)突出模塊式編排（二）常見海報(bào)主題方案店鋪活動：促銷活動品牌團(tuán)：官方活動聚劃算，可提高品牌的曝光度官方季節(jié)性活動：雙十一/雙十二活動/年中大促店鋪常規(guī)活動：換季、節(jié)日符合當(dāng)下季節(jié)或者節(jié)日、特殊日子的相關(guān)題材店鋪常規(guī)活動：周年店慶、清倉甩賣四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（二）常見海報(bào)主題方案單品推廣單品聚劃算、爆款適合店鋪中推成爆款或者想要提高某款產(chǎn)品的轉(zhuǎn)化率新品上市、特價(jià)促銷適用于新品上市，并且打算全力推廣的產(chǎn)品四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（二）常見海報(bào)主題方案品牌宣傳品牌宣傳適用達(dá)到一定認(rèn)知度的品牌

8、以及在行業(yè)中有一定的知名度。四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（三）海報(bào)設(shè)計(jì)原則： “3”原則3元素：背景文案：名稱、賣點(diǎn)、價(jià)格、其他產(chǎn)品信息3段文字：主標(biāo)題、副標(biāo)題、附加內(nèi)容 3種字體：不能超過3種字體 主標(biāo)題可用粗大字體，副標(biāo)題略小3三種顏色：70%主色，25%輔助色， 5%點(diǎn)綴色30%以上留白：高端、大氣、上檔次多留白 0.3秒讀完：四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法（四）海報(bào)常見構(gòu)圖板式：左文右圖：左圖右文：上文下圖或上圖下文：多欄分布：常見兩邊圖中間文字背景為風(fēng)景圖：展示多種產(chǎn)品：1.斜切式構(gòu)圖：四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法左文右圖：字體上粗下細(xì)、上大下小，上下主次分

9、明，形成對比。文案四四方方架構(gòu)非常穩(wěn)重，非常平衡。四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法左圖右文：字體上粗下細(xì)、上大下小，下面的價(jià)格打折部分排版很穩(wěn)重丶結(jié)實(shí)。四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法兩邊圖中間文字：一般利用近景、遠(yuǎn)景的照片產(chǎn)生對比和呼應(yīng)（多見模特海報(bào)）。四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法背景為風(fēng)景圖：利用半透明的底框，然后再在里面排文案，避免文字模糊與混亂。四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法展示多種產(chǎn)品：當(dāng)海報(bào)上要放置過多的促銷產(chǎn)品，可以采用這種版式。產(chǎn)品平行排版，中間利用半透明的框展現(xiàn)文案。四、淘寶店鋪首頁海報(bào)設(shè)計(jì)技法斜切式構(gòu)圖：斜切式構(gòu)圖會讓畫面顯得時(shí)尚，動感活躍。但是畫面平衡感不是很好控制。一般文案傾斜角

10、度不超過30，文字往右上方傾斜便于閱讀 。五、淘寶店鋪頁尾設(shè)計(jì)技法五、淘寶店鋪頁尾設(shè)計(jì)技法 頁尾的用處：讓店鋪頁面的結(jié)構(gòu)更加完整，頁尾模塊相對頁頭會少，因此利用好頁尾能為店鋪起到良好的分流作用，而且頁頭和頁尾屬于共同展示頁面，無論打開哪個詳情頁都會顯示。五、淘寶店鋪頁尾設(shè)計(jì)技法頁尾設(shè)計(jì)一：客服聯(lián)系方式?？头?lián)系方式很多店鋪會設(shè)置在左右兩邊，而設(shè)置到頁尾的目的就是頁頭和頁尾屬于共同頁面，增加展示機(jī)會，方便顧客咨詢。五、淘寶店鋪頁尾設(shè)計(jì)技法頁尾設(shè)計(jì)二：購物保障以及發(fā)貨須知。目的讓顧客對店鋪增加信任，而且發(fā)貨須知是一定的，淘寶店鋪發(fā)貨時(shí)間由店長定的，因此統(tǒng)一的發(fā)貨時(shí)間讓店長節(jié)省更多時(shí)間。五、淘寶店鋪頁尾設(shè)計(jì)