淘寶天貓網(wǎng)店美工實戰(zhàn)--視覺設(shè)計+店鋪裝修+移動端店鋪（微課版）第7章制作PC端商品詳情頁目錄Contents7.1認(rèn)識商品詳情頁7.2焦點圖的制作7.3賣點圖的制作7.4信息展示圖的制作7.5細(xì)節(jié)圖的制作7.6課堂實訓(xùn)——制作女包的商品詳情頁7.1.1商品詳情頁的制作要點商品詳情頁的模塊需要根據(jù)商品特點進行策劃。商品詳情頁的內(nèi)容要引發(fā)消費者的興趣，在制作時需要把握以下3點。引發(fā)興趣、激發(fā)潛在需求贏得消費者信任促進消費者下單7.1.2商品詳情頁的制作思路及準(zhǔn)備工作商品詳情頁是商品展示的重中之重，下面通過5個步驟來理解商品詳情頁的制作思路及準(zhǔn)備工作。商品定位制作商品詳情頁應(yīng)以商品本身作為前提調(diào)查與分析商品商品賣點的挖掘進行商品詳情頁的制作目錄Contents7.1認(rèn)識商品詳情頁7.2焦點圖的制作7.3賣點圖的制作7.4信息展示圖的制作7.5細(xì)節(jié)圖的制作7.6課堂實訓(xùn)——制作女包的商品詳情頁7.2.1焦點圖的設(shè)計要點焦點圖就是商品詳情頁的第一張主形象圖，是顏值擔(dān)當(dāng)，也是該款商品留給消費者的第一印象。在設(shè)計商品詳情頁焦點圖時，可以結(jié)合以下幾個切入點來打造具有吸引力的視覺焦點圖。消費者需求商品賣點氛圍烘托場景帶入商品詳情頁焦點圖的設(shè)計切入點7.2.1焦點圖的設(shè)計要點以消費者需求為設(shè)計切入點以商品賣點為設(shè)計切入點以氛圍烘托為設(shè)計切入點以場景帶入為設(shè)計切入點7.2.1焦點圖的設(shè)計要點焦點圖中的視覺組成包含文案、背景、商品圖片或模特，在設(shè)計時應(yīng)注意以下幾點。詳情頁頁面的寬度有限，焦點圖的畫面構(gòu)圖一般應(yīng)為上下結(jié)構(gòu)。焦點圖中必須存在商品主體，且最好只有一個。焦點圖中的文案以商品特點展示為主，主要包括標(biāo)題和描述性文案。標(biāo)題文案的內(nèi)容應(yīng)盡量簡短、干練。7.2.2制作焦點圖本例以芒果為主體的焦點圖，先構(gòu)建焦點圖的背景，讓整個效果充滿清新自然感，再添加說明性文字，讓畫面更加美觀，其具體操作如下。1繪制形狀2添加漸變疊加3添加素材7.2.2制作焦點圖6制作橫條4設(shè)置圖層混合模式7輸入文字5添加投影7.2.2制作焦點圖8添加描邊10變形文字9輸入其他文字7.2.2制作焦點圖13輸入文字11繪制形狀14設(shè)置色階值并查看12添加圖層蒙版并制作斑點目錄Contents7.1認(rèn)識商品詳情頁7.2焦點圖的制作7.3賣點圖的制作7.4信息展示圖的制作7.5細(xì)節(jié)圖的制作7.6課堂實訓(xùn)——制作女包的商品詳情頁7.3.1賣點圖的制作要點所謂賣點，就是商品的材質(zhì)、款式、功能及外觀中能夠提升消費者對商品的利益、效用感受的特點。賣點視覺化的主要設(shè)計原則是圖文搭配，即以簡明扼要的文案說明商品賣點，同時配以惟妙惟肖的商品圖片，以增強消費者對商品賣點的切身感受。賣點圖的視覺展現(xiàn)7.3.2制作賣點圖本例將制作芒果的賣點圖，在制作時先制作標(biāo)題欄，再通過單個的芒果展現(xiàn)讓多汁、美味、新鮮等賣點在幾張短短的圖片中體現(xiàn)出來，吸引消費者繼續(xù)瀏覽，從而促進下單。其具體操作如下。1制作標(biāo)題欄7.3.2制作賣點圖2繪制形狀并添加素材3添加素材4繪制正圓并輸入文字7.3.2制作賣點圖6添加芒果的其他素材并輸入文字5添加其他素材并輸入文字7.3.2制作賣點圖7查看完成后的效果目錄Contents7.1認(rèn)識商品詳情頁7.2焦點圖的制作7.3賣點圖的制作7.4信息展示圖的制作7.5細(xì)節(jié)圖的制作7.6課堂實訓(xùn)——制作女包的商品詳情頁7.4.1信息展示圖的設(shè)計要點信息展示的表達方式多種多樣，可以根據(jù)商品參數(shù)的多少與商品的特征靈活設(shè)計，常用的商品參數(shù)表達方式有以下4種。標(biāo)題文本預(yù)設(shè)商品參數(shù)與商品圖片的自由組合直接將商品參數(shù)輸入到同一張或細(xì)化到不同的商品圖片中進行展示。參數(shù)與商品兩欄排當(dāng)商品參數(shù)比較少時，可通過左表右圖或左圖右表的方式設(shè)計商品參數(shù)模塊。商品參數(shù)的直接輸入自由排列輸入的商品參數(shù)，一般需要使用文本框來統(tǒng)一文本的行間距。通欄排參數(shù)商品參數(shù)表可以比較全面地反映出商品的特性、功能和規(guī)格等。7.4.2制作信息展示圖下面將制作芒果的信息展示圖，在制作時沿用展示圖的主色，通過圖片和參數(shù)的展示，讓芒果的基本信息在制作的圖片中進行展現(xiàn)，再通過童趣性的描述，讓展現(xiàn)內(nèi)容全面且更具有吸引力。其具體操作如下。1繪制形狀并添加芒果2輸入文字并繪制直線3繪制形狀并輸入文字4繪制矩形并輸入文字7.4.2制作信息展示圖5輸入文字6完成后的效果目錄Contents7.1認(rèn)識商品詳情頁7.2焦點圖的制作7.3賣點圖的制作7.4信息展示圖的制作7.5細(xì)節(jié)圖的制作7.6課堂實訓(xùn)——制作女包的商品詳情頁7.5.1細(xì)節(jié)圖的制作要點細(xì)節(jié)內(nèi)容的表現(xiàn)形式很豐富，可從功能說明、工藝細(xì)節(jié)、服務(wù)說明等方面入手來進行展示。功能說明細(xì)節(jié)圖服務(wù)說明細(xì)節(jié)圖工藝細(xì)節(jié)圖7.5.2制作細(xì)節(jié)圖下面將制作芒果的細(xì)節(jié)圖，在制作時先展現(xiàn)芒果果園的生長情況，充分體現(xiàn)生產(chǎn)細(xì)節(jié)，再對芒果的吃法和催熟方法進行展現(xiàn)，讓消費者看到芒果的品質(zhì)，并對網(wǎng)店更信任。1制作圖片并輸入文字其具體操作如下。7.5.2制作細(xì)節(jié)圖5制作其他效果4制作催熟效果3添加芒果素材2繪制矩形并輸入文字目錄Contents7.1認(rèn)識商品詳情頁7.2焦點圖的制作7.3賣點圖的制作7.4信息展示圖的制作7.5細(xì)節(jié)圖的制作7.6課堂實訓(xùn)——制作女包的商品詳情頁7.6課堂實訓(xùn)——制作女包的商品詳情頁本例將根據(jù)提供的素材文件制作女包的商品詳情頁。女包的商品詳情頁劃分為焦點圖、信息展示圖、賣點圖和細(xì)節(jié)圖4個部分，每個部分都在遵循商品時尚簡約風(fēng)格的基礎(chǔ)上進行設(shè)計。如圖所示為其參考效果。實訓(xùn)目標(biāo)7.6課堂實訓(xùn)——制作女包的商品詳情頁實訓(xùn)思路根據(jù)實訓(xùn)目標(biāo)，需要分別制作焦點圖、信息展示圖、賣點圖和細(xì)節(jié)圖4個部分。（1）定位商品詳情頁風(fēng)格。在遵循商品詳情頁頁面邏輯結(jié)構(gòu)的基礎(chǔ)上，結(jié)合商品時尚簡約的特點，以簡潔、大方的設(shè)計風(fēng)格為主。選取白色作為主色，以商品中的灰色作為輔色，以黑色、橙色等作為點綴色。（2）商品焦點圖視覺設(shè)計。以中心構(gòu)圖為主，在畫面中心放置商品正面白底圖作為焦點，以淺灰色作為背景。然后在商品上方添加商品文案賣點，并搭配形狀、配飾等設(shè)計元素豐富畫面。7.6課堂實訓(xùn)——制作女包的商品詳情頁實訓(xùn)思路（3）商品信息展示圖視覺設(shè)計。用兩欄排列的方式進行參數(shù)設(shè)計，通過淺色文字和深色底紋的搭配來突出商品信息，吸引消費者注意力。再通過標(biāo)注商品尺寸來明確商品的大小，給消費者最直觀的視覺感受。（4）商品賣點圖視覺設(shè)計。