項(xiàng)目7 時(shí)尚背包的詳情頁(yè)設(shè)計(jì)

項(xiàng)目七時(shí)尚背包的詳情頁(yè)設(shè)計(jì)網(wǎng)店美工項(xiàng)目實(shí)戰(zhàn)教程CONTENTS目錄項(xiàng)目導(dǎo)入7.1知識(shí)與技術(shù)引導(dǎo)7.2項(xiàng)目實(shí)現(xiàn)7.3拓展項(xiàng)目7.4課后思考7.57.1.1項(xiàng)目情景7.17.1.2項(xiàng)目目標(biāo)7.1.3效果展示項(xiàng)目導(dǎo)入小李在網(wǎng)上開了一家背包專賣店，主要銷售多種時(shí)尚背包，經(jīng)營(yíng)一段時(shí)間后，有了一定的信用積累，為了更好的打開銷路，她打算重新設(shè)計(jì)自己的產(chǎn)品詳情頁(yè)，在準(zhǔn)備好了商品圖片及相關(guān)截圖之后，接下來就是考慮如何來設(shè)計(jì)了。7.1.1項(xiàng)目情景7.1.2項(xiàng)目目標(biāo)了解網(wǎng)店商品詳情頁(yè)的作用與設(shè)計(jì)思路。能夠根據(jù)商品特點(diǎn)及商品照片進(jìn)行產(chǎn)品的定位，并構(gòu)思相關(guān)的營(yíng)銷思路，并制作出對(duì)應(yīng)的商品詳情頁(yè)。7.1.3效果展示時(shí)尚背包的詳情頁(yè)的效果圖7.2.1商品詳情頁(yè)的概述7.27.2.2商品詳情頁(yè)的尺寸要求知識(shí)與技術(shù)引導(dǎo)7.2.3賞析商品詳情頁(yè)所謂詳情頁(yè)就是通過圖文來介紹商品詳情特征的頁(yè)面，一個(gè)好的詳情頁(yè)可以大大提高商品的轉(zhuǎn)化率，進(jìn)而提高店鋪的競(jìng)爭(zhēng)力。當(dāng)我們拿到一個(gè)詳情頁(yè)設(shè)計(jì)需求的時(shí)候，我們首先要分析詳情頁(yè)的邏輯大框架，詳情頁(yè)的邏輯很重要。我們可以先分析產(chǎn)品的定位和賣點(diǎn)，進(jìn)行產(chǎn)品的定位，構(gòu)思營(yíng)銷思路，最好寫好營(yíng)銷文案，把文案的主次關(guān)系弄清楚，補(bǔ)充促銷的噱頭，提升轉(zhuǎn)化率。通過標(biāo)題的對(duì)比搭配，突出焦點(diǎn)，提高人們的購(gòu)買欲。7.2.1商品詳情頁(yè)的概述商品詳情頁(yè)在不同的購(gòu)物平臺(tái)上尺寸是不一樣的，以淘寶為例，電腦端詳情頁(yè)寬度750像素，高度不受限制；手機(jī)端詳情頁(yè)寬度620像素，高度小于1546像素即可，一般設(shè)計(jì)的時(shí)候可以先設(shè)計(jì)電腦端詳情頁(yè)，手機(jī)端的可以在電腦端編輯時(shí)點(diǎn)擊導(dǎo)入電腦端描述，就可以自動(dòng)生成。7.2.2商品詳情頁(yè)的尺寸要求商品詳情頁(yè)一般包含商品信息、商品細(xì)節(jié)展示、促銷信息、支付與配送信息、售后服務(wù)等信息。頁(yè)面的整體風(fēng)格一致協(xié)調(diào)、色彩搭配和諧。一個(gè)詳情頁(yè)好不好，不光要美觀，還要提升寶貝的轉(zhuǎn)化率。在設(shè)計(jì)詳情頁(yè)時(shí)需要站在客戶的角度去分析，如何做到激發(fā)購(gòu)買欲，讓客戶更加對(duì)產(chǎn)品信服。確定詳情頁(yè)的框架，構(gòu)思好詳情頁(yè)的內(nèi)容。確定產(chǎn)品的主要賣點(diǎn)，給產(chǎn)品確立一個(gè)明確的定位，告訴客戶為什么要買你的產(chǎn)品，滿足用戶的需求。7.2.3賞析商品詳情頁(yè)7.2.3賞析商品詳情頁(yè)床上用品詳情頁(yè)設(shè)計(jì)鼠標(biāo)詳情頁(yè)設(shè)計(jì)7.3.1設(shè)計(jì)理念7.37.3.2工具方法7.3.3實(shí)現(xiàn)過程項(xiàng)目實(shí)現(xiàn)7.3.1設(shè)計(jì)理念以藍(lán)色為主，分區(qū)域進(jìn)行設(shè)計(jì)，配色方法包括單色配色，互補(bǔ)色配色等,表現(xiàn)出時(shí)尚、科技感覺，烘托商品的質(zhì)地。在區(qū)域中通過點(diǎn)、線、線框、色塊等增加作品的設(shè)計(jì)感，突出專業(yè)性。選擇黑體等粗直類字體來設(shè)計(jì)，使得整個(gè)畫面風(fēng)格統(tǒng)一、富有力度。7.3.2工具方法通過圖層蒙版來控制素材圖片的顯示效果。使用參考線來使作品中留白、圖形及文字位置保持一致，整體布局合理。強(qiáng)烈要求設(shè)計(jì)者能熟練使用各種方法進(jìn)行各種素材的對(duì)齊與排列均勻。7.3.3實(shí)現(xiàn)過程設(shè)置尺寸，制作背景繪制單個(gè)優(yōu)惠券繪制優(yōu)惠券區(qū)域7.3.3實(shí)現(xiàn)過程制作欄目分隔條繪制背包展示底圖區(qū)域7.3.3實(shí)現(xiàn)過程拖入素材，添加文字與修飾繪制BANNER區(qū)域7.3.3實(shí)現(xiàn)過程制作背包賣點(diǎn)區(qū)域繪制商品特點(diǎn)區(qū)域7.3.3實(shí)現(xiàn)過程繪制“貼心服務(wù)”區(qū)域繪制好評(píng)展示區(qū)域7.3.3實(shí)現(xiàn)過程繪制“相關(guān)寶貝”區(qū)域拓展床上用品的詳情頁(yè)設(shè)計(jì)7.4拓展項(xiàng)目7.4.1拓展床上用品的詳情頁(yè)設(shè)計(jì)設(shè)計(jì)理念本案例中在色彩搭配上使用時(shí)尚又具有質(zhì)感的駝色為與藍(lán)色為主，烘托出羽絨被套與枕套純棉質(zhì)地。分區(qū)塊設(shè)計(jì)，將詳情頁(yè)中商品信息、商品細(xì)節(jié)展示、使用注意事項(xiàng)、產(chǎn)品優(yōu)勢(shì)等一一展示，布局合理，色彩搭配合諧，既告知顧客銷售內(nèi)容，又展示出商品各個(gè)特征，因課時(shí)與篇幅有限，其它如物流配送、評(píng)價(jià)、售后等模塊已經(jīng)省略。采用正統(tǒng)粗重的中英文字體，體現(xiàn)羽絨被的厚實(shí)感。7.4.1拓展床上用品的詳情頁(yè)設(shè)計(jì)實(shí)現(xiàn)過程在Photoshop中新建一個(gè)文檔，750*6000像素，參考上面的教程添加參考線后設(shè)計(jì)優(yōu)惠券區(qū)域與文字標(biāo)題區(qū)域，英文名及廣告語(yǔ)、活動(dòng)信息加入圖片素材，并使用圖層蒙版來控制其顯示區(qū)域。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程使用“矩形工具”繪制背景，添加素材，添加文字與線條，制作右邊區(qū)域。參考上例，制作標(biāo)題區(qū)域，添加矩形，疊加圖案，制作分隔條，添加文字與素材，注意文字字號(hào)大小、重點(diǎn)文字顏色紅色，對(duì)齊排版。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程制作洗滌說明區(qū)域，使用形狀工具繪制各種圖標(biāo)，添加說明文字。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程繪制咖啡色矩形為底，添加文字與形狀，添加素材。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程繪制文字廣告區(qū)域，添加文字與形狀，為豎排文字添加小圖標(biāo)修飾。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程繪制細(xì)節(jié)展示區(qū)域，添加標(biāo)題與分隔條紋，繪制線框，置入素材圖片，添加說明文字。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程添加標(biāo)題與分隔條紋，置入素材圖片，添加說明文字。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程添加標(biāo)題與分隔條紋，置入素材圖片，制作好評(píng)展示。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程制作售后區(qū)，添加文字與圖標(biāo)，注意對(duì)齊與排列。7.4.1拓展店鋪收藏設(shè)計(jì)一實(shí)現(xiàn)過程制作售后區(qū)，添加文字與圖標(biāo)，注意對(duì)齊與排列。7.5.1思政思考7.57.5.2技能思考課后思考網(wǎng)店美工們必須進(jìn)行全面的思考：第一要站在客戶群的角度，滿足其需求，打消其顧慮。其次，要深度研究產(chǎn)品，提煉其賣點(diǎn)，展示其實(shí)力。商品詳情頁(yè)中全面展示了產(chǎn)品信息與店鋪服務(wù)，設(shè)計(jì)制作的工作量很大，網(wǎng)店美工必須具備吃苦耐勞的精神，才能堅(jiān)持制作出完整的頁(yè)面。同時(shí)，創(chuàng)新精神也必不可少，網(wǎng)上銷售同樣商品的店鋪有很多，網(wǎng)店美工們要提煉出與眾不同的賣點(diǎn)，打動(dòng)訪