《網(wǎng)店美工》教案-商品詳情頁設計

PAGEPAGE1***學?！毒W(wǎng)店美工》教案第1頁學科網(wǎng)店美工項目六商品詳情頁設計檢查授課班級授課時數(shù)16教具計算機、多媒體廣播授課時間教學方法演示、講解、實操教學目的①了解店鋪首頁的基本構成②熟悉各模塊的功能與參數(shù)③設計美化各個模塊教學重點和難點重、難點：商品詳情頁的每個重要組成部分和美化設計復習提問教學內(nèi)容、方法、過程和版書設計教學追計商品詳情頁是網(wǎng)店組成最重要的部分之一，商品在這里得以最全面的展示，它如同無形的導購員，這是買家會不會下單的關鍵環(huán)節(jié)，詳情制作的優(yōu)劣，就好比實體店導購員推介商品時表現(xiàn)的好壞，最終直接關系到交易是否能產(chǎn)生。它是提高轉化率的入口，刺激買家的消費欲望，樹立買家對店鋪的信任感，消除買家的各種擔憂和疑慮，促使成單。所以，詳情頁的設計很關鍵，它在一定程度上對買家的消費行為產(chǎn)生了直接的影響。值得一提的是，詳情頁設計得好的能產(chǎn)生的效果有兩種：強制營銷和選擇營銷。強制營銷是將你想闡述的賣點強制灌輸給買家，用各個舉例證明方法，讓他認為你說的是正確的，信賴你的產(chǎn)品，這樣買家可能在你的頁面渲染狀態(tài)下就購買了，屬于沖動消費。第二種是選擇營銷，抓住買家的心理，將他心理的選擇展現(xiàn)出來，讓買家更加理性的購買，這樣的好處是顧客體驗好，退款率小，這樣的操作方法也只有大賣家會這樣操作，因為他們有足夠的品牌調(diào)性，他們的顧客群體也固定了，所以他們可以操作的更理性點。任務22商品詳情頁設計標準及整體構思1.基本要求

