《網(wǎng)店視覺設計》 課件 項目7、8 網(wǎng)店詳情頁視覺設計、移動端網(wǎng)店視覺設計

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