《網(wǎng)頁(yè)美工》11-店鋪首頁(yè)視覺(jué)設(shè)計(jì)

店鋪首頁(yè)視覺(jué)設(shè)計(jì)《網(wǎng)店美工》CONTENTSCOURSE認(rèn)識(shí)淘寶首頁(yè)制作方法制作要點(diǎn)123認(rèn)識(shí)淘寶首頁(yè)

首頁(yè)設(shè)計(jì)

淘寶首頁(yè)是淘寶專門為淘寶店鋪以及天貓店鋪的賣家打造的店鋪形象展示窗口。定義電腦端首頁(yè)認(rèn)識(shí)淘寶店鋪首頁(yè)1、淘寶店鋪首頁(yè)定義NEXTNEXT認(rèn)識(shí)淘寶店鋪首頁(yè)2、淘寶店鋪首頁(yè)尺寸要求名稱尺寸要求文件大小支持圖片格式設(shè)計(jì)建議淘寶首頁(yè)

寬度：1920像素；

天貓店鋪有效區(qū)域?yàn)?90像素寬度；淘寶店鋪有效區(qū)域?yàn)?50像素寬度。無(wú)明確規(guī)定GIF、JPG、JPEG、PNG注意有效區(qū)域，有效區(qū)域是指不同型號(hào)的顯示器的賣家都能看到和點(diǎn)擊的區(qū)域，美工作圖時(shí)必須把重要的部分放置在區(qū)域內(nèi)。認(rèn)識(shí)淘寶店鋪首頁(yè)2、店鋪首頁(yè)尺寸圖示從示意圖中，我們看到重要的信息應(yīng)當(dāng)盡量放在990px區(qū)域內(nèi)，不能超出1400px。NEXT3、首頁(yè)的作用3.1線下某品牌女裝門面店鋪認(rèn)識(shí)淘寶店鋪首頁(yè)門頭店招品牌海報(bào)商品展示NEXT3、首頁(yè)的作用3.1淘寶某女裝店鋪首頁(yè)認(rèn)識(shí)淘寶店鋪首頁(yè)店招與導(dǎo)航首頁(yè)調(diào)性大海報(bào)推薦分類與優(yōu)惠近期活動(dòng)海報(bào)產(chǎn)品細(xì)分分類店內(nèi)熱賣單品NEXTNEXT3、首頁(yè)的作用3.3客戶瀏覽過(guò)程客戶的瀏覽過(guò)程買家首先到達(dá)的兩個(gè)地方：寶貝頁(yè)面、店鋪首頁(yè)

關(guān)鍵任務(wù)：建立信任=買家停留更長(zhǎng)時(shí)間搜索頁(yè)面寶貝頁(yè)面A寶貝頁(yè)面B寶貝頁(yè)面C

寶貝頁(yè)面D購(gòu)買現(xiàn)在要做的工作首頁(yè)認(rèn)識(shí)淘寶店鋪首頁(yè)3、首頁(yè)的作用3.4總結(jié)認(rèn)識(shí)淘寶店鋪首頁(yè)NEXT3、首頁(yè)的作用3.4總結(jié)認(rèn)識(shí)淘寶店鋪首頁(yè)客戶體驗(yàn)是留住客戶的核心競(jìng)爭(zhēng)力。在瀏覽網(wǎng)頁(yè)的用戶群中，往往只有一部分人才是真正的意向客戶做好首頁(yè)可以消除客戶的購(gòu)買疑慮，增強(qiáng)客戶的粘度。NEXTNEXT4、普通首頁(yè)與優(yōu)質(zhì)首頁(yè)對(duì)比普通首頁(yè)優(yōu)質(zhì)首頁(yè)視覺(jué)無(wú)美感排版混亂文案信息混亂畫(huà)面視覺(jué)協(xié)調(diào)統(tǒng)一文案信息清晰認(rèn)識(shí)淘寶店鋪首頁(yè)品牌型首頁(yè)營(yíng)銷型首頁(yè)NEXT5、首頁(yè)分類5.1按運(yùn)營(yíng)策略分類認(rèn)識(shí)淘寶店鋪首頁(yè)5、首頁(yè)分類5.1按運(yùn)營(yíng)策略分類認(rèn)識(shí)淘寶店鋪首頁(yè)其他活動(dòng)/大促的單獨(dú)首頁(yè)設(shè)計(jì)NEXT單向型首頁(yè)曲線型首頁(yè)NEXT5、首頁(yè)分類5.2按布局方式分類認(rèn)識(shí)淘寶店鋪首頁(yè)6、首頁(yè)需要傳達(dá)的信息認(rèn)識(shí)淘寶店鋪首頁(yè)展示形象信息1234擴(kuò)散和拼貼推薦活動(dòng)服務(wù)提示、

