目录
第1章 原型图与版式规划 1
1.1 如何画出专业的原型图 2
1.2 清晰的视觉层次 2
1.2.1 视觉流结构 3
1.2.2 功能预见性 4
1.2.3 视觉焦点 6
1.2.4 把简单留给客户 8
1.2.5 考虑边界条件 10
1.3 五种经典网页布局设计 11
1.3.1 顶部大图Banner+简单的栅格 12
1.3.2 单页设计，单栏布局 13
1.3.3 自定义栅格 14
1.3.4 经典的F式布局 15
1.3.5 极简分层 16
1.4 运用黄金比例 17
1.4.1 什么是黄金比例 17
1.4.2 在设计中使用黄金比例的5种方法 21
1.5 构图原则 29
1.5.1 对称平衡 29
1.5.2 不对称平衡 30
1.5.3 水平平衡 31
1.5.4 垂直平衡 31
1.6 超大网页布局 32
1.6.1 将网页设计的“大”一点 32
1.6.2 聚焦图像 33
1.6.3 设计优美的字体 34
1.6.4 正确用色 34
1.6.5 保持简约 35

第2章 界面配色原则 37
2.1 色彩三要素 38
2.2 色彩的特性 39
2.3 色调象征意义 41
2.4 三色原则 43
2.4.1 色不过三 43
2.4.2 用精致的颜色提炼格调 45
2.4.3 确定主色 46
2.4.4 从对比色中找辅助色 50
2.5 色彩四大对比 59
2.6 配色方法 63
2.6.1 单色配色法 63
2.6.2 渐变配色法 67
2.6.3 多色配色法 71
2.6.4 首屏引导型 79
2.6.5 单底色多色彩型 79
2.6.6 色彩对比型 81

第3章 设计风格与网页框架 83
3.1 根据需求确定设计风格 84
3.1.1 文艺，气质，素雅，安静 84
3.1.2 高冷，时尚 84
3.1.3 传统，中国风，意境 85
3.1.4 青春，活力，年轻 86
3.1.5 可爱，甜美 86
3.1.6 节日，促销，热闹 87
3.1.7 未来，科技 88
3.1.8 严肃，规矩 88
3.1.9 手绘风 89
3.2 七种主流风格设计 89

第4章 选图，配图与构图 94
4.1 优秀网页配图选取规则 95
4.1.1 细节丰富的高清图片 96
4.1.2 能够传递情绪的图片 99
4.1.3 适当的幽默 100
4.1.4 使用获奖或者证书图片 102
4.1.5 让用户看到想让他看到的 102
4.1.6 展示产品丰富细节 103
4.1.7 图片展示位置 103
4.1.8 全角度图片 104
4.2 配图与几何图形的运用 105
4.2.1 配图矩形化 105
4.2.2 配图三角形化 106
4.2.3 配图圆形化 107
4.3 打造个性配图的五种方法 108
4.3.1 渐变叠加法 109
4.3.2 纯色调叠加法 109
4.3.3 去色法 110
4.3.4 高对比度叠加法 111
4.3.5 局部叠加法 112
4.4 顶尖素材配图网站分享 113

第5章 网页设计注意事项 119
5.1 网页设计标准规范 120
5.2 网页设计趋势解读 122
5.3 设计师的能力和素质 128
5.4 必须掌握的法律常识 131
5.4.1 抄袭 132
5.4.2 版权意识 137
5.4.3 其他违法陷阱 143

第6章 后台界面设计 146
6.1 后台界面设计规范 147
6.1.1 框架规范 149
6.2 后台界面设计流程 150
6.2.1 转变思维方式：由被动接受到主动提案 150
6.2.2 了解定位和转换视角 151
6.2.3 统一战线，建立目标 151
6.3 关于后台的制作风格 152
6.4 列表设计，表单设计 154

第7章 移动端设计规范 164
7.1 图标设计规范 165
7.2 注册登录设计规范 167
7.2.1 登录属性 167
7.2.2 注册登录的四种方式 169
7.3 状态栏，导航栏，标签栏 173
7.3.1 状态栏 174
7.3.2 导航栏 174
7.3.3 标签栏 175
7.4 内容视图 176
7.4.1 表格视图 176
7.4.2 文本视图 178
7.4.3 Web视图 179
7.4.4 临时弹窗 179
7.5 文字规范 180
7.6 焦点图banner设计规范 181
7.6.1 设计要点 181
7.6.2 构图形式 182
7.6.3 字体运用 186

第8章 界面元素及控件 189
8.1 图标 190
8.1.1 APP图标特点 190
8.1.2 图标设计流程 193
8.1.3 图标设计方法 196
8.2 搜索栏标题栏 198
8.2.1 标题栏 198
8.2.2 搜索栏 199
8.3 其他元素 201
8.3.1 楼层类别展示 201
8.3.2 猜你喜欢 202
8.3.3 底部导航栏 202
8.3.4 首页 203
8.3.5 分类 203
8.3.6 购物车 204
8.3.7 我的 205

