第5章商品詳情頁視覺設計

1、了解商品主圖的設計規(guī)范掌握商品主圖的設計形式掌握商品細節(jié)展示區(qū)設計技巧了解修飾元素在設計中的重要性熟練掌握商品詳情頁各元素的設計方法學習目標目 錄商品主圖設計5.1商品細節(jié)展示區(qū)設計5.2商品功效簡介區(qū)設計5.35.1 商品主圖設計商品主圖的設計規(guī)范1商品主圖的設計形式2添加文案提高主圖點擊率35.1 商品主圖設計商品主圖尺寸要求搜索結果頁面中的商品主圖尺寸為220像素220像素商品詳情頁中的商品主圖尺寸為400像素400像素5.1 商品主圖設計展示商品的全貌1拼接式設計3突出商品賣點4場景化的設計25.1 商品主圖設計展示商品的全貌1白色背景商品主圖5.1 商品主圖設計場景化的設計2場景展示

2、商品主圖5.1 商品主圖設計拼接式設計35.1 商品主圖設計突出商品賣點45.1 商品主圖設計添加主圖文案添加價格信息，以激發(fā)消費者的購買欲望，提高點擊率添加商品的材質簡介，提升商品形象，讓消費者了解更多商品信息5.1 商品主圖設計添加品牌徽標5.1 商品主圖設計添加品牌信息5.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)的表現(xiàn)形式1商品細節(jié)展示區(qū)通用設計方式25.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)的表現(xiàn)形式指示型表現(xiàn)形式局部圖解型表現(xiàn)形式5.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)的表現(xiàn)形式完整的商品形象展示 用實線連接放大的局部細節(jié)指示型表現(xiàn)形式5.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)的表現(xiàn)形式局部

3、圖解型表現(xiàn)形式5.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)通用設計方式5.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)通用設計方式標題文字：對該細節(jié)圖的內容進行概括和歸納，應用畫龍點睛的關鍵詞進行文案設計段落說明文字：詳細闡述該細節(jié)圖的內容，對標題文字進行展開說明5.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)通用設計方式系統(tǒng)介紹商品信息對女鞋細節(jié)參數(shù)進行系統(tǒng)介紹，讓消費者一目了然了解商品信息5.2 商品細節(jié)展示區(qū)設計商品細節(jié)展示區(qū)通用設計方式 箭頭能將商品整體外觀 圖與細節(jié)圖聯(lián)系起來， 具有引導視線的作用聊天氣泡用于修飾細節(jié)圖、說明文字的邊框，使文字和圖片能一一對應，準確傳遞商品信息5.2 商品細節(jié)展示區(qū)設計商

4、品細節(jié)展示區(qū)通用設計方式方框規(guī)范了文字的顯示范圍圓形素材的使用讓圖像之間產(chǎn)生一定的聯(lián)系矩形與圓形素材的使用5.3 商品功效簡介區(qū)設計商品功效簡介區(qū)的設計規(guī)范1修飾元素在設計中的重要性25.3 商品功效簡介區(qū)設計商品功效簡介區(qū)的設計規(guī)范淘寶、天貓和京東的商品詳情頁設計尺寸規(guī)范：電商平臺商品詳情頁設計尺寸規(guī)范淘寶網(wǎng)詳情頁左側邊欄寬190像素，中間空10像素，右側寬750像素，加起來總寬度為950像素。如果關閉左側邊欄，就可以顯示950像素寬，不然只顯示750像素寬天貓商城詳情頁布局與淘寶類似，不同之處在于天貓商城新版頁面的寬度由750像素變?yōu)?90像素京東京東對詳情頁布局有統(tǒng)一要求，整體寬度不超過740像素5.3 商品功效簡介區(qū)設計商品功效簡介區(qū)的設計規(guī)范將商品的功效分為幾個不同的關鍵點進行介紹商品功效簡介區(qū)設計5.3 商品功效簡介區(qū)設計使用圖表對商品的某些功效進行具象表現(xiàn)，利用數(shù)據(jù)、比例上的優(yōu)勢來增強說服力，提升商品功效簡介的可信度復選框素材的使用，加強了對商品功效的肯定作用聊天氣泡具有一定的指引視線和修飾作用將洗衣液的功效用對比圖的方式表現(xiàn)出來，提升功效的可信性5.4 女鞋商品詳情頁視覺設計案例課后練習題簡述商品主圖如何設計才能提高點擊率。請找出五個不同類目的店鋪，并分析它們的商