第 1章 初識(shí)電商視覺(jué)設(shè)計(jì)1
1.1 什么是視覺(jué)設(shè)計(jì) 2
1.1.1 視覺(jué)識(shí)別設(shè)計(jì) 2
1.1.2 視覺(jué)傳達(dá)設(shè)計(jì) 3
1.2 電商視覺(jué)設(shè)計(jì)前的準(zhǔn)備 4
1.2.1 網(wǎng)店的視覺(jué)定位 4
1.2.2 明確視覺(jué)規(guī)范的作用 6
1.3 電商視覺(jué)設(shè)計(jì)黃金構(gòu)圖法 6
1.3.1 對(duì)稱(chēng)切割構(gòu)圖法 7
1.3.2 組合切割構(gòu)圖法 7
1.3.3 整體場(chǎng)景構(gòu)圖法 8
1.3.4 多重切割構(gòu)圖法 9
1.3.5 簡(jiǎn)單切割構(gòu)圖法 10
1.3.6 流程構(gòu)圖法 11
1.3.7 放射構(gòu)圖法 13
1.3.8 物體輪廓構(gòu)圖法 13
【課后習(xí)題】 14
第 2章 電商網(wǎng)站視覺(jué)配色設(shè)計(jì) 15
2.1 網(wǎng)店頁(yè)面的配色方案 16
2.1.1 色搭原則七要素 16
2.1.2 色彩的聯(lián)覺(jué)聚焦圖片 18
2.1.3 網(wǎng)店風(fēng)格的形成要素 20
2.2 網(wǎng)店頁(yè)面的配色誤區(qū) 28
2.2.1 色彩過(guò)多 28
2.2.2 背景和文字對(duì)比不強(qiáng)烈 29
2.2.3 過(guò)分強(qiáng)調(diào)色彩的刺激度 29
2.3 網(wǎng)店的整體配色案例 30
2.3.1 店鋪?lái)?yè)面主色設(shè)計(jì) 31
2.3.2 店鋪?lái)?yè)面文案配色設(shè)計(jì) 32
2.3.3 店鋪輔色設(shè)計(jì) 33
【課后習(xí)題】 38
第3章 店鋪標(biāo)志視覺(jué)設(shè)計(jì) 39
3.1 徽標(biāo)的設(shè)計(jì) 40
3.1.1 徽標(biāo)的設(shè)計(jì)要領(lǐng) 40
3.1.2 徽標(biāo)的設(shè)計(jì)標(biāo)準(zhǔn) 41
3.2 店標(biāo)的設(shè)計(jì) 42
3.2.1 店標(biāo)的設(shè)計(jì)形態(tài) 43
3.2.2 店標(biāo)的設(shè)計(jì)技巧 44
3.2.3 不同行業(yè)的店標(biāo)設(shè)計(jì) 47
3.2.4 店標(biāo)的設(shè)計(jì)流程 48
【課后習(xí)題】 51
第4章 店鋪首頁(yè)視覺(jué)設(shè)計(jì) 52
4.1 首頁(yè)視覺(jué)水平的四大指標(biāo) 53
4.1.1 首頁(yè)跳失率 53
4.1.2 首頁(yè)點(diǎn)擊率 53
4.1.3 首頁(yè)人均點(diǎn)擊次數(shù) 54
4.1.4 首頁(yè)平均停留時(shí)間 55
4.2 店招視覺(jué)設(shè)計(jì) 55
4.2.1 店招視覺(jué)設(shè)計(jì)規(guī)范 55
4.2.2 店鋪名稱(chēng)的藝術(shù)化處理 56
4.2.3 圖層樣式的應(yīng)用 57
4.3 首焦輪播區(qū)視覺(jué)設(shè)計(jì) 58
4.3.1 設(shè)計(jì)聚焦消費(fèi)者視線(xiàn) 58
4.3.2 構(gòu)建設(shè)計(jì)圖三要素 60
4.3.3 溶圖的應(yīng)用規(guī)范 62
4.4 商品陳列區(qū)視覺(jué)設(shè)計(jì) 62
4.4.1 營(yíng)造視覺(jué)動(dòng)線(xiàn) 62
4.4.2 商品布局藝術(shù)化 65
4.5 茶葉店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 66
【課后習(xí)題】 75
第5章 商品詳情頁(yè)視覺(jué)設(shè)計(jì) 76
5.1 商品主圖設(shè)計(jì) 77
5.1.1 商品主圖的設(shè)計(jì)規(guī)范 77
5.1.2 商品主圖的設(shè)計(jì)形式 77
5.1.3 添加文案提高主圖點(diǎn)擊率 79
5.2 商品細(xì)節(jié)展示區(qū)設(shè)計(jì) 81
5.2.1 商品細(xì)節(jié)展示區(qū)的表現(xiàn)形式 81
5.2.2 商品細(xì)節(jié)展示區(qū)通用設(shè)計(jì)方式 83
5.3 商品功效簡(jiǎn)介區(qū)設(shè)計(jì) 85
5.3.1 商品功效簡(jiǎn)介區(qū)的設(shè)計(jì)規(guī)范 85
5.3.2 修飾元素在設(shè)計(jì)中的重要性 86
5.4 女鞋商品詳情頁(yè)視覺(jué)設(shè)計(jì)案例 87
【課后習(xí)題】 97
第6章 高點(diǎn)擊率推廣圖片視覺(jué)設(shè)計(jì) 98
6.1 推廣圖片構(gòu)圖法則 99
6.1.1 變化式構(gòu)圖 99
6.1.2 對(duì)角線(xiàn)構(gòu)圖 99
6.1.3 對(duì)稱(chēng)式構(gòu)圖 99
6.1.4 平衡式構(gòu)圖 100
6.1.5 緊湊式構(gòu)圖 100
6.1.6 X形構(gòu)圖 101
6.2 直通車(chē)圖片設(shè)計(jì) 101
6.2.1 圖片整體風(fēng)格設(shè)計(jì) 101
6.2.2 突出商品賣(mài)點(diǎn)的設(shè)計(jì) 104
6.3 鉆展圖設(shè)計(jì) 104
6.3.1 博取眼球的創(chuàng)意設(shè)計(jì) 104
6.3.2 統(tǒng)一圖片設(shè)計(jì)風(fēng)格 106
6.3.3 確定重點(diǎn)表現(xiàn)元素 106
6.4 直播封面圖設(shè)計(jì) 107
6.4.1 直播封面圖尺寸要求 107
6.4.2 直播封面圖設(shè)計(jì)原則 107
6.5 聚劃算主圖設(shè)計(jì) 110
6.5.1 聚劃算主圖的設(shè)計(jì)思路 110
6.5.2 聚劃算主圖設(shè)計(jì)案例 111
【課后習(xí)題】 115
第7章 網(wǎng)店促銷(xiāo)活動(dòng)頁(yè)視覺(jué)設(shè)計(jì) 116
7.1 促銷(xiāo)廣告的黃金設(shè)計(jì)要素 117
7.1.1 保證設(shè)計(jì)的基本美感 117
7.1.2 營(yíng)造促銷(xiāo)氛圍 120
7.1.3 促銷(xiāo)廣告圖片的設(shè)計(jì)原則 121
7.2 不同發(fā)展階段的促銷(xiāo)廣告設(shè)計(jì) 122
7.2.1 發(fā)展初期——為打造爆款而促銷(xiāo) 123
7.2.2 發(fā)展中期——為品牌而促銷(xiāo) 124
7.2.3 發(fā)展成熟期——為客戶(hù)而促銷(xiāo) 125
【課后習(xí)題】 128
第8章 移動(dòng)端網(wǎng)店用戶(hù)體驗(yàn)設(shè)計(jì) 129
8.1 移動(dòng)端網(wǎng)店的設(shè)計(jì)標(biāo)準(zhǔn) 130
8.1.1 移動(dòng)端網(wǎng)店店標(biāo)設(shè)計(jì) 130
8.1.2 移動(dòng)端網(wǎng)店圖片尺寸標(biāo)準(zhǔn) 131
8.1.3 移動(dòng)端網(wǎng)店框架結(jié)構(gòu)安排 131
8.2 移動(dòng)端網(wǎng)店視覺(jué)設(shè)計(jì) 133
8.2.1 迎合極速打開(kāi)需求 133
8.2.2 信息內(nèi)容簡(jiǎn)潔，便于快速傳播 134
8.2.3 簡(jiǎn)單方便的操作與交互 137
8.2.4 整體設(shè)計(jì)風(fēng)格首尾呼應(yīng) 138
8.2.5 保持色彩與文字的鮮明感 139
8.2.6 保持常換常新 141
【課后習(xí)題】 142
第9章 手機(jī)移動(dòng)端淘寶店鋪視覺(jué)設(shè)計(jì) 143
9.1 手機(jī)移動(dòng)端淘寶店鋪首頁(yè)優(yōu)化設(shè)計(jì) 144
9.1.1 輪播圖片優(yōu)化設(shè)計(jì) 144
9.1.2 優(yōu)惠券的優(yōu)化設(shè)計(jì) 146
9.1.3 商品分類(lèi)導(dǎo)航優(yōu)化設(shè)計(jì) 147
9.1.4 商品分類(lèi)展示優(yōu)化設(shè)計(jì) 147
9.2 電子數(shù)碼類(lèi)商品店鋪首頁(yè)案例解析 150
9.3 手機(jī)淘寶店鋪詳情頁(yè)優(yōu)化設(shè)計(jì) 151
9.3.1 詳情頁(yè)設(shè)計(jì)的FABE原則 151
9.3.2 商品詳情頁(yè)的設(shè)計(jì)誤區(qū) 154
9.3.3 根據(jù)消費(fèi)者的頁(yè)面平均停留時(shí)間設(shè)計(jì) 157
9.4 家紡視覺(jué)設(shè)計(jì)案例實(shí)操 158
【課后習(xí)題】 163
第 10章 手機(jī)移動(dòng)端微店視覺(jué)設(shè)計(jì) 165
10.1 微店首頁(yè)優(yōu)化設(shè)計(jì) 166
10.1.1 首頁(yè)的框架設(shè)計(jì) 166
10.1.2 清晰而準(zhǔn)確的設(shè)計(jì)思路 169
10.1.3 遵守設(shè)計(jì)學(xué)的“七秒定律” 170
10.1.4 注重細(xì)節(jié)設(shè)計(jì) 170
10.2 商品詳情頁(yè)優(yōu)化設(shè)計(jì) 171
10.2.1 商品主圖的設(shè)計(jì) 171
10.2.2 商品描述圖的設(shè)計(jì) 172
10.3 微店底部導(dǎo)航優(yōu)化設(shè)計(jì) 173
10.3.1 底部導(dǎo)航的主要功能 173
10.3.2 底部導(dǎo)航的設(shè)計(jì)規(guī)則 174
10.4 母嬰微店視覺(jué)設(shè)計(jì)案例構(gòu)思 175
10.4.1 首頁(yè)設(shè)計(jì)布局規(guī)劃 175
10.4.2 主色調(diào)：高純度暖色調(diào) 176
10.4.3 案例配色擴(kuò)展 176
10.4.4 案例設(shè)計(jì)流程 178
10.5 母嬰微店視覺(jué)設(shè)計(jì)案例實(shí)操 179
10.5.1 制作微店店招 179
10.5.2 制作首頁(yè)導(dǎo)航 181
10.5.3 制作促銷(xiāo)廣告 182
10.5.4 制作特價(jià)專(zhuān)區(qū) 184
【課后習(xí)題】 186
第 11章 商品短視頻視覺(jué)設(shè)計(jì) 187
11.1 商品短視頻：讓消費(fèi)者多感官體驗(yàn)商品 188
11.1.1 商品短視頻的作用 188
11.1.2 常見(jiàn)商品短視頻的內(nèi)容類(lèi)型 189
11.2 商品短視頻的拍攝 190
11.2.1 商品短視頻拍攝流程 190
11.2.2 商品短視頻構(gòu)圖要素與構(gòu)圖法則 190
11.2.3 商品拍攝景別 194
11.2.4 拍攝方向與拍攝角度 195
11.3 主圖視頻設(shè)計(jì)案例實(shí)操 196
11.3.1 導(dǎo)入并整理素材 196
11.3.2 粗剪視頻素材 198
11.3.3 精剪視頻素材 200
11.3.4 視頻調(diào)速 201
11.3.5 添加轉(zhuǎn)場(chǎng)效果 202
11.3.6 自定義轉(zhuǎn)場(chǎng)效果 203
11.3.7 制作閃光燈效果 206
11.3.8 制作片尾動(dòng)畫(huà) 207
11.3.9 導(dǎo)出主圖視頻 209
11.4 商品詳情頁(yè)視頻設(shè)計(jì)案例實(shí)操 211
11.4.1 新建項(xiàng)目并創(chuàng)建序列 211
11.4.2 制作片頭動(dòng)畫(huà) 212
11.4.3 視頻剪輯 218
11.4.4 制作片尾動(dòng)畫(huà) 219
11.4.5 視頻調(diào)色 220
11.4.6 添加字幕并導(dǎo)出視頻 223
【課后習(xí)題】 226