第9章 移动端常用界面设计 207
9.1 首页 208
9.1.1 卡片式设计 208
9.1.2 楼层设计 208
9.2 个人中心 208
9.2.1 头像区域 209
9.2.2 个人信息区域 209
9.2.3 功能模块 211
9.3 启动页 213
9.3.1 品牌宣传类 213
9.3.2 首页样式类 214
9.3.3 情感故事类 215
9.3.4 节日氛围类 215
9.3.5 广告类 216
9.4 引导页 217
9.4.1 引导页设计要点 219
9.4.2 引导页的分类 222

第10章 移动端常用界面设计 232
10.1 组件规范 233
10.1.1 设计规范的目的 233
10.1.2 规范的组成 233
10.2 颜色规范 236
10.2.1 为什么选择HSB 236
10.2.2 创建调色板 237
10.2.3 调色板应用 237
10.3 文字规范 238
10.3.1 IOS系统 238
10.3.2 Android系统 238
10.3.3 系统字号 238
10.4 布局规范 239
10.4.1 框架 239
10.4.2 顶部导航栏 239
10.4.3 顶部标签栏 240
10.4.4 底部标签栏 240
10.5 图片规范 241
10.5.1 用户头像 241
10.5.2 商品图片 242
10.5.3 无数据图片 243
第11章 电商页面设计规范 246
11.1 电商类页面整体规范 247
11.2 搜索栏 250
11.3 横幅广告 251
11.4 模块快速入口 252
11.5 背景板设计规范 255
11.6 用户订阅规范 258
11.7 秒杀品设计规范 258
11.8 内容推荐设计规范 259
11.9 内容模块视觉规范 260
11.9.1 屏幕安全距离 261
11.9.2 竖向比例切割豆腐块 262
11.9.3 横向比例切割豆腐块 264
11.9.4 模块的标题设计规范 265

第12章 电商海报设计 269
12.1 电商海报组成要素 270
12.2 电商海报设计思路 270
12.2.1 电商海报整体气质 270
12.2.2 信息的层级关系 276
12.2.3 投放的环境 279
12.3 电商海报类型分解 282
12.3.1 主产品美观突出型 282
12.3.2 产品展示型 284
12.3.3 标题突出型 285
12.3.4 产品展示，标题点睛型 286
12.4 色彩在电商海报中的作用 287
12.4.1 点缀作用 287
12.4.2 突出主体 288
12.4.3 平衡画面 288
12.4.4 延续风格 290
12.4.5 塑造画面气质 290

第13章 首页楼层搭建与视觉吸引 294
13.1 首页的布局框架 295
13.1.1 首页的重要性 295
13.1.2 首页布局流程 300
13.2 店招的设计 306
13.2.1 店招的重要性 306
13.2.2 如何设置店招 306
13.2.3 店招制作尺寸 308
13.3 导航栏设计 308
13.3.1 导航栏的作用 308
13.3.2 店招导航 310
13.3.3 页中分类导航 310
13.3.4 侧边栏分类导航 311
13.3.5 页尾导航 312
13.4 焦点轮播图设计 313
13.4.1 首页焦点图的重要性 313
13.4.2 如何设计首页焦点图 314
13.5 产品陈列区设计 326
13.5.1 产品陈列的重要性 326
13.5.2 如何进行产品陈列 330
13.6 其他常用设置 330
13.6.1 容易被忽视的店尾页底 330

第14章 活动策划与设计实现 333
14.1 聚划算活动策划 334
14.1.1 聚划算形象图 334
14.1.2 聚划算价格趋势图 335
14.1.3 聚划算买赠机制图 336
14.2 淘抢购活动策划 339
14.2.1 淘抢购形象图 339
14.2.2 淘抢购价格趋势图 340
14.2.3 淘抢购活动机制图 340
14.3 狂欢节活动策划 342
14.3.1 售卖页主会场 342
14.3.2 售卖页分会场 354
14.4 购物狂欢节活动策划 356
14.4.1 活动定位 356
14.4.2 内容营销 357
14.4.3 官网首页氛围 358
14.4.4 双12会场 358
14.4.5 双12手机端视觉分析 360
14.5 其他节日活动策划 365

第15章 高点击率推广图设计 369
15.1 直通车图设计 370
15.1.1 直通车定义和展现位置 370
15.1.2 直通车运营的基本原则 372
15.1.3 直通车图文案该怎么写 373
15.1.4 消费心理分析 376
15.1.5 橱窗图设计方法论 376
15.2 橱窗图设计 379
15.2.1 橱窗图的制作要求 379
15.2.2 橱窗图的分类 379
15.2.3 制作橱窗图的要点 383
15.3 钻展图设计思路 384
15.3.1 钻展图基本要求 384
15.3.2 钻展图设计流程 384
15.3.3 钻展图的构图 385
15.4 聚划算主图 387
15.4.1 聚划算主图制作规范 387
15.4.2 聚划算主图近期改版 388
15.5 淘抢购主图 390

第16章 高转化率详情页设计 394
16.1 产品详情页 395
16.1.1 什么是产品详情页 395
16.1.2 产品详情页尺寸 403
16.2 如何设计制作产品详情页 404
16.2.1 详情页的思路要点 404
16.2.2 详情页的制作流程 405
16.2.3 详情页的必要信息 408
16.2.4 详情页的注意事项 408