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

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

課堂案例-中秋月餅賣點提煉設計效果圖6.4商品展示設計商品展示的基本概念商品展示的設計規則課堂案例-中秋月餅商品展示設計商品展示即展示商品的內容，通常位于賣點提煉下方，通常是3-5張圖片組成，實現一屏一賣點，進一步起到展示產品優勢、呈現產品功能的作用。6.4.1商品展示的基本概念商品展示

商品展示的設計要點可以參考商品焦點圖的設計要點進行。需要注意的是，因為商品展示這一模塊通常有3-5張圖片，所以商品的角度和背景既要統一又要有角度等區別，以免給消費者帶來視覺疲勞。6.4.2商品展示的設計規則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“橢圓”工具繪制基本形狀，使用創建剪貼蒙版命令實現中秋月餅商品展示。6.4.3課堂案例-中秋月餅商品展示設計效果圖6.5

細節展示設計細節展示的基本概念細節展示的設計規則課堂案例-中秋月餅細節展示設計

細節展示通常位于賣點提煉或商品展示下方，是可以讓消費者深入了解商品的重要模塊。下面對細節展示的設計知識內容進行詳細地講解。6.5細節展示設計

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

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

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