《網(wǎng)店視覺設(shè)計(jì)》 課件 項(xiàng)目7、8 網(wǎng)店詳情頁(yè)視覺設(shè)計(jì)、移動(dòng)端網(wǎng)店視覺設(shè)計(jì)

項(xiàng)目七?網(wǎng)店詳情頁(yè)視覺設(shè)計(jì)任務(wù)1?詳情頁(yè)廣告區(qū)設(shè)計(jì)任務(wù)2?詳情頁(yè)商品描述區(qū)設(shè)計(jì)任務(wù)3?詳情頁(yè)規(guī)格區(qū)設(shè)計(jì)任務(wù)4?詳情頁(yè)購(gòu)買須知設(shè)計(jì)434435項(xiàng)目引入從用戶進(jìn)入網(wǎng)店到最終成單，除網(wǎng)店客服的溝通作用外，一份翔實(shí)的詳情頁(yè)介紹也能起到不錯(cuò)的成單效果。因此，對(duì)網(wǎng)店詳情頁(yè)進(jìn)行有效設(shè)計(jì)是至關(guān)重要的。項(xiàng)目背景某電商公司為助力鄉(xiāng)村振興，幫助果農(nóng)們解決銷路問題，計(jì)劃在“南山大集”電商平臺(tái)上架一批核桃。公司把制作核桃詳情頁(yè)的任務(wù)交給了張偉、王平兩位同學(xué)。學(xué)習(xí)目標(biāo)1.熟悉并掌握詳情頁(yè)廣告區(qū)的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握詳情頁(yè)廣告區(qū)的設(shè)計(jì)思路。3.能夠制作詳情頁(yè)廣告區(qū)。436任務(wù)引入張偉、王平接到制作核桃詳情頁(yè)廣告區(qū)的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作詳情頁(yè)廣告區(qū)的要求和方法。任務(wù)分析詳情頁(yè)廣告區(qū)位于詳情頁(yè)的頂端，對(duì)于用戶而言，是最先接觸到商品特性的部分，也決定了用戶是否要繼續(xù)了解商品細(xì)節(jié)。在制作詳情頁(yè)廣告區(qū)之前，需要熟悉詳情頁(yè)廣告區(qū)的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。437相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.詳情頁(yè)廣告區(qū)概述詳情頁(yè)廣告區(qū)一般位于商品基礎(chǔ)信息的下方，是為推廣該款商品而設(shè)計(jì)的海報(bào)，由商品、主題、賣點(diǎn)三部分組成。它主要通過突出商品優(yōu)勢(shì)以及放大商品特點(diǎn)來(lái)吸引用戶購(gòu)買，在設(shè)計(jì)時(shí)要注重頁(yè)面版式的統(tǒng)一性和變化性，整體要美觀協(xié)調(diào)，如圖所示。438439詳情頁(yè)廣告區(qū)2.詳情頁(yè)廣告區(qū)設(shè)計(jì)原則設(shè)計(jì)商品詳情頁(yè)廣告區(qū)一般有兩個(gè)目的，一是明確主題、突出商品賣點(diǎn)，二是承上啟下，做好商品信息的過渡。廣告區(qū)圖中最好只有一個(gè)商品主體，商品主體要呈現(xiàn)在畫面中的焦點(diǎn)位置。若有其他裝飾物，則應(yīng)盡量減小裝飾物所占用的空間，以免模糊主體。焦點(diǎn)圖中的文案要以展示商品特點(diǎn)為主，主要包括標(biāo)題和描述性文案。標(biāo)題文案的內(nèi)容應(yīng)盡量簡(jiǎn)短、干練，字體要大且有創(chuàng)意，以輔助展示商品特點(diǎn)并吸引用戶視線。描述性文案的內(nèi)容可稍多一些，注意文字不要遮擋畫面中的視覺元素，一般位于頁(yè)面頂部、側(cè)面或底部。440二、詳情頁(yè)廣告區(qū)制作本例將制作詳情頁(yè)廣告區(qū)，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為790像素，高度為1200像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。2.導(dǎo)入“項(xiàng)目七任務(wù)1背景”素材圖片，并居中對(duì)齊，效果如圖所示。441442導(dǎo)入“項(xiàng)目七任務(wù)1背景”素材圖片新建空白畫布3.導(dǎo)入“項(xiàng)目七任務(wù)1框”素材圖片，并居中對(duì)齊，效果如圖所示。443導(dǎo)入“項(xiàng)目七任務(wù)1框”素材圖片4.選擇豎排文字工具，輸入文字“有機(jī)種植純天然自然成熟綠色健康”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、18點(diǎn)、#???。5.選擇豎排文字工具，輸入文字“Organicplantingpurenatural”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、18點(diǎn)、#???。6.選擇豎排文字工具，輸入文字“值得每天一粒的好核桃”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、28點(diǎn)、#???。7.選擇橫排文字工具，輸入文字“NANSHAN”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、35點(diǎn)、#???。4448.選擇豎排文字工具，輸入文字“雞爪綿核桃”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、125點(diǎn)、#???，效果如圖所示。445輸入文字9.導(dǎo)入“項(xiàng)目七任務(wù)1logo”素材圖片，并居中對(duì)齊，效果如圖所示。446導(dǎo)入“項(xiàng)目七任務(wù)1logo”素材圖片10.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為#???，最終效果如圖所示。447最終效果448學(xué)習(xí)目標(biāo)1.熟悉并掌握詳情頁(yè)商品描述區(qū)的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握詳情頁(yè)商品描述區(qū)的設(shè)計(jì)思路。3.能夠制作詳情頁(yè)商品描述區(qū)。任務(wù)引入張偉、王平接到制作核桃詳情頁(yè)商品描述區(qū)的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作詳情頁(yè)商品描述區(qū)的要求和方法。449任務(wù)分析詳情頁(yè)商品描述區(qū)是詳情頁(yè)中占比最大的部分，對(duì)于用戶而言，這是了解商品細(xì)節(jié)的一種途徑；對(duì)于商家而言，一個(gè)好的詳情頁(yè)商品描述區(qū)能夠提升成單率并降低客服壓力，無(wú)論是從哪個(gè)方面來(lái)看，詳情頁(yè)商品描述區(qū)的設(shè)計(jì)都十分重要。在制作詳情頁(yè)商品描述區(qū)之前，需要熟悉詳情頁(yè)商品描述區(qū)的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.詳情頁(yè)商品描述區(qū)概述詳情頁(yè)商品描述區(qū)就是商品的詳細(xì)信息展示區(qū)域，通過圖文的方式對(duì)商品的詳細(xì)信息，如商品的外觀、尺寸、材質(zhì)、顏色、功能、使用方法等進(jìn)行介紹，其目的在于激發(fā)用戶的消費(fèi)欲望，增加用戶對(duì)店鋪的信任感，從而促使用戶下單。450詳情頁(yè)商品描述區(qū)頁(yè)面2.詳情頁(yè)商品描述區(qū)設(shè)計(jì)規(guī)范不同的商品，其詳情頁(yè)商品描述區(qū)所包含的內(nèi)容也會(huì)不一樣，如服裝類商品在詳情頁(yè)中需要標(biāo)明具體的尺碼、材質(zhì)、性能等信息，電器類商品要在詳情頁(yè)中標(biāo)明商品的使用方法、注意事項(xiàng)等信息，美妝類商品要在詳情頁(yè)中標(biāo)明商品的功效和成分等信息，如圖所示。451服裝類商品詳情頁(yè)商品描述區(qū)3.詳情頁(yè)商品描述區(qū)設(shè)計(jì)布局（1）商品展示商品展示可以讓用戶對(duì)商品有一個(gè)直觀的認(rèn)識(shí)，通常使用圖片的形式來(lái)展現(xiàn)。圖片有擺拍圖和場(chǎng)景圖兩種形式，再配合廣告文案，讓用戶充分了解商品。（2）商品細(xì)節(jié)細(xì)節(jié)展示是讓用戶進(jìn)一步了解商品的主要途徑。在設(shè)計(jì)詳情頁(yè)商品描述區(qū)時(shí)，最大限度地把商品的優(yōu)勢(shì)細(xì)節(jié)展示出來(lái)，對(duì)促成訂單很有幫助。452（3）商品效果展示商品效果展示主要是通過圖片加說(shuō)明文字的方式對(duì)商品的主要功能做詳細(xì)介紹，可以詳細(xì)展示商品細(xì)節(jié)，同時(shí)對(duì)細(xì)節(jié)進(jìn)行補(bǔ)充說(shuō)明。（4）促銷活動(dòng)促銷活動(dòng)是指適當(dāng)讓利給用戶，以獲得更多的流量和訂單。在商品詳情頁(yè)描述區(qū)添加促銷活動(dòng)模塊，能夠激發(fā)用戶快速做出購(gòu)買決策。453454二、詳情頁(yè)商品描述區(qū)制作本例將制作詳情頁(yè)商品描述區(qū)，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為790像素，高度為3450像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。2.選擇矩形工具，在工具屬性欄中設(shè)置填充為#000000，在圖片的上方繪制790像素×530像素的矩形，移動(dòng)到頁(yè)面底部，效果如圖所示。455新建空白畫布繪制矩形13.導(dǎo)入“項(xiàng)目七任務(wù)2核桃1”素材圖片，并居中對(duì)齊，效果如圖7-2-5所示。4.選擇矩形工具，在工具屬性欄中設(shè)置填充為#e2ded1，在圖片的上方繪制135像素×300像素的矩形，移動(dòng)到頁(yè)面左上部，效果如圖所示。456導(dǎo)入“項(xiàng)目七任務(wù)2核桃1”素材圖片繪制矩形25.選擇矩形工具，在工具屬性欄中設(shè)置填充為#e2ded1，在圖片的上方繪制240像素×1像素的矩形，移動(dòng)到“矩形1”的右側(cè)，效果如圖所示。6.選擇豎排文字工具，輸入文字“滋養(yǎng)腦細(xì)胞，增強(qiáng)腦功能”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為蘋方、22點(diǎn)、#???。457繪制矩形37.選擇豎排文字工具，輸入文字“核桃仁含有較多的蛋白質(zhì)及人體營(yíng)養(yǎng)必需的不飽和脂肪酸，這些成分皆為大腦組織細(xì)胞代謝的重要物質(zhì)”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為蘋方、13點(diǎn)、#???，效果如圖所示。458輸入文字18.按【Ctrl+J】組合鍵復(fù)制兩個(gè)“防動(dòng)脈硬化，降低膽固醇”和“潤(rùn)肌膚、烏須發(fā)”的賣點(diǎn)模塊，效果如圖所示。459復(fù)制圖形9.選擇橫排文字工具，輸入文字“產(chǎn)品實(shí)拍”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、48點(diǎn)、#5a4217，效果如圖所示。460輸入文字210.選擇矩形工具，在工具屬性欄中設(shè)置填充為#565151，在圖片的上方繪制500像素×460像素的矩形，移動(dòng)到頁(yè)面中上部，效果如圖所示。461繪制矩形411.導(dǎo)入“項(xiàng)目七任務(wù)2核桃2”素材圖片，按【Alt】鍵與“矩形7”建立剪切蒙版，效果如圖所示。462導(dǎo)入“項(xiàng)目七任務(wù)2核桃2”素材圖片12.選擇橢圓工具，在工具屬性欄中設(shè)置填充為#dda414，在圖片的上方繪制135像素×135像素的橢圓，移動(dòng)到頁(yè)面左上部，效果如圖所示。463繪制橢圓113.選擇豎排文字工具，輸入文字“色”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、73點(diǎn)、#???，效果如圖所示。464輸入文字314.選擇橢圓工具，在工具屬性欄中設(shè)置填充為#???，在圖片的上方繪制13像素×13像素的橢圓，移動(dòng)到圖層“橢圓1”上適當(dāng)位置，效果如圖所示。465繪制橢圓215.選擇豎排文字工具，輸入文字“形態(tài)完整，零污染零添加的自然顏色”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、24點(diǎn)、#7a3e01，效果如圖所示。466輸入文字416.按【Ctrl+J】組合鍵復(fù)制兩個(gè)“香”和“味”的賣點(diǎn)模塊，最終效果如圖所示。467最終效果468學(xué)習(xí)目標(biāo)1.熟悉并掌握詳情頁(yè)規(guī)格區(qū)的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握詳情頁(yè)規(guī)格區(qū)的設(shè)計(jì)思路。3.能夠制作詳情頁(yè)規(guī)格區(qū)。469任務(wù)引入張偉、王平接到制作核桃詳情頁(yè)規(guī)格區(qū)的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作詳情頁(yè)規(guī)格區(qū)的要求和方法。任務(wù)分析詳情頁(yè)規(guī)格區(qū)對(duì)于不同商品而言，對(duì)于用戶的重要性并不相同，如對(duì)于服裝類商品非常重要，是用戶必看的；而對(duì)于電子類商品可能用戶看的就相對(duì)少一些。詳情頁(yè)規(guī)格區(qū)是嚴(yán)格受到監(jiān)管的，必須如實(shí)展示信息，不能有任何虛假成分。在制作詳情頁(yè)規(guī)格區(qū)之前，需要熟悉詳情頁(yè)規(guī)格區(qū)的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。470相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.詳情頁(yè)規(guī)格區(qū)概述詳情頁(yè)規(guī)格區(qū)可以細(xì)分為參數(shù)說(shuō)明、尺碼對(duì)照展示、顏色展示、全方位展示等模塊，通過這些模塊的設(shè)計(jì)可以讓用戶更加了解商品的樣式、作用和品質(zhì)，如圖所示。詳情頁(yè)規(guī)格區(qū)4712.詳情頁(yè)規(guī)格區(qū)設(shè)計(jì)原則在網(wǎng)店中，商品參數(shù)的表達(dá)方式多種多樣，可以根據(jù)商品參數(shù)的多少與商品的特征進(jìn)行靈活設(shè)計(jì)，商品參數(shù)的常用表達(dá)方式有以下4種。（1）商品參數(shù)的自由輸入自由排列輸入商品參數(shù)，一般需要用文本框來(lái)統(tǒng)一文本的行間距。（2）商品參數(shù)表商品參數(shù)表可以比較全面地反映出商品的特性、功能和規(guī)格等，在商品尺碼方面應(yīng)用得尤為廣泛。472（3）商品參數(shù)與商品圖片的自由組合可以直接將商品的參數(shù)輸入商品圖片中。（4）對(duì)比圖的展示在網(wǎng)店中，對(duì)比圖除被用于展示商品的大小、容量外，還經(jīng)常被用于展示商品在效果、功能等方面具有的優(yōu)勢(shì)。473二、詳情頁(yè)規(guī)格區(qū)制作本例將制作詳情頁(yè)規(guī)格區(qū)，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為790像素，高度為530像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。2.選擇橫排文字工具，輸入文字“產(chǎn)品參數(shù)”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、48點(diǎn)、#5a4217，效果如圖所示。474新建空白畫布輸入文字14753.選擇矩形工具，在工具屬性欄中設(shè)置填充為#818181，繪制605像素×1像素的矩形，效果如圖所示。4.按【Ctrl+J】組合鍵復(fù)制兩個(gè)矩形，并均勻分布，效果如圖所示。繪制矩形1復(fù)制矩形4765.選擇橫排文字工具，輸入文字“品名：核桃”“規(guī)格：500克”“原產(chǎn)地：山東·濟(jì)南”“品牌：南山大集”“保質(zhì)期：18個(gè)月”“存儲(chǔ)方法：常溫”“儲(chǔ)存方法：置陰涼干燥處，防蛀”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、26點(diǎn)、#818181，效果如圖所示。復(fù)制矩形4776.選擇矩形工具，在工具屬性欄中設(shè)置填充為#dda414，繪制703像素×63像素的矩形，效果如圖所示。繪制矩形24787.選擇橫排文字工具，輸入文字“溫馨提示：核桃與酒不能同食，容易上火的朋友不建議多吃核桃?！?，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、23點(diǎn)、#???，最終效果如圖所示。最終效果479學(xué)習(xí)目標(biāo)1.熟悉并掌握詳情頁(yè)購(gòu)買須知的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握詳情頁(yè)購(gòu)買須知的設(shè)計(jì)思路。3.能夠制作詳情頁(yè)購(gòu)買須知。480任務(wù)引入張偉、王平接到制作核桃詳情頁(yè)購(gòu)買須知的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作詳情頁(yè)購(gòu)買須知的要求和方法。任務(wù)分析詳情頁(yè)購(gòu)買須知位于詳情頁(yè)的最下部，與首頁(yè)的頁(yè)尾區(qū)非常相似，都是保障店家和用戶利益最重要的部分，存在內(nèi)容多、排版難的問題。在制作詳情頁(yè)購(gòu)買須知之前，需要熟悉詳情頁(yè)購(gòu)買須知的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。481相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.詳情頁(yè)購(gòu)買須知概述詳情頁(yè)購(gòu)買須知是一個(gè)非常重要但又容易被忽略的部分，位于詳情頁(yè)的最下方，因各電商平臺(tái)對(duì)于商家監(jiān)管的要求而不斷變化，行業(yè)不同其內(nèi)容也不盡相同，如圖所示。詳情頁(yè)購(gòu)買須知4822.詳情頁(yè)購(gòu)買須知常用模塊詳情頁(yè)購(gòu)買須知包含以下常用模塊：●溫馨提示：如發(fā)貨須知、客戶必讀、購(gòu)物流程和默認(rèn)快遞等信息可以幫助用戶快速解決購(gòu)物過程中的問題，減少用戶對(duì)于常見問題的咨詢量，如圖所示?！駜r(jià)格說(shuō)明：如劃線價(jià)格、未劃線價(jià)格等信息可以幫助用戶快速了解商品原價(jià)、活動(dòng)價(jià)格、優(yōu)惠價(jià)格等，減少用戶對(duì)價(jià)格的歧義，如圖所示。483溫馨提示價(jià)格說(shuō)明484●特色服務(wù)：店鋪售后中店家、行業(yè)或品牌獨(dú)有的服務(wù)，如生鮮的爛果賠付等，如圖所示。特色服務(wù)485二、詳情頁(yè)購(gòu)買須知制作本例將制作詳情頁(yè)購(gòu)買須知，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為790像素，高度為850像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。2.選擇橫排文字工具，輸入文字“售后無(wú)憂品質(zhì)保證”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、48點(diǎn)、#5a4217，效果如圖所示。486新建空白畫布輸入文字14873.選擇矩形工具，在工具屬性欄中設(shè)置填充為#dda414，繪制110像素×100像素的矩形，效果如圖所示。4.選擇橫排文字工具，輸入文字“服務(wù)承諾”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、57點(diǎn)、#29ac6c。繪制矩形4885.選擇橫排文字工具，輸入文字“關(guān)于退換：生鮮類目不支持七天無(wú)理由退換貨服務(wù)，如收到壞果，請(qǐng)?jiān)诤炇蘸?4小時(shí)內(nèi)聯(lián)系客服處理，超過24小時(shí)不予以處理哦！”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、25點(diǎn)、#818181，效果如圖所示。輸入文字24896.按【Ctrl+J】組合鍵復(fù)制兩個(gè)“關(guān)于發(fā)貨”和“關(guān)于賠付”的賣點(diǎn)模塊，最終效果如圖所示。最終效果謝謝Thanks490項(xiàng)目八?移動(dòng)端網(wǎng)店視覺設(shè)計(jì)任務(wù)1?移動(dòng)端優(yōu)惠券設(shè)計(jì)任務(wù)2?移動(dòng)端海報(bào)設(shè)計(jì)任務(wù)3?移動(dòng)端分類展示圖設(shè)計(jì)任務(wù)4?移動(dòng)端詳情頁(yè)設(shè)計(jì)491492項(xiàng)目引入2022年全球移動(dòng)電商應(yīng)用下載量達(dá)到59億次，相比2021年增長(zhǎng)7.1%，移動(dòng)端網(wǎng)店已經(jīng)成為用戶最主要的網(wǎng)絡(luò)購(gòu)物渠道之一，PC端網(wǎng)店逐漸被移動(dòng)端網(wǎng)店所取代。由于移動(dòng)端屏幕尺寸小、屏幕比例不統(tǒng)一，所以PC端網(wǎng)店的頁(yè)面越來(lái)越不適合移動(dòng)端的顯示要求，因此單獨(dú)為移動(dòng)端網(wǎng)店設(shè)計(jì)頁(yè)面就成了一種必然。493項(xiàng)目背景隨著手機(jī)等移動(dòng)設(shè)備的普及，某電商公司發(fā)現(xiàn)他們運(yùn)營(yíng)的“南山大集”品牌網(wǎng)店在移動(dòng)端存在顯示不全和文字太小等問題，為了解決這些頁(yè)面顯示異常的問題，公司決定制作一套移動(dòng)端網(wǎng)店頁(yè)面，并把制作移動(dòng)端網(wǎng)店頁(yè)面的任務(wù)交給了張偉、王平兩位同學(xué)。學(xué)習(xí)目標(biāo)1.熟悉并掌握移動(dòng)端優(yōu)惠券的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握移動(dòng)端優(yōu)惠券的設(shè)計(jì)思路。3.能夠制作移動(dòng)端優(yōu)惠券。494任務(wù)引入張偉、王平接到制作“南山大集”移動(dòng)端優(yōu)惠券的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作移動(dòng)端優(yōu)惠券的要求和方法。任務(wù)分析移動(dòng)端網(wǎng)店與PC端網(wǎng)店在店鋪引流方面并不相同，移動(dòng)端顯示內(nèi)容更精簡(jiǎn)、更直觀，其中，優(yōu)惠券營(yíng)銷就是一種非常精簡(jiǎn)直觀的營(yíng)銷模式。想要做好一張足夠吸引用戶的優(yōu)惠券圖，必須熟悉移動(dòng)端優(yōu)惠券的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。495相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.優(yōu)惠券概述優(yōu)惠券是一種常見的營(yíng)銷推廣工具，可以降低商品價(jià)格，為消費(fèi)者帶來(lái)福利。在網(wǎng)購(gòu)時(shí)代，優(yōu)惠券更是受到廣大網(wǎng)絡(luò)用戶的歡迎。合理利用優(yōu)惠券能夠刺激用戶的購(gòu)買欲，提高店鋪銷售轉(zhuǎn)化率并促進(jìn)老客戶回購(gòu)，如圖所示。496497優(yōu)惠券2.優(yōu)惠券設(shè)計(jì)原則優(yōu)惠券是網(wǎng)店首頁(yè)設(shè)計(jì)必不可少的元素。網(wǎng)店先通過廣告區(qū)來(lái)吸引用戶的視線，當(dāng)用戶的視線往下移動(dòng)時(shí)，則應(yīng)通過優(yōu)惠信息來(lái)刺激用戶持續(xù)瀏覽頁(yè)面信息。優(yōu)惠券的設(shè)計(jì)原則如下：●突出優(yōu)惠力度；●色彩對(duì)比鮮明；●文字簡(jiǎn)潔明了；●輔助引導(dǎo)標(biāo)簽。498二、優(yōu)惠券制作本例將制作移動(dòng)端優(yōu)惠券，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為750像素，高度為260像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。499新建空白畫布2.選擇矩形工具，在工具屬性欄中設(shè)置填充為#d?6e6，在圖片的上方繪制750像素×260像素的矩形，并居中對(duì)齊，如圖所示。500繪制矩形13.導(dǎo)入“項(xiàng)目八任務(wù)1背景”素材圖片，并移動(dòng)到左側(cè)，效果如圖所示。501導(dǎo)入“項(xiàng)目八任務(wù)1背景”素材圖片4.選擇直線工具，在工具屬性欄中設(shè)置描邊為#018c00、3像素、虛線，在圖片的上方繪制124像素×1像素的矩形，移動(dòng)到圖層“背景”上，如圖所示。502繪制虛線5.選擇橫排文字工具，輸入文字“￥”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、24點(diǎn)、#142030。6.選擇橫排文字工具，輸入文字“20”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、60點(diǎn)、#142030。7.選擇橫排文字工具，輸入文字“店鋪優(yōu)惠券”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、15點(diǎn)、#142030。5038.選擇橫排文字工具，輸入文字“（限時(shí)滿120可用）”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、14點(diǎn)、#018c00，效果如圖所示。504輸入文字19.選擇矩形工具，在工具屬性欄中設(shè)置填充為#142030，在圖片的上方繪制117像素×64像素的矩形，移動(dòng)到“背景”中央，效果如圖所示。505繪制矩形210.選擇豎排文字工具，輸入文字“立即領(lǐng)?。尽?，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑色、18點(diǎn)、#???，效果如圖所示。506輸入文字211.按【Ctrl+J】組合鍵復(fù)制三個(gè)“滿120減30”“滿120減50”和“滿120減80”賣點(diǎn)塊，最終效果如圖所示。507最終效果508學(xué)習(xí)目標(biāo)1.熟悉并掌握移動(dòng)端海報(bào)的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握移動(dòng)端海報(bào)的設(shè)計(jì)思路。3.能夠制作移動(dòng)端海報(bào)。任務(wù)引入張偉、王平接到制作“南山大集”移動(dòng)端海報(bào)的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作移動(dòng)端海報(bào)的要求和方法。509任務(wù)分析移動(dòng)端海報(bào)與PC端首頁(yè)廣告區(qū)的作用基本一致，都是建立用戶對(duì)店鋪第一印象和發(fā)布優(yōu)惠活動(dòng)的重要展示區(qū)，只是因?yàn)橐苿?dòng)端展示區(qū)域變小了，需要重新設(shè)計(jì)來(lái)吸引用戶的關(guān)注。在制作移動(dòng)端海報(bào)之前，需要熟悉移動(dòng)端海報(bào)的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.移動(dòng)端海報(bào)概述移動(dòng)端首頁(yè)需要通過海報(bào)來(lái)快速聚焦用戶的視線。海報(bào)用以展示網(wǎng)店的最新動(dòng)態(tài)或活動(dòng)信息，以吸引用戶繼續(xù)瀏覽頁(yè)面，如圖所示。2.移動(dòng)端海報(bào)設(shè)計(jì)原則移動(dòng)端首屏海報(bào)的寬度一般為200～950像素，因此移動(dòng)端海報(bào)焦點(diǎn)圖要在有限的頁(yè)面范圍內(nèi)放大商品和主要文案，以便用戶更快速地接收到信息。510511移動(dòng)端海報(bào)二、移動(dòng)端海報(bào)制作本例將制作移動(dòng)端海報(bào)，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為640像素，高度為200像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。512新建空白畫布2.導(dǎo)入“項(xiàng)目八任務(wù)2背景”素材圖片，并居中對(duì)齊，效果如圖所示。513導(dǎo)入“項(xiàng)目八任務(wù)2背景”素材圖片3.導(dǎo)入“項(xiàng)目八任務(wù)2logo”素材圖片，并居中對(duì)齊，效果如圖所示。514導(dǎo)入“項(xiàng)目八任務(wù)2logo”素材圖片4.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為#???，效果如圖所示。515顏色疊加5.選擇橫排文字工具，輸入文字“PureNaturalGreenVegetables”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、12點(diǎn)、#???。6.選擇橫排文字工具，輸入文字“南山甄選紅皮花生”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、48點(diǎn)、#???，效果如圖所示。516輸入文字7.導(dǎo)入“項(xiàng)目八任務(wù)2花紋1”素材圖片，將其放置于“南山甄選紅皮花生”圖層上面，按【Alt】鍵與“文字2”建立剪切蒙版，調(diào)整圖片大小和位置，效果如圖所示。517導(dǎo)入“項(xiàng)目八任務(wù)2花紋1”素材圖片8.導(dǎo)入“項(xiàng)目八任務(wù)2花紋2”素材圖片，將其放置于“南山甄選紅皮花生”圖層上面，按【Alt】鍵與“文字2”建立剪切蒙版，調(diào)整圖片大小和位置，效果如圖所示。518導(dǎo)入“項(xiàng)目八任務(wù)2花紋2”素材圖片9.選擇矩形工具，在工具屬性欄中設(shè)置填充為#???，繪制212像素×28像素的矩形，效果如圖所示。519繪制矩形10.選擇橫排文字工具，輸入文字“限時(shí)預(yù)定中”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、11點(diǎn)、#bb7333，最終效果如圖所示。520最終效果521學(xué)習(xí)目標(biāo)1.熟悉并掌握移動(dòng)端分類展示圖的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握移動(dòng)端分類展示圖的設(shè)計(jì)思路。3.能夠制作移動(dòng)端分類展示圖。522任務(wù)引入張偉、王平接到制作“南山大集”移動(dòng)端分類展示圖的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作移動(dòng)端分類展示圖的要求和方法。任務(wù)分析移動(dòng)端分類展示圖與PC端商品分類圖的作用基本一致，都是用來(lái)展示當(dāng)前主推商品或者介紹店鋪內(nèi)商品種類、優(yōu)惠等，只是因?yàn)橐苿?dòng)端屏幕變小了，需要重新設(shè)計(jì)來(lái)吸引用戶的關(guān)注。在制作移動(dòng)端分類展示圖之前，需要熟悉移動(dòng)端分類展示圖的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。523相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.移動(dòng)端分類展示圖概述移動(dòng)端分類展示圖用于解決網(wǎng)店上傳商品過多、單頁(yè)面顯示內(nèi)容少等問題，如圖所示。2.移動(dòng)端分類展示圖設(shè)計(jì)原則從吸引用戶的角度來(lái)講，分類展示圖要設(shè)計(jì)得清晰、明確，方便用戶快速找到自己想要的商品。從顏色搭配上來(lái)說(shuō)，分類展示圖要與主頁(yè)的色調(diào)相協(xié)調(diào)，避免沖突。524移動(dòng)端分類展示圖525二、分類展示圖制作本例將制作移動(dòng)端分類展示圖，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為750像素，高度為960像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。2.選擇矩形工具，在工具屬性欄中設(shè)置填充為#d?6e6，在圖片的上方繪制750像素×960像素的矩形，移動(dòng)到合適位置，效果如圖所示。526新建空白畫布繪制矩形15273.選擇矩形工具，在工具屬性欄中設(shè)置填充為#8cdaa1，在圖片的上方繪制328像素×438像素的矩形，移動(dòng)到合適位置，效果如圖所示。繪制矩形25284.導(dǎo)入“項(xiàng)目八任務(wù)3背景”素材圖片，移動(dòng)到左側(cè)，效果如圖所示。導(dǎo)入“項(xiàng)目八任務(wù)3背景”素材圖片5295.導(dǎo)入“項(xiàng)目八任務(wù)3芋頭”素材圖片，移動(dòng)到左側(cè)，按【Alt】鍵與“矩形7”建立剪切蒙版，效果如圖所示。6.選擇橫排文字工具，輸入文字“南山芋頭”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、31點(diǎn)、#20232e。導(dǎo)入“項(xiàng)目八任務(wù)3芋頭”素材圖片5307.選擇橫排文字工具，輸入文字“￥6.6”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、49點(diǎn)、#20232e，效果如圖所示。輸入文字15318.選擇矩形工具，在工具屬性欄中設(shè)置填充為#8cdaa1，在圖片的上方繪制124像素×52像素的矩形，移動(dòng)到左上角，效果如圖所示。繪制矩形35329.選擇橫排文字工具，輸入文字“立省5元”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、16點(diǎn)、#20232e，效果如圖所示。輸入文字253310.選擇橢圓工具，在工具屬性欄中設(shè)置填充為#20232e，在圖片的上方繪制29像素×29像素的矩形，移動(dòng)到適當(dāng)位置，效果如圖所示。導(dǎo)入“項(xiàng)目八任務(wù)3心形”素材圖片53411.導(dǎo)入“項(xiàng)目八任務(wù)3心形”素材圖片，移動(dòng)到左側(cè)，導(dǎo)入“項(xiàng)目八任務(wù)3十字”素材圖片，并移動(dòng)到右側(cè)，效果如圖所示。導(dǎo)入“項(xiàng)目八任務(wù)3十字”素材圖片53512.按【Ctrl+J】鍵復(fù)制兩個(gè)“南山核桃仁”和“南山葵花籽”矩形框，最終效果如圖所示。最終效果536學(xué)習(xí)目標(biāo)1.熟悉并掌握移動(dòng)端詳情頁(yè)的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握移動(dòng)端詳情頁(yè)的設(shè)計(jì)思路。3.能夠制作移動(dòng)端詳情頁(yè)。537任務(wù)引入張偉、王平接到制作“南山大集”移動(dòng)端詳情頁(yè)的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作移動(dòng)端詳情頁(yè)的要求和方法。任務(wù)分析移動(dòng)端詳情頁(yè)與PC端詳情頁(yè)的作用基本一致，都是用來(lái)展示商品細(xì)節(jié)的，只是由于屏幕變小了，商品的賣點(diǎn)、店鋪促銷和優(yōu)惠等信息都需要精簡(jiǎn)，但又不能降低商品細(xì)節(jié)的展示和說(shuō)明。在制作移動(dòng)端詳情頁(yè)之前，需要熟悉移動(dòng)端詳情頁(yè)的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。538相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.移動(dòng)端詳情頁(yè)概述移動(dòng)端商品詳情頁(yè)與PC端商品詳情頁(yè)類似，其主要區(qū)別在于移動(dòng)端商品詳情頁(yè)文字更少，多用圖片表達(dá)，展現(xiàn)效果具有促銷性，而且主要展示的是商品的細(xì)節(jié)，如圖所示。移動(dòng)端詳情頁(yè)5392.移動(dòng)端詳情頁(yè)設(shè)計(jì)要點(diǎn)（1）一個(gè)主題占據(jù)一個(gè)頁(yè)面移動(dòng)端設(shè)備以豎屏瀏覽模式為主，因此在商品詳情頁(yè)的設(shè)計(jì)上，每個(gè)板塊的圖片也應(yīng)是豎版的，這樣才能更高效地傳達(dá)商品信息，給用戶帶來(lái)更加舒適的視覺感官體驗(yàn)。（2）突出商品移動(dòng)端詳情頁(yè)的賣點(diǎn)展示應(yīng)該更加精練。（3）細(xì)節(jié)質(zhì)感化展示商品細(xì)節(jié)時(shí)，應(yīng)將商品局部放大，使得商品更具品質(zhì)感和視覺沖擊力。同時(shí)也應(yīng)注意圖片的精度，要選擇清晰、高質(zhì)量的商品圖片進(jìn)行放大、裁剪操作。5403.移動(dòng)端詳情頁(yè)設(shè)計(jì)規(guī)范（1）支持的格式移動(dòng)端詳情頁(yè)支持音頻、圖片和純文本輸入。每個(gè)移動(dòng)端詳情頁(yè)至少要包含以上3種信息的其中一種才能發(fā)布成功，其中圖片僅支持JPEG、GIF和PNG格式。（2）詳情頁(yè)的大小移動(dòng)端詳情頁(yè)的總圖片大?。▓D片+文字+音頻）不得超過1.5MB。541（3）單張圖片尺寸單張圖片的尺寸標(biāo)準(zhǔn)為620像素≥寬度≥480像素（寬度介于480像素到620像素之間），高度≤960像素（高度小于960像素）。（4）音頻每個(gè)移動(dòng)端詳情頁(yè)只能添加一個(gè)音頻，時(shí)長(zhǎng)不宜超過30秒，大小不超過200KB，支持MP3格式。音頻的內(nèi)容可以圍繞商品賣點(diǎn)、品牌故事、商品特色、商品優(yōu)惠等展開。（5）文字移動(dòng)端詳情頁(yè)中的文本總字?jǐn)?shù)≤5000，單個(gè)文本框輸入字?jǐn)?shù)≤500。542二、移動(dòng)端詳情頁(yè)制作本例將制作移動(dòng)端詳情頁(yè)，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為750像素，高度為4050像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，效果如圖所示。2.導(dǎo)入“項(xiàng)目八任務(wù)4背景”素材圖片，并居中對(duì)齊，效果如圖所示。543新建空白畫布導(dǎo)入“項(xiàng)目八任務(wù)4背景”素材圖片5443.導(dǎo)入“項(xiàng)目八任務(wù)4logo”素材圖片，并居中對(duì)齊，效果如圖所示。導(dǎo)入“項(xiàng)目八任務(wù)4logo”素材圖片5454.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為#???，效果如圖所示。顏色疊加5465.導(dǎo)入“項(xiàng)目八任務(wù)4水花1”素材圖片，并居中對(duì)齊，效果如圖所示。導(dǎo)入“項(xiàng)目八任務(wù)4水花1”素材圖片5476.導(dǎo)入“項(xiàng)目八任務(wù)4草莓1”素材圖片，并居中對(duì)齊，效果如圖所示。導(dǎo)入“項(xiàng)目八任務(wù)4草莓1”素材圖片5487.執(zhí)行“圖層樣式＞投影”命令，為“草莓1”添加陰影，如圖所示。添加陰影5498.導(dǎo)入“項(xiàng)目八任務(wù)4水花2”素材圖片，并居中對(duì)齊，效果如圖所示。導(dǎo)入“項(xiàng)目八任務(wù)4水花2”素材圖片5509.選擇橫排文字工具，輸入文字“南山草莓”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、100點(diǎn)、#???，效果如圖所示。輸入文字155110.執(zhí)行“圖層樣式＞外發(fā)光”命令，為“南山草莓”添加外發(fā)光，如圖所示。外發(fā)光155211.選擇矩形工具，在工具屬性欄中設(shè)置填充為#???，繪制325像素×45像素的矩形，效果如圖所示。繪制矩形155312.執(zhí)行“圖層樣式＞外發(fā)光”命令，為“矩形1”添加外發(fā)光，效果如圖所示。外發(fā)光255413.選擇橫排文字工具，輸入文字“果形碩大/酸甜可口/新鮮