電商視覺設(shè)計(jì)課件 第5章 商品詳情頁設(shè)計(jì)

第5章商品詳情頁設(shè)計(jì)本章介紹：商品詳情頁設(shè)計(jì)是電商視覺設(shè)計(jì)任務(wù)中的綜合型工作任務(wù)，精心設(shè)計(jì)的商品詳情頁能夠提升消費(fèi)者對(duì)商品的購買欲望。本章針對(duì)商品詳情頁的基本概念和模塊結(jié)構(gòu)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的商品詳情頁進(jìn)行設(shè)計(jì)演練。通過本章的學(xué)習(xí)，讀者可以對(duì)商品詳情頁的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握商品詳情頁的設(shè)計(jì)規(guī)范和制作方法，成功制作出具有購買欲望的商品詳情頁。了解商品詳情頁的基本概念明確商品詳情頁的模塊結(jié)構(gòu)知識(shí)目標(biāo)明確商品詳情頁的設(shè)計(jì)思路掌握商品詳情頁的制作方法能力目標(biāo)培養(yǎng)良好的商品詳情頁設(shè)計(jì)的操作培養(yǎng)對(duì)商品詳情頁的審美鑒賞能力培養(yǎng)對(duì)商品詳情頁的設(shè)計(jì)創(chuàng)意能力素質(zhì)目標(biāo)5.1商品詳情頁概述PC端商品詳情頁，一類是以淘寶為代表，寬度為750像素的詳情頁，另一類以京東和天貓為代表，寬度為790像素的詳情頁，兩者高度不限，其設(shè)計(jì)模塊可以根據(jù)商家的不同需要進(jìn)行組合變化。商品詳情頁的核心模塊通常由商品焦點(diǎn)圖、賣點(diǎn)提煉、商品展示、細(xì)節(jié)展示、商品信息和其他模塊構(gòu)成。商品詳情頁的核心模塊5.2商品海報(bào)設(shè)計(jì)商品海報(bào)的定義商品海報(bào)的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)中秋月餅商品海報(bào)商品海報(bào)即詳情頁中的商品Banner，通常位于詳情頁中商品描述信息下方，類似于店鋪首頁的輪播海報(bào)，主要用于更好地展示商品優(yōu)勢(shì)，從而吸引更多消費(fèi)者的關(guān)注。優(yōu)秀的商品海報(bào)會(huì)起到場(chǎng)景代入、體現(xiàn)真實(shí)的作用。5.2.1商品海報(bào)的定義商品海報(bào)

商品焦點(diǎn)圖可以根據(jù)平臺(tái)分為兩類，一類是以淘寶為代表的，寬750像素的焦點(diǎn)圖，另一類以京東和天貓為代表的，寬790像素的焦點(diǎn)圖，兩者高度不限，通常建議為950像素。這兩類主標(biāo)題字號(hào)建議為60～70像素，副標(biāo)題字號(hào)建議為40～50像素，敘述性文字字號(hào)建議為25～30像素。5.2.2商品海報(bào)的設(shè)計(jì)規(guī)則

