淘宝店铺页面设计与装修实战教程

　　《淘宝店铺页面设计与装修实战教程》由浅入深的设计工具书，整本书围绕淘宝店铺装修设计的要点进行讲解，从分析视觉设计的原理到案例的实操，旨在为电商设计师、淘宝美工提供实用的店铺设计与装修指导，使之能全面学习，少走弯路。《淘宝店铺页面设计与装修实战教程》共11章，第1章介绍了网上开店的基本流程，从前期的准备工作到后期的推广运营；第2章详细介绍了网店装修的常用软件知识，包括图片处理软件Photoshop、矢量图制作软件Illustrator、网页代码编写软件Dreamweaver，让读者清楚地了解各软件的基本知识，打下扎实的软件基础操作功底；第3章介绍了网店装修的主要工作，内容围绕产品拍摄、产品修图、首页装修、产品描述页设计、产品主图设计等展开，结合理论与实操进行讲解；第4章介绍了高端设计的主要技能，围绕文字、排版、背景、色彩、效果处理几大要点，以案例的方式进行讲解；第5~10章分别是不同类目的店铺装修操作实例，包含服装、家居百货、美妆、母婴、食品、数码家电六大类目，每一个类目包含了不同风格的实例；第11章是作者多年工作经验的总结。《淘宝店铺页面设计与装修实战教程》配套提供学习资源，包括素材文件、实例文件和操作演示视频，读者可以边学边练习，提高学习效率。

　　林丹，电商设计师，负责过各电商平台（天猫、淘宝、京东、**等）的店面整体形象设计，擅长用户的视觉体验分析。同时精通手机界面主题设计/UI设计、企业网页建站前端设计、平面设计等。

