第8章商品詳情頁(yè)設(shè)計(jì)與制作網(wǎng)店美工∣微課版∣8.1∣認(rèn)識(shí)商品詳情頁(yè)內(nèi)容導(dǎo)航8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.4∣信息展示圖的設(shè)計(jì)與制作課堂實(shí)訓(xùn)8.1∣認(rèn)識(shí)商品詳情頁(yè)8.1.1商品詳情頁(yè)的組成部分●焦點(diǎn)圖：焦點(diǎn)圖用于清晰展示商品、突出商品的獨(dú)特優(yōu)勢(shì)，以此吸引消費(fèi)者目光并激發(fā)消費(fèi)者的購(gòu)買(mǎi)欲望?！褓u(mài)點(diǎn)說(shuō)明圖：商品賣(mài)點(diǎn)是基于消費(fèi)者的需求，從商品的使用價(jià)值、外觀、質(zhì)量、規(guī)格、功能、服務(wù)、承諾、榮譽(yù)、品質(zhì)等諸多方面提煉出來(lái)的?！裥畔⒄故緢D：信息展示圖用于展示商品的材質(zhì)、工藝、尺寸、規(guī)格、型號(hào)、成分、顏色等內(nèi)容，加深消費(fèi)者對(duì)商品了解。商品詳情頁(yè)的組成部分比較靈活，主要有以下3種，還可根據(jù)需求添加售后服務(wù)、包裝展示、用戶(hù)評(píng)價(jià)圖。8.1∣認(rèn)識(shí)商品詳情頁(yè)8.1.2商品詳情頁(yè)的規(guī)格與風(fēng)格

商品詳情頁(yè)的寬度≤750像素，高度無(wú)限制（但建議適中以避免頁(yè)面加載緩慢），大小≥3MB，僅支持JPG、JPEG、GIF、PNG格式。商品詳情頁(yè)的頁(yè)面布局應(yīng)簡(jiǎn)潔明了，避免過(guò)多的干擾元素，關(guān)鍵信息（如價(jià)格）應(yīng)放在顯眼的位置。商品詳情頁(yè)使用高清的圖片展示商品細(xì)節(jié)，確保消費(fèi)者能夠清晰地看到商品的每一個(gè)部分；同時(shí)提供詳細(xì)的商品參數(shù)、功能介紹和使用說(shuō)明，展示商品的專(zhuān)業(yè)性和可靠性。8.1∣認(rèn)識(shí)商品詳情頁(yè)8.1.3商品詳情頁(yè)的設(shè)計(jì)要點(diǎn)商品詳情頁(yè)的具體內(nèi)容需要根據(jù)商品特點(diǎn)進(jìn)行策劃?？傊?，商品詳情頁(yè)的內(nèi)容要引發(fā)消費(fèi)者的興趣，在設(shè)計(jì)時(shí)需要把握以下4點(diǎn)。清晰傳達(dá)商品信息01增加消費(fèi)者信任04真實(shí)展示商品02重視布局和可讀性038.1∣認(rèn)識(shí)商品詳情頁(yè)內(nèi)容導(dǎo)航8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.4∣信息展示圖的設(shè)計(jì)與制作課堂實(shí)訓(xùn)8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.2.1焦點(diǎn)圖的設(shè)計(jì)要點(diǎn)焦點(diǎn)圖是商品詳情頁(yè)的第一張主形象圖，也是該款商品留給消費(fèi)者的第一印象。可以結(jié)合以下幾個(gè)切入點(diǎn)來(lái)打造具有吸引力的焦點(diǎn)圖，如下圖所示。消費(fèi)者需求商品賣(mài)點(diǎn)氛圍烘托場(chǎng)景帶入8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.2.2制作焦點(diǎn)圖本例制作以音響為主體的焦點(diǎn)圖，需要先構(gòu)建焦點(diǎn)圖的背景，再添加文案，讓畫(huà)面更加美觀，以提升商品的吸引力。其具體操作如下。01添加素材文件03調(diào)整不透明度02復(fù)制圖層并斜切圖像04設(shè)置高斯模糊參數(shù)8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.2.2制作焦點(diǎn)圖05擦除多余部分07輸入文字并調(diào)整06添加Logo和輸入文字08

