- Photoshop淘宝网店设计与装修完全实例教程
- 华天印象
- 7字
- 2020-06-24 22:27:47
PART 01 基础入门篇
01 新手:Photoshop淘宝网店装修入门
Photoshop淘宝网店的应用领域在逐步扩张,应用形式也越来越广泛,并深入到生活中的各个细节。因此,了解淘宝网店装修不仅要从Photoshop基本知识入手,还应该深入地去挖掘淘宝网店的市场应用及发展,这样才能在同类淘宝网店中体现出自己店铺的特色。本章将对网店装修的基本理论内容进行讲解,为后面的学习奠定基础。
001 什么是网店装修
网店、微店装修是店铺运营中的重要一环,店铺设计会直接影响顾客对于店铺的最初印象,首页、详情页面等设计得美观丰富,顾客才会有兴趣继续了解产品,被详情的描述打动了,才会产生购买欲望并下单。网店装修实际上就是通过整体的设计,将网店中各个区域的图像进行美化,利用链接的方式对网页中的信息进行扩展,如下图所示。
店铺装修的初步规划
由上图可以了解到,在网店中,网站对店铺中的默认模块位置进行了一个初步的规划,店家需要对每一个模块进行精致的设计和美化,让单一的页面呈现出丰富全面的视觉效果。网店是通过单一的网页组合起来的,并且每个商品都有其单独的详情页面,这些页面都是需要美化与修饰的,并且需要有大量的图片和文字信息,通过这些信息让顾客来了解商品并促成交易。
网店与微店的装修就是对店铺中商品的图片、文字等内容进行艺术化的设计与编排,使其体现出优秀的视觉效果。
如果网店不做装修的话,照样也可以销售商品,因为现在很多网商平台的店铺都是有自己默认的、简单的装修样式,这些模块照样可以销售商品,但是有的人会有这样的疑问:既然可以买东西,又何必费尽力气去装修店铺呢?
网络购物有它的特殊性。在实体店中,消费者可以用自己的感官去感受商品的特点和店铺的档次,比如通过用眼睛看、用嘴品尝、用手触摸和用耳聆听等方式来实现对商品的了解认识,但是在互联网上购物的话,买家只能看到卖家所发布出来的图片和文字,通过这些图片和文字来感受到产品的特色性质。让自己的店铺在众多店铺中显得尤为突出可以吸引买家的注意,因此合理且美观的店铺装修就会显得很重要。
002 装修网店的意义
店铺装修一直是一个热门话题,在店铺装修的意义、目标和内容上一直存在着众多的观点,然而不论是一个实体店面,还是一个网店或微店,它们作为一个进行交易的场所,其装修的核心是促进交易的进行。
003 店铺信息的获取
网店的装修设计可以起到一个品牌识别的作用。对于实体店来说,好的形象设计能使外在形象得以保持长期的发展,为商店塑造更加完美的形象,加深消费者对企业的印象。同样,建立一个网店或微店也需要设定自己店铺的名称、独具特色的Logo和区别于其他店铺的色彩和装修风格。右图为网店首页的装修图片,在其中可以提取出很多重要信息,如店铺的名称、店铺的Logo、店铺配色风格和店铺销售的商品等。
店铺信息的获取
TIPS
网店和微店中的Logo及整体的店铺风格,一方面作为一个网络品牌容易让消费者熟知,从而产生心理上的认同,另一方面,也可以作为一个企业的CI识别系统,让店铺区别于其他竞争对手。
004 更多商品信息的直观掌握
在淘宝网店装修的页面中,在主页中所能够获取的信息是有限的,由于网店营销的特点,网商都会对单个商品的展现设计单独的平台,即商品详情页面。
商品详情页面的装修成功与否,直接影响到商品的销售和转化率,顾客往往是因为直观的、权威的信息而产生购买的欲望,所以必要的、有效的、丰富的商品信息的组合和编排,能够加深顾客对于商品的了解。下图所示分别为两组不同的网店装修效果,一组是以平铺直叙的方式呈现商品的信息,而另一组则通过图片和简要的文字说明来表达,通过对比可以发现后者更能打动消费者。
平铺直叙的描述
经过设计的尺码显示
对商品的详情页面进行装修,可以让顾客更加直观地掌握商品信息,促使顾客购买该商品。如下图所示,可以从设计的商品详情页面中了解到产品的材质、透气性等信息。
商品详情页面
TIPS
对于通过计算机(电脑)和手机购物的消费者来说,他们所花费在购物上的时间是需要计入其购物成本当中的,因而卖家需要像实体店一样来增加一个虚拟网店空间的利用率和与用户的有效接触,要达到这两个目的,需要在两方面下功夫。第一,在提升网店和微店空间的使用率上下功夫,让单一的网店和微店能够容纳更多的产品信息,通过装修设计来缩短顾客理解所获得的信息的时间。第二,在产品之间的关联和产品分类的优化上下功夫,从而给予消费者最大的选购空间。
005 店铺装修与转化率的关系
网店和微店的转化率,就是所有到达店铺并产生购买行为的人数和所有到达店铺的人数的比率。网店、微店的转化率提升了,其店铺的生意也会更上一层楼。影响网店、微店转化率的因素主要如下图所示。
在右图中,店铺装修、活动搭配和商品展示都是可以通过设计装修图片来实现的,由此可见网店装修能够直接对网店的转化率产生影响。
很多店铺的店主还停留在无限制地去想办法增加顾客流量的阶段,虽然顾客流量是重要的,但是没有相应的成交量,那一切都没有意义。假如把店铺比作一个人,产品是核心,相当于人的心脏。买家来店铺,页面访问深度这个路径,就好比遍布人体的血管。人的骨骼相当于店铺的框架,人好看不好看,才属于店铺装修。要将各个环节都梳理好,将店铺装修提升为视觉营销,才以提升店铺的销售量。在进行装修和推广的过程中,卖家还需要注意下图中的问题,其中“活动页面”中的信息可以通过店铺装修来完成,由此可见店铺装修与店铺转化率之间的紧密关系。
由此可见,网店、微店的首页装修不可轻视,这直接影响到店铺的跳出率,从而影响到店铺的交易量,因此卖家有必要从各方面考虑店铺的装修。好的装修不但能够提升店铺的档次,还可以让顾客感受到在此店铺购物能够有良好的保障。
006 常见电商平台及其配色
常见的电商平台包括淘宝网、京东商城和当当网等,这些平台都入驻了很多的个体商家,通过观察可以看到这些电商的网页装修各有特点,但是都是以红色调为主,下面将进行简单介绍。
1.淘宝网与天猫商城
阿里巴巴是电商平台中最大的,也是市场占有量最大的,它旗下包含了淘宝网、天猫商城等,但是从它们的网页可以看到淘宝网的主色调为橘红色(如右图所示),天猫的主色调为大红色。它们通过细微的差异来体现不同的特点,接下来将对它们各自的配色和装修进行分析。
淘宝网
以橘红色调为主的淘宝网色彩鲜艳醒目,给人一种积极乐观的感觉,富有很强的视觉冲击力。在淘宝网的商家店铺中,大部分区域的线框和按钮的色彩均为橘红色,能够使人感觉温暖、幸福和甜蜜,从而拉近买卖双方的距离,如右图所示。
天猫商城
以大红色调为主的天猫商城给人视觉上强烈的震撼,通过与黑色搭配,能够体现出一定的品质感,与天猫商品的商家性质一致。此外,这样的配色能够给观者一定程度上的振奋之感。
2.唯品会
唯品会是一家“专门做特卖的网站”,每天上新品,以低至1折的低折扣及充满乐趣的限时抢购模式,为消费者提供一站式优质购物体验。唯品会创立之初,即推崇精致优雅的生活理念,倡导时尚唯美的生活格调,主张有品位的生活态度,致力于提升中国乃至全球消费者的时尚品位。唯品会销售的商品均为注册品牌商品,并且针对的客户主要是女性消费者,因此在色彩上更倾向于女性喜爱的玫红色,其网站首页如右图所示。
唯品会
以玫红色为主的唯品会网页配色的效果,可以突出其典雅和明快的感受,能够制造出热门而活泼的效果,更容易被女性顾客接受。唯品会中使用的玫红色,又称为玫瑰红,而玫瑰是美丽和浪漫的化身,与唯品会推崇精致典雅的生活理念、倡导时尚唯美的思想格调一致,这样能够有效地表现出该电商的特点。
3.京东商城
京东(JD.com)是中国最大的自营式电商企业,2015年第一季度在中国自营式B2C电商市场的占有率为56.3%。目前,京东集团旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部。
京东的Logo是一只名为Joy的金属狗,是京东官方的吉祥物。京东商城官方对金属狗吉祥物的诠释是对主人忠诚,拥有正直的品行和快速的奔跑速度,其网站首页如下图所示。
手机京东Logo
网页京东Logo
京东的Logo主要以金属色的狗与大红色为主,表现出热情和朝气蓬勃的情感,与网页中的配色高度一致,如右图所示。
京东商城
京东的主色调为大红色,与天猫商城的配色类似,都是通过暖色调来表现热情、胜利和欣欣向荣的视觉氛围,能够为顾客营造出愉悦的购物氛围。
4.当当网
当当网是综合性的网上购物中心,致力于为消费者提供更多选择、更低价格、更为便捷的一站式购物体验,包括服装、鞋包、图书、家居、孕婴童等众多品类,支持全网比价、货到付款和上门退换货。
当当网的网页配色与他电商相同,都是与Logo的配色一致,主要使用了绿色与橘红色,这两种色彩互补,并且纯度较高,给人以强烈的视觉冲击力,有活泼、愉悦的视觉感受,具体配色和界面如右图所示。
当当网
TIPS
从1999年11月正式开通至今,当当网已从早期的网上卖书拓展到销售各品类百货,包括图书音像、美妆、家居、母婴、服装和3C数码等几十个大类,有数百万种商品。物流方面,当当网在全国600个城市实现“11.1全天达”,在1200多个区县实现了次日达,货到付款方面覆盖全国2700个区县。
尤其在图书品类,当当网占据了线上市场份额的50%以上,同时图书领先市场占有率43.5%。当当网的图书订单转化率高达25%,远远高于同行业平均的7%,这意味着每4个人浏览当当网,就会产生一个订单。能做到图书零售第一,当当网的杀手锏有许多,比如全品种上架、退货率最低、给出版社回款最快,也正是依靠这些优势,出版社给当当网的进货折扣也最低,当当网也因此有价格竞争优势。
十几年间,当当网专注图书电商取得雄踞首位的成绩,形成了一种卓尔不凡的能力与特质。而这些要素会提炼成模型,逐步复制到服装、孕婴童和家居家纺等细分市场,其价值将不可限量。
007 如何确定装修风格
无论是实体店还是网店,装修的好坏是重要问题,对能否吸引顾客的眼球、能否突出产品的特色,都是至关重要的。网店装修风格的确定涉及整体运营的思想,所以在确定装修风格之前,需要认真考虑一下自己所销售的产品和本店实际情况,以确定需要突出的重点是哪一点。
如果产品的对象是年轻人,那就要在装修上突出青春活力的特点;如果是主打高档路线,在装修上就要给人一种高贵华丽的感觉。而对于店面的风格设定,就需要每个店家认真地去思考。
008 选择网店整体色调
色调即店面的总体体现,是网店装修大致的色彩效果,能够给人一种一目了然的感觉。不同颜色的网店装修画面都带有不同的色彩倾向,那就是色调。色调的表现在于给人一种整体的感觉,或突出青春活力,或突出专业销售,或突出童真活泼等,如下图所示。
某网店首页展示
如何选择和确定网店装修的色调呢?我们可以从店铺中销量最好的产品的色彩入手,或者根据店铺装修确定的关键词入手,比如确定网店装修的风格为女装时尚,那么我们就可以选择粉红色、白色等一些明度和纯度较低的色彩来对装修的图片进行配色。红色常用来作为网店首页的背景色,也就是整个画面的色调倾向,它是根据首页陈列的商品色彩进行提炼而得到的。
通过前面的描述,可以知道色调的表现方式主要体现在颜色的选择上面。因为不同的色调肯定有着不同的情感含义,所以对于自己的店面应该如何选择颜色才能真正体现出自己产品的特点和营销的特色,这个问题是需要店家或者设计师考虑的,店家或者设计师可以根据店铺的营销风格,去搭配自己认为应该选择的店面整体色调。
009 设计详情页面橱窗照
通常当我们进入一个店铺,都是因为对单个商品感兴趣,而单个商品在众多搜索出来的商品中都是以主图展示的,也就是用橱窗照的形式进行展示的。
商品主图是用来展现产品最真实的一面的,并不是用来罗列店铺的所有活动的。但是,有些店家为了将店铺中的信息最大化地传递出去,将橱窗照的作用理解错误,在橱窗照除了商品图像以外的空隙里添加了“最后一天”“马上涨价”等众多的信息,主次不分,给买家一种凌乱的感觉,不能够体现出网店的专业性。这样在店面首页上呈现出来的效果是不统一的,会直接影响到店铺的整体美观并间接地影响了顾客在店面的停留时间。详情页面橱窗照如下图所示。
详情页面橱窗照
在橱窗照的背景上可以使用明亮的、色调和谐的图片,将抠取的商品与背景合并在同一个画面中,再添加上简单的文字和价格,通过色彩上的搭配体现出淡雅的感觉,表现出一定的品质感,让顾客能够一眼看到商品的外形和相关的信息。
在橱窗照上只需要突出自己的产品或者是营销的一个点就行了,不要加太多凌乱的信息,顾客买东西是冲着产品去的,而不是冲着“仅此一天”“本店大甩卖”这些附属的信息去逛店铺的,当然,要设置限时购买等促销内容,可以在商品详情页面中设计,尽量不要在体现商品形象的橱窗照中添加此类信息。
010 网店中各个模块的合理布局
在网店装修的过程中,各个模块的布局也是影响装修风格的一个重要因素,各个模块的搭配要统一、简洁。
在为自己的店面做出装修风格设定后,模块之间的相互搭配和组合也是需要认真设计的,没有顺序的模块叠加,只会给广大买家一个很凌乱的感觉,出现这样的情况将会流失很多的顾客。各个模块的布局如右图所示。
各个模块的合理布局
在该区域中使用了阶梯式的方式来对商品进行逐层显示,通过由大到小、由上至下的方式来丰富商品的内容,让页面的布局更加灵活,具有一定的韵律感,并通过风格一致的标题栏对每组商品分类,用鲜艳的文字来展示商品的信息,清晰地表现出商品的形象。
简洁大方的店面可以让广大买家在店铺浏览的时间延长。而对于如何搭配才是最好的,可以参考那些很成功的、较大店家的装修布局以借鉴一些经验。从网店的总体上来讲,模块的整合要简洁明了,突出重点,形成一种视觉冲击,这也就是常常所说的视觉营销。
011 热销商品页面设计理念
皇冠级卖家在网上交易中发挥着巨大的力量,从他们的商品主页中,可以找到许多持久运营的秘籍,如下图所示。
商品主页
012 页面设计需要生动有趣
在网店的页面设计中,与短页面相比,长页面虽然可以显示很多的商品,但同时也会给顾客一种厌倦的感觉。
为了让顾客在购物的过程中保持一种新鲜感,我们可以从结构上展示商品与搭配商品的各种照片,与顾客不断地进行互动。再在自己店铺中使用顾客所喜欢的语言描述和顾客想看的图片,这样可以使顾客愉快地下拉滚动条。如右图所示。
网店页面设计
013 自然引导顾客购买搭配商品
在购物的时候,大家可能都有这样的经历:购买了一件商品还想要找到和这件商品搭配的附属品,比如买件衣服还想买条搭配的裤子,然后就逐个地去搜索,既浪费时间还一定不能省钱。
现在,购买搭配组合商品,能够帮助买家一次性解决问题,省事、省时、省钱,也就是所谓的“三省”。
014 通过图片了解商品实际大小
在淘宝网上,我们经常看到很多服装类卖家用真人模特拍摄的方式,它能够更好地展示商品的线条和样式,甚至是商品的质感,而且还可以使买家通过图片了解商品的实际大小。在挑选模特的时候要注意模特气质是否适合衣服类型,不能随便找个模特就完成所有上架宝贝的拍摄工作,这样会影响到部分服装的整体效果,如右图所示。
真人模特拍摄
015 详细准确介绍商品信息
在网店中做买卖,最主要的是如何把自己的商品信息准确地传递给顾客。图片所传递的只是商品的样式和颜色的信息,对于性能、材料和售后服务,买家一概不知,所以这些需要通过相应的文字描述来告诉买家。
详细准确介绍商品信息
在网络购物,商品描述是影响买家是否购买的一个重要因素,很多卖家也会在商品描述上花费大量的心思,但也有些卖家经过一段时间就会发现花费大量的心思也没什么效果,用户的转化率还是不高,原因是什么呢?主要原因还是商品描述不够详细。吗,卖家在介绍商品时,各方面的参数都要详细准确,为顾客提供商品的详细信息,以方便顾客更准确地确定自己的需求,上图所示为详细准确的商品信息介绍。
016 分享购买者的经验
淘宝网会员在使用支付宝服务成功完成每一笔交易后,双方均有权为对方交易的情况作一个评价,这个评价也称为信用评价。促成成交的重要因素是有个良好的信用评价和口碑。已经购买过的顾客的评论对正在犹豫是否购买商品的顾客起到决定性作用。因为一般商家所提供的商品信息的宣传性太强,而顾客留下的评论却比较真实,如右边图所示。
不同类商品的评价
017 相关证书的展示
如果是销售功能性商品,商家就可以展示能够证明自己技术实力的资料,或者如实展示顾客所关心的商品制作过程,这些都是提高商家可信度的方法。如果电视、报纸等新闻媒体曾有相关报道,那么收集这些资料展示给顾客看,也是提高顾客购买倾向的好方法。如右图所示。
微波炉证书
018 网店装修中的六大误区
在网上可以看到很多卖家的店铺装修得很漂亮,有些卖家甚至找专业人士装修店铺。在面对各种各样的店铺装修中稍微一不小心就会进入装修的误区,下面介绍网店装修过程中常常见到的六大误区。
1.店铺名称
有的淘宝店铺名称过于简洁,有的掌柜相信简单就是一种美,店名设计就两三个字,殊不知淘宝网给店铺掌柜30个字的编辑限度很是重要的,例如笔者的店铺是做手机营业厅的,刚开始的名字是“通信在我家”,可是买家在搜索店铺关键词的时候,搜索“手机”或“手机卡”都是找不到的。相信很多人会利用搜索店铺这个方法来对宝贝进行搜索,因此大家对于店铺名称一定要充分利用这30个字。
2.图片展示
有些店铺的首页装修中,店招、公告以及栏目分类等,全部都是使用图片,而且这些图片都很大。虽然图片会代表店铺的整体,但是却会使得买家的浏阅速度很慢,导致买家在查看店铺的栏目时分辨很久都找不到,或者是重要的公告也没看到,这样就会让买家失去等待的耐心,从而造成顾客的流失。
3.背景音乐
背景音乐基本上都是MP3格式的,容量一般都在几MB,有些加载起来速度还是很慢的;有的背景音乐是在浏览宝贝的时候重复播放的,这一点相信很多顾客都会感到厌烦。为了贴近大众并提高网页打开速度,建议不要添加背景音乐,如果一定要添加,建议在醒目的地方提醒买家按【Esc】键就能取消播放。
4.店铺风格
有些卖家把店铺的色彩搭配得鲜艳亮丽,将界面做成五彩缤纷的效果。色彩搭配及产品突出性方面体现在淘宝网给店铺掌柜提供了几种不同店铺的颜色风格,无论商家选择的是哪一种产品风格,图片的基本色调与公告的字体颜色最好与之对应,这样装修出来的店铺整体效果和谐统一。另外,签名档是一个很好的广告,应合理利用,重点突出自己的产品特点,统一自己的店铺风格。
5.页面布局
店铺装修的页面布局设计切忌繁杂,不要把店铺设计成门户类网站。虽然把店铺做成大网站看上去显得比较有气势,表面上看着店铺很有实力,但却影响了买家的使用,不合理或者复杂的布局设计会让人眼花缭乱。所以,不是所有可装修的地方都要装修或者必须装修,局部区域不装修反而效果更好。总而言之,要让买家进入店铺首页或者商品详情页面以后,就能顺利找到自己想要的商品信息,从而快捷地获取商品的详情。
6.商品图片水印尺寸
商家为了避免图片侵权的情况出现,通常都会在商品图片上添加自己店铺的水印,但是如果不能准确地把握水印的尺寸大小,就会削弱商品的表现,出现喧宾夺主的情况。如果图片水印是长条水印或者其他的形状,可以在Photoshop中修改。