01 网上开店流程介绍
1．1 前期的准备工作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 008
1．1．1 从画面风格分析效果图表现 ．．．．．．．．．．．．． 008
1．1．2 注册账号 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 008
1．1．3 开通网上支付渠道 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 009
1．1．4 发布商品 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 009
1．1．5 确定供货源和签订供货合同 ．．．．．．．．．．．．． 009
1．1．6 确定供货周期和储备方式 ．．．．．．．．．．．．．．．．． 010
1．2 店铺的运营与推广．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 010
1．2．1 获取用户和流量 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 010
1．2．2 店铺转化 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 010
1．2．3 店铺推广 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 011
1．3 抓准售前售后的新形式．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 012
1．4 经验总结与提高．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 012
02 网店装修必备的软件知识
2．1 网店装修常用软件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 014
2．2 图片处理软件Photoshop．．．．．．．．．．．．．．．．．．．．．．．．．．． 014
2．2．1 Photoshop的工作界面 ．．．．．．．．．．．．．．．．．．．．．．．． 014
2．2．2 Photoshop的菜单栏 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 014
2．2．3 Photoshop的选项卡 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 015
2．2．4 Photoshop的工具箱 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 015
2．2．5 Photoshop的控制面板 ．．．．．．．．．．．．．．．．．．．．．．．． 023
2．2．6 Photoshop的首选项 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 024
2．2．7 Photoshop的快捷键 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 025
2．3 矢量图制作软件Adobe illustrator．．．．．．．．．．． 025
2．3．1 illustrator的工作界面 ．．．．．．．．．．．．．．．． 025
2．3．2 illustrator的菜单栏 ．．．．．．．．．．．．．．．．．．．． 026
2．3．3 illustrator的选项卡 ．．．．．．．．．．．．．．．．．．．． 026
2．3．4 illustrator的工具箱 ．．．．．．．．．．．．．．．．．．．． 026
2．3．5 illustrator的控制面板 ．．．．．．．．．．．．．．．． 027
2．3．6 illustrator的快捷键 ．．．．．．．．．．．．．．．．．．．． 028
2．4 网页代码编写软件Dreamweaver．．．．．．．．．．．．．028
2．4．1 Dreamweaver的工作界面 ．．．．．．．．．．．．．．．．．．． 028
2．4．2 Dreamweaver的菜单栏 ．．．．．．．．．．．．．．．．．．．．．．． 029
2．4．3 Dreamweaver的基础运用 ．．．．．．．．．．．．．．．．．．． 029
2．4．4 Dreamweaver的快捷键 ．．．．．．．．．．．．．．．．．．．．．．． 030
03 网店装修的主要工作
3．1 网店装修主要工作概要．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 032
3．2 产品拍摄．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 032
3．2．1 场景布置 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 032
3．2．2 光线的角度 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 033
3．2．3 拍摄构图 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 034
3．3 产品处理．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 035
3．3．1 美发套装的处理（不锈钢材质） ．．．．．．．．．．．．．035
3．3．2 刨丝器的处理（塑料材质） ．．．．．．．．．．．．． 039
3．4 首页装修．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 041
3．4．1 首页布局原则 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 041
3．4．2 将首页进行切片 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 043
3．4．3 店招设计 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 049
3．4．4 导航栏设计 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 049
3．4．5 客服中心设计 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 050
3．5 产品描述页设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 050
3．5．1 什么是产品描述页 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 050
3．5．2 设计产品描述页时要注重哪些方面．．．．．． 050
3．5．3 产品描述页的要素组成和顺序摆放 051
3．5．4 如何设计产品描述页 ．．．．．．．．．．．．．．．．．．．．．．．．． 051
3．6 产品主图设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 060
3．6．1 做好产品主图的要素 ．．．．．．．．．．．．．．．．．．．．．．．．． 061
3．6．2 五张产品图要怎么体现 ．．．．．．．．．．．．．．．．．．．．． 061
3．7 活动图设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 062
3．7．1 店铺引流的活动图设计 ．．．．．．．．．．．．．．．．．．．．． 063
3．7．2 活动入口产品图设计 ．．．．．．．．．．．．．．．．．．．．．．．．． 068
3．7．3 活动营销图设计 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 073
3．8 直通车图片设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 074
3．9 钻展图设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 077
04 高级设计的主要技巧
4．1 文字特效制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 082
4．1．1 星光熠熠的文字 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 082
4．1．2 立体和有层次的文字 ．．．．．．．．．．．．．．．．．．．．．．．．． 083
4．1．3 创意的文字 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 085
4．2 简洁明了的排版．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 087
4．2．1 居中排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 087
4．2．2 上下排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 088
4．2．3 左右排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 089
4．3 选用合适的背景搭配．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 092
4．3．1 简单大气 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 092
4．3．2 唯美风景 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 093
4．4 整体的色彩搭配．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 095
4．4．1 对比色搭配 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 095
4．4．2 相近色搭配 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 096
4．5 产品光效处理．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 096
4．5．1 不锈钢类产品 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 097
4．5．2 电器类产品 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 099
4．5．3 护肤类产品 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 101
05 服装类店铺装修
5．1 女装类店铺整体设计分析．．．．．．．．．．．．．．．．．．．．．．．．．． 104
5．1．1 分析主要的消费群体 ．．．．．．．．．．．．．．．．．．．．．．．．． 104
5．1．2 分析页面的排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 104
5．2 欧美风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 104
5．2．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 104
5．2．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 105
5．3 日韩风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 110
5．3．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 110
5．3．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 112
5．4 中规中矩风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 117
5．4．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 117
5．4．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 118
5．5 男装类店铺整体设计分析．．．．．．．．．．．．．．．．．．．．．．．．．． 125
5．5．1 分析主要的消费群体 ．．．．．．．．．．．．．．．．．．．．．．．．． 125
5．5．2 分析页面的排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 125
5．6 商务风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 125
5．6．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 125
5．6．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 126
5．7 潮流风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 130
5．7．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 130
5．7．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 131
06 家居百货类店铺装修
6．1 家居百货类店铺整体设计分析．．．．．．．．．．．．．．．．．．．． 140
6．1．1 分析主要的消费群体 ．．．．．．．．．．．．．．．．．．．．．．．．． 140
6．1．2 分析页面的排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 140
6．2 简单清新风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 140
6．2．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 140
6．2．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 141
6．3 温馨居家风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 148
6．3．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 148
6．3．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 149
07 美妆类店铺装修
7．1 美妆类店铺整体设计分析．．．．．．．．．．．．．．．．．．．．．．．．．． 168
7．1．1 分析主要的消费群体 ．．．．．．．．．．．．．．．．．．．．．．．．． 168
7．1．2 分析页面的排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 168
7．2 自然唯美风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 168
7．2．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 168
7．2．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 170
7．3 简单清凉风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 177
7．3．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 177
7．3．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 178
08 母婴类店铺装修
8．1 母婴类店铺整体设计分析．．．．．．．．．．．．．．．．．．．．．．．．．． 186
8．1．1 分析主要的消费群体 ．．．．．．．．．．．．．．．．．．．．．．．．． 186
8．1．2 分析页面的排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 186
8．2 空灵梦幻风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 186
8．2．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 186
8．2．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 187
8．3 卡通手绘风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 194
8．3．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 194
8．3．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 196
09 食品类店铺装修
9．1 食品类店铺整体设计分析．．．．．．．．．．．．．．．．．．．．．．．．．． 206
9．1．1 分析主要的消费群体 ．．．．．．．．．．．．．．．．．．．．．．．．． 206
9．1．2 分析页面的排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 206
9．2 缤纷休闲风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 206
9．2．1 风格分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 206
9．2．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 207
9．3 喜庆浪漫风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 217
9．3．1 风格分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 217
9．3．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 218
10 数码家电类店铺装修
10．1 数码家电类店铺整体设计分析 ．．．．．．．．．．．．． 230
10．1．1 分析主要的消费群体 ．．．．．．．．．．．．．．．．．．．．．．． 230
10．1．2 分析页面的排版 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 230
10．2 酷炫数码风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 230
10．2．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 230
10．2．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 232
10．3 居家风格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 245
10．3．1 页面分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 245
10．3．2 步骤详解 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 247
11 多年工作经验总结
11．1 如何减低修改率．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 258
11．1．1 学会问——下手前先沟通清楚 258
11．1．2 学会看——充分参考同行的页面 258
11．1．3 学会改——做出大家想要的效果 259
11．1．4 学会记——不足之处记于心 ．．．．．．．．．． 259
11．2 如何让你面试成功．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 260
11．2．1 海选——第一轮面试通过作品判断260
11．2．2 复试——第二轮面试相互了解 260
11．2．3 实操——观看你的软件操作能力 262
11．3 如何提高你的身价．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 263
11．3．1 无任何经验的设计小白 ．．．．．．．．．．．．．．．．．． 263
11．3．2 有设计经验的设计师 ．．．．．．．．．．．．．．．．．．．．．． 263
11．4 分析未来电商设计的就业趋向 ．．．．．．．．．．．．．． 264