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

作者
姜玉声
丛书名
UI设计从业必读
出版社
电子工业出版社
ISBN
9787121417665
简要
简介
内容简介 电子商务是近几年互联网飞速发展的产物,它是一种新兴的商业模式。电商UI设计可以称为视觉营销,主要作用为使消费者在看到商品后有购买的冲动。本书是一本全面讲解电商UI设计的案例教程,语言浅显易懂,配合大量精美的电商UI设计案例,全面介绍了电商UI设计各方面的相关知识,以及使用Photoshop设计制作电商UI的方法和技巧,使读者在掌握电商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


推荐

车牌查询
桂ICP备20004708号-3