項目7 時尚背包的詳情頁設(shè)計

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