电商逆袭：旺铺合理布局设计

Chapter 01　网店设计必备知识 001

1.1　了解网店设计 002

1.1.1　什么是网店设计 002

1.1.2　网店设计的重要性 002

1.1.3　网店设计前的准备工作 003

1.2　网店装修的一般流程 004

1.2.1　取个好店名很重要 004

1.2.2　确定设计风格 004

1.2.3　注重细节修饰 005

1.3　网店设计中的色彩搭配 005

1.3.1　网店设计中的色彩 005

1.3.2　色彩搭配的原理 009

1.4　理解电商设计文案 011

1.4.1　电商设计文案的内容 011

1.4.2　电商设计文案策划 012

1.4.3　如何创建优秀的产品文案 013

1.5　电商设计必须注意的问题 014

1.6　如何创建成功的电商网站 015

1.6.1　面向合适的用户群 015

1.6.2　遵守常规的导航元素 017

1.6.3　产品介绍页面是用户的关注点 017

1.7　网店视觉营销 018

1.7.1　网店视觉营销的表现 018

1.7.2　不同类型网店的视觉营销方法 019

1.8　本章小结 022

Chapter 02　电商网站布局元素 023

2.1　店标设计 024

2.1.1　店标的作用 024

2.1.2　店标的特性 024

2.1.3　店标的设计要求 025

2.1.4　店标的类别 026

案例分析 | 水果店铺店标设计分析 027

实战案例 | 设计咖啡店标 028

案例分析 | 药品专营店铺店标设计分析 032

实战案例 | 设计啤酒店标 033

2.2　店招设计 041

2.2.1　店招的设计要点 041

2.2.2　店招的表现类型 041

案例分析 | 母婴商城店招设计分析 043

实战案例 | 设计店铺促销店招 044

2.3　电商网站导航设计原则 048

2.3.1　符合网站内容结构 048

2.3.2　明确网站业务目标 049

2.3.3　遵从用户使用习惯 049

2.3.4　避免重复的分类 050

2.3.5　使用合适的文案 050

2.3.6　清晰的视觉体验 051

2.3.7　为用户提供反馈 051

2.3.8　导航符合网站整体风格 052

2.3.9　利于搜索引擎优化 052

2.3.10　趋于专业化的导航 053

案例分析 | 名鞋库网站导航设计分析 054

实战案例 | 设计运动品牌电商网站导航 055

2.4　面包屑导航设计技巧 062

2.4.1　统一关键词，避免重复 062

2.4.2　显示相关产品数量 062

2.4.3　善于使用面包屑 063

2.4.4　使用具有指向性的符号 063

2.4.5　减少对用户的影响 063

2.4.6　控制层级 064

2.4.7　在面包屑中使用关键字 064

案例分析 | 屈臣氏导航和店招设计分析 065

实战案例 | 设计网店导航和店招 066

2.5　商品陈列构图 073

2.5.1　距离感 073

2.5.2　对称与等比 074

2.5.3　节奏感 075

2.5.4　图片与文字的相辅相成 077

案例分析 | 随性的商品构图设计分析 079

实战案例 | 设计商品菱形排列布局 080

2.6　本章小结 084

Chapter 03　文字与广告设计 085

3.1　店铺中的文字设计 086

3.1.1　文字的字体 086

3.1.2　文字的字号 087

3.1.3　文字的间距和行距 088

3.1.4　文字的颜色 089

案例分析 | 母亲节变形文字设计分析 090

实战案例 | 设计广告变形文字 091

3.2　文字图形化处理 099

3.2.1　文字的图形化 099

3.2.2　文字的重叠 099

3.2.3　文字的整体性 100

3.2.4　让文字更易读 101

案例分析 | 特效毛笔广告文字设计分析 102

实战案例 | 设计光影特效文字 103

3.3　电商广告的作用 109

3.3.1　传达产品信息 109

3.3.2　增强产品艺术表现 110

3.3.3　增加页面趣味 111

案例分析 | 衣品天成女装广告设计分析 112

实战案例 | 设计化妆品广告 113

3.4　电商广告排版布局技巧 117

3.4.1　对齐 117

3.4.2　对比 120

3.4.3　分组 123

案例分析 | 海鲜促销广告设计分析 125

实战案例 | 设计水果促销广告 126

3.5　电商广告设计原则 133

3.5.1　突出广告主题 133

3.5.2　明确广告目标人群 135

3.5.3　完美的表现形式 136

案例分析 | 安踏运动鞋广告设计分析 142

实战案例 | 设计运动鞋宣传广告 143

3.6　本章小结 148

Chapter 04　电商海报设计 149

4.1　电商海报的类型 150

4.1.1　产品宣传海报 150

4.1.2　促销宣传海报 150

4.1.3　活动宣传海报 151

案例分析 | 男装促销活动海报设计分析 152

实战案例 | 设计女装活动海报 153

4.2　常见的电商海报构图方式 159

4.2.1　左右构图 159

4.2.2　三栏分布构图 160

4.2.3　叠加构图 161

4.2.4　倾斜构图 161

案例分析 | 太阳镜海报设计分析 163

实战案例 | 设计精油产品海报 164

4.3　电商海报的配色技巧 172