單張圖片應當保持在500K以內(nèi)，僅支持JPG、GIF、PNG格式。提高緩沖速度，保證觀看流暢度。2.PC端商品詳情頁圖片尺寸：(1)寬度750像素；(2)單張高度建議800像素；(3)格式為：JPG\GIF\PNG。3.文字要求：(1)當需要在圖片上添加文字時，中文字體大于等于12號字；(2)當需要添加的文字太多時，建議使用純文本的方式編輯，這樣看起來更清晰。建議文字盡量簡潔，多用一些關鍵詞去突出產(chǎn)品的特色。商品詳情頁的設計標準有六個重點：配色、字體、文案、構圖、排版、氛圍。通過對數(shù)據(jù)的分析、商品賣點的提煉，及店鋪風格自身的定位，我們要先開始準備所需的設計素材。網(wǎng)絡購物中，相信沒有一個消費者在看商品的時候不去了解寶貝詳情頁就直接購買的，其重要性不言而喻。當然寶貝詳情頁要與寶貝主圖、寶貝標題相契合，詳情頁必須真實地介紹出寶貝的特點屬性，切忌夸大其詞。接下來我們用圖的方式來講解商品詳情頁設計整體構思：優(yōu)秀的詳情設計，不單單是精美的畫面，文案一樣很重要。文案是畫龍點睛的一筆，往往那么一個詞匯、那么一個句子，卻足以觸動買家的心，這便是所謂的圖文并茂。當兩者完美地結合，其所產(chǎn)生的力量更為強大。好的文案通常具備如下特點：1.短短數(shù)秒的時間便能抓住買家的心2.三屏以內(nèi)的內(nèi)容就能讓買家下定決心購買3.善于講故事，用情感贏得買家的共鳴4.簡潔的一句廣告詞便濃縮了產(chǎn)品的賣點5.重復地表達產(chǎn)品的最主要賣點6.訴求利益因素，給買家一個購買的理由網(wǎng)絡營銷發(fā)展至今，文案已經(jīng)演變成了一個獨立而專業(yè)的職位，在這里我們就不多加介紹，有興趣的設計師們可以利用業(yè)余時間多進行了解。如果能夠成為集設計與文案才能于一身的高級人才，可想而知，你將備受青睞。商品詳情頁設計是直接決定交易能否成功的其中一個重要因素，如何去構思使之更具有吸引力，更能抓住消費者的心理是關鍵。我們需要收集和了解買家需要看什么，不需要看什么：圖6-1詳情頁所需內(nèi)容板塊示意接著，在再構思寶貝頁面需要放置什么內(nèi)容：圖6-2詳情內(nèi)容要點示意任務23商品功能性介紹區(qū)域設計在做商品詳情頁規(guī)劃前，清楚商品詳情頁每個區(qū)域的功能性，對后期布局設計起到相當重要的作用。一般來說，商品詳情頁分三大區(qū)域：商品營銷區(qū)、產(chǎn)品展示區(qū)、品牌包裝區(qū)。而三大區(qū)域則又細分成以下6個展現(xiàn)區(qū)，并形成商品描述的布局圖：突出賣點：提煉商品的主要功能利益進行重點表現(xiàn)，吸引買家關注并進行瀏覽由整體到細節(jié)：先進行商品的整體展現(xiàn)，再進行商品的細節(jié)描述，這也是買家在購買商品時的瀏覽順序情感聯(lián)想：針對商品提煉情感利益，激發(fā)買家的感性購買需求導購服務：針對買家關注的商品問題進行導購式解答，逐步打消買家的購買疑慮售前售后：對買家進行購買后的一系列服務，從包裝、物流到售后服務進行描述實力呈現(xiàn)：商品的質(zhì)量認證、企業(yè)的實力展示、品牌介紹、榮譽等體現(xiàn)店鋪實力的內(nèi)容關聯(lián)銷售：關聯(lián)銷售區(qū)域，以便買家跳出前有更多商品選擇圖6-3詳情頁個區(qū)域內(nèi)容細分示意另外，除了基礎功能區(qū)域版塊，為了提高買家逛店體驗度以及店鋪成交轉化率，我們建議增加一些額外的版塊，來為商品詳情頁的功能加分：1.增加買家購買欲望—促銷活動區(qū)：在商品描述中加進給力的促銷信息，讓買家了解商品的同時清楚可以享受的促銷優(yōu)惠，讓促銷優(yōu)惠來刺激買家的購買欲望。2.增加客單價—商品推薦：商品推薦有兩種，分為同類商品推薦，設計必須要突出同類商品中不同商品的優(yōu)勢。告訴買家可以如何進行商品選擇，如可以的話還可以體現(xiàn)出購買咨詢和導購信息。另一類則是搭配商品推薦：設計中要突出不同商品搭配的藝術，或功能或效果或視覺呈現(xiàn)。讓買家明白購買搭配商品他所能得到的不光是價格上的優(yōu)惠，更多是購買該搭配產(chǎn)品所能帶來更多的附加價值。3.增加買家易用性(訪問深度)—分類模板：當然，光提供商品推薦對眾多買家來說，遠遠不夠，很多買家更希望自己選擇，所以在描述中體現(xiàn)所有產(chǎn)品或者相關產(chǎn)品的分類，會讓買家有更多選擇的余地，提高買家的訪問深度。4.增加買家咨詢率—咨詢功能模塊：買家在瀏覽不同信息的時候都會產(chǎn)生不同的想法，同時，在客戶介入時，轉化率會大大提升，那我們設計該做的就是把自己當成買家，去考慮買家在看到什么信息的時候會想到咨詢，同時把咨詢旺旺添加到買家產(chǎn)生咨詢想法的地方，增加咨詢率。任務24商品詳情頁的規(guī)劃消費者來到購物網(wǎng)站，目的往往非常明確，要么購物要么準備購物。大致有以下幾種情況：1.

