正版 配色+布局+海报+移动电商UI设计教程/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

姜玉声，2003年毕业于吉林省北华大学艺术学院，现就职于北京市信息管理学校，任媒体艺术系系主任和动漫游戏专业课教师，有丰富的UI设计经验，了解电子商务UI设计规范和技巧。了解电商平台搭建的色彩、布局和交互技巧。曾参与多个移动端电子商务项目的UI设计工作。先后领导并主编电子商务专业规划教材的编写，具备多年的教育教学经验。

1. 本书采用UI设计近期新流行趋势和设计规范，走在同类选题之前。 2. 全书采取基础知识+实用案例的整体结构，将基础知识合理的融入到实用案例中，即有利于读者理解，又方便案例的制作。 3. 本书中有大量的操作案例，针对性强，有利于读者学习。 4. 每章很后的举一反三案例，考察读者学习成果的同时，也能够帮助读者巩固所学内容。 5. 本系列所配多媒体教学资源，包含书中所有案例的视频教学文件，且统一播放界面，使得学习起来更加方便。

电子商务是近几年互联网飞速发展的产物，它是一种新兴的商业模式。电商UI设计可以称为视觉营销，主要作用为使消费者在看到商品后有购买的冲动。本书是一本全面讲解电商UI设计的案例教程，语言浅显易懂，配合大量精美的电商UI设计案例，全面介绍了电商UI设计各方面的相关知识，以及使用Photoshop设计制作电商UI的方法和技巧，使读者在掌握电商UI设计相关知识的同时，能够做到活学活用。 本书的配套资源包括所有案例的源文件、素材及视频教程，方便读者借鉴和使用。 本书适合准备学习或正在学习电商UI设计的初、中级读者及设计爱好者阅读，也可以为电商企业美工人员及相关专业的学习者提供参考。

"1. 本书采用UI设计近期新流行趋势和设计规范，走在同类选题之前。 2. 全书采取基础知识+实用案例的整体结构，将基础知识合理的融入到实用案例中，即有利于读者理解，又方便案例的制作。 3. 本书中有大量的操作案例，针对性强，有利于读者学习。 4. 每章最后的举一反三案例，考察读者学习成果的同时，也能够帮助读者巩固所学内容。 5. 本系列所配多媒体教学资源，包含书中所有案例的视频教学文件，且统一播放界面，使得学习起来更加方便。 "