第6章商品詳情頁設計本章介紹：商品詳情頁設計是電商視覺設計任務中的綜合型工作任務，精心設計的商品詳情頁能夠提升消費者對商品的購買欲望。本章針對商品詳情頁的基本概念和設計規則等基礎知識進行系統講解，并針對流行風格與典型行業的商品詳情頁進行設計演練。通過對本章的學習，學生可以對商品詳情頁的設計有一個系統的認識，了解商品詳情頁的設計思路，掌握其制作方法。了解商品詳情頁的基本概念明確商品詳情頁的設計規則知識目標明確商品詳情頁的設計思路掌握商品詳情頁的制作方法能力目標培養商業設計思維提高賣點提煉能力素養目標6.1商品詳情頁概述商品詳情頁具有展現商品內容、達成商品轉化的功能和作用。商品詳情頁的核心部分通常由商品焦點圖、賣點提煉、商品展示、細節展示、商品信息和其他模塊構成。6.2商品焦點圖設計商品焦點圖的基本概念商品焦點圖的設計規則課堂案例——設計實木沙發商品焦點圖商品焦點圖即商品詳情頁中的商品Banner，類似于店鋪首頁的輪播海報，用于令商品詳情頁中的商品更加吸引消費者，更好地展示商品優勢。6.2.1商品焦點圖的基本概念商品海報商品焦點圖可以根據適配平臺和尺寸分為兩類，一類是適配平臺以淘寶為代表的，寬度為750px的商品焦點圖；另一類是適配平臺以京東和天貓為代表的，寬度為790px的商品焦點圖。兩者高度不限，通常建議為950px。這兩類商品焦點圖的主標題字號建議為60～70px，副標題字號建議為40～50px，文字敘述字號建議為25～30px。6.2.2商品焦點圖的設計規則使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具繪制基本圖形，使用“創建新的填充或調整圖層”按鈕為圖像校色。6.2.3課堂案例—設計實木沙發商品焦點圖效果圖賣點提煉的基本概念賣點提煉的設計規則課堂案例——設計實木沙發賣點提煉6.3賣點提煉設計賣點提煉即對商品特點和消費者痛點的提煉，主要用于向消費者展示商品獨特之處，令其產生購買欲望。6.3.1賣點提煉的基本概念賣點提煉6.3.2賣點提煉的設計規則賣點提煉中的文本應簡短且具有說服力，建議將其字號設置為30～40px，字體設置為黑體，賣點提煉中的圖標應醒目且和賣點呼應。使用“新建參考線”命令創建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具繪制基本圖形，使用“創建新的填充或調整圖層”按鈕為圖像校色。6.3.3課堂案例—設計實木沙發賣點提煉效果圖商品展示的基本概念商品展示的設計規則課堂案例——設計實木沙發商品展示6.4?商品展示設計商品展示即展示商品的內容，通常一屏一賣點，進一步實現展示商品優勢、呈現商品功能的作用。6.4.1商品展示的基本概念商品展示6.4.2?商品展示的設計規則商品展示的設計規則與商品焦點圖的設計規則類似。需要注意的是，因為商品展示通常包括3～5張圖片，所以各圖片中商品的角度和背景既要有統一性又要有一定的區別，以免給消費者帶來視覺疲勞。使用“新建參考線”命令創建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具、“鋼筆”工具繪制基本圖形，使用“創建剪貼蒙版”快捷鍵實現新中式沙發商品展示。6.4.3課堂案例—設計實木沙發商品展示效果圖細節展示的基本概念細節展示的設計規則課堂案例——設計實木沙發細節展示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.1?其他模塊的基本概念其他模塊6.7.2?其他模塊的設計規則其他模塊由于處于整個商品詳情頁接近尾部的位置，消費者觀看時會產生一定的視覺疲憊感，因此在設計時一定要突出該模塊的重點，設計風格以簡潔、醒目為主。使用“新建參考線”命令創建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具繪制基本圖形。6.7.3課堂案例—設計