第1章?電商UI設計基礎
1.1?了解電商UI設計 1
1.1.1?什麼是電子商務 1
1.1.2?電商UI設計屬於什麼範疇 2
1.1.3?電商UI設計的重要性 3
1.1.4?電商的發展趨勢 3
1.1.5?電商設計師的要求 4
1.2?移動電商 4
1.2.1?什麼是移動電商 4
1.2.2?移動電商與傳統電商的區別 5
1.2.3?移動電商的現狀 5
1.2.4?移動電商的應用形式 6
1.3?移動電商UI設計與傳統電商UI設計的
差異 8
1.3.1?使用場景 8
1.3.2?交互方式 8
1.3.3?屏幕尺寸 9
1.3.4?信息組織 10
1.3.5?導航繫統 11
1.4?電商UI設計需要注意的問題 12
1.5?如何創建成功的電商網站 12
1.5.1?為用戶群體設計 12
1.5.2?采用常規的導航 13
1.5.3?設計一個令人驚艷的主頁 14
1.5.4?讓商品詳情頁面更易轉化 14
1.6?電商UI視覺營銷 15
1.6.1?電商UI視覺營銷的表現 15
1.6.2?不同類型的電商視覺營銷方法 15
1.7?本章小結 18

第2章?電商UI設計配色
2.1?色彩基礎 19
2.1.1?色彩的產生 19
2.1.2?色彩三要素 19
2.1.3?有彩色與無彩色 21
2.2?電商UI設計中不同色彩意像的表現 23
2.2.1?紅色—激情、促銷 23
2.2.2?橙色—活力、動感 24
2.2.3?黃色—希望、快樂 25
2.2.4?綠色—自然、清新 26
2.2.5?青色—清新、涼爽 27
2.2.6?藍色—冷靜、理智 28
2.2.7?紫色—高貴、浪漫 28
2.2.8?白色—純淨、干淨 29
2.2.9?灰色—簡潔、保守 30
2.2.10?黑色—優雅、神秘 31
2.3?電商UI設計配色的基本方法 31
2.3.1?同類色搭配 32
2.3.2?類似色搭配 32
2.3.3?鄰近色搭配 33
2.3.4?互補色搭配 34
2.3.5?對比色搭配 35
2.4?對比配色使電商UI的視覺表現更
突出 35
2.4.1?色相對比配色 35
2.4.2?飽和度對比配色 36
2.4.3?明度對比配色 38
2.4.4?冷暖對比配色 39
2.4.5?有彩色與無彩色對比配色 40
2.5?根據目標群體選擇電商UI配色 40
2.5.1?不同性別的色彩偏好 40
2.5.2?不同年齡層次的色彩偏好 42
2.6?根據商品銷售階段選擇電商UI配色 44
2.6.1?商品上市期的電商UI配色 44
2.6.2?商品拓展期的電商UI配色 45
2.6.3?商品穩定銷售期的電商UI配色 46
2.6.4?商品衰退期的電商UI配色 47
2.7?本章小結 48


第3章?電商UI設計中素
3.1?店標設計 49
3.1.1?店標的作用 49
3.1.2?店標的特性 49
3.1.3?店標的設計要求 50
3.1.4?店標的類別 51
3.1.5?設計水果網店店標 52
實戰練習01—設計水果網店店標 52
3.2?店招設計 56
3.2.1?店招的設計要點 56
3.2.2?店招的表現類型 57
3.2.3?設計童車店鋪店招 58
實戰練習02—設計童車店鋪店招 58
3.3?電商圖標類型 63
3.3.1?應用圖標 63
3.3.2?功能圖標 64
3.3.3?裝飾圖標 65
3.3.4?設計簡約線性圖標 66
實戰練習03—設計簡約線性圖標 66
3.4?電商應用圖標的設計要點 68
3.4.1?符合設計規範性 68
3.4.2?分析定位、突出特點 69
3.4.3?設計完整性 69
3.4.4?統一性 69
3.4.5?連續性 70
3.4.6?設計時尚風格電商應用圖標 70
實戰練習04—設計時尚風格電商應用圖標 70
3.5?電商導航設計原則 74
3.5.1?符合內容結構 74
3.5.2?明確業務目標 75
3.5.3?遵從用戶使用習慣 75
3.5.4?避免重復的分類 76
3.5.5?使用合適的文案 76
3.5.6?清晰的視覺體驗 77
3.5.7?為用戶提供反饋 77
3.5.8?導航符合界面整體風格 77
3.5.9?有利於搜索引擎優化 78
3.5.10?趨於專業化的導航 78
3.5.11?設計運動品牌電商網站導航 79
實戰練習05—設計運動品牌電商網站導航 79
3.6?本章小結 84


