第 1章 聊聊電商圈001
1.1 認(rèn)識電商設(shè)計 004
1.1.1 電商設(shè)計3階段 004
1.1.2 設(shè)計師的職業(yè)類型 008
1.1.3 運營設(shè)計師的分類 011
1.1.4 運營設(shè)計師的工作內(nèi)容 012
1.1.5 運營設(shè)計師的技能需求 014
1.2 生存之道 023
1.2.1 我的12年 023
1.2.2 給新人的4點建議 025
1.3 漫談未來 028
1.3.1 人工智能 028
1.3.2 VR AR MR 029
1.4 本章小結(jié) 032

第 2章 別急著動手，思考很重要 033
2.1 持續(xù)積累 036
2.1.1 網(wǎng)站推薦 036
2.1.2 整理參考 038
2.1.3 借鑒之道 040
2.2 了解需求 044
2.2.1 服務(wù)對象 044
2.2.2 品牌調(diào)性 044
2.2.3 目標(biāo)用戶 045
2.2.4 商業(yè)目的 046
2.2.5 展示情況 046
2.2.6 文案內(nèi)容 049
2.3 挖掘訴求點 050
2.3.1 產(chǎn)品利益點 051
2.3.2 用戶情感 052
2.3.3 品牌調(diào)性 054
2.4 推導(dǎo)核心概念 055
2.5 構(gòu)思創(chuàng)意表現(xiàn)形式 057
2.5.1 夸張 058
2.5.2 比喻 059
2.5.3 擬人 060
2.5.4 對比 060
2.5.5 視角 061
2.5.6 故事化 062
2.5.7 氛圍渲染 063
2.6 本章小結(jié) 065

第3章 設(shè)計風(fēng)格和視覺元素 067
3.1 簡述平面設(shè)計發(fā)展史 070
3.1.1 工業(yè)革命時期 070
3.1.2 現(xiàn)代主義設(shè)計 072
3.1.3 后現(xiàn)代主義設(shè)計 075
3.2 電商設(shè)計的風(fēng)格演變 076
3.2.1 UI設(shè)計風(fēng)格 077
3.2.2 專題頁設(shè)計風(fēng)格 078
3.3 藝術(shù)風(fēng)格分類 079
3.3.1 中國風(fēng) 079
3.3.2 復(fù)古風(fēng) 080
3.3.3 極簡風(fēng) 082
3.3.4 后現(xiàn)代設(shè)計風(fēng)格 083
3.3.5 扁平插畫風(fēng) 087
3.3.6 擬物寫實風(fēng) 088
3.3.7 紙雕風(fēng) 089
3.3.8 霓虹風(fēng) 089
3.3.9 2.5D風(fēng)格 090
3.3.10 三維純色風(fēng) 091
3.4 主題風(fēng)格分類 092
3.4.1 熱鬧促銷 092
3.4.2 時尚潮流 092
3.4.3 活潑可愛 093
3.4.4 甜美溫馨 094
3.4.5 文藝清新 094
3.4.6 大氣簡約 094
3.4.7 未來科技 095
3.4.8 動感活力 096
3.5 塑造合適元素，將風(fēng)格融入設(shè)計 097
3.5.1 元素的塑造原則 098
3.5.2 元素的設(shè)計誤區(qū) 104
3.5.3 元素的符號化表達(dá) 107
3.6 本章小結(jié) 112

第4章 Banner的版面布局 113
4.1 初識手機Banner 116
4.1.1 常見分類 116
4.1.2 常見比例 121
4.1.3 前期準(zhǔn)備 125
4.2 布局類型 128
4.2.1 上下布局 129
4.2.2 左右布局 130
4.2.3 上中下布局 132
4.2.4 左中右布局 133
4.2.5 包圍布局 134
4.2.6 十字布局 135
實戰(zhàn)案例 139
4.3 布局原則均衡布局 140
4.3.1 對稱均衡 141
4.3.2 非對稱均衡 144
4.4 布局原則突出重點 150
4.4.1 主體元素 152
4.4.2 文案 153
4.4.3 按鈕 155
實戰(zhàn)案例 157
4.5 本章小結(jié) 158

第5章 6招提升形式感 159
5.1 第 1招：圖形分割 162
5.1.1 橫 豎線分割 167
5.1.2 斜線分割 170
5.1.3 三角形分割 173
5.1.4 圓形分割 178
5.1.5 方形分割 181
5.1.6 異形分割 189
5.1.7 放射分割 192
實戰(zhàn)案例 196
5.2 第 2招：簡約背景 201
5.2.1 單色背景 201
5.2.2 漸變背景 202
5.2.3 底紋背景 207
實戰(zhàn)案例 210
5.3 第3招：放大核心點 212
5.3.1 放大標(biāo)題 212
5.3.2 放大宣傳點 214
5.3.3 放大主體元素 216
實戰(zhàn)案例 219
5.4 第4招：使用攝影圖片 222
5.4.1 直接使用 224
5.4.2 后期處理 224
實戰(zhàn)案例 227
5.5 第5招：空間陳列 229
5.5.1 焦點透視 230
5.5.2 陳列場景 252
實戰(zhàn)案例 263
5.6 第6招：創(chuàng)意場景 269
5.6.1 確定創(chuàng)意和風(fēng)格 271
5.6.2 畫草圖、定配色 271
5.6.3 場景搭建 272
5.6.4 添加光影 274
實戰(zhàn)案例 276
5.7 本章小結(jié) 278

