淘宝网店装修配色方案一日通

2012年，中国的网民已达到5亿左右，有专家预测网购的规模或达3万亿，如此大的市场规模，引来大量的网上淘金者，许多人开始选择网上开店，而淘宝网则是网店的一个重要集散地。俗话说“七分门楼三分屋”，网店的门面对商品销售有着很大影响。不过，网店装修是个很大的话题，不是一个专题能讲清楚的，所以今天，我们主要针对网店装修中配色方案这一问题展开。

所谓配色方案，简单说就是如何将不同的颜色搭配到一起，起到一种和谐的或者有视觉冲击力的效果。生活中，许多MM们常常讨论，什么颜色的上衣搭配什么颜色的裙子，配什么颜色的包包，戴什么颜色的项链或手链，才会好看，这其实就是在讨论配色方案了。

配色方案主要有两种方式，一是通过色彩的色相、明度、纯度的对比来控制视觉刺激，达到配色的效果；另一种是通过心理层面感观传达，间接性地改变颜色，从而达到配色的效果。虽然本专题是针对淘宝网店的，但实际上配色方法与原理有着一定的通用性，这些方法，你同样可以变通应用到其他网店，甚至演讲PPT、图书报告、电子图表，甚至家装、服装等实际工作与生活中。

==============第一页结束===============================

淘宝网店的整体配色方案

谁都可以开店，但是成功的肯定属于用心的人。一个网店的成功包含多方面的因素，网店的装修，色彩的应用，也是比较重要的一环。即使是个人的网店，如果装修华丽，同样能给人产生一个大店铺的感觉，让顾客看得舒心。

1.表里如一的网店风格

网店风格是指网店界面给访客的直观感受，说通俗一点就是个性。就像一个人，喜欢什么样的发型、装扮，喜欢穿什么款式的衣服，乃至说话、行为举止，都在向别人传递着复杂的信息，这些信息给人留下或好或坏的印象。关于网店网格的选择，这里给出一些经验供大家参考。

★统一的外观

不少人以为页面越花哨就越好看，这其实是一个误区，过于花哨的页页只能引起访客的混乱。所以，网店整体颜色，一定要给人统一谐调的感觉。当然统一的外观，并不是说只能用一种颜色，而是指主色调只有一种，在此基础上搭配一些其他颜色。如下面这个网店所示，主色调是绿色，物品图片及一些文字是红色，点缀其间，使得整个页面既统一又不古板。

图1：图一的外观

另外，统一的外观不仅仅指某一个页面，而是包括整个网店的所有页面。否则风格差异太大的话，顾客从一个页面进入另一个页面时，很容易产生进入了不同网店的错觉。当然，除了色彩的统一，其他元素，如店招、导航菜单等，也要统一才行。

★统一色彩搭配的具体方法

明白了统一外观的重要性，那么色彩统一具体要怎么做呢？色彩总的应用原则应该是“总体协调，局部对比”，也就是：页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。下面介绍一些常用方法：

单一色彩页面

选择单一色彩，并不表示就毫无变化，可以通过调整透明度或者饱和度，使得单一色彩也深浅有别。如下面的这个网店，主色调（即在页面中占据的面积最大具有主导作用的色彩）是紫色，边框及物品图片上则应用了浅紫色、紫红色等，使得整个页面看起来色彩统一又有层次感。

图2：单一色页面

两种色彩对比

先选定一种色彩，然后选择它的对比色，这个对比色就是第二种颜色。一般来说色彩的对比

强，看起来就有诱惑力，能够起到集中视线的作用。下面的这个网店页面，采用了绿色、红色和蓝色之间的对比，属于最强烈的色相对比，令人感受到一种极强烈的色彩冲突，产生深刻印象。

图3：对比色页面

如何才能找了对比最强列的颜色呢？可用色相环辅助完成，色相环中，180度对立的两种色彩，对比是最强烈的，这个角度范围内，角度越大的两种颜色，对比越强，反之就越弱。

图4：色相环

