首页 > 生活百科 > 服饰搭配 > [淘宝店铺装修配色]淘宝网店装修配色方案

[淘宝店铺装修配色]淘宝网店装修配色方案

时间:2018-12-09   来源:服饰搭配   点击:

【www.gbppp.com--服饰搭配】

  许多人开始选择网上开店,而淘宝网则是网店的一个重要集散地。俗话说“七分门楼三分屋”,网店的门面对商品销售有着很大影响。不过,网店装修是个很大的话题,不是一个专题能讲清楚的,所以今天,我们主要针对网店装修中配色方案这一问题展开。

  所谓配色方案,简单说就是如何将不同的颜色搭配到一起,起到一种和谐的或者有视觉冲击力的效果。生活中,许多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(试用下载:http://tinyurl.com/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.浪漫紫色——女性流行配色方案

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

  图25:常见的紫色配色方案

  小提示:商品描述经验谈

  ★找到并附加一些产品的卖点,加以放大。挖掘并突出卖点,很多产品细节与卖点是需要挖掘的。每个卖点都是对买家说服力增加的砝码。你的宝贝描述能够吸引买家的卖点越多,就会越成功。图26:突出产品卖点

  ★产品的基本属性描述,例如品牌、包装,规格、型号、重量、尺寸大小、产地等。这些都描述出来,会让买家更觉得关怀备至,从情感上抓住顾客的心,宝贝描述应对买家攻心为主,看完宝贝描述后,让买家与我们的宝贝描述中的图片和文字产生共鸣。

  ★在商品描述中也可以添加相关推荐商品,如本店热销商品、特价商品等,让买家更多地接触店铺的商品,增加商品的宣传力度。

  ★参考同行网店。可以去皇冠店转转,看看他们的商品描述是怎么写的,特别要重视同行中做得好的网店。

 

        :更多精彩教程请关注烟花美文网电子商务教程 栏目,

本文来源:http://www.gbppp.com/sh/527163/

推荐访问:淘宝店铺装修配色
推荐内容:

热门文章