在网络平台上开店,除了需要有物美价廉的商品、有效的宣传手段和专业的客服人员,还需要有美观的页面。网店装修就是对网店页面进行装饰和美化。本节将对网店装修的概念、装修的位置和装修的类型进行讲解,帮助读者理解和掌握关于网店装修的基础入门知识。
实体店铺的店面是其进行商品陈列与销售的场所,而网店是存在于互联网上的虚拟店铺,店中销售的商品是通过网页呈现在顾客眼前的。因此,与实体店铺的店面装修不同,网店装修是对网店页面的美化和装饰,即在淘宝、天猫、京东等电商平台允许的结构范围内,尽量通过图片、文字、视频、程序模板等的合理编排与精心设计,组成一幅幅精美的画面,如下图所示。
大多数电商平台都会为卖家提供店铺装修模板和店铺装修教程,即便是新手卖家也能装修出一个看起来像模像样的店面,这也导致一些卖家认为网店装修很容易,不过是拍拍商品照片和视频、写写介绍文字,再上传而已。其实,网店装修并不比实体店铺的装修简单,并且它的重要性正越来越受到重视,这都是由网络购物的特殊性所决定的。
在实体店铺中,顾客可以通过看、尝、摸、闻、听等去感知商品实物的质量好坏,或者通过亲身试用来判断商品的功能是否满足自己的需求,还有售货员即时解答顾客的疑问并进行促销;而在网店中购物,由于接触不到商品实物,顾客只能通过网店页面中的图像、文字和视频来做判断。因此,网店必须通过装修形成强烈的视觉冲击力来吸引顾客点击进店并停留尽量长的时间,进而刺激顾客的购物欲望,促使其下单并且买得越多越好,同时还要在这一过程中将网店的品牌形象“植入”顾客脑中,以培养“回头客”群体。可以说,网店装修的要求并不低,要考虑的方面很多,对顾客消费心理的揣摩也要更加深入。
如下图所示,优秀的网店装修就如同实体店精心布置的橱窗,能够吸引正在逛街的顾客停下脚步、进入店内浏览;它又是一位“金牌导购”,能够将商品的方方面面都介绍得一清二楚,并且打动顾客的心;它还是一位“品牌大使”,能够增添顾客对店铺的信任。跟随本书一步一个脚印地学习,相信你也会拥有网店装修这个令生意兴旺的制胜法宝。
网店装修中涉及的页面类型较多,每类页面都有各自的功能和设计要求,其中最关键的两个页面就是网店首页和商品详情页,它们在商品销售过程中发挥着不同的重要作用,下面分别进行介绍。
网店首页是店铺的门面,代表着店铺的形象,它的装修效果会影响顾客对店铺的第一印象。
如右图所示为某女装店铺的网店首页装修设计,可以看到它包含多个模块,有店招、欢迎模块、导航模块、热卖商品和新品展示、客服和收藏区等,这些都是网店首页装修中的常用模块。该首页使用较为和谐的色彩对页面信息进行统一,并通过合理的布局对信息进行分类,展现出高端、大气的风格,十分贴合该女装品牌的气质与理念,同时能够很好地塑造店铺的专业形象,更容易赢得顾客的信任。
网店首页的装修设计通常拥有较大的自由度,由于大多数电商平台都可以使用代码进行网页设计,使用链接来对首页中的信息进行扩展,因此,网店美工可以充分利用首页空间,达到美化店铺、宣传商品的目的。
网店装修的另一个重要部分就是商品详情页。绝大多数顾客需要购买商品时,通常会遵循这样的流程:打开购物网站→输入关键字进行搜索→在搜索结果中点击感兴趣的商品→打开商品详情页查看详细介绍→看完后,如果对商品满意,则下单购买;如果对店铺也产生了好感,则可能会接着点击浏览店铺首页或商品分类,或者在店铺中搜索其他商品一起购买。由此可见,商品详情页除了要展示和介绍商品外,还要引导顾客在店铺内浏览,也就是起到店铺导航的作用。
商品详情页是促使顾客快下单、多下单的关键,为了达到目的,卖家也会在装修商品详情页时使出浑身解数,在效果的美观度、阅读的舒适度、信息的可信度等诸多方面做大量工作。例如,使用精心拍摄和调修的商品照片和商品视频全方位展示商品,选用设计合理的商品描述模板让页面内容显得丰富而不杂乱,优化图片大小以保证显示速度等。
如右图所示为某饰品的商品详情页设计,大致分为上端的橱窗照、左侧的侧边栏和右侧的商品详情,右侧的商品详情是设计的重点。设计者通过简约的色块、艺术化编排的段落文字、清晰的细节图像、内容丰富的侧边栏等内容,呈现出一个完整而专业的页面。
商品详情页一般会包含的内容如下图所示。
这些内容并不是全部都需要放到网页中,而是根据商品展示需要来进行选择。
网店装修可以分为两大类型:一种是购买成品模板,另一种是定制设计。卖家可根据自己的经济状况及需要达到的网店视觉效果来进行选择。
01 成品模板
成品模板就是设计师事先设计好的模板,如下图所示,应用时只需更改和替换固定的地方,如店招、广告语、商品分类名称等,其他不必修改。由于成品模板重复出售,所以制作速度快、价格低。
02 定制设计
成品模板价格便宜、使用简单,但容易与其他网店“撞脸”。如果想让装修效果更加个性化,可采用定制设计,即根据需要对风格、色调、布局进行全新设计。定制设计一般都不重复出售,以保证装修效果的独特性,但相应地价格较高,所需时间也较长。如右图所示是为某品牌女装定制设计的网店首页。
新手开店装修时可根据自己的需要选择相应的装修类型。若要节省成本,选择成品模板即可;如果预算充足,可选择定制设计,得到心仪的装修效果。
色彩是视觉设计中一个很重要的元素。人的第一感觉是视觉,而对视觉感受影响最大的则是色彩。色彩作用于人的视觉感官后,还会刺激人的神经,进而影响人的情绪。色彩也在一定程度上决定了店铺装修的风格。在进行网店装修之前,需要根据店铺的特点、品牌的理念、商品的属性等来定位装修的色调与风格。
网店装修的新手常常为色彩搭配犯难,面对成千上万种色彩,不知从何处下手。下面就来讲解几个色彩搭配的总体性原则和方法,操作起来比较简单,又不易出错。
在进行色彩搭配时,常常会用到的一个工具是色相环。色相环上距离较近的色彩被称为类似色或近似色,如红色、紫红色与紫色等,如右图所示。类似色的搭配在自然界中很容易找到,所以对眼睛来说,这是最舒适的色彩搭配方式,能给人以平静、协调的感觉。在网店装修中,类似色的搭配最不容易出错,它可以轻易地让设计出的画面形成统一、和谐的视觉效果。但是,类似色的对比也较弱,所以搭配效果会显得较为平淡和单调。在网店装修中使用类似色搭配时,可通过加强色彩的明度和饱和度的对比,达到强化色彩、避免平淡的目的。
如下左图所示是为某网店设计的客服区,在配色上主要使用了蓝色系的类似色;如下右图所示则是收藏区,在配色上主要使用了棕色系的类似色。它们都通过调整色彩的饱和度和明度来产生变化,从而避免单调,呈现出统一、协调的感觉,颜色之间过渡自然,使整个色彩布局既沉稳安静,又明快生动,体现了空间的深度和变化。
在色相环上,色相之间的夹角为180°的色相称为互补色,如红色与绿色、蓝色与橙色、黄色与紫色等,如右图所示。互补色的对比最为强烈,采用互补色搭配的画面相较于类似色搭配更丰富、更具感官刺激性。
互补色搭配无疑是一种最突出、最具视觉冲击力的色彩搭配方式,如果想要让网店装修画面特别引人注目,那么互补色搭配或许是最佳选择。互补色搭配可以很完美地构建出“撞色风格”,它是近年来设计界颇为流行的关键词,能够体现自信与活力,彰显个性,张扬气魄,因而成为许多设计师表达主题的不二选择。
“撞色风格”简单来说就是将两个或两个以上不同颜色的色块搭配或拼接在一起,以制造某种色彩方面的强烈视觉冲击效果,除了互补色搭配之外,还可以是强烈色搭配,即将色相环中相隔较远的两种颜色搭配在一起。
“撞色风格”不一定要大范围撞色,小色块的撞色也可以把这种感觉发挥得淋漓尽致,能够让画面很有亮点,而且不会给人过于张扬的感觉。如下左图所示为某数码相机店铺的首页装修设计,画面中用大面积的蓝色作为主色调,通过橘色、红色和黄色三种暖色调的搭配,与冷色调的蓝色形成强烈的反差,打造出撞色的效果,更能将关键信息突显出来。
如下右图所示为某灯饰店铺的店招和导航设计,画面中使用了大面积的黑色作为背景,表现出黑夜的感觉,再通过添加不同明度的红色,与黑色形成强烈反差,呈现出撞色的效果,让店招文字与活动信息更加突出、显眼、生动,起到了画龙点睛的作用。
在网店装修的过程中,为了营造出充满活力、兴奋或激动的氛围,往往会在配色中添加多种不同的颜色,通过对这些颜色的合理分布和使用,打造出炫彩风格的视觉效果。可以使用矩形来对色相环中的颜色进行搭配。将矩形放在色相环的中间,通过变化矩形的角度和大小,选择矩形四个角所在的色彩进行搭配,如右图所示。这四种颜色较为均匀地分布在色相环中,其中一种色彩作为主要色,这种搭配能取得最好的效果。需要注意的是,对多种颜色进行搭配时,需要注意冷暖色的对比和平衡。
专家提点
不论使用哪种配色进行网店装修设计,都要注意黑色的用法。黑色是一种特殊的颜色,但如果搭配得当、运用合理,往往能产生很强烈的艺术效果。
一般初学者在进行网店装修时,往往会使用多种颜色,使网页变得色彩缤纷,令人眼花缭乱,缺乏统一感和协调感,也就失去了美感。事实上,网店装修的用色并不是越多越好,一般应控制在四种颜色以内,通过调整颜色的各种属性来产生变化,并且一定要注意把握颜色的面积、明度的安排。
如右图所示分别为某网店的套餐搭配区和商品分类栏,它们都使用了多种颜色进行搭配,营造出了活泼、跳跃的氛围。值得注意的是,画面中各种颜色的明度和纯度都是一致的,这样可以让整个画面的色彩搭配保持一定的稳定性。
在进行网店装修之前,需要分析店铺的特点、品牌的理念、商品的属性等来定位装修的色调与风格。大多数情况下,店铺装修的风格与其销售的商品是息息相关的,不同行业类目的商品,在顾客心目中对应着不同的固有形象,因此,通过解读商品的风格来确定装修风格是一条捷径。在确定装修风格之后,再进行合理的配色,才能将商品的特点突显出来。接下来就对几种典型行业类目商品的风格与色调进行分析,如下图所示。
俗话说:“磨刀不误砍柴工。”在正式开始网店装修设计工作之前,还需要做好充分的准备。第一项工作就是收集大量的图片素材,包括商品照片、视频和修饰画面的素材。随后还要根据装修需求和预算获取网络存储空间,并了解所在电商平台对网店装修的规范和要求。
前面已经说过,在网店中,一件商品是以照片的形式展现在顾客面前的,顾客无法接触到商品的实物,商品的某些物理特性也就无法被顾客感受到,如商品的材质、分量等,这就对商品照片提出了更高的要求。商品照片除了要有足够的美感来打动顾客,还要从不同的角度较为全面地展示商品。如下图所示为拍摄的一款手表各个部位的特写照片,画面简洁,主体突出,细节清晰,能够很好地让顾客感受到手表的材质和做工。
在拍摄某些商品时,还需要自己布置简易的拍摄环境,让光线达到拍摄需要的强度,使得拍出的照片中商品的色泽和质感更接近人眼看到的效果。如下图所示就是在拍摄黄金材质的戒指时搭建的简易摄影棚,对光源和拍摄角度进行了准确布置,从而得到最佳的拍摄效果,再对拍出的照片进行适当的后期处理,就得到了一张效果不错的商品照片。
除了拍摄商品的细节图外,有时为了展示出商品的功能特性,让顾客更直观地感受商品的使用效果,还会拍摄模特使用或穿戴商品的照片。如下图所示是拍摄的一款鞋子的商品照片及在模特脚上试穿的效果照片,通过对比可以发现,模特试穿鞋子的照片为商品增添了亲和力,更能让顾客直观、真实地感受鞋子的穿戴效果,激发他们的购买欲望。
现在大多数电商平台都支持视频功能,也有越来越多的网店选择用视频来展示商品。视频能够弥补静态、平面的图片和文字在表达上的不足,将商品展示得更真实、更形象、更全面、更完善,让顾客多层面、多维度地了解商品。因此,在前期准备时,除了拍摄商品照片外,如果条件允许,还可以为商品拍摄一些简短的视频素材。
在拍摄视频时,可以从不同的侧重点入手,把商品的细节、卖点、使用方法等拍摄下来,使商品的展示变得立体。但要注意视频不能过长,否则容易让顾客失去耐心,并且拍摄之前还要梳理出一个清晰的思路,力求达到既短小精悍、又令人过目不忘的效果。如下图所示是为一款多功能修剪器拍摄的视频素材,通过真实、详细的操作,展示了这款多功能修剪器上修剪梳的拆装方法,不仅能解答一部分顾客在使用方法上的疑问,而且能让顾客感受到卖家在服务上的专业与贴心。
相对于商品照片的拍摄,视频素材的拍摄要求并没有那么高。在保证拍出的视频拥有足够清晰度的前提下,卖家可以根据个人情况选择拍摄器材。使用DV、数码单反相机等专业设备进行拍摄自然是最好的选择,如果没有,也可以使用手机来拍摄。
不管使用什么设备拍摄,目的都是为了让商品能够清晰地展示出来,所以在拍摄时应该尽量避免晃动,如果条件允许,最好使用三脚架对拍摄设备进行稳固。此外,还需要注意拍摄环境的光线,避免拍出的视频出现过暗或过亮等曝光不理想的情况。
如右图所示是使用手机为某品牌的茶叶拍摄的视频,这个视频清晰地展示了茶叶在泡制过程中的叶片变化,同时也教顾客怎样泡茶,最后使用视频编辑软件对拍摄的视频素材进行剪辑和处理,就得到了一个非常不错的短视频广告。
整个网店页面就好像一幅完整的商业广告,组成元素非常丰富,只有在每个细节都做了精心打磨,才能得到最好的整体效果。因此,网店装修设计除了要有商品照片和视频以外,还需要用其他图像和文字来进行辅助表现。其中画面修饰元素的使用是必不可少的,它们能让画面效果更加丰富、精致,专业感更强。
下面通过两个实例看一看修饰元素对网店装修效果的影响。如下左图所示为某电脑配件店铺的鼠标商品主图初始设计,如下右图所示则为在左图基础上添加炫光元素进行修饰后的画面效果,可以看到添加了炫光后的画面更为绚丽,更能表达出鼠标的外观特点,提升了商品的档次。
底纹也是一种很重要的修饰元素。如下左图和下右图所示分别为未添加底纹的收藏区和添加了底纹的收藏区设计效果,可以很明显地看出,添加了底纹的收藏区显得更加精致。
修饰元素可以在装修过程中根据画面效果自己设计和绘制,但这样比较耗时,对设计者的要求也较高。此时,使用别人设计好的修饰素材就成了省时省力的选择,例如从网上下载可免费使用的素材包。修饰素材的类型多种多样,包括底纹、花饰、剪影、箭头、按钮、图标等,对文件格式也没有过多要求,只要能在装修设计软件中打开和编辑即可。如下图所示即为某童装店铺装修之前搜集的服装卡通插画及花纹素材。
挑选修饰素材时还要注意与店铺装修整体风格定位的统一,以让整个画面呈现出完整、协调的视觉效果。例如,走文艺路线的花卉园艺店铺可选用色彩清新淡雅的植物矢量插画作为修饰,而婴幼儿用品店铺则可选用外形可爱、色彩多变的卡通人物图像进行点缀。
人们之所以能够随时随地浏览网店进行购物,是因为网店页面中所有的图片和视频,包括后台程序等内容,都是存储在专门的网络存储空间中的。在完成网店的装修设计后,就需要将设计结果存储到网络存储空间中,这样才能让顾客看到。
选择网络存储空间时要考虑的因素有很多,其中比较关键的有:存储容量,要足够存放网店装修的各种图片、视频和后台程序等;访问速度,网店页面在目标顾客的计算机或手机上加载和显示的速度不能太慢,否则会大大影响购物体验,导致顾客流失;稳定性和安全性,要能承受一定的访问量,并能防范一定的恶意攻击。其他因素还包括费用高低、是否支持图片外链、空间管理界面和技术服务支持是否友好等。
对网店装修来说,会涉及的网络存储空间大致有以下几种。
01 虚拟主机
虚拟主机又叫网站空间,是企业网站存放网站内容采用的普遍方式,如右图所示为虚拟主机的工作方式。虚拟主机管理方便且系统稳定,并且支持多种类型的文件,如数据库、网页及图片等。虚拟主机通常价格较高,前期开发和后期维护成本也较高,比较适合想要自己架设电商平台的大卖家,对于资金和技术实力都比较薄弱的中小卖家来说就不适用了。
02 图片存储空间
图片存储空间包括支持外链的网络相册、博客等。注册并登录图片存储空间的账户后,将图片上传到相册中,再复制图片的外链地址,粘贴到电商平台的店铺空间中发布即可。这类图片存储空间通常提供免费服务,但对存储容量和月流量有一定限制,如果要提升容量和流量,则要额外花钱购买升级服务。
如右图所示为新浪微博相册的展示与上传页面,上传到相册的每张图片都有属于自己的图片地址,通过复制地址就能在网店装修中使用了。
03 电商平台的图片空间
为了保证数据安全和防范盗图,现在许多电商平台已经停止对外链图片的支持,转为自己向卖家提供图片空间。以淘宝为例,自2013年开始逐步禁用外链图片,并开放自有图片空间供卖家使用。目前淘宝图片空间提供一定的免费容量,如需扩容则要花钱购买,卖家可根据自家店铺的访问量等数据进行选择。如下图所示为淘宝图片空间的首页,卖家登录后即可使用。
大多数卖家都是以入驻电商平台的形式开店的。电商平台对网店装修通常都会有一定的规范和要求,下面就来简单了解淘宝、天猫、京东这几个主流电商平台的装修规范。
01 淘宝、天猫
淘宝和天猫是目前国内最大的电商平台,同属于阿里巴巴公司。二者的区别在于:淘宝是一个C2C交易平台,简单来说就是个人对个人的销售平台,多以批发或代理的形式销售商品;而天猫是B2C商城,即企业对个人的销售平台,多为企业或公司以直销形式销售商品。虽然两个平台存在一定的差别,但因同属于一家公司,所以在装修规范上也比较相似。下表列出了淘宝和天猫对于网店图片的制作要求。
淘宝和天猫除了对网店装修中使用的图片有一定的要求外,对于视频也有要求。视频的基础统一要求如下:
①画面尺寸要求720p,比例为16∶9(横版),后期可支持9∶16(竖版)和1∶1(方形);
②画质高清,如MP4格式的平均码率要大于0.56Mbps;
③视频大小小于120MB;
④视频格式要求MP4、MOV、FLV、F4V、AVI及其他主流视频格式;
⑤视频只能带同名角标,不能出现任何站外链接和二维码;
⑥镜头不虚不晃,构图有审美,包装精致,剪辑有想法,风格、类型不限,拒绝纯电视购物等广告类型;
⑦有趣、有新意,能在短时间内达到吸引力。
在不同渠道中应用的视频,其大小、播放时间等方面的要求则有一定差别,具体见下表。
注:
①主图视频:9秒到10分钟不等;
②无线视频:单个视频,大小上限为30MB,时长上限为3分钟;
③达人渠道短视频:单个视频,大小上限为120MB,时长分渠道不同,9秒到10分钟不等。
02 京东
京东是目前较大的一个综合性电商平台,成立之初以自营商品销售为主,后期也开放了第三方网店入驻。与淘宝、天猫不同,京东为每一个店铺标配了店铺首页、商品列表页、店铺简介页和店内搜素结果页4个页面布局,入驻的第三方卖家可以在这些布局的基础上分别进行装修设计。京东对网店装修中使用的图片和视频的要求总体上与淘宝和天猫相似,下表简单列出了京东对图片和视频的设计要求。
除了上面介绍的淘宝、天猫、京东这几个常见的电商平台外,还有当当网、亚马逊等其他电商平台,它们的店铺装修规范大同小异,这里就不一一介绍了。