第6章 移動時代，色彩為王 281
6.1 色彩知多少 284
6.1.1 色彩形成 284
6.1.2 色彩分類 288
6.1.3 色彩三要素 289
6.2 12色相環(huán) 292
6.2.1 同類色搭配 294
6.2.2 鄰近色搭配 298
6.2.3 類似色搭配 302
6.2.4 中差色搭配 307
6.2.5 對比色搭配 312
6.2.6 互補色搭配 316
6.3 PCCS色彩體系 318
6.3.1 純色調(diào) 321
6.3.2 淺色調(diào) 322
6.3.3 淡色調(diào) 322
6.3.4 深色調(diào) 323
6.3.5 暗色調(diào) 324
6.3.6 淺灰色調(diào) 325
6.3.7 濁色調(diào) 326
6.3.8 特殊色調(diào) 327
6.4 配色方法 329
6.4.1 理論配色法 330
實戰(zhàn)案例 331
6.4.2 主體配色法 333
實戰(zhàn)案例 338
6.4.3 借鑒配色法 339
實戰(zhàn)案例 342
6.5 配色原則 345
6.5.1 與設(shè)計風(fēng)格匹配 345
6.5.2 主輔色有對比 346
6.5.3 數(shù)量要合適 352
6.6 本章小結(jié) 354

第7章 電商設(shè)計常用色 355
7.1 紅色 358
7.1.1 純紅色 358
7.1.2 粉紅色 362
7.1.3 深紅色 366
實戰(zhàn)案例 369
7.2 黃色 372
7.2.1 純黃色 372
7.2.2 淺黃色 376
7.2.3 褐色 378
實戰(zhàn)案例 380
7.3 綠色 383
7.3.1 純綠色 384
7.3.2 淺綠色 385
7.3.3 深綠色 387
實戰(zhàn)案例 390
7.4 藍(lán)色 393
7.4.1 純藍(lán)色 394
7.4.2 淺藍(lán)色 397
7.4.3 深藍(lán)色 400
實戰(zhàn)案例 402
7.5 紫色 405
7.5.1 純紫色 405
7.5.2 淺紫色 407
7.5.3 深紫色 409
實戰(zhàn)案例 411
7.6 本章小結(jié) 414

第8章 設(shè)計中的光影視界 415
8.1 光源類型 418
8.1.1 照射光 418
8.1.2 環(huán)境光 421
8.2 物體明暗 424
8.2.1 明暗原則 425
8.2.2 環(huán)境色影響 429
實戰(zhàn)案例 432
8.2.3 照射光影響 434
8.2.4 其他材質(zhì) 445
8.3 物體投影 450
8.3.1 投影方向 451
8.3.2 投影輪廓 451
8.3.3 投影顏色 458
8.3.4 投影深淺 459
8.3.5 投影虛實 461
實戰(zhàn)案例 464
8.4 戲劇化用光 470
8.4.1 明暗對比 470
8.4.2 色相對比 473
8.4.3 形狀劃分 476
實戰(zhàn)案例 481
8.5 本章小結(jié) 484

第9章 字體設(shè)計的門與路 485
9.1 字體的類型和氣質(zhì) 488
9.1.1 字體類型 488
9.1.2 字體氣質(zhì) 496
9.1.3 選擇合適的字體 498
9.2 字體設(shè)計 502
9.2.1 字體設(shè)計原則 502
9.2.2 改字 504
9.2.3 造字 511
實戰(zhàn)案例 516
9.3 字效呈現(xiàn) 519
9.3.1 立體 519
9.3.2 邊框 522
9.3.3 陰影 523
9.3.4 質(zhì)感 526
實戰(zhàn)案例 529
9.4 本章小結(jié) 534

第 10章 版式設(shè)計沒那么簡單（一）手機端詳情頁設(shè)計 535
10.1 做前想一想 538
10.1.1 整體印象 538
10.1.2 梳理文案 541
10.1.3 確定風(fēng)格 544
10.1.4 畫草圖、定配色 547
10.2 版式設(shè)計4原則 549
10.2.1 對齊 549
10.2.2 親密性 552
10.2.3 對比 556
10.2.4 重復(fù) 559
10.3 詳情頁版式設(shè)計 564
10.3.1 瀏覽順序 566
10.3.2 一屏一版塊 571
10.3.3 版塊結(jié)構(gòu) 573
10.3.4 前3屏原則 581
10.3.5 輕重結(jié)合 582
10.3.6 留白 586
10.3.7 少即是多 589
10.4 版式設(shè)計細(xì)節(jié) 592
10.4.1 幾何圖形 592
10.4.2 具象圖形 600
10.5 本章小結(jié) 606

第 11章 版式設(shè)計沒那么簡單（二）手機端專題頁設(shè)計 607
11.1 專題頁設(shè)計全局觀 610
11.1.1 服務(wù)對象 610
11.1.2 常用版塊 610
11.1.3 統(tǒng)一與變化 614
11.1.4 表現(xiàn)類型 624
實戰(zhàn)案例 632
11.2 專題頁版式設(shè)計 635
11.2.1 瀏覽順序 635
11.2.2 模塊大小 637
11.2.3 內(nèi)容區(qū)隔 642
11.2.4 信息呈現(xiàn) 648
11.3 本章小結(jié) 656