公共提醒NEXT必備模塊可選模塊7、首頁(yè)模塊7.1首頁(yè)模塊分類認(rèn)識(shí)淘寶店鋪首頁(yè)NEXT7、首頁(yè)模塊7.2必備模塊店招、導(dǎo)航海報(bào)寶貝陳列頁(yè)尾店招導(dǎo)航寶貝陳列頁(yè)尾海報(bào)必備模塊認(rèn)識(shí)淘寶店鋪首頁(yè)NEXT店鋪標(biāo)志（店標(biāo)LOGO）7、首頁(yè)模塊7.2必備模塊認(rèn)識(shí)淘寶店鋪首頁(yè)店招NEXT7、首頁(yè)模塊7.2必備模塊認(rèn)識(shí)淘寶店鋪首頁(yè)導(dǎo)航NEXT海報(bào)寶貝陳列頁(yè)尾寶貝分類品牌文化活動(dòng)預(yù)告關(guān)鍵字搜索營(yíng)銷重點(diǎn)可選模塊當(dāng)季熱銷分類櫥窗新品預(yù)售7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)NEXT寶貝分類以及關(guān)于我們品牌文化（或品牌故事）7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)營(yíng)銷重點(diǎn)7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)活動(dòng)預(yù)告7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)暢銷關(guān)鍵字/關(guān)鍵字搜索7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)客服模塊首頁(yè)客服模塊詳情頁(yè)下方客服模塊詳情頁(yè)右側(cè)客服模塊7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)立體輪播全屏海報(bào)輪播首頁(yè)950海報(bào)輪播詳情頁(yè)海報(bào)輪播7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)當(dāng)季熱銷7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)按主題分類按促銷分類按功能分類按材質(zhì)分類分類櫥窗7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)新品預(yù)售7、首頁(yè)模塊7.3可選模塊認(rèn)識(shí)淘寶店鋪首頁(yè)新品預(yù)售店鋪招牌寶貝分類/導(dǎo)航以及關(guān)于我們、品牌文化（或品牌故事）全屏海報(bào)（高端錨點(diǎn)海報(bào)或大促海報(bào)）營(yíng)銷重點(diǎn)客服服務(wù)立體輪播分享有禮分類櫥窗當(dāng)季熱銷根據(jù)店鋪需要全部或部分選擇數(shù)據(jù)導(dǎo)向做模塊位置的分配合理設(shè)計(jì)優(yōu)先度7、首頁(yè)模塊7.4布局建議認(rèn)識(shí)淘寶店鋪首頁(yè)NEXT制作方法首頁(yè)設(shè)計(jì)

制作方法NEXT

確定店鋪定位步驟1搭建首頁(yè)框架步驟2確定相關(guān)元素步驟31、首頁(yè)設(shè)計(jì)流程

（1）淘寶首頁(yè)前必須充分了解店鋪的定位（產(chǎn)品、價(jià)格、消費(fèi)人群、消費(fèi)訴求等方面）

（2）確定設(shè)計(jì)思路和設(shè)計(jì)方向定位NEXT制作方法1、確定店鋪定位1.1風(fēng)格

高端、大氣、上檔次消費(fèi)人群有較強(qiáng)的購(gòu)買力，追求群體歸屬感。·經(jīng)濟(jì)、實(shí)用、貨比三家不吃虧消費(fèi)群體的購(gòu)買力較弱，以加個(gè)優(yōu)勢(shì)為主導(dǎo)。設(shè)計(jì)

思路NEXT制作方法設(shè)計(jì)

方向1、確定店鋪定位1.2設(shè)計(jì)構(gòu)思制作方法1、確定店鋪定位1.3首頁(yè)風(fēng)格展示NEXT圖章、影印斯邊、炭筆水彩畫(huà)紙粉筆、炭筆炭精、繪圖筆網(wǎng)狀、銘黃漸變

根據(jù)節(jié)點(diǎn)、主題來(lái)制定首頁(yè)的色調(diào)，更具有整體色調(diào)再進(jìn)行拓展相近色，而不是任意去使用色彩。

決定整體頁(yè)面色調(diào)在軟件中畫(huà)出定好的色塊放于最頂上，從明度漸變制作3-5個(gè)色塊，以便隨時(shí)吸色填充，也可以定義到顏色庫(kù)。

補(bǔ)色的用處從字面上理解的話即為補(bǔ)充顏色、豐富顏色。色調(diào)要統(tǒng)一，有變化。畫(huà)面中主色調(diào)占70%，30%的補(bǔ)色，實(shí)際情況是由畫(huà)面而定。

小習(xí)慣

合理利用補(bǔ)色NEXT制作方法1、確定店鋪定位1.4首頁(yè)顏色搭配制作方法2、搭配首頁(yè)框架