还有一种方法就是使用邻近色彩搭配。邻近色彩既不是同一色彩但是又非常接近的，在色相环上角度较小的一系列色彩，它的效果与单一色彩相似，但是要丰富得多。总之，在配色过程中，无论用几种颜色来组合，首先要考虑用什么颜色作为主色调，如果各种颜色面积平均

分配，色彩之间互相排斥，就会显得凌乱。

2.页面整体布局与创意分析

如何定出网店的主色调？如何设计配色？这些需要根据所卖产品的客户群体来定，也可以根据产品特点来定。

我们看看下面这家包包的店铺，它的装修风格唯美精致。由于店铺首页内容比较丰富，截图特别长，因此我们分为两张截图

图5：包包网店首页上部

图6：包包网店首页下部

整个店铺的划分比较有条理，这里先对店铺首页的上半部分作分析，这部分是店铺非常重要

的部分，主要有店铺导航、主要推荐商品、商品分类栏目、新品热销排行榜、旺旺联系方式。在店铺的推荐商品展示中，采用了翻转显示图片的方法，展示了多个推荐商品，节省了空间。

图7：翻转图片推荐商品

在页面左侧有可隐藏的分类菜单，当单击“分类”文字导航时，将显示出全部的一级和二级商品分类，当不需要时也可以关闭弹出菜单，便于浏览者一进入页面就可以找到相关的商品类别，这样既便于买家随时查找商品类别，又节约了空间。

图8：浮动分类菜单

店铺首页的下半部分，显示了推广的商品、宝贝排行榜、宝贝分类，大量标示了价格的图片展示排列井然有序，让买家一目了然，有想点击的欲望，大大提高了商品的交易量。

毫无疑问，本店的包包是面向女性的，因此网店设计时要显示出女性美丽、柔美、时尚特点，配色风格格调高雅、妖媚，营造这种氛围以高明度、低纯度的色彩最为合适，如橙黄色、粉色、淡绿色、米黄色、红色等。

黄色是在页面配色中使用最为广泛的颜色之一，黄色和其他颜色配合很活泼，有温暖感，具有快乐、希望、智慧和轻快的个性。因此给人留下明亮、辉煌、灿烂、愉快、高贵、柔和的印象。这个网店的页面整体上采用了黄色系列为主，还搭配了红色与黑色，红色会使店铺看上去更加干净和明亮，还用到一点黑色作为点缀。

图9：黄色系的配色方案

小提示：黄色系的配色方案

在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

在黄色中加入少量的黑，其色感变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

3.网店配色误区案例解析

网店的装修对一个店的帮助真的很大，越来越多的卖家也认识到这点。在装修的时候千万注

意颜色的运用及色彩搭配，不合理的搭配反而会造成负面的影响。

背景和文字内容对比不强烈

人眼识别色彩的能力有一定的限度，由于色的同化作用，色与色之间对比强者易分辨，弱者难分辨。背景与文字内容对比不强烈，文字内容没法突出，灰暗的背景令人沮丧，甚至用用花纹繁复的图案作背景。如下面的网店页面，背景和文字颜色对比不强烈，容易看不清晰。

图10：背景与文字对比过弱

色彩过多

合理的使用色彩使页面变得鲜艳生动富有活力。但色彩数量的增加并不能与页面的表现力成正比。像下面这个页面，把尽可能多的色彩搬上来，同一个页面上色彩众多，一个标题就是一种颜色，每一个框、线的颜色都不同。多种色彩的同时使用令人眼花缭乱，造成了版面复杂混乱的视觉效果，对买家理解获取信息毫无帮助，反而可能带来负作用。

要有一种主色贯穿其中，主色不一定完全是面积最大的颜色，也可以是最重要、最能揭示和反映主题的颜色。不要将所有颜色都用到，尽量控制在三至五种色彩以内。

图11：页面的色彩使用过多

过分强调色彩的刺激度

