第 1章 初識電商視覺設(shè)計\t1
1．1 什么是視覺設(shè)計 2
1．1．1 視覺識別設(shè)計 2
1．1．2 視覺傳達設(shè)計 3
1．2 電商視覺設(shè)計前的準備 4
1．2．1 網(wǎng)店的視覺定位 4
1．2．2 明確視覺規(guī)范的作用 6
1．3 電商視覺設(shè)計黃金構(gòu)圖法 6
1．3．1 對稱切割構(gòu)圖法 7
1．3．2 組合切割構(gòu)圖法 7
1．3．3 整體場景構(gòu)圖法 8
1．3．4 多重切割構(gòu)圖法 9
1．3．5 簡單切割構(gòu)圖法 10
1．3．6 流程構(gòu)圖法 11
1．3．7 放射構(gòu)圖法 13
1．3．8 物體輪廓構(gòu)圖法 13
【課后習題】 14
第 2章 電商網(wǎng)站視覺配色設(shè)計 15
2．1 網(wǎng)店頁面的配色方案 16
2．1．1 色搭原則七要素 16
2．1．2 色彩的聯(lián)覺聚焦圖片 18
2．1．3 網(wǎng)店風格的形成要素 20
2．2 網(wǎng)店頁面的配色誤區(qū) 28
2．2．1 色彩過多 28
2．2．2 背景和文字對比不強烈 29
2．2．3 過分強調(diào)色彩的刺激度 29
2．3 網(wǎng)店的整體配色案例 30
2．3．1 店鋪頁面主色設(shè)計 31
2．3．2 店鋪頁面文案配色設(shè)計 32
2．3．3 店鋪輔色設(shè)計 33
【課后習題】 38
第3章 店鋪標志視覺設(shè)計 39
3．1 徽標的設(shè)計 40
3．1．1 徽標的設(shè)計要領(lǐng) 40
3．1．2 徽標的設(shè)計標準 41
3．2 店標的設(shè)計 42
3．2．1 店標的設(shè)計形態(tài) 43
3．2．2 店標的設(shè)計技巧 44
3．2．3 不同行業(yè)的店標設(shè)計 47
3．2．4 店標的設(shè)計流程 48
【課后習題】 51
第4章 店鋪首頁視覺設(shè)計 52
4．1 首頁視覺水平的四大指標 53
4．1．1 首頁跳失率 53
4．1．2 首頁點擊率 53
4．1．3 首頁人均點擊次數(shù) 54
4．1．4 首頁平均停留時間 55
4．2 店招視覺設(shè)計 55
4．2．1 店招視覺設(shè)計規(guī)范 55
4．2．2 店鋪名稱的藝術(shù)化處理 56
4．2．3 圖層樣式的應(yīng)用 57
4．3 首焦輪播區(qū)視覺設(shè)計 58
4．3．1 設(shè)計聚焦消費者視線 58
4．3．2 構(gòu)建設(shè)計圖三要素 60
4．3．3 溶圖的應(yīng)用規(guī)范 62
4．4 商品陳列區(qū)視覺設(shè)計 62
4．4．1 營造視覺動線 62
4．4．2 商品布局藝術(shù)化 65
4．5 茶葉店鋪首頁視覺設(shè)計案例 66
【課后習題】 75
第5章 商品詳情頁視覺設(shè)計 76
5．1 商品主圖設(shè)計 77
5．1．1 商品主圖的設(shè)計規(guī)范 77
5．1．2 商品主圖的設(shè)計形式 77
5．1．3 添加文案提高主圖點擊率 79
5．2 商品細節(jié)展示區(qū)設(shè)計 81
5．2．1 商品細節(jié)展示區(qū)的表現(xiàn)形式 81
5．2．2 商品細節(jié)展示區(qū)通用設(shè)計方式 83
5．3 商品功效簡介區(qū)設(shè)計 85
5．3．1 商品功效簡介區(qū)的設(shè)計規(guī)范 85
5．3．2 修飾元素在設(shè)計中的重要性 86
5．4 女鞋商品詳情頁視覺設(shè)計案例 87
【課后習題】 97
第6章 高點擊率推廣圖片視覺設(shè)計 98
6．1 推廣圖片構(gòu)圖法則 99
6．1．1 變化式構(gòu)圖 99
6．1．2 對角線構(gòu)圖 99
6．1．3 對稱式構(gòu)圖 99
6．1．4 平衡式構(gòu)圖 100
6．1．5 緊湊式構(gòu)圖 100
6．1．6 X形構(gòu)圖 101
6．2 直通車圖片設(shè)計 101
6．2．1 圖片整體風格設(shè)計 101
6．2．2 突出商品賣點的設(shè)計 104
6．3 鉆展圖設(shè)計 104
6．3．1 博取眼球的創(chuàng)意設(shè)計 104
6．3．2 統(tǒng)一圖片設(shè)計風格 106
6．3．3 確定重點表現(xiàn)元素 106
6．4 直播封面圖設(shè)計 107
6．4．1 直播封面圖尺寸要求 107
6．4．2 直播封面圖設(shè)計原則 107
6．5 聚劃算主圖設(shè)計 110
6．5．1 聚劃算主圖的設(shè)計思路 110
6．5．2 聚劃算主圖設(shè)計案例 111
【課后習題】 115
第7章 網(wǎng)店促銷活動頁視覺設(shè)計 116
7．1 促銷廣告的黃金設(shè)計要素 117
7．1．1 保證設(shè)計的基本美感 117
7．1．2 營造促銷氛圍 120
7．1．3 促銷廣告圖片的設(shè)計原則 121
7．2 不同發(fā)展階段的促銷廣告設(shè)計 122
7．2．1 發(fā)展初期——為打造爆款而促銷 123
7．2．2 發(fā)展中期——為品牌而促銷 124
7．2．3 發(fā)展成熟期——為客戶而促銷 125
【課后習題】 128
第8章 移動端網(wǎng)店用戶體驗設(shè)計 129
8．1 移動端網(wǎng)店的設(shè)計標準 130
8．1．1 移動端網(wǎng)店店標設(shè)計 130
8．1．2 移動端網(wǎng)店圖片尺寸標準 131
8．1．3 移動端網(wǎng)店框架結(jié)構(gòu)安排 131
8．2 移動端網(wǎng)店視覺設(shè)計 133
8．2．1 迎合極速打開需求 133
8．2．2 信息內(nèi)容簡潔，便于快速傳播 134
8．2．3 簡單方便的操作與交互 137
8．2．4 整體設(shè)計風格首尾呼應(yīng) 138
8．2．5 保持色彩與文字的鮮明感 139
8．2．6 保持常換常新 141
【課后習題】 142
第9章 手機移動端淘寶店鋪視覺設(shè)計 143
9．1 手機移動端淘寶店鋪首頁優(yōu)化設(shè)計 144
9．1．1 輪播圖片優(yōu)化設(shè)計 144
9．1．2 優(yōu)惠券的優(yōu)化設(shè)計 146
9．1．3 商品分類導(dǎo)航優(yōu)化設(shè)計 147
9．1．4 商品分類展示優(yōu)化設(shè)計 147
9．2 電子數(shù)碼類商品店鋪首頁案例解析 150
9．3 手機淘寶店鋪詳情頁優(yōu)化設(shè)計 151
9．3．1 詳情頁設(shè)計的FABE原則 151
9．3．2 商品詳情頁的設(shè)計誤區(qū) 154
9．3．3 根據(jù)消費者的頁面平均停留時間設(shè)計 157
9．4 家紡視覺設(shè)計案例實操 158
【課后習題】 163
第 10章 手機移動端微店視覺設(shè)計 165
10．1 微店首頁優(yōu)化設(shè)計 166
10．1．1 首頁的框架設(shè)計 166
10．1．2 清晰而準確的設(shè)計思路 169
10．1．3 遵守設(shè)計學的“七秒定律” 170
10．1．4 注重細節(jié)設(shè)計 170
10．2 商品詳情頁優(yōu)化設(shè)計 171
10．2．1 商品主圖的設(shè)計 171
10．2．2 商品描述圖的設(shè)計 172
10．3 微店底部導(dǎo)航優(yōu)化設(shè)計 173
10．3．1 底部導(dǎo)航的主要功能 173
10．3．2 底部導(dǎo)航的設(shè)計規(guī)則 174
10．4 母嬰微店視覺設(shè)計案例構(gòu)思 175
10．4．1 首頁設(shè)計布局規(guī)劃 175
10．4．2 主色調(diào)：高純度暖色調(diào) 176
10．4．3 案例配色擴展 176
10．4．4 案例設(shè)計流程 178
10．5 母嬰微店視覺設(shè)計案例實操 179
10．5．1 制作微店店招 179
10．5．2 制作首頁導(dǎo)航 181
10．5．3 制作促銷廣告 182
10．5．4 制作優(yōu)惠專區(qū) 184
【課后習題】 186
第 11章 商品短視頻視覺設(shè)計 187
11．1 商品短視頻：讓消費者多感官體驗商品 188
11．1．1 商品短視頻的作用 188
11．1．2 常見商品短視頻的內(nè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è)計案例實操 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)場效果 202
11．3．6 自定義轉(zhuǎn)場效果 203
11．3．7 制作閃光燈效果 206
11．3．8 制作片尾動畫 207
11．3．9 導(dǎo)出主圖視頻 209
11．4 商品詳情頁視頻設(shè)計案例實操 211
11．4．1 新建項目并創(chuàng)建序列 211
11．4．2 制作片頭動畫 212
11．4．3 視頻剪輯 218
11．4．4 制作片尾動畫 219
11．4．5 視頻調(diào)色 220
11．4．6 添加字幕并導(dǎo)出視頻 223
【課后習題】 226