第1章 初識電商視覺設計 1
1.1什麼是視覺設計2
1.1.1視覺識別設計2
1.1.2視覺傳達設計3
1.2電商視覺設計前的準備4
1.2.1網店的視覺定位4
1.2.2明確視覺規範的作用6
1.3電商視覺設計黃金構圖法7
1.3.1對稱切割構圖法7
1.3.2組合切割構圖法8
1.3.3整體場景構圖法9
1.3.4多重切割構圖法10
1.3.5簡單切割構圖法11
1.3.6流程構圖法12
1.3.7放射構圖法13
1.3.8物體輪廓構圖法13
【課後練習題】
第2章電商網站視覺配色設計15
2.1網店頁面的配色方案16
2.1.1色搭原則七要素16
2.1.2色彩的聯覺聚焦圖片17
2.1.3網店風格的形成要素18
2.2網店頁面的配色誤區27
2.2.1色彩過多28
2.2.2背景和文字對比不強烈28
2.2.3過分強調色彩的刺激度29
2.3網店的整體配色案例30
【課後練習題】
第3章店鋪標志視覺設計37
3.1徽標的設計38
3.1.1徽標的設計要領38
3.1.2徽標的設計標準39
3.2店標的設計41
3.2.1店標的設計形態41
3.2.2店標的設計技巧43
3.2.3不同行業的店標設計45
3.2.4店標的設計流程47
【課後練習題】
第4章店鋪首頁視覺設計51
4.1首頁視覺水平的四大指標52
4.1.1首頁跳失率52
4.1.2首頁點擊率52
4.1.3首頁人均點擊次數53
4.1.4首頁平均停留時間53
4.2店招視覺設計54
4.2.1店招視覺設計規範54
4.2.2店鋪名稱的藝術化處理55
4.2.3圖層樣式的應用56
4.3首焦輪播區視覺設計57
4.3.1設計聚焦消費者視線57
4.3.2構建設計圖三要素58
4.3.3溶圖的應用規範60
4.4商品陳列區視覺設計60
4.4.1營造視覺動線61
4.4.2商品布局藝術化63
4.5化妝品店鋪首頁視覺設計案例64
【課後練習題】
第5章商品詳情頁視覺設計75
5.1商品主圖設計76
5.1.1商品主圖的設計規範76
5.1.2商品主圖的設計形式76
5.1.3添加文案提高主圖點擊率78
5.2商品細節展示區設計79
5.2.1商品細節展示區的表現形式80
5.2.2商品細節展示區通用設計方式81
5.3商品功效簡介區設計83
5.3.1商品功效簡介區的設計規範83
5.3.2素在設計中的重要性84
5.4女鞋商品詳情頁視覺設計案例85
【課後練習題】
第6章高點擊率推廣圖片視覺設計93
6.1推廣圖片構圖法則94
6.1.1變化式構圖94
6.1.2對角線構圖94
6.1.3平衡式構圖94
6.1.4對稱式構圖95
6.1.5緊湊式構圖95
6.1.6X形構圖95
6.2直通車圖片設計96
6.2.1圖片整體風格設計96
6.2.2突出商品賣點的設計99
6.3鑽展圖設計100
6.3.1博取眼球的創意設計100
6.3.2統一圖片設計風格101
6.3.3確定重素102
6.4聚劃算主圖設計102
6.4.1聚劃算主圖的設計思路103
6.4.2聚劃算主圖設計案例104
【課後練習題】
第7章網店促銷活動頁視覺設計107
7.1促銷廣告的黃金設計要素108
7.1.1保證設計的基本美感108
7.1.2營造促銷氛圍111
7.1.3促銷廣告圖片的設計原則112
7.2不同發展階段的促銷廣告設計113
7.2.1發展初期——為打造爆款而促銷113
7.2.2發展中期——為品牌而促銷115
7.2.3發展成熟期——為客戶而促銷116
【課後練習題】
第8章移動端網店的用戶體驗設計119
8.1移動端網店的設計標準120
8.1.1移動端網店店標設計120
8.1.2移動端網店圖片尺寸標準121
8.1.3移動端網店框架結構安排122
8.2移動端網店視覺設計123
8.2.1迎合極速打開需求123
8.2.2信息內容簡潔,便於快速傳播124
8.2.3簡單方便的操作與交互127
8.2.4整體設計風格首尾呼應129
8.2.5保持色彩與文字的鮮明感130
8.2.6保持常換常新132
【課後練習題】
第9章手機移動端淘寶店鋪視覺設計134
9.1手機移動端淘寶店鋪首頁優化設計135
9.1.1店招的優化設計135
9.1.2輪播圖片優化設計138
9.1.3優惠券的優化設計139
9.1.4商品分類導航優化設計141
9.1.5商品分類展示優化設計141
9.2電子數碼類商品店鋪首頁案例解析143
9.3手機淘寶店鋪詳情頁優化設計145
9.3.1詳情頁設計的FABE原則145
9.3.2商品詳情頁的設計誤區148
9.3.3根據消費者的頁面平均停留時間設計151
【課後練習題】
第10章手機移動端微店視覺設計153
10.1微店首頁優化設計154
10.1.1首頁的框架設計154
10.1.2清晰而準確的設計思路158
10.1.3遵守設計學的“七秒定律”158
10.1.4注重細節設計159
10.2商品詳情頁優化設計161
10.2.1商品主圖的設計161
10.2.2商品描述圖的設計161
10.3微店底部導航優化設計163
10.3.1底部導航的主要功能163
10.3.2底部導航的設計規則164
10.4母嬰微店視覺設計案例構思165
10.4.1首頁設計布局規劃165
10.4.2主色調:高純度暖色調165
10.4.3案例配色擴展166
10.4.4案例設計流程168
10.5母嬰微店視覺設計案例實操169
10.5.1制作微店店招169
10.5.2制作首頁導航171
10.5.3制作促銷廣告172
10.5.4制作特價專區174
10.5.5制作商品詳情頁176
【課後練習題】