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

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

首頁設計

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

寬度：1920像素；

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

關鍵任務：建立信任=買家停留更長時間搜索頁面寶貝頁面A寶貝頁面B寶貝頁面C

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

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

制作方法NEXT

確定店鋪定位步驟1搭建首頁框架步驟2確定相關元素步驟31、首頁設計流程

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

（2）確定設計思路和設計方向定位NEXT制作方法1、確定店鋪定位1.1風格

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

思路NEXT制作方法設計

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

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

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

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

小習慣

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

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

超過一屏的高度910Px。

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

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

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

高度：32像素

寬度：950像素

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

店鋪名

店鋪LOGO

店鋪slogan收藏按鈕

關注按鈕促銷產品

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

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

搜索框

店鋪公告

網(wǎng)址

店鋪榮譽

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

關鍵任務：建立信任=買家停留更長時間搜索頁面寶貝頁面A寶貝頁面B寶貝頁面C

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

高度：不設限但建議在600像素內。

寬度：全屏海報1920像素；

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

構圖文字

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

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

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