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

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这样的图像处理软件外，还有一些专门针对配色方案的软件工具，比如WebsiteColorSchemer（试用下载：），启动软件后，选择一种主色，软件就会给出一套配色方案。点选工具栏上的取色按钮，可以抓取屏幕上的任意颜色。单击工具栏最右侧的按钮，打开一个页面预览窗口，可以直接将色轮上的颜色拖到相应的网页元素上，如标题、背景、导航、文字等，实时预览配色的效果，非常方便。图14：WebsiteColorSchemer=======================================================各个击破细节装修决定成败为网店整体配色打下基调后，就可以开始网店细节部分的装修了。对于淘宝旺店，可供装修的部分大致有店招、导航区、促销区、宝贝描述等几个区域，下面我们就逐一为大家出谋划策。打造靓丽的店招店铺首页最上方可设置950*120（单位：像素）的长方形店铺招牌，如果你的店招非常吸引顾客，那么顾客可能会进入更多你的产品页面，大大增加产品的成交量。1.借力打力店招“扩增”淘宝网店分好几种类型，这里以天猫（原淘宝商城）中的店铺为例，顶端是天猫自留区域，主色为红色，这是不可改变的部分。一些网店采取的装修策略，是与天猫的主色相统一，如图15所示，这家店铺将店招的背景色设置成稍浅一点的红色，与天猫的页面颜色融为一体，无形中感觉店招被扩大了一倍，非常醒目，非常气派。然后将最吸引人的广告语制作成立体的白色字体，放大显示，吸引顾客的眼球，图片中再点缀些黄色、绿色、蓝色，整个店招显得大气又有生气。图15：“扩增”的店招2.阴影造就照片效果淘宝旺铺的顶端，虽然有一些淘宝网站的固定元素（如顶部菜单、搜索框等）不可去除，不过它们的背景色是可以自由设置的，可将它们设置成与我们自由设计的店招风格相统一，在“扩增”店招的同时也保持了自己的风格，一举两得。如图16所示，这家店铺的设计就是一个很成功的案例。这家店铺，还为页面框架设置了阴影效果，使得整个页面像一张富有韵味的照片，非常适合知性女性的审美观。图16：模仿照片的阴影增强韵味3.店招配图有诀窍店招在页面最显眼的位置，所以它也是最好的广告位，店铺中的好东西，必然要在此多多展示。不过店招的高度有限，人物模特，如果显示全身的话，就会导致