配色+布局+海报+移动电商UI设计教程

第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