第4章?電商文字與廣告設計
4.1?電商UI設計中的字體應用 85
4.1.1?電商UI設計中常用的中英文字體 85
4.1.2?電商字體的基本設計技巧 86
4.1.3?電商字體的高級使用技巧 87
4.1.4?設計家電宣傳廣告 90
實戰練習01—設計家電宣傳廣告 90
4.2?文字的藝術化處理 94
4.2.1?文字設計的圖形化 94
4.2.2?文字的重疊設計 94
4.2.3?文字設計的整體性 94
4.2.4?讓文字更易讀 95
4.2.5?設計質感變形廣告文字 96
實戰練習02—設計質感變形廣告文字 96
4.3?電商廣告的作用 101
4.3.1?傳達商品信息 101
4.3.2?增強藝術表現 102
4.3.3?增強界面趣味 103
4.3.4?設計運動鞋廣告 103
實戰練習03—設計運動鞋廣告 103
4.4?電商廣告排版布局技巧 106
4.4.1?對齊 107
4.4.2?對比 108
4.4.3?分組 110
4.4.4?設計小家電宣傳廣告 111
實戰練習04—設計小家電宣傳廣告 111
4.5?電商廣告設計原則 115
4.5.1?突出廣告主題 115
4.5.2?明確電商廣告的目標人群 117
4.5.3?完美的表現形式 118
4.5.4?設計化妝品宣傳廣告 120
實戰練習05—設計化妝品宣傳廣告 120
4.6?本章小結 124


第5章?電商海報設計
5.1?電商海報的類型 125
5.1.1?商品宣傳海報 125
5.1.2?促銷宣傳海報 126
5.1.3?活動宣傳海報 127
5.1.4?設計手表商品宣傳海報 128
實戰練習01—設計手表商品宣傳海報 128
5.2?電商海報的常用構圖方式 130
5.2.1?左右構圖 130
5.2.2?三欄分布構圖 131
5.2.3?疊加構圖 132
5.2.4?傾斜構圖 132
5.2.5?設計女裝活動宣傳海報 133
實戰練習02—設計女裝活動宣傳海報 133
5.3?電商海報的常用設計表現形式 137
5.3.1?直接展示 137
5.3.2?突出特點 137
5.3.3?對比襯托 137
5.3.4?以小見大 138
5.3.5?聯想 138
5.3.6?誇張 139
5.3.7?幽默 139
5.3.8?以情托物 139
5.3.9?設計女士箱包促銷宣傳海報 140
實戰練習03—設計女士箱包促銷宣傳海報 140
5.4?電商海報設計與視覺營銷 144
5.4.1?簡單的病毒營銷——暴力視覺 144
5.4.2?實用的綠色營銷——創意視覺 145
5.4.3?完美的整合營銷——寫實視覺 146
5.4.4?設計促銷活動宣傳海報 147
實戰練習04—設計促銷活動宣傳海報 147
5.5?本章小結 152


第6章?電商UI的構圖與布局
6.1?了解電商UI構圖 153
6.1.1?為什麼要進行電商UI構圖 153
6.1.2?電商UI的構圖標準 154
6.2?常見的電商UI構圖方式 155
6.2.1?幾何切割構圖 155
6.2.2?設計運動品牌服飾電商UI 158
實戰練習01—設計運動品牌服飾電商UI 158
6.2.3?放射與透視狀構圖 165
6.2.4?整體和流程構圖 166
6.2.5?根據圖像輪廓聯想構圖 167
6.2.6?設計藝術香熏爐電商UI 167
實戰練習02—設計藝術香熏爐電商UI 168
6.3?電商UI首屏布局要點 175
6.3.1?確定首屏可視範圍 175
6.3.2?展示吸引用戶的信息 176
6.3.3?明確清晰的視覺焦點 177
6.3.4?運用圖像，便於理解 177
6.3.5?首屏要強調主體 177
6.3.6?適當添加交互效果 178
6.3.7?符合視覺習慣的圖文混排 178
6.3.8?設計促銷活動界面 178
實戰練習03—設計促銷活動界面 179
6.4?商品列表界面布局 187
6.4.1?商品列表界面的布局表現形式 187
6.4.2?展示有用的商品信息 189
6.4.3?鼠標指針懸停產生交互效果 189
6.4.4?適量的附加信息 189
6.4.5?添加推薦商品刺激消費 190
6.4.6?減少操作步驟 190
6.4.7?了解顧客心理 190
6.4.8?設計童裝節日促銷頁面 190
實戰練習04—設計童裝節日促銷頁面 191
6.5?本章小結 198


