電商設(shè)計(jì)電子課件

第6章商品詳情頁(yè)設(shè)計(jì)本章介紹：商品詳情頁(yè)設(shè)計(jì)是電商設(shè)計(jì)任務(wù)中的綜合型工作任務(wù)，通過(guò)精心設(shè)計(jì)的商品詳情頁(yè)能夠提升用戶(hù)對(duì)商品的購(gòu)買(mǎi)欲望。本章針對(duì)商品詳情頁(yè)的基本概念和設(shè)計(jì)模塊等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的商品詳情頁(yè)進(jìn)行設(shè)計(jì)演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)商品詳情頁(yè)的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握商品詳情頁(yè)的設(shè)計(jì)規(guī)范和制作方法，成功制作出具有購(gòu)買(mǎi)欲望的商品詳情頁(yè)。了解商品詳情頁(yè)的基本概念明確商品詳情頁(yè)的模塊結(jié)構(gòu)學(xué)習(xí)目標(biāo)6.1商品詳情頁(yè)的基本概述商品詳情頁(yè)即店鋪向消費(fèi)者展示商品詳細(xì)信息，令消費(fèi)者產(chǎn)生消費(fèi)的頁(yè)面，電商詳情頁(yè)具有展現(xiàn)產(chǎn)品內(nèi)容、達(dá)成產(chǎn)品轉(zhuǎn)化的功能作用。由于消費(fèi)者在虛擬網(wǎng)絡(luò)中，只能通過(guò)詳情頁(yè)了解到商品，因此詳情頁(yè)的質(zhì)量對(duì)商品的銷(xiāo)售量有著決定性作用。6.2商品海報(bào)設(shè)計(jì)商品海報(bào)的基本概念商品海報(bào)的設(shè)計(jì)規(guī)則課堂案例-中秋月餅商品海報(bào)設(shè)計(jì)商品海報(bào)即詳情頁(yè)中的商品Banner，通常位于詳情頁(yè)中商品描述信息下方，類(lèi)似于店鋪首頁(yè)的輪播海報(bào)，主要用于令詳情頁(yè)中的商品更加吸引消費(fèi)者，更好地展示商品優(yōu)勢(shì)。優(yōu)秀的商品海報(bào)會(huì)起到場(chǎng)景代入、體現(xiàn)真實(shí)的作用。6.2.1商品海報(bào)的基本概念商業(yè)海報(bào)效果圖商品焦點(diǎn)圖可以根據(jù)平臺(tái)分為兩類(lèi)，一類(lèi)以淘寶為代表，寬750像素的焦點(diǎn)圖，另一類(lèi)以京東和天貓為代表的，寬790像素的焦點(diǎn)圖，兩者高度不限，通常建議為950像素。在進(jìn)行這兩主標(biāo)題字號(hào)建議在60-70像素，副標(biāo)題字號(hào)建議在40-50像素，文字?jǐn)⑹鲎痔?hào)建議在25-30像素。6.2.2商品海報(bào)的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果。6.2.3課堂案例-中秋月餅商品海報(bào)設(shè)計(jì)效果圖6.3賣(mài)點(diǎn)提煉設(shè)計(jì)賣(mài)點(diǎn)提煉的基本概念賣(mài)點(diǎn)提煉的設(shè)計(jì)規(guī)則課堂案例-中秋月餅賣(mài)點(diǎn)提煉設(shè)計(jì)6.3.1賣(mài)點(diǎn)提煉的基本概念賣(mài)點(diǎn)提煉即商品特點(diǎn)和消費(fèi)者痛點(diǎn)的提煉，通常位于商品焦點(diǎn)圖下方或同商品焦點(diǎn)圖組合，主要用于向消費(fèi)者展示商品獨(dú)特之處，令其產(chǎn)生購(gòu)買(mǎi)欲望。賣(mài)點(diǎn)提煉的精準(zhǔn)會(huì)起到展示產(chǎn)品賣(mài)點(diǎn)、挖掘用戶(hù)需求的作用。賣(mài)點(diǎn)展示圖賣(mài)點(diǎn)提煉中的文本簡(jiǎn)短且應(yīng)具有說(shuō)服力，建議使用30-40像素的黑體類(lèi)型。圖標(biāo)醒目且應(yīng)和賣(mài)點(diǎn)呼應(yīng)。6.3.2賣(mài)點(diǎn)提煉的設(shè)計(jì)規(guī)則

使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“橢圓”工具繪制基本形狀，使用“創(chuàng)建新的填充或調(diào)整圖層”命令為圖像校色。6.3.3

課堂案例-中秋月餅賣(mài)點(diǎn)提煉設(shè)計(jì)效果圖6.4商品展示設(shè)計(jì)商品展示的基本概念商品展示的設(shè)計(jì)規(guī)則課堂案例-中秋月餅商品展示設(shè)計(jì)商品展示即展示商品的內(nèi)容，通常位于賣(mài)點(diǎn)提煉下方，通常是3-5張圖片組成，實(shí)現(xiàn)一屏一賣(mài)點(diǎn)，進(jìn)一步起到展示產(chǎn)品優(yōu)勢(shì)、呈現(xiàn)產(chǎn)品功能的作用。6.4.1商品展示的基本概念商品展示