在生活中我们看颜色时会感觉到某些颜色很刺眼，看起来比较累。买家上网绝不希望对自己的视力有损害。因此，页面用色要尽量少用视疲劳度高的色调。一般来说，高明度、高纯度的颜色刺激强度高，疲劳度也大。在无彩色系中，白色的明度最高，明度最低的是黑色；有彩色系中，最明亮的是黄色，最暗的是紫色。色彩刺激强度高的色彩不宜大面积使用，出现频率也不宜高。低明度色疲劳度虽然小，但往往使人产生压抑感，也不赞成页面设计过于暗淡。比较理想的方法是多用柔和明快的浅调暖色。

=======================================================

整体配色从成功的网店“偷招”

上面通过实例介绍了网店整体配色的一些原理，不过对于一个新手来说，很难马上将这些知识应用到自己的项目中。所以，最便捷快速的一个方法技巧，就是从其他成功的网店中“偷招”。

首先根据你自己网店的类型，寻找多个同类型的网店，比较筛选，挑选出自己最喜欢的那一个。这里假设你要装修的是一个女性服装的网店，不妨从“淘宝服装”频道的页面中借鉴它的配色方案。

图12：淘宝服装频道

小提示

★这里说一句，我们要借鉴的网页，可以是网店的，也可以是其他方面的网页，比如一些专业大站的女性频道，甚至可以从一些广为流传的世界名画中提取配色方案。

在这色彩斑斓令人眼花缭乱的页面中，可能你也很难分清哪个是主色哪个是辅助色，那么不妨借助软件工具来厘清。将淘宝服装频道的页面截图保存，再在Photoshop中打开，然后点击“滤镜→纹里→染色玻璃”，打开如图13所示的滤镜窗口。

图13：滤色琉璃效果

在这里，图片已变成一个个的色块。不过色彩还是太多，此时可拖动右侧“单元格大小”滑钮，让色块变大，图片的色彩构成也就一目了然了。经此处理后，可提取出本图片的配色方案：主色为接近于白色的浅紫色，辅助色有肉色（皮肤色）、黑色、桃红、淡黄四种，突出色为桔红色。

主色一般为页面中所占面积最多的色彩或者背景色，为整个页面打下色彩基调，女性网站多用浪漫的紫色、粉红色等。辅助色与主色形成对比，丰富色彩内容。突出色所占的面积最小，与主色的反差最大，是一个页面中最能引起人注意的点，一般需要突出的标题、LOGO，或者需要着重表现的产品等，往往使用突出色。

通过以上方法提取出成功网店的配色方案后，就可以举一反三应用到自己的网店上了。

小提示

★除了Photoshop这样的图像处理软件外，还有一些专门针对配色方案的软件工具，比如Website Color Schemer（试用下载：https://www.360docs.net/doc/1718110602.html,/7bd9ltw），启动软件后，选择一种主色，软件就会给出一套配色方案。点选工具栏上的取色按钮，可以抓取屏幕上的任意颜色。单击工具栏最右侧的按钮，打开一个页面预览窗口，可以直接将色轮上的颜色拖到相应的网页元素上，如标题、背景、导航、文字等，实时预览配色的效果，非常方便。

图14：Website Color Schemer

=======================================================

各个击破细节装修决定成败

为网店整体配色打下基调后，就可以开始网店细节部分的装修了。对于淘宝旺店，可供装修的部分大致有店招、导航区、促销区、宝贝描述等几个区域，下面我们就逐一为大家出谋划策。

打造靓丽的店招

店铺首页最上方可设置950*120（单位：像素）的长方形店铺招牌，如果你的店招非常吸引

顾客，那么顾客可能会进入更多你的产品页面，大大增加产品的成交量。

1.借力打力店招“扩增”

淘宝网店分好几种类型，这里以天猫（原淘宝商城）中的店铺为例，顶端是天猫自留区域，主色为红色，这是不可改变的部分。一些网店采取的装修策略，是与天猫的主色相统一，如图15所示，这家店铺将店招的背景色设置成稍浅一点的红色，与天猫的页面颜色融为一体，无形中感觉店招被扩大了一倍，非常醒目，非常气派。然后将最吸引人的广告语制作成立体的白色字体，放大显示，吸引顾客的眼球，图片中再点缀些黄色、绿色、蓝色，整个店招显得大气又有生气。