當消費者無目的的瀏覽淘寶時，大部分是通過各種推廣活動，被其中某一樣商品吸引住，從而點擊進入店鋪，直接瀏覽寶貝詳情。2.當消費者有熟知并喜好的品牌，則直接從店鋪首頁進入，選擇感興趣的商品點擊查看詳情，再考慮是否購買，或者通過品牌商品搜索進入寶貝詳情頁面查看。3.

當消費者以某一商品為購物目的，通過搜索或活動推廣直接進入寶貝描述頁面查看詳情。由此可見大多數(shù)消費者著陸頁面都會是寶貝描述頁面，意味著消費者在進入店鋪首頁之前，絕大多數(shù)是在看寶貝，如果不能成功吸引或挽留住消費者，使得消費者直接在寶貝上失去信心和興趣的話，進入店鋪的可能性就不大，也就意味著成交率為0。

所以說，首頁的主要作用是吸引消費者，并樹立店鋪品牌形象，寶貝描述頁面則是影響消費者是否購買的一個重要因素，是將點擊率轉化為成交率的最關鍵頁面。既然商品詳情頁很大程度影響了商品的轉化率，也是直接決定交易能否達成的關鍵因素，如何規(guī)劃好商品詳情頁，去抓住消費者的心理成為了關鍵。一個完整的商品詳情一般規(guī)劃如下：一.形象展示一般放在最上面，用一張圖片和簡短文案來展示你在賣什么。當然也可以把賣點中的風格理念或促銷導購寫到這里來，但是文案不宣過長。圖6-4形象展示區(qū)域二.促銷導購可以包含收藏關注和滿減換購等優(yōu)惠信息。圖6-5促銷導購區(qū)域三.關聯(lián)信息主要體現(xiàn)產(chǎn)品的關聯(lián)營銷產(chǎn)品，以及套餐搭配價格。圖6-6關聯(lián)信息區(qū)域四.產(chǎn)品信息商品的單品海報和功能介紹，還可以包含商品的主要功能、基本參數(shù)、顏色和尺碼規(guī)格等信息。圖6-7產(chǎn)品信息區(qū)域五.適用范圍包含使用人群或環(huán)境。數(shù)量根據(jù)實際需求而定，但不宜過多。圖6-8適用范圍區(qū)域六.詳情展示詳情展示是一個詳情頁最重要的部分，要精準地描述出商品的全部優(yōu)點、賣點。賣點可以夾雜在詳情頁各個地方體現(xiàn)。這才設計之初，就要先把賣點提煉總結出來，然后美工和運營人員根據(jù)排版的樣式安排在詳情頁不同位置。以玩具為例，包含設計細節(jié)解析、設計理念、適合群體、材質(zhì)賣點、工藝賣點等等。圖6-9詳情展示區(qū)域七.細節(jié)展示細節(jié)展示部分，讓買家從更多更細的方面深入了解到商品的價值，加深購買的決心。圖6-10細節(jié)展示區(qū)域八、PK對比這個版塊就是進行一個產(chǎn)品對比的過程，適用于同質(zhì)化比較多的商品。圖6-11PK對比區(qū)域九、購物須知主要告知郵資、物流、退換貨以及售后問題等。圖6-12購物須知區(qū)域十.品牌文化對店鋪或者商品品牌的企業(yè)文化做簡要介紹，提升自我形象，讓買家認同和接受產(chǎn)品、店家乃至品牌。圖6-13品牌文化區(qū)域商品詳情頁所包含的內(nèi)容以及其規(guī)劃基本如上述介紹。但在實際應用中，都會存在板塊的增減或者位置排序變化的可能，這還需根據(jù)實際情況適時調(diào)整。以上板塊均為基礎板塊，每個板塊卻都非常的重要，在以下的課程中我們會列舉部分板塊來做重點介紹。任務25商品場景圖設計展現(xiàn)商品場景圖，完整地說，叫做商品應用場景圖，指一個商品被使用的時候，用戶“最可能的”所處場景，是一種更接地氣的分析和描述用戶需求的方法。場景包括時間、空間、設備支持、社交及用戶情緒等多個方面，進行應用場景的判斷和描述的時候，應盡量把這些方面都考慮周到。心理學知識顯示，當用戶具有某種需求時，會嘗試各種手段來進行自我滿足。經(jīng)濟發(fā)展到一定程度上，人民生活中的講究更多，講究很大一部分表現(xiàn)在，對于貫穿成為生活的場景更為講究、提出更高、更專門的要求。因此，對于一個商品，單純地用文字說好不好用，和用各種精美的整體圖、細節(jié)圖展現(xiàn)它，都是不足以體現(xiàn)商品價值的，還需要設計使用情景，加以情景模擬，幫助消費者進行對產(chǎn)品使用體驗的理解，讓消費者更直觀地看到商品的價值，這在商品交易的促成當中起著較為重要的作用。如何給店鋪內(nèi)的商品設計搭配合適的場景圖，非常的關鍵，必須精準地體現(xiàn)商品的功能和價值，全面為促成交易畫上點睛之筆。對于素材的選擇和整體排版的美觀非常重要。下面我們來具體解析一下：【案例一：玩具】步驟1開啟PhotoshopCS6。新建文件為“商品場景圖”，尺寸為寬度790px，高度790px。圖6-14執(zhí)行新建命令步驟2對前景色填充色值R:0G:105B:185，作為背景。圖6-15為背景填色步驟3從素材文件夾拖入“小孩.psd”，位于畫框居中。圖6-16打開素材“小孩.psd”步驟4從“裝飾物件”文件夾拖入若干裝飾圖層，如圖6-17擺放。圖6-17打開素材“裝飾物件”步驟5從素材文件夾拖入“云.psd”，復制并擺放于背景層。圖6-18打開素材“云.psd”步驟6從素材文件夾拖入“裝飾文字.psd”，放置于圖層正上方。圖6-19打開素材“裝飾文字.psd”步驟7從素材文件夾拖入“玩具車.psd”與“玩具遙控器.psd”，完成商品場景圖設計。圖6-20玩具場景圖最終效果【案例二：服裝】步驟1開啟PhotoshopCS6。新建文件為“商品場景圖”，尺寸為寬度800px，高度500px。圖6-21執(zhí)行新建命令步驟2從素材文件夾拖入“小孩.psd”，位于畫框居中。圖6-22打開素材“小孩”步驟3從“天空背景.jpg”文件拖入圖層，如圖6-23擺放。圖6-23打開素材“天空北京”步驟4使用文字工具輸入“fantasyrainbow”等字，并添加圖層選項-投影效果，最終效果如下。圖6-24最終效果課后任務：1.挑選任意商品，類似下圖“作業(yè)素材-商品場景”做一個場景搭配圖，可搭配文字。圖6-25作業(yè)素材-商品場景2.挑選“優(yōu)品食代”的商品，并設計一個場景體驗圖。風格及表現(xiàn)手法不限。任務26競品對比設計展現(xiàn)人類的欲望是無止盡的，對美的追求也一直是人類的基本欲念，但是人們又無法清晰的描述出自己想要的是什么，比如沒有出現(xiàn)飛機或者汽車的時候，人們還只是在尋找一匹更快的馬。所以，設計師需要的是用視覺效果去告訴買家，你的商品為什么是美的、是好的，別人的東西跟你的具體差距在哪里。競品分析很重要，但競品之間的對比在虛擬世界里，就只能用圖文的方式來展示。揚長避短，集中優(yōu)勢，以強調(diào)和形成自身商品的核心競爭力，最終達到促成交易的目的。一般來說，主要從兩方面拍攝和設計解析對比：1.拍攝方面來說，應保持商品真實的色彩和質(zhì)感（如圖6-26和圖6-28）。避免曝光過度，色彩過艷，與實際不符（如圖6-27和圖6-29）。圖6-26玩具拍攝效果好圖6-27玩具拍攝效果差圖6-28服裝拍攝效果好圖6-29服裝拍攝效果差2.從設計方面來說，底色及紋飾的選擇很講究，在下列案例中，圖6-30和圖6-32的背景選擇與商品同色系，裝飾圖案也選擇可愛的卡通型圖案，跟商品高度協(xié)調(diào)，增加產(chǎn)品的美感，渲染了意境。而圖6-31和圖6-33中的設計，底色過艷，對比太強烈，文字裝飾方面簡單無新意，整體使得商品檔次降低。圖6-30玩具設計效果好圖6-31玩具設計效果差圖6-32服裝設計效果好圖6-33服裝設計效果差當然，競品對比設計過程中，也有值得特別注意的一點，不宜有對競品方指名道姓、貶低撻伐、文字攻擊等不良行為。良性競爭，才能共同創(chuàng)造良好的商業(yè)網(wǎng)環(huán)境。課后任務：1.運用以上所學知識，如以下范例圖“作業(yè)素材-競品對比”進行設計和規(guī)劃，耳機商品以及背景圖可自行選用，風格及表現(xiàn)手法不限。圖6-34作業(yè)素材-競品對比2.挑選“優(yōu)品食代”的商品圖，進行色調(diào)、構圖和文案排版，使商品更加美觀、時尚。風格及表現(xiàn)手法不限。任務27商品亮點設計展現(xiàn)商品亮點，也就是商品的賣點。所謂賣點，其實就是一個消費理由，最佳的賣點即為最強有力的消費理由。為產(chǎn)品尋找、發(fā)掘、提煉賣點，這已是現(xiàn)代營銷學（廣告學、公關學）的常識。顯然，問題已不在于要不要為產(chǎn)品尋找賣點的問題，而在于怎樣尋找到賣點的問題了。賣點的創(chuàng)意是很多的，人們已經(jīng)在這方面積累了豐富的經(jīng)驗；賣點的創(chuàng)意又是不多的，因為新的賣點往往不是從經(jīng)驗中就可得來的，更不是從簡單的模仿中、借鑒中可以得來的，它需要捕捉、需要發(fā)掘、需要提煉，更需要獨創(chuàng)，每一個獨特的賣點都是突破常規(guī)的結果，其間曲折坎坷、耐人尋味，也給產(chǎn)品賣點的創(chuàng)意平添了幾分神秘（產(chǎn)品的賣點和產(chǎn)品的附加值有相近之處、交叉之點，也是關聯(lián)作用極大的，一般說來，產(chǎn)品的附加值越出色，產(chǎn)品的賣點也就越好挖掘和提煉）。賣點有以下幾個特點：1.具有競爭優(yōu)勢，一眼可區(qū)別出同質(zhì)產(chǎn)品。2.可感知的、明確可轉化為消費者的實際利益。3.適合消費群心理。在商品詳情頁里，賣點對產(chǎn)品轉化率具有重要的影響，因此從設計上著重展現(xiàn)商品亮點也是一項很重要的任務。例如：產(chǎn)品的細節(jié)、特點、材質(zhì)等等?！景咐唬和婢摺?.細節(jié)，突出細節(jié)質(zhì)感，體現(xiàn)商品本身設計人性化，細心周到，給予買家溫暖體貼的感受，引導買家更直觀的聚焦。圖6-35玩具亮點設計12.特點，在商品詳情頁的靠前部分，展現(xiàn)商品與眾不同的獨特之處，全面提升商品的價值度。圖6-36玩具亮點設計23.材質(zhì)，在生活品質(zhì)高度提升的現(xiàn)代社會，人們更多追求高品質(zhì)的、安全的事物，因此，商品材質(zhì)常常為人們所關心，我們需要對材質(zhì)、工藝等方面進行介紹，以消除買家此方面的顧慮，放心購買。圖6-37玩具亮點設計3圖6-38玩具亮點兩點設計3（文件夾內(nèi)含PSD文件與圖片文件）課后任務：1.按以下范例圖“作業(yè)素材-亮點設計”進行設計和規(guī)劃，鼠標商品以及背景圖可自行選用，文字可沿用，風格及表現(xiàn)手法不限。圖6-39作業(yè)素材-亮點設計2.挑選“優(yōu)品食代”的商品細節(jié)圖，進行設計排版，使細節(jié)功能更加突出。風格及表現(xiàn)手法不限。任務28購物須知設計購物須知也可以稱為購物聲明，其作用主要有兩點，一是讓賣家對商品銷售規(guī)則及售后事項做預先描述，避免一些前期麻煩和后期問題。二是讓買家清楚地了解到商品情況、售后服務、快遞物流及包裝等等方面的信息。當然，在所展示的內(nèi)容中，須盡可能地明確闡述自己的產(chǎn)品質(zhì)量、售后服務條款，不發(fā)布虛假信息，無欺詐消費者的行為，同時具備完善的商家信譽評估體系和健全的用戶信息安全保證措施，最大可能保證買家的利益。一般購物須知都有以下幾個項目：1.關于產(chǎn)品2.關于質(zhì)量3.關于尺寸4.關于色差5.關于產(chǎn)品退換問題6.發(fā)貨問題；為了增強互動感，我們可以采用買賣家對答的形式進行制作：步驟1開啟PhotoshopCS6。新建文件為“購物須知”，尺寸為寬度750px，高度500-1000px。圖6-40執(zhí)行“新建”命令步驟2按照規(guī)劃好的分區(qū)，用輔助線劃分六個板塊，方便后期排版。圖6-41劃分區(qū)域步驟3使用文字工具分段輸入預先編寫好的文字；圖6-42輸入對應文字步驟4使用文字工具標注好每個塊的序列號，方便買家閱覽。圖6-43輸入對應編號順序步驟5打開圖層，如圖6-44，調(diào)整不透明度為10%；并擺放至如圖所示的位置。圖6-44對順序數(shù)字進行處理步驟6為了使購物須知更加直觀，可從專業(yè)素材網(wǎng)站下載一些對應圖標，分別對相應的欄目進行修飾。圖6-45購物須知設計最終效果課后任務：1.按本任務進行設計和規(guī)劃，圖標可自行尋找和下載，文字可沿用，學習和熟悉購物須知的作用。圖6-46作業(yè)素材-購物須知2.為“優(yōu)品食代”的設計一套購物須知。風格及表現(xiàn)手法不限。任務29用戶評價區(qū)域設計在淘寶網(wǎng)上交易成功后，買賣雙方均有對該筆交易做出評價的權利，評價區(qū)顯示的內(nèi)容，是淘寶網(wǎng)用戶誠信度的重要標尺，也是新的買家對賣家資質(zhì)進行判斷的一個重要標準。其重要意義主要體現(xiàn)在以下兩點：1.隨著交易數(shù)目的不斷增加，買家滿意度的不斷提高，賣家獲得的信用積分也就會越來越高。這一點對于賣家來說尤為重要，來自買家的信用評價可以體現(xiàn)賣家的歷史交易情況以及買家的滿意度等，而其他買家在購買時，通過賣家的信用就可以客觀地了解到該商品的交易情況并決定是否購買。2.一般來說，如果買家給予了好評，那么說明賣家的商品質(zhì)量、服務態(tài)度都比較放心；如果給予了中評或差評，就說明買家對商品質(zhì)量、服務態(tài)度或者發(fā)貨進度等方面不夠滿意。因此，做足一切的優(yōu)質(zhì)服務，引導買家在交易完成后對賣家進行好評，和對新顧客展示已有的老顧客好評信息，都顯得至關重要。當支付寶軟件系統(tǒng)下一筆交易的顯示狀態(tài)應為“交易成功”，在交易成功后買家可以直接進行評價或者在交易成功的15天內(nèi)，買家可以登陸“我的淘寶”>>“我是買家（我是賣家）”>>“已買入的寶貝（已賣出