商品展示的設(shè)計(jì)要點(diǎn)可以參考商品焦點(diǎn)圖的設(shè)計(jì)要點(diǎn)進(jìn)行。需要注意的是，因?yàn)樯唐氛故具@一模塊通常有3-5張圖片，所以商品的角度和背景既要統(tǒng)一又要有角度等區(qū)別，以免給消費(fèi)者帶來(lái)視覺(jué)疲勞。6.4.2商品展示的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“橢圓”工具繪制基本形狀，使用創(chuàng)建剪貼蒙版命令實(shí)現(xiàn)中秋月餅商品展示。6.4.3課堂案例-中秋月餅商品展示設(shè)計(jì)效果圖6.5

細(xì)節(jié)展示設(shè)計(jì)細(xì)節(jié)展示的基本概念細(xì)節(jié)展示的設(shè)計(jì)規(guī)則課堂案例-中秋月餅細(xì)節(jié)展示設(shè)計(jì)

細(xì)節(jié)展示通常位于賣(mài)點(diǎn)提煉或商品展示下方，是可以讓消費(fèi)者深入了解商品的重要模塊。下面對(duì)細(xì)節(jié)展示的設(shè)計(jì)知識(shí)內(nèi)容進(jìn)行詳細(xì)地講解。6.5細(xì)節(jié)展示設(shè)計(jì)

細(xì)節(jié)展示即商品的細(xì)節(jié)放大圖，通常位于賣(mài)點(diǎn)提煉或商品展示下方，將商品細(xì)節(jié)進(jìn)行最大限度的展示，可以使消費(fèi)者更加信任商品。優(yōu)秀的細(xì)節(jié)展示可以起到剖析商品特點(diǎn)、深入了解商品的作用。6.5.1細(xì)節(jié)展示的基本概念細(xì)節(jié)展示效果圖細(xì)節(jié)展示在設(shè)計(jì)時(shí)不易太過(guò)復(fù)雜，整體應(yīng)呈現(xiàn)簡(jiǎn)潔效果。如果商品帶有背景，建議為淺色，可以保證細(xì)節(jié)圖的展示。6.5.2細(xì)節(jié)展示的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建新的填充或調(diào)整圖層”命令為圖像校色，使用創(chuàng)建剪貼蒙版命令實(shí)現(xiàn)中秋月餅細(xì)節(jié)展示。6.5.3課堂案例-中秋月餅細(xì)節(jié)展示設(shè)計(jì)效果圖6.6商品信息設(shè)計(jì)商品信息的基本概念商品信息的設(shè)計(jì)規(guī)則課堂案例-中秋月餅商品信息設(shè)計(jì)商品信息即商品的真實(shí)數(shù)據(jù)，通常位于賣(mài)點(diǎn)提煉或細(xì)節(jié)展示下方。網(wǎng)店美工人員需要將商品的尺寸、顏色等內(nèi)容充分展示給消費(fèi)者，以起到全面介紹商品、引導(dǎo)消費(fèi)者了解的作用。6.6.1商品信息的基本概念商品信息展示

商品信息在設(shè)計(jì)時(shí)需要將大量的數(shù)據(jù)歸類(lèi)整理，以圖表的形式表現(xiàn)出來(lái)，令消費(fèi)者可以直觀的了解到商品信息。6.6.2商品信息的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“直線”工具繪制基本形狀。6.6.3課堂案例-中秋月餅商品信息設(shè)計(jì)切圖優(yōu)化6.7其他模塊設(shè)計(jì)其他模塊的基本概念其他模塊的設(shè)計(jì)規(guī)則課堂案例-中秋月餅其他模塊設(shè)計(jì)需要網(wǎng)店美工人員重點(diǎn)設(shè)計(jì)的除了以上幾個(gè)模塊之外，還有包括質(zhì)量保證、品牌實(shí)力和快遞售后等其他模塊。這些模塊通常位于詳情頁(yè)底部，在最后時(shí)刻完成著促成購(gòu)買(mǎi)的艱巨任務(wù)。下面對(duì)其他模塊的設(shè)計(jì)知識(shí)內(nèi)容進(jìn)行詳細(xì)地講解。6.7其他模塊設(shè)計(jì)

質(zhì)量保證、品牌實(shí)力和快遞售后等其他模塊通常位于詳情頁(yè)底部，這些模塊都在不同程度上為消費(fèi)者購(gòu)買(mǎi)商品打消疑慮、加強(qiáng)信心。質(zhì)量保證即展示商品的相關(guān)證書(shū)，起到承諾產(chǎn)品質(zhì)量、增強(qiáng)消費(fèi)者信賴(lài)的作用。6.7.1其他模塊的基本概念其他模塊其他模塊在設(shè)計(jì)時(shí)由于整個(gè)頁(yè)面接近于尾聲，消費(fèi)者觀看時(shí)多少會(huì)產(chǎn)生視覺(jué)疲憊感，因此在設(shè)計(jì)時(shí)一定要突出該模塊的重點(diǎn)，以簡(jiǎn)潔醒目為主，不然容易讓消費(fèi)者產(chǎn)生不耐煩的負(fù)面情緒。6.7.2其他模塊的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字