2.1黃金比例分割店招是150Px的高度，天貓上框架在200Px，首焦高度控制在750Px內(nèi)，最大高度不

超過(guò)一屏的高度910Px。

優(yōu)惠券常規(guī)的尺寸高度在150Px，可在畫(huà)面風(fēng)格中決定高度，盡量嘗試不同排版。產(chǎn)品在一屏中出現(xiàn)兩行為佳，多則亂，少則空。

NEXT制作方法NEXT設(shè)計(jì)頁(yè)面時(shí)候元素多則不易，在于精。根據(jù)主題進(jìn)行思維拓展，聯(lián)想與頁(yè)面主題相關(guān)的元素。開(kāi)始的時(shí)候，可以先打個(gè)草稿，寫(xiě)出相關(guān)的名詞，多多益善，然后結(jié)合頁(yè)面設(shè)計(jì)的實(shí)際情況，進(jìn)行取舍再深入刻畫(huà)。3、確定相關(guān)元素制作方法以花草為元素的女裝首頁(yè)3、確定相關(guān)元素NEXT以中國(guó)元素為主的化妝品首頁(yè)制作方法3、確定相關(guān)元素NEXT制作要點(diǎn)海報(bào)設(shè)計(jì)

NEXT介紹顧客通過(guò)店招的鏈接地址可以從內(nèi)頁(yè)直達(dá)首頁(yè)，店招只占據(jù)店鋪150像素高度，但卻起到了網(wǎng)店的門戶作用，所以不容小覷。NEXT制作要點(diǎn)1、店招的視覺(jué)要點(diǎn)1.1店招介紹1、店招的視覺(jué)要點(diǎn)1.2店招作用1店招可以表明商店所售物品或服務(wù)項(xiàng)目等；2可以傳遞商店的經(jīng)營(yíng)理念以及品牌優(yōu)勢(shì)等；3可以展示出店鋪的特價(jià)活動(dòng)以及促銷方式等；制作要點(diǎn)NEXT1、店招的視覺(jué)要點(diǎn)1.3尺寸要求圖片名稱尺寸要求文件大小支持圖片格式設(shè)計(jì)建議店鋪導(dǎo)航

高度：32像素

寬度：950像素

不限GIF、JPG、JPEG、PNG按新旺鋪要求制作要點(diǎn)NEXT1、店招的視覺(jué)要點(diǎn)1.4店招分類品牌宣傳為主產(chǎn)品推廣為主活動(dòng)促銷為主制作要點(diǎn)NEXT1、店招的視覺(jué)要點(diǎn)1.5店招包含元素

店鋪名

店鋪LOGO

店鋪slogan收藏按鈕

關(guān)注按鈕促銷產(chǎn)品

優(yōu)惠券活動(dòng)時(shí)間

基底凸現(xiàn)和塑料效果

搜索框

店鋪公告

網(wǎng)址

店鋪榮譽(yù)

店招包含制作要點(diǎn)NEXT1、店招的視覺(jué)要點(diǎn)1.6店招制作要點(diǎn)視覺(jué)重點(diǎn)不易過(guò)多，將重點(diǎn)內(nèi)容展示出來(lái)結(jié)合店鋪現(xiàn)階段情況（營(yíng)銷、配色、主推商品）凸顯品牌特性用色簡(jiǎn)潔摒棄無(wú)意義的多元素制作要點(diǎn)NEXT2、導(dǎo)航的視覺(jué)要點(diǎn)2.1導(dǎo)航作用介紹介紹簡(jiǎn)單直觀的導(dǎo)航不僅能提高網(wǎng)店的易用性，而且方便瀏覽者找到所需信息，有助于提高用戶轉(zhuǎn)化率。網(wǎng)店的導(dǎo)航是網(wǎng)店內(nèi)容架構(gòu)的體現(xiàn)，網(wǎng)店導(dǎo)航是否合理是網(wǎng)店易用性評(píng)價(jià)的重要指標(biāo)之一。制作要點(diǎn)NEXT1、導(dǎo)航的視覺(jué)要點(diǎn)2.2導(dǎo)航分類圖片導(dǎo)航按鈕導(dǎo)航文字導(dǎo)航制作要點(diǎn)NEXT1、導(dǎo)航的視覺(jué)要點(diǎn)2.3制作要點(diǎn)1導(dǎo)航類目要明確清楚，以便賣家選擇；2導(dǎo)航的文字與背景色要區(qū)別開(kāi)；3導(dǎo)航與店招顏色要協(xié)調(diào)統(tǒng)一，不能過(guò)于花俏；制作要點(diǎn)NEXT2、海報(bào)的視覺(jué)要點(diǎn)2.1海報(bào)介紹介紹淘寶海報(bào)是淘寶專門為淘寶店鋪以及天貓店鋪的賣家打造的創(chuàng)意廣告推廣工具。制作要點(diǎn)NEXT2、海報(bào)的視覺(jué)要點(diǎn)2.2海報(bào)的作用NEXT客戶的瀏覽過(guò)程買家首先到達(dá)的兩個(gè)地方：寶貝頁(yè)面、店鋪首頁(yè)