图15：“扩增”的店招

2.阴影造就照片效果

淘宝旺铺的顶端，虽然有一些淘宝网站的固定元素（如顶部菜单、搜索框等）不可去除，不过它们的背景色是可以自由设置的，可将它们设置成与我们自由设计的店招风格相统一，在“扩增”店招的同时也保持了自己的风格，一举两得。如图16所示，这家店铺的设计就是一个很成功的案例。

这家店铺，还为页面框架设置了阴影效果，使得整个页面像一张富有韵味的照片，非常适合知性女性的审美观。

图16：模仿照片的阴影增强韵味

3.店招配图有诀窍

店招在页面最显眼的位置，所以它也是最好的广告位，店铺中的好东西，必然要在此多多展示。不过店招的高度有限，人物模特，如果显示全身的话，就会导致看不清产品细节，所以一般都会以特写的方法，只显示模特身上显示产品的部分。比如下面这个店招，显示了模特头部至胸部的特写，展示的围巾和孕妇装非常有吸引力。另外，他们还配了一张小图，让顾

客一览孕妇装的全貌，有点有面，主次分明。

图17：多层次展示的店招

4.动感店招

静态图片容易被忽视，动态店招更能吸引顾客的注意力，而且动态店招能展示更多的产品，一举多得。目前，淘宝网支持GIF、JPG、PNG等几种格式的店招，要想获得动态店招，一个方法是使用GIF动态图片，另外一个方法就是先制作好几张静态图片，再通过HTML代码让它们动起来。通过HTML代码的方式，可以取得比GIF更灵活的展示，如图17中，除了几张图片动态循环展示外，还可以通过左下角的几个数字按钮任意切换想要看的图片，效果跟Flash动画类似，非常酷。而它所采用的代码却很简单，右击查看网页源代码，会发现就是简单的标志实现的。

静态店招图片的配色，一般都尽可能与网店页面主色调相统一，而动态店招图片的配色方案则可以丰富一些：可以选择与主色调接近的同一色、邻似色及一些弱对比的色彩，最好不要使用过于强烈的对比色，以免给人突兀的感觉。

图18：通过色相环选择同一色、类似色、对比色

清晰明了宝贝分类导航

简单直观的宝贝分类能提高网店易用性，方便浏览者找到所要的商品，有助提高用户转化率。宝贝分类导航通常有图片导航、文字导航等两种形式。建议最好使用文字导航，一方面是加载速度快，另一方面便于修改更新。

店铺分类的颜色、图案和文字最好与页面整体有一定的呼应，这样在整体上会有一种连续性和协调感。如果整体页面是白色或浅色背景，则导航图可用白底黑字的形式，清晰明了。如下面这家店铺的导航，主要采用了暗黑色、灰色搭配，点缀了一点红色，感觉很清新。黑色是一种流行的主要颜色，色彩搭配适应性非常广，无论什么颜色与黑色搭配都能取得鲜明、华丽、爽心悦目的效果。

不过要注意的是，这里的黑色其实不是纯黑色，而是亮度极暗接近于黑色的色彩，比黑色富有表现力。我们应尽可能地用较暗色取代黑色。

图19：黑白设计的文字导航

上面的例子中，灰色对黑色起到了很好的调和作用，避免色彩太重。灰色在商业设计中，具有柔和、高雅的意象，属中性色彩，男女皆能接受，所以灰色也是永远流行的主要颜色。使用灰色时，大多利用不同的层次变化组合或搭配其他色彩，才不会产生过于平淡、沉闷、呆板、僵硬的感觉。

如果网店整个页面的色彩很重，浓墨重彩，这时分类导航就不宜用黑白色设计了，可以采用背景色（或背景图片）加反白字的形式来表示，让导航显示清晰。