使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果。5.2.3?應(yīng)用案例——設(shè)計(jì)中秋月餅商品海報(bào)效果圖賣點(diǎn)提煉的定義賣點(diǎn)提煉的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)中秋月餅賣點(diǎn)提煉5.3賣點(diǎn)提煉設(shè)計(jì)賣點(diǎn)提煉即商品特點(diǎn)和消費(fèi)者痛點(diǎn)的提煉，通常位于商品焦點(diǎn)圖下方或同商品焦點(diǎn)圖組合出現(xiàn)，主要用于向消費(fèi)者展示商品獨(dú)特之處，令其產(chǎn)生購買欲望。賣點(diǎn)提煉得精準(zhǔn)，能起到展示產(chǎn)品特點(diǎn)、挖掘用戶需求的作用。5.3.1賣點(diǎn)提煉的定義賣點(diǎn)提煉5.3.2賣點(diǎn)提煉的設(shè)計(jì)規(guī)則賣點(diǎn)提煉中的文本應(yīng)簡短且具有說服力，應(yīng)突出商品的主要特點(diǎn)和優(yōu)勢(shì)，如品質(zhì)、功能和性能等，建議使用30～40像素的黑體。賣點(diǎn)提煉中的圖標(biāo)應(yīng)醒目且和賣點(diǎn)呼應(yīng)，將商品的賣點(diǎn)以易于掃視的方式呈現(xiàn)。使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“橢圓”工具繪制基本形狀，使用“創(chuàng)建新的填充或調(diào)整圖層”命令為圖像校色。5.3.3應(yīng)用案例——設(shè)計(jì)中秋月餅賣點(diǎn)提煉效果圖商品展示的定義商品展示的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)中秋月餅商品展示5.4?商品展示設(shè)計(jì)商品展示即展示商品的內(nèi)容，通常位于賣點(diǎn)提煉下方，由3～5張圖片組成，通過“一屏一賣點(diǎn)”，進(jìn)一步展示商品優(yōu)勢(shì)、呈現(xiàn)商品功能。5.4.1?商品展示的定義商品展示5.4.2?商品展示的設(shè)計(jì)規(guī)則商品展示的設(shè)計(jì)要點(diǎn)可以參考商品焦點(diǎn)圖的設(shè)計(jì)要點(diǎn)進(jìn)行。需要注意的是，因?yàn)樯唐氛故具@一模塊通常有3～5張圖片，所以商品的角度和背景既要整體統(tǒng)一又要有局部的區(qū)別，以免給消費(fèi)者帶來視覺疲勞。使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“橢圓”工具繪制基本形狀，使用創(chuàng)建剪貼蒙版命令實(shí)現(xiàn)中秋月餅商品展示。5.4.3?應(yīng)用案例——設(shè)計(jì)中秋月餅商品展示效果圖細(xì)節(jié)展示的定義細(xì)節(jié)展示的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)中秋月餅細(xì)節(jié)展示5.5?細(xì)節(jié)展示設(shè)計(jì)細(xì)節(jié)展示即商品的細(xì)節(jié)放大圖，通常位于賣點(diǎn)提煉或商品展示下方，將商品細(xì)節(jié)進(jìn)行最大限度的展示，可以使消費(fèi)者更加信任商品。優(yōu)秀的細(xì)節(jié)展示可以起到深入剖析商品特點(diǎn)、彰顯商品品質(zhì)的作用。5.5.1?細(xì)節(jié)展示的定義細(xì)節(jié)展示5.5.2?細(xì)節(jié)展示的設(shè)計(jì)規(guī)則在設(shè)計(jì)細(xì)節(jié)展示時(shí)，需要采用高質(zhì)量的商品圖片，確保圖片清晰并帶有多種視角，便于消費(fèi)者通過不同角度查看商品的細(xì)節(jié)。同時(shí)設(shè)計(jì)不宜太過復(fù)雜，整體應(yīng)呈現(xiàn)簡潔效果。如果商品圖片本身帶有背景，建議選擇淺色背景，以保證細(xì)節(jié)圖的完美展示。使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建新的填充或調(diào)整圖層”命令為圖像校色，使用創(chuàng)建剪貼蒙版命令實(shí)現(xiàn)中秋月餅細(xì)節(jié)展示。5.5.3?應(yīng)用案例——設(shè)計(jì)中秋月餅細(xì)節(jié)展示效果圖商品信息的定義商品信息的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)中秋月餅商品信息5.6?商品信息設(shè)計(jì)商品信息即商品的真實(shí)數(shù)據(jù)，通常位于賣點(diǎn)提煉或細(xì)節(jié)展示下方。電商視覺設(shè)計(jì)師需要將商品的真實(shí)尺寸、參數(shù)和顏色等數(shù)據(jù)充分展示給消費(fèi)者，以起到全面介紹商品、引導(dǎo)消費(fèi)者了解的作用。5.6.1?商品信息的定義商品信息5.6.2?商品信息的設(shè)計(jì)規(guī)則商品信息在設(shè)計(jì)時(shí)需要將大量的數(shù)據(jù)歸類整理，以圖表的形式表現(xiàn)出來，提供商品的詳細(xì)數(shù)據(jù)，包括尺寸、參數(shù)和顏色等信息。提供準(zhǔn)確、清晰的商品信息，可以令消費(fèi)者更直觀地了解到商品。使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“直線”工具繪制基本形狀。5.6.3?應(yīng)用案例——設(shè)計(jì)中秋月餅商品信息效果圖其他模塊的定義其他模塊的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)中秋月餅其他模塊5.7?其他模塊設(shè)計(jì)質(zhì)量保證、品牌實(shí)力和快遞售后等其他模塊通常位于商品詳情頁底部，這些模塊都在不同程度上為消費(fèi)者購買商品打消了疑慮、增強(qiáng)了信心。5.7.1?其他模塊的定義其他模塊5.7.2?其他模塊的設(shè)計(jì)規(guī)則由于其他模塊在整個(gè)商品頁面的尾部，消費(fèi)者觀看這部分時(shí)多少會(huì)產(chǎn)生視覺疲勞，因此電商視覺設(shè)計(jì)師在設(shè)計(jì)時(shí)一定要突出這些模塊的重點(diǎn)，以簡潔醒目為主，避免讓消費(fèi)者產(chǎn)生不耐煩的負(fù)面情緒。使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具繪制基本形狀。5.7.3?應(yīng)用案例——設(shè)計(jì)中秋月餅其他模塊效果圖使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“添加圖層樣