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

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

首頁設(shè)計

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

寬度：1920像素；

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

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

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

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

制作方法NEXT

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

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

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

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

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

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

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

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

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

小習(xí)慣

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

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

超過一屏的高度910Px。

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

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

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

高度：32像素

寬度：950像素

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

店鋪名

店鋪LOGO

店鋪slogan收藏按鈕

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

優(yōu)惠券活動時間

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

搜索框

店鋪公告

網(wǎng)址

店鋪榮譽(yù)

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

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

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

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

寬度：全屏海報1920像素；

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

構(gòu)圖文字

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

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

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