小提示：宝贝分类导航经验谈

★应在分类名称中填写汉字或英文，为分类图片设置可单击的图标，以便查看设置。

★如果店铺已经有了整体的装修风格，那么宝贝分类的设计就需要从整体的装修风格出发，让分类的图片设计符合店铺的装修要求。

★分类导航的设计应该明确，让浏览者能一目了然。具体表现为：能让浏览者明确店铺的主要商品范围；只有明确的导航才能真正发挥“引导”的作用，引导浏览者找到所需的商品。★店铺的栏目分类，目录齐全，分类很细化，各方面都考虑到了，便于顾客找到产品，另一方面，使人感到这是个很大的店，增强信任度。

★在分类区加入“收藏店铺”按钮，可以大大提高买家的点击率从而提高收藏人气。在淘宝网收藏人气越高，店铺或商品被浏览到的机会就越大。

★卖家可以根据宝贝分类再添加子分类，让宝贝分类更合理，更方便买家浏览。

★在已有宝贝的分类下，不能创建子分类，建议新建分类及子分类，再将宝贝转移到子分类。

商品描述中的图片魅力

网上开店有别于日常的面对面交易，买家很难亲身感受商品的质地、做工、细节，所以商品图片对买家来说就变得至关重要。

1.宝贝图片背景设置技巧

宝贝的拍摄固然重要，图片的背景设置也很关键。女性服装，为了体现柔和的效果，常常采用一个小技巧：取服装的主色调作为基色，将其变淡后铺为背景色，这样图片效果比较悦目。如图20中所示的，蓝底小白花的连衣裙衬出模特优雅的身姿，而极浅的蓝色背景，既让模特跳出了画面引人注目，整体画面色彩又显得很谐调、清新。

图20：清新连衣裙

取宝贝的色彩作为主色调，变化后用作背景色，还可以用在突出亮点上。如图21所示，模特与背景几乎溶为一体，而对比强烈的广告宣传语，鲜明地跳入顾客的眼中，诉求非常明确，效果很好。

图21：连衣裙宣传图片

图片的背景要尽量干净，太杂乱的话，容易喧宾夺主，如图22所示，背景就过于杂乱而掩盖了真正宝贝的风采。要想取得干净的背景，一般有两种方法：一种是以蓝幕白幕为背景拍摄模特，然后以抠图的方法抠出人物，再替换上纯净的背景色；另一种就是在拍摄照片时，聚焦在人物身上，将背景模糊化（这个效果也可以后期在Photoshop中处理获取）。

图22：失败的图片案例

为了突出宝贝主体，除了纯净化背景外，还可以采用色彩对比的方式。如图23所示，衣服是蓝色和黑色这样的冷色调，背景就采用了粉色的暖色调，对比鲜明，主体被突出。反之，衣服是红色等暖色调的，背景就用蓝色等冷色调。

图23：对比色突出主体

2.多角度围观宝贝图片

很多新手卖家都不注重细节图的拍摄，甚至在页面上就没有细节图，这样是很难让买家信任的。所以，为了店铺的生意，细节图的拍摄一定不能少。细节图越多，买家看得越清楚，当

然对你的宝贝产生好感及购买欲望也就越大。

有些宝贝图片，除融合了上面所说的背景设置的技巧外，还将整体图与细节图整合在了一起，让顾客既有全局观念又能注意到细部的表现。图23中，则是同一件商品不同角度不同细节的展示，让顾客看得清楚买得放心。

图24：拍摄的多细节图

3.浪漫紫色——女性流行配色方案

上面诸多的图例中，许多都是基于紫色和粉色的。紫色与紫红色都是非常女性化的颜色，它给人的感觉通常都是浪漫、柔和、华丽、高贵优雅，而粉红色更是女性化的代表颜色。不同色调的紫色可以营造非常浓郁的女性化气息，而且在灰色的突出颜色的衬托下，紫色可以显示出更大的魅力。