關(guān)鍵任務(wù)：建立信任=買家停留更長(zhǎng)時(shí)間搜索頁(yè)面寶貝頁(yè)面A寶貝頁(yè)面B寶貝頁(yè)面C

寶貝頁(yè)面D購(gòu)買現(xiàn)在要做的工作首頁(yè)制作要點(diǎn)2、海報(bào)的視覺(jué)要點(diǎn)2.3尺寸要求圖片名稱尺寸要求文件大小支持圖片格式設(shè)計(jì)建議淘寶海報(bào)

高度：不設(shè)限但建議在600像素內(nèi)。

寬度：全屏海報(bào)1920像素；

通欄海報(bào)950像素；右側(cè)欄海報(bào)750像素?zé)o明確規(guī)定建議小于300KBGIF、JPG、JPEG、PNG促銷宣傳或品牌形象制作要點(diǎn)NEXT2、海報(bào)的視覺(jué)要點(diǎn)2.4海報(bào)分類產(chǎn)品海報(bào)促銷海報(bào)制作要點(diǎn)NEXT2、海報(bào)的視覺(jué)要點(diǎn)2.5店招包含元素NEXT海報(bào)

構(gòu)圖文字

排版背景制作色彩協(xié)調(diào)海報(bào)組成要素制作要點(diǎn)2、海報(bào)的視覺(jué)要點(diǎn)2.6制作要點(diǎn)對(duì)齊讓內(nèi)容縱向、橫向都有一條線隱形的參考線can'kao'l'x可以對(duì)齊。要么居中，要么底部。盡量確保頁(yè)面上不要有一個(gè)元素，沒(méi)有任何元素和它能夠形成對(duì)齊的關(guān)系。親密不要讓所有內(nèi)容都沒(méi)有聚集地堆在一起，讓那些關(guān)系比較親密的內(nèi)容聚合成一個(gè)區(qū)域，不要讓一個(gè)banner上的區(qū)域超過(guò)4個(gè)。制作要點(diǎn)NEXT2、海報(bào)的視覺(jué)要點(diǎn)2.6制作要點(diǎn)簡(jiǎn)單質(zhì)感千萬(wàn)不要加任何PS的濾鏡、陰影、能不漸變就不漸變，因?yàn)橐呀?jīng)不流行了，不要盲目使用各種樣式。統(tǒng)一性如果要用圖標(biāo)，盡量選擇樣式統(tǒng)一，且能夠保持你的優(yōu)先級(jí)次序的圖表。比如我們引導(dǎo)用戶先看左邊，再看右邊，結(jié)果你在右邊的圖標(biāo)里選擇了一個(gè)血紅的，可能用戶的視線立馬被吸引過(guò)來(lái)了。字體樣式

不要讓字體超過(guò)3種。盡量用宋體、黑體、方正黑體，不要用什么魏碑體、行楷等，一看就比較山寨。制作要點(diǎn)NEXT3、寶貝陳列展示區(qū)的視覺(jué)要點(diǎn)3.1寶貝陳列展示區(qū)介紹介紹寶貝陳列展示區(qū)是首頁(yè)最重要的模塊，可以幫助賣家快速地了解店鋪寶貝以及影響買家的購(gòu)買決策。制作要點(diǎn)NEXT3、寶貝陳列展示區(qū)的視覺(jué)要點(diǎn)3.2制作要點(diǎn)1商品類別明確：對(duì)同類商品進(jìn)行陳列，可以使商品顯得豐富、整潔、美觀且視覺(jué)沖擊力強(qiáng)。2突出產(chǎn)品：通過(guò)背景和商品的對(duì)比，突出產(chǎn)品信息。3主次分明：對(duì)于需要主推的商品或爆款商品，采用不同的排列方式或通過(guò)色彩對(duì)比，

做到重點(diǎn)突出，主次分明。4圖文對(duì)應(yīng)：對(duì)于混排的寶貝，描述和價(jià)格等文字需要對(duì)應(yīng)商品，避免混淆。制作要點(diǎn)NEXT4、頁(yè)尾的視覺(jué)要點(diǎn)4.1頁(yè)尾介紹介紹店鋪的頁(yè)尾是店鋪的最后一屏，這個(gè)部分的靈活性很大，但是很多賣家在裝修時(shí)卻忽略了也為這一重要部分。制作要點(diǎn)NEXT1店鋪底部導(dǎo)航：便于用戶選擇。2返回頂部按鈕：在頁(yè)面過(guò)長(zhǎng)的情況下，加上返回頂部鏈接以