設(shè)置斜面和浮雕參數(shù)8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.2.2制作焦點(diǎn)圖09設(shè)置漸變疊加參數(shù)11修改文字的顏色10設(shè)置投影參數(shù)12完成后的效果8.1∣認(rèn)識(shí)商品詳情頁(yè)內(nèi)容導(dǎo)航8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.4∣信息展示圖的設(shè)計(jì)與制作課堂實(shí)訓(xùn)8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.3.1賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)要點(diǎn)所謂賣(mài)點(diǎn)，就是在商品的材質(zhì)、款式、功能及外觀中提煉出的能夠提升消費(fèi)者對(duì)商品價(jià)值和效用認(rèn)知的特點(diǎn)。賣(mài)點(diǎn)視覺(jué)化的重點(diǎn)是將賣(mài)點(diǎn)說(shuō)清楚，注意不要使用太過(guò)夸張的手法進(jìn)行渲染，以免造成賣(mài)點(diǎn)模糊，影響消費(fèi)者對(duì)商品的認(rèn)知。右圖所示的賣(mài)點(diǎn)說(shuō)明圖就是通過(guò)簡(jiǎn)單的文字說(shuō)明，輔以圖片布局來(lái)展現(xiàn)充電器的具體功能。賣(mài)點(diǎn)說(shuō)明圖的視覺(jué)展現(xiàn)8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.3.2制作賣(mài)點(diǎn)說(shuō)明圖下面將制作音響的賣(mài)點(diǎn)說(shuō)明圖，在制作時(shí)可通過(guò)圖文結(jié)合的方式，體現(xiàn)音響的音量大、自定義鬧鐘、音質(zhì)好、防水、功能豐富、語(yǔ)音控制、音樂(lè)量豐富等賣(mài)點(diǎn)，吸引消費(fèi)者繼續(xù)瀏覽。具體操作步驟如下。01添加素材和輸入文字并調(diào)整02復(fù)制、修改文字03繪制圓角矩形和輸入文字并調(diào)整（1）8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.3.2制作賣(mài)點(diǎn)說(shuō)明圖04復(fù)制圓角矩形和文字并修改文字05添加素材并調(diào)整06輸入文字并調(diào)整（1）07復(fù)制并修改文字08輸入文字并調(diào)整（2）09繪制圓角矩形和輸入文字并調(diào)整（2）8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.3.2制作賣(mài)點(diǎn)說(shuō)明圖10繪制形狀11輸入文字并調(diào)整312復(fù)制并修改文字內(nèi)容8.1∣認(rèn)識(shí)商品詳情頁(yè)內(nèi)容導(dǎo)航8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.4∣信息展示圖的設(shè)計(jì)與制作課堂實(shí)訓(xùn)8.4∣信息展示圖的設(shè)計(jì)與制作8.4.1信息展示圖的表達(dá)方式信息展示圖的表達(dá)方式多種多樣，可以根據(jù)商品參數(shù)的多少與商品的特征靈活設(shè)計(jì)，常用的商品參數(shù)表達(dá)方式有以下4種。自由排列輸入01參數(shù)與商品兩欄排04通欄排列參數(shù)02商品參數(shù)與商品圖片自由組合038.4∣信息展示圖的設(shè)計(jì)與制作8.4.2制作信息展示圖下面將制作音響的信息展示圖，在制作時(shí)沿用賣(mài)點(diǎn)說(shuō)明圖的主色，通過(guò)圖片和參數(shù)的展示，分別對(duì)基本參數(shù)、外觀尺寸、按鍵說(shuō)明、包裝清單內(nèi)容進(jìn)行展現(xiàn)。其具體操作如下。01繪制形狀03輸入并調(diào)整文字（2）02輸入并調(diào)整文字（1）8.4∣信息展示圖的設(shè)計(jì)與制作8.4.2制作信息展示圖04輸入并調(diào)整文字（3）05完成后的效果8.1∣認(rèn)識(shí)商品詳情頁(yè)內(nèi)容導(dǎo)航8.2∣焦點(diǎn)圖的設(shè)計(jì)與制作8.3∣賣(mài)點(diǎn)說(shuō)明圖的設(shè)計(jì)與制作8.4∣信息展示圖的設(shè)計(jì)與制作課堂實(shí)訓(xùn)課堂實(shí)訓(xùn)——制作千禧果商品詳情頁(yè)實(shí)訓(xùn)背景農(nóng)家生鮮網(wǎng)店近期主推一款千禧果商品，需要制作包含焦點(diǎn)圖、信息展示圖、賣(mài)點(diǎn)說(shuō)明圖等組成部分的商品詳情頁(yè)。實(shí)訓(xùn)要求要求商品詳情頁(yè)以“香甜千禧果”為標(biāo)題，通過(guò)精美的圖片和詳細(xì)的文字描述展示千禧果的商品介紹、產(chǎn)地直銷(xiāo)、現(xiàn)摘現(xiàn)發(fā)等信息，并對(duì)千禧果的新鮮度、口感和營(yíng)養(yǎng)價(jià)值等賣(mài)點(diǎn)進(jìn)行強(qiáng)調(diào)。參考效果如右圖所示。課堂實(shí)訓(xùn)——制作千禧果商品詳情頁(yè)實(shí)訓(xùn)思路（1）新建大小為“750像素

×6433像素”、分辨率為“72像素/英寸”、名稱(chēng)為“千禧果商品詳情頁(yè)”的文件。（2）制作焦點(diǎn)圖。（3）選擇“圓角矩形工具”，繪制“填充”為“#a69f9f”、大小為“282像素

×79像素”的圓角矩形。（4）選擇“橫排文字工具”，

在工具屬性欄中設(shè)置“字體”為“方正蘭亭黑簡(jiǎn)體”，輸入“香甜千禧果”文字，并調(diào)整文字的大小。（5）使用與步驟（4）相同的方法輸入“立即嘗鮮”文字，調(diào)整文字的大小、位置和顏色。（6）制作信息展示圖。打開(kāi)“商品1.png”～“商品3.png”素材文件。課堂實(shí)訓(xùn)——制作千禧果商品詳情頁(yè)實(shí)訓(xùn)思路（7）選擇“橫排文字工具”，在工具屬性欄中分別設(shè)置“字體”為“方正正大黑簡(jiǎn)體”“方正蘭亭黑簡(jiǎn)體”。（8）選擇“橫排文字工具”，設(shè)置“字體”為“方正蘭亭黑簡(jiǎn)體”，“文本顏色”為“#f30000”，輸入“——ProductDisplay——”文字。（9）打開(kāi)“商品4.png”～“商品6.png”素材文件。（10）選擇“矩形工具”，設(shè)置“填充”為“#ff8601”，在第一張圖片下方繪制大小為“750像素

×150像素”的矩形。（11）使用“矩形工具”，繪制兩個(gè)大小為“258像素

×161像素”的矩形。（12）選擇“橫排文字工具”，在工具屬性欄中設(shè)置“字體”為“方正正纖黑簡(jiǎn)體”。謝謝觀看商品詳情頁(yè)設(shè)計(jì)與制作網(wǎng)店美工∣微課版∣海量圖書(shū)方便查詢(xún)免費(fèi)申請(qǐng)樣書(shū)下載配套資源優(yōu)惠購(gòu)書(shū)成為作