第7章?移動電商UI設計

7.1?了解移動電商UI設計 199
7.1.1?什麼是移動電商App 199
7.1.2?如何進行移動電商App的UI設計 200
7.1.3?移動電商App的基本設計流程 201
7.2?移動電商UI設計趨勢 202
7.2.1?分析移動購物用戶 202
7.2.2?移動電商UI轉化率 202
7.2.3?移動電商UI的設計要點 202
7.2.4?設計移動端商品促銷活動界面 204
實戰練習01—設計移動端商品促銷活動界面 204
7.3?移動電商UI設計的基本要求 207
7.3.1?以實用為基礎 207
7.3.2?色彩與風格統一 207
7.3.3?合理的配色 208
7.3.4?規範的視覺流程 208
7.3.5素規範 209
7.3.6?設計時尚男裝電商App 209
實戰練習02—設計時尚男裝電商App 209
7.4?移動電商App的設計原則 217
7.4.1?清晰的視覺效果 217
7.4.2?巧妙地應用關鍵色 218
7.4.3?高效的商品搜索 218
7.4.4?提供商品收藏和分享功能 219
7.4.5?流暢的支付流程 219
7.4.6?設計時尚女裝電商App 220
實戰練習03—設計時尚女裝電商App 220
7.5?本章小結 226

隨著電子商務的快速發展，電商企業的規模不斷擴大，對人纔專業化、細分化的需求更加迫切，然而實戰型的電商人纔匱乏，已成為電商行業快速發展的瓶頸。電商平臺跟實體店一樣，也是需要進行包裝的，電商UI設計已經發展成為一種趨勢，特色鮮明的電商平臺必須要有獨特的UI設計，纔能夠提升平臺的知名度和訪問量。
本書從電商UI設計的理論知識出發，配以專業的圖形處理軟件Photoshop進行講解，重點向讀者介紹電商UI設計的相關理論知識和應用。通過對大量電商UI設計案例進行分析和制作，使讀者能夠學以致用。
本書內容安排
本書內容淺顯易懂、簡明扼要，將專業的理論知識講解與精美的案例制作相結合，循序漸進地講解電商UI設計的各方面知識，使讀者在學習、欣賞的過程中豐富設計創意並提高動手設計能力。
第1章電商UI設計基礎，主要向讀者介紹電商UI設計的相關基礎知識，使讀者對電商UI設計的概念、移動電商等相關知識有更加全面、深入的理解。
第2章電商UI設計配色，主要向讀者介紹電商UI設計配色的相關知識，使讀者掌握色彩的理論知識及電商UI配色的方法和技巧，從而通過完美的色彩搭配突出電商UI的視覺表現效果。
第3章電商UI設計中素，主要向讀者介紹電商UI設計素的設計方法與技巧，這素包括店標、店招、圖標和導航等。
第4章電商文字與廣告設計，主要向讀者介紹電商UI中文字與廣告設計的相關知識，並通過對案例的制作與講解，使讀者掌握電商文字與廣告的設計方法和技巧。
第5章電商海報設計，主要向讀者介紹電商海報設計的相關知識，使讀者理解並掌握電商海報的表現形式和構圖方法，並且通過對案例的制作與講解，使讀者掌握電商海報的設計方法和技巧。
第6章電商UI的構圖與布局，主要向讀者介紹電商UI構圖與布局的相關知識，使讀者對電商UI的構圖標準、構圖方法、首屏布局及商品列表界面布局等有更加全面、深入的理解。
第7章移動電商UI設計，主要向讀者介紹移動電商UI設計的相關知識，並且通過多款移動電商App的UI設計案例向讀者講解移動電商UI設計的方法和技巧。
本書特點
本書通俗易懂、內容豐富、版式新穎、實用性強，通過學習電商UI設計的基礎理論知識，理解電商UI設計的表現方法與形式，並且通過電商UI設計案例的設計與制作，掌握電商UI設計的方法和技巧；將理論知識與案例制作相結合，使讀者能夠融會貫通。
本書適合準備學習或正在學習電商UI設計的初、中級讀者閱讀。本書充分考慮到初學者可能遇到的困難，講解全面深入，結構安排循序漸進，使讀者在掌握知識要點後能夠有效總結，並且通過案例分析和實踐鞏固所學知識，從而提高學習效率。
書中難免有錯誤和疏漏之處，希望廣大讀者朋友批評、指正。                                                                                                                                            
                                                                                                                                                                 編著者