电子商务视觉设计

**章 绪论 ................................................................................................................................................. 1 **节 电商视觉设计概述 .............................................................................................................. 2 一、视觉设计 ................................................................................................................................ 2 二、视觉营销 ................................................................................................................................ 3 第二节 电商视觉设计的准备 .......................................................................................................... 5 一、电商网店的视觉定位 ........................................................................................................... 5 二、文案策划 ................................................................................................................................ 6 三、商品拍摄 ................................................................................................................................ 7 四、图片处理 ................................................................................................................................ 8 五、详情页设计 ............................................................................................................................ 8 第三节 电商视觉设计色彩应用 .................................................................................................... 10 一、色彩的基础知识 .................................................................................................................. 10 二、电商网店视觉图像的色彩调整 ......................................................................................... 17 三、电商网店的配色 .................................................................................................................. 23 第四节 电商视觉设计文字应用 .................................................................................................... 28 一、电商视觉设计中的字体 ..................................................................................................... 28 二、电商网店的字体设计 ......................................................................................................... 31 第五节 电商视觉设计的形状应用 ................................................................................................ 34 一、电商网店视觉设计中的形状 ............................................................................................. 34 二、形状的创意处理 .................................................................................................................. 34 第二章 电商视觉设计体现 ..................................................................................................................... 36 **节 电商视觉营销设计体现 .................................................................................................... 37 一、电商网店视觉体现 ............................................................................................................. 37 二、广告视觉体现 ...................................................................................................................... 38 三、商品视觉体现 ...................................................................................................................... 39 第二节 电商网店视觉风格 ............................................................................................................ 42 一、电商网店视觉风格的概念 ................................................................................................. 42 二、确定电商网店视觉风格 ..................................................................................................... 43 第三节 电商广告视觉传达 ............................................................................................................ 44 一、电商广告视觉传达的概念及意义 ..................................................................................... 44 二、电商广告视觉传达的要求 ................................................................................................. 45 第四节 电商视觉营销 ..................................................................................................................... 45 一、电商视觉营销的概念 ......................................................................................................... 45 二、电商视觉营销的策略 ......................................................................................................... 45 第三章 电商视觉影像传达 ..................................................................................................................... 55 **节 电商商品拍摄基础知识 .................................................................................................... 56 一、认识拍摄器材 ...................................................................................................................... 56 二、电商商品拍摄中的用光与布光 ......................................................................................... 63 三、开拍前必不可少的准备工作 ............................................................................................. 69 第二节 电商商品拍摄的构图 ........................................................................................................ 73 一、构图的含义与目的 ............................................................................................................. 73 二、构图的画幅 .......................................................................................................................... 74 三、基本构图方法 ...................................................................................................................... 75 四、基本构图技巧 ...................................................................................................................... 78 第三节 电商商品图片拍摄 ............................................................................................................ 81 一、电商商品拍摄中背景的选择 ............................................................................................. 81 二、电商商品拍摄中商品的陈列与摆放 ................................................................................. 82 三、电商商品图片拍摄案例 ..................................................................................................... 83 第四节 电商商品视频拍摄 ............................................................................................................ 85 一、视频拍摄的要求 .................................................................................................................. 85 二、电商商品视频拍摄的流程 ................................................................................................. 87 三、电商商品视频拍摄案例 ..................................................................................................... 88 第四章 电商商品图片的处理 ................................................................................................................. 90 **节 商品图片视觉效果分析 .................................................................................................... 91 一、视觉效果 .............................................................................................................................. 91 二、视觉元素 .............................................................................................................................. 98 第二节 精细处理商品图片 ............................................................................................................ 99 一、去除商品图片中的细小瑕疵――清除商品图片上的污渍 ............................................ 99 二、去除商品图片中的大面积瑕疵――还原商品图片原貌 ............................................... 101 三、突出商品图片细节的处理――锐化商品图片细节 ....................................................... 102 四、商品图片的虚实处理――突出商品图片主体 ............................................................... 104 五、修复商品图片的残缺――好看的碗 ............................................................................... 106 第三节 抠取图片中所要的内容 .................................................................................................. 107 一、抠取规则形状的商品图片――草地上的球 ................................................................... 107 二、抠取不规则形状的商品图片――甜品 ........................................................................... 110 三、根据色彩抠取商品图片――项链 ................................................................................... 112 第四节 丰富商品图片内容 .......................................................................................................... 114 一、添加矢量元素――凸显商品信息 ................................................................................... 114 二、用文字装饰图片――灵活的路径文字 ........................................................................... 116 三、改变商品图片局部色彩――让颜色更丰富 ................................................................... 118 第五章 电商网店首页视觉设计 ........................................................................................................... 121 **节 电商网店首页认知 .......................................................................................................... 122 一、电商网店首页部分内容展示 ........................................................................................... 122 二、电商网店首页设计 ........................................................................................................... 123 第二节 店招视觉设计 ................................................................................................................... 123 一、店招视觉设计的意义与功能 ........................................................................................... 123 二、店招视觉设计的规范 ....................................................................................................... 124 三、店招视觉设计的要求 ....................................................................................................... 124 四、店招视觉设计的方法 ....................................................................................................... 125 五、店招视觉设计案例――善美花屋网店店招 ................................................................... 125 第三节 店徽视觉设计 ................................................................................................................... 128 一、店徽视觉设计认知 ........................................................................................................... 128 二、店徽视觉设计的常见类型 ............................................................................................... 128 三、店徽视觉设计的要点 ....................................................................................................... 130 四、店徽视觉设计案例――喵村网店店徽 ........................................................................... 131 第四节 海报视觉设计 ................................................................................................................... 135 一、海报视觉设计认知 ........................................................................................................... 135 二、海报视觉设计的要点 ....................................................................................................... 135 三、海报视觉设计的规范 ....................................................................................................... 135 四、海报视觉设计的技巧 ....................................................................................................... 136 五、海报视觉设计案例――厨具网店海报 ........................................................................... 137 第六章 电商网店详情页视觉设计 ...................................................................................................... 140 **节 电商网店详情页认知 ...................................................................................................... 141 一、详情页的意义 .................................................................................................................... 141 二、详情页的营销流程 ........................................................................................................... 141 三、详情页的尺寸 .................................................................................................................... 141 四、详情页的设计要点 ........................................................................................................... 141 五、详情页的设计类型 ........................................................................................................... 141 第二节 商品主图视觉设计 .......................................................................................................... 144 一、商品主图视觉设计认知 ................................................................................................... 144 二、商品主图的设计形式 ....................................................................................................... 145 三、提高商品主图点击率的方法 ........................................................................................... 146 四、商品主图视觉设计案例――八分裤商品主图 ............................................................... 146 第三节 关联营销图视觉设计 ...................................................................................................... 149 一、关联营销图视觉设计认知 ............................................................................................... 149 二、关联营销图视觉设计的原则 ........................................................................................... 149 三、关联营销图视觉设计的表现形式 ................................................................................... 150 第四节 商品细节图视觉设计 ...................................................................................................... 152 一、商品细节图的表现方法 ................................................................................................... 152 二、商品细节图的设计方法 ................................................................................................... 154 三、商品细节图视觉设计案例――品牌女鞋 ....................................................................... 155 第五节 商品功能图视觉设计 ...................................................................................................... 158 一、商品功能图视觉设计认知 ............................................................................................... 158 二、商品功能图的设计规范 ................................................................................................... 158 第六节 商品展示设计 ................................................................................................................... 160 一、商品展示设计认知 ........................................................................................................... 160 二、商品展示设计的内容 ....................................................................................................... 160 三、商品展示设计的方法 ....................................................................................................... 161 四、商品展示设计案例――女包颜色展示 ........................................................................... 162 第七章 电商网店推广图与促销活动页视觉设计 ............................................................................. 165 **节 高点击率推广图视觉设计 .............................................................................................. 166 一、高点击率推广图的意义 ................................................................................................... 166 二、直通车推广图的设计技巧 ............................................................................................... 166 三、直通车推广图视觉设计案例――地灯直通车推广图 ................................................... 168 四、钻展图视觉设计 ................................................................................................................ 171 第二节 促销活动页视觉设计 ...................................................................................................... 173 一、促销活动页的制作方法 ................................................................................................... 173 二、促销活动页的广告尺寸 ................................................................................................... 173 三、促销活动页的广告设计准则 ........................................................................................... 173 四、促销活动的类型 ................................................................................................................ 175 五、促销活动页视觉设计案例――女包促销广告 ............................................................... 178 第八章 手机移动端视觉设计 ............................................................................................................... 183 **节 手机移动端电商网店视觉设计 ..................................................................................... 184 一、手机移动端电商网店视觉设计认知 ............................................................................... 184 二、手机移动端电商网店首页视觉设计 ............................................................................... 186 三、手机移动端电商网店首页视觉设计案例――时尚床品店铺首页 .............................. 189 四、手机移动端电商网店详情页视觉设计 ........................................................................... 193 五、手机移动端电商网店详情页视觉设计案例――索尼相机详情页 .............................. 195 第二节 手机移动端微店视觉设计 .............................................................................................. 198 一、手机移动端微店首页视觉设计 ....................................................................................... 198 二、手机移动端微店详情页视觉设计 ................................................................................... 201 三、手机移动端微店底部导航视觉设计 ............................................................................... 203 四、手机移动端微店详情页视觉设计案例――年货大集详情页 ...................................... 203 参考文献 ..................................................................................................................................................... 208