4.3.1　了解色彩关系 172

4.3.2　掌握配色黄金比例 173

4.3.3　邻近色搭配 174

4.3.4　间隔色搭配 176

4.3.5　互补色搭配 178

案例分析 | 春夏季女鞋活动海报

设计分析 180

实战案例 | 设计淘宝新年活动海报 181

4.4　电商海报的设计表现形式 186

4.4.1　直接展示 186

4.4.2　突出特点 186

4.4.3　对比衬托 187

4.4.4　以小见大 187

4.4.5　联想 187

4.4.6　夸张 188

4.4.7　幽默 188

4.4.8　以情托物 189

案例分析 | 母亲节活动海报设计分析 190

实战案例 | 设计五一促销活动海报 191

4.5　本章小结 198

Chapter 05　电商页面构图设计 199

5.1 了解电商页面的构图 200

5.1.1　为什么要对电商页面进行构图 200

5.1.2　电商页面构图标准 200

5.2　页面几何切割的构图方式 202

5.2.1　简单切割 202

5.2.2　对称切割 203

5.2.3　组合切割 204

5.2.4　多重切割 205

案例分析 | 化妆品网店活动页面

设计分析 206

实战案例 | 设计运动服装网店页面 207

5.3　放射与透视状的页面构图 219

5.4　整体和流程的页面构图 220

案例分析 | 护肤品店铺页面设计分析 221

实战案例 | 设计啤酒促销页面 222

5.5　根据图像轮廓联想的

方式构图 228

案例分析 | 赛车票务电商页面设计分析 230

实战案例 | 设计古典风格网店页面 231

5.6　本章小结 240

Chapter 06　电商页面布局设计 241

6.1 电商页面首屏布局

设计要点 242

6.1.1　确定页面首屏可视范围 242

6.1.2　展示吸引用户的信息 242

6.1.3　明确清晰的视觉焦点 243

6.1.4　运用图片便于理解 244

6.1.5　首屏要强调主题 244

6.1.6　适当添加交互效果 245

6.1.7　符合视觉习惯的图文混排 245

案例分析 | 时尚女包店铺页面设计分析 246

实战案例 | 设计化妆品网店首页 247

6.2　商品列表页布局设计 257

6.2.1　商品列表形式 257

6.2.2　展示有用的产品信息 258

6.2.3　鼠标悬停时产生交互效果 258

6.2.4　出现适量的附加信息 259

6.2.5　添加推荐商品刺激消费 259

6.2.6　减少操作步骤 260

6.2.7　了解顾客心理 260

案例分析 | 食品店铺产品列表页面

设计分析 261

实战案例 | 设计手机促销列表页面 262

6.3　商品详情页设计 271

6.3.1　提供商品展示图片的细节

放大效果 271

6.3.2　满足用户的比价心理 272

6.3.3　运用商品分享功能 272

6.3.4　良好的用户引导 273

6.3.5　跟随性导航 273

6.3.6　不可缺少的商品评价功能 274

6.3.7　保持商品介绍的连贯性 274

6.3.8　商品详情页面不宜过长 274

案例分析 | 化妆品详情页面设计分析 275

实战案例 | 设计小家电商品详情页面 276

6.4　电商活动页面设计 282

6.4.1　活动文案是灵感来源 282

6.4.2　节日促销活动页配色与

素材的选择 284

6.4.3　活动页面设计技巧 285

案例分析 | 家电促销活动页面设计分析 287

实战案例 | 设计网店活动主题页面 288

6.5　本章小结 3002100433B

本书是一本使用Photoshop进行电商页面布局设计制作的案例教程，语言浅显易懂，配合大量精美的电商页面设计案例，讲解了有关电商页面布局设计的相关知识和使用Photoshop进行电商页面设计制作的方法和技巧。使读者在掌握电商页面设计各方面知识的同时，能够在电商页面设计制作基础上做到活学活用。

本书配套的光盘中提供了本书所有案例的源文件、素材及视频教程，方便读者借鉴和使用。

这是淘宝为了鼓励小卖家而最新开出的一种服务，只对五心及五心以下的用户开放，最初是二十元/月，现已对所有五心及五心以下的用户免费开放，相对于普通旺铺，旺铺扶植版主要是对首页的模块进行了固化，用户不能随意增加模块，虽然和旺铺比较有一定的差别。但对于小卖家，能够免费使用，这仍是一个不错的选择。

旺铺指的是淘宝的一种增值服务，是相对免费的普通店铺说的，和免费店的区别在于：1、首页的商品图片比较大，免费店的商品图片是80*80，旺铺的可以设置为160*160，220*220的，使得商品更能清晰的在首页展示。2、店铺最上方有大的店铺招牌，可以更好地体现店铺形象。3、可以在店铺首页添加多个自定义模块，自己编辑代码，自定义商品的排列和显示，做广告页面，使得店铺更加美观，让客户产生购买欲。4、可以添加多个自定义页面，做为首页的补充，自定义页面可以和首页一样进行装修，如果你一家店经营多种商品，可以做成多个自定义页面，每个页面做为一类商品的展示页。另外，淘宝已经对旺铺进行了升级，还可以对宝贝祥情页面和宝贝列表页面进行单独装修