【www.guakaob.com--网校课程】
今天本来只想讲详情页设计优化的,我突然临时想到主图也蛮重要的,而且直通车图也是蛮重要的一点,所以课程我临时拓宽了一点,加上了图片优化方面的东西,就希望大家可以多学一点。因为我也是卖家,直通车烧下去的都是钱,点击率高一点,点击单价下去了,转化率上来了,那么相对地,赚到钱,大家都可以过个好年。虽然不可能因为一节课直接变得满盘金砵,但是慢慢地改变,我们还是要的。
我记得以往直通车车友会大家都在交流一点,就是说:大家在烧车的时候,一定要注意提升转化率,把详情页做好。常常是就这么一句话,没有下文了,导致很多卖家都不知道怎么去优化详情页,左思右想的,想不出方法。或者有的时候照着人家的详情页去抄一个,抄了后,发现换了一个季节,换了一个东西后,又不能满足所需求的转化率了。种种的问题就慢慢的出来,今天这节课是以主图为辅,详情页为主,把理论和实战都给大家讲到,希望大家在接受理论后再去看实战的时候,能够看得更清更透。
接下来我开始讲今天的课程。通常我们在做转化率的时候,大家都没有过于关注自己的产品是怎么卖出去的,对不对?一般做直通车或宝贝标题的时候,都是从事于热门词或者流量引入,却忽略了精准性,快车的同学对于精准性的把握应该还比较好,就是我们所谓的长尾词。
长尾词的转化率通常是最高的,在做自然搜索也好,直通车也好,前期是以提升产品转化率来达到一定的销量,10几件,20件,先出一点点评价。如在做女装、男装这些,需要一定的销量基础出现。买家搜索得最多的还是发出意向关键词,我们来看一下转化流程:买家发出意向关键词,大家可以发现一些长的关键词转化比较高,比如“羽绒服 女 中长款 欧美”肯定是比“羽绒服”“羽绒服 女”这样的关键词转化要高一些。我们在做主图或者做详情页的时候,也要根据精准性勾引买家点击,根据精准性用详情页催眠引导买家购物。即:精准关键词——精准主图——精准详情页——最大化成交。基本的理论就是这么多,实战会在后面。
像我们在设置主图的时候,要怎么样精准呢?
我举个例子,有的买家的购买意向是大毛领的羽绒服或者多功能电饭煲。那么当买家去搜索这样的关键字的时候,我们怎么样的主图会让买家的点击率达到最大呢?比如,他搜索大毛领的羽绒服的时候,你的羽绒服的拍摄照片直接有一个大毛领出现在上面,或者你的主图上拥有的文案出现了大毛领这3个字,那么这一类的图片往往是最容易勾引起买家兴趣去点击的。像多功能的电饭煲也一样,你在主图上写上“9种功能”“一煲多用”像这一类的就能很直接地引起买家点击欲望。
在我们知识里面叫做“勾引点击”。如果说你单纯一张纯色图片放在那边的话,那么你的勾引力会非常低。这一类的点击尤其是适用在功能性产品上,比如说像手机、电饭煲、电脑一类的标品,或者说化妆品,一个化妆品它有多种功效,比如祛痘,快速祛痘、强力祛痘这一类的文案加上去后,它都能精准勾引买家点击,所以说在做直通车主图的时候,大家都可以去考虑拥有一些精准性的文案,而不是单一地说出自己的价格,比如说29包邮、39包邮,并不是单单把自己的价格表现出来就好。因为通常我们的精准性是去挖掘买家需求以后,再通过他的需求点去做出这个精准性。需求点会在后面讲到。
首先大家要端正一个心态,不管在做详情页也好,或者选款定义的时候,通常大家都会站在卖家角度去思考问题,这边有谁是在选产品、详情页排版、主图的时候,是站在买家角度的吗?大家站在买家角度的时候,在做详情页或者买家分析的时候有没有在分析?
比如你在做一件羽绒服,你有没有想过,买家为什么要买这件羽绒服,这件羽绒服的买点在哪里?这些可能是大家比较容易忽略或者分析不多的。那么我这里举个例子,一个女性买家为什么要买你这件羽绒服呢?她没衣服穿了,需要保暖,这是最基本的诉求。除了最基本的诉求外,你觉得这件羽绒服否应该好看,是不是应该是2013年最新款,是否该修身,是否该搭配她的裤子也很好看。这些买家关注的点,你们是否有想到?还是只是考虑这件衣服只要穿着就好了。
在卖家里面,男女卖家都是各占一半的,我相信比较喜欢开车的卖家通常都是男性卖家,喜欢往前冲,当你们从一个男性角度去卖女性产品的时候,你们需要注意的一点是:抛弃自己身为一个男性的眼光,去站在女性角度仔细分析买家的需求点。甚至于在进行产品销售、分析一个词语之前,你也先知道:通过搜索“羽绒服 女 中长款”这个词进来的人,它究竟有多少是女的,多少是男的,连这个人群比例你们都要抓到。这个人群比例我们要怎么去抓呢?人群分析可以去shu.taobao.com,如下:
用这个淘宝指数的网站时,我们会发现当我们输入一个精准长尾词以后可以看到很多的人群分析,如性别比例、年龄占比,通过这个年龄占比,我们可以知道买我们产品的人究竟是多少岁,这是非常重要的一点。因为你可能知道买你东西的人是女的,但是你不知道这个女的是多少岁,那就完蛋了。比如20岁的女的和30、40岁的女的都是不一样的,20岁的女人更偏向于时尚,30岁的更偏向于品质与时尚,40岁的比较偏向于气质、实用、实惠。各个人群都是不同的,所以说我们在卖我们东西之前,先要知道买家。就像线下在销售产品的时候都是一样的,首先要知道买家心里在想什么,然后在做详情页主图的时候去迎合他们内心所想的一些内容和他们的点击点、购买点,通过清晰分析这些购买点的时候,那么你在做详情页的时候就会有据可依,从而达到最大的转化率。
这里我给大家分析一下女性买家和男性买家。我假设一样产品,如羽绒服 女,那么“羽绒服 女 中长款 欧美”这个词通过淘宝指数查询可以知道它的购买年龄层是25~34岁左右,而且是女性买家居多(大家可以自己类目转化率最高的长尾词放到:搜索一下,看看人群是哪一些)先把人群得出来,再来分析这款产品的买点究竟在哪里,也就是说这个女人看到你的详情页以后究竟要看到什么东西才会对你这个产品产生购买。
第一点:硬性需求,需要一款羽绒服过年的时候穿,快到年底了,买新衣服过年穿。像现在的详情页,如果有哪一些卖家彻底抓住了这种心态的话,比如喜庆啊,大吉大利啊,辞旧迎新啊这一类的词语出现的话,他们的详情页转化率会好一些。
第二点:喜庆、穿得人精神,颜色喜庆并一定要红色,一些跳跃的颜色也蛮不错的,比如说粉色这类女孩子喜欢的。
第三点:穿着修身、不显胖,这个也是购买点,还可以想到更多的内容,比如羽绒的料一定要好的,绒要标准的90绒等。这些点才购成了买家购买羽绒服的需求点。其它类目的同学自己可以发散思维,比如一双鞋子,必须要让小腿显得修身;鞋子必须要衬托他的裤子,要让裤子百搭等。
回过头来再看看自己的详情页,当你提炼出这个年龄段买家的硬性需求以后,你们的详情页里边是否有这么多内容去解决他们的疑问。而不是说你的详情页或者主图上面都没有这些内容的表现。比如主图单单是一张图片,上面并没有写:穿着修身的羽绒服、最显瘦的羽绒服、最百搭的羽绒服等重要的文案构成,重要的图片素材,如产品卖点也没有做。
买家通常只能看到详情页里的图片,你的详情页没办法带着他去幻想这件衣服穿在身上暖不暖和,这件衣服穿在身上以后会不会让他看起来很瘦很苗条。这些内容你想一下到底有没有,如果没有这些在上面的话,那么我可以肯定地告诉你,你详情页的转化绝对是非常非常低的。像300块钱的衣服,你可能只有百分之零点几的转化率,可能连这个数都没有,非常地惨。那么像一些0销量的新款的话,如果详情页只有图片的话,直接就完蛋了。淘宝上现在10亿的产品里面,几乎80%~90%的产品都是0销量,那么你的商品就会沉寂在这里面,然后靠着直通车引那么一点点流量进来,但是这一点点流量引进来却看到你是0销量的,产品都介绍不完全的页面,那就直接跳失掉了,那么就是烧了钱又没卖出去东西,非常痛苦。
所以说我们的第一步通常是要想,买家需要看到什么?当他们需要看到的东西,我们在页面上一步步地展现出来以后,我们再添加一些,今天买走这件衣服时必须的一个选择去催眠引导他去购物的话。这样子你的转化率才能做到最大。
那么第一个干货就是分析你的人群,把人群购买产品的重要点总结出来。
男性买家也是一样的操作步骤,但是男性买家跟女性买家在购物重要点上会有一些区别,男性买家通常对于产品的品质非常看重,除非你是卖18~20多岁的男性休闲装的,这些男生这个年纪除了富二代的,又不是很多钱,刚刚上班,一个月拿个两三千工资,还要谈恋爱,他们买的东西会比较便宜。但是一过了这个年龄段,工资稍微高一些,那么每一个男性对于自己的产品品质都是非常看重的。所以在分析男性产品的时候,着重要分析产品品质、质量、正品,在详情页里把这几点拉出来放在最前面是绝对没有问题的。
另外一个内容,比如童装、妈妈装,属于非本人使用产品。像童装的话,都是孩子的爸妈在买。孩子的爸爸妈妈在购买产品的时候,他们的眼光点就不同了。这一类的买家在分析的时候,我们叫做感性分析,比如说对孩子的爱,对自己父母的孝顺,我们会把买家购买产品的买点放到这上面来。比如说一个买家给孩子买衣服,他的硬性需求叫什么呢?
第一点就会变成产品必须是安全的,你的产品但凡是布料不好,孩子穿在身上起了点疙瘩,他能心疼死。或许他以前买过一些不良商家的那种硫超标、碱性超标这类的给孩子皮肤搞红了,过敏了这些问题都有可能碰到。所以说在非本人使用的产品,第一点通常是产品必须安全。
第二点是不影响使用效果,什么意思呢?比如说这件衣服穿在身上以后,尽量能多穿一些时间,然后买回去以后不合适能有一个好的承诺,能愿意退换,孩子长得比嘛。这一类大家可以自己去提炼一下,如一些食品,我们在提炼需求点的时候,像保质期、产地,是不是绿色产品这一类都是买家关注的点,这些关注点大家要多去挖掘,挖掘出来以后对于大家做详情页有很多好处。
如何挖掘买点?
1、把自己当成买家,你今天不知道你的蜂蜜该做哪些买点,不知道你的女装该做哪些买点,不知道你的玩具该做哪些买点,这里教你一个方法,你去线下的店里或者超市里去看一下,你买这个产品的时候,你到底会想到什么呢?你在买蜂蜜的时候,你现在坐在那里干想就想蜂蜜要好吃、要营养,你只能想到两个,但是你到线下以后,你会看保质期,会想这个蜂蜜有没有兑水,有没有加其它东西的,我什么时候能喝呢?你买蜂蜜的时候,你总会有一段要喝的时候。比如早上去厕所解不出来,听说喝蜂蜜可以通便,听说蜂蜜加柠檬汁可以减肥等等。这时候,你对蜂蜜的硬性需求你就能慢慢抓出来了。
卖玩具的,说我不知道玩具怎么卖好,那么你可以带着孩子去,像你自己在卖的,比如一个毛绒玩具,这个玩具到底掉不掉毛?我孩子才一两岁大,要是孩子咬这个玩具的毛,毛掉下来,呛到孩子鼻子怎么办?第一个毛绒玩具不许掉毛出来了;第二个这个毛绒玩具有没有毒?孩子要是去咬它呢?第二点毛绒玩具要无毒;第三个这个毛绒玩具好不好玩,会不会玩腻了,会不会拧两下,头就掉了,第三点又出来了。
所以慢慢地,你自己化身为买家,去提炼这个毛绒玩具的时候,你就会发现,它的所有买点慢慢地就出来了。毛绒玩具不但可以给孩子玩,还可以当成一个礼品去送。总有一些男孩子追女孩子的时候,送一些蒙太奇啊,毛毛熊之类的。这些产品,它所存在的买点都是需要你自己去挖掘,把自己变成一个买家。
总结一下思维误区:放弃自己的卖家思维,不要用卖家眼光看待一切东西。不管是你的主图也好,详情页也好,天天把自己沉浸在卖家的世界里,看着自己的详情页,觉得图片做得真不错,图片拍得真漂亮。产品是在你自己的手上,没有在买家的手上对不对?如果说这个产品,今天买家在线下看到了,看看摸摸捏捏,他就能看出为这个产品好不好,但是单让他看图片的话,那是没用的。你得用你的文字,你的图片去代入他,去感受这件产品。比如说鞋子,你必须得让你的详情页做出他好像把鞋子正穿在脚上面,他现在正站在鞋子上面看到的腿变长了,你要做到这种效果才是一个成功的详情页。
这个第一点,放弃卖家思维,去提炼出买家的买点,这个是大干货。
在线下做零售、开店的老板是最容易体会到这一点的。为什么呢?你走进nike的店铺里面,人家服务员好的呢,就会跟你说,这是最新的款,这个鞋底是最新科技,跳起来能有一米高,会有这样的解说。前面的鞋头不开胶的,跑起来跟飞一样的。而那些卖得不好的鞋子店呢,他只会跟你说,今天买一送一,好了,没了,这个就是产品的价值区别。你告诉买家产品有多少好的地方,那么买家就会相应地付多少价钱来购买这个东西。你的产品没有很好的地方,那么相应的就只能很痛苦的做促销。
这是第一点:放弃卖家思维,多多地去思考你的买家需要什么,想要在主图里看到你的主图里有什么?这是我们要注意的。
宝贝详情页设计的那些事(主图篇)
如今的淘宝店铺能够在淘宝上站稳脚步,店铺肯定有一两款爆款坐镇的,店铺爆款打造出来的,那么如果维护好爆款,爆款怎么在第一时间吸引到顾客呢?那就和爆款图片息息相关了,下面小编教大家怎么设计爆款吧。
爆款图应具备特点:
1.卖点要明确
看以上图片,这是一个移动电源,它的创意图片突出了电源的薄,是9.5mm,从图片中可以看到店家在设计电源图片的时候把产品最突出的卖点放大化。所以,店家们在做爆款图片设计时,不管宝贝有多少卖点,在视觉上只突出一个卖点就可以了,其他卖点可以成为配角。
2.对比性
如果爆款是一些比较小巧玲珑的产品,那么就需要有一定的对比了,比如是销售红枣的,那么你可以把红枣跟鸡蛋放在一起,这样一对比就知道你的红枣有多大了,有对比就更容易说服顾客购买。
3.图片要有想象力
优秀的爆款图片有给人一个想象的空间,让顾客一看到图片就自己联想后面的东西,想象自己使用了此产品效果是怎么样的。
4.场景化
当卖点明确、有对比性之后,就要考虑到让爆款图片有一定的延续性,必须要让宝贝有在众多宝贝中显得鹤立鸡群,那么就要有一个场景化设计。很多店家的场景化设计都是文字表达的,其实小编建议大家是采用组合的方式,图文展示。
以上就是爆款图片设计技巧了,店铺有爆款的,但是总觉得图片不够吸引顾客的,就赶紧按照以上思路重新设计吧。
本文"淘宝店铺爆款图片设计技巧"为卖家资讯编辑编创,转载请注明出处(本文转载于:卖家资讯http://
淘宝店铺爆款怎么设计?淘宝主图设计技巧
2012年,中国的网民已达到5亿左右,有专家预测网购的规模或达3万亿,如此大的市场规模,引来大量的网上淘金者,许多人开始选择网上开店,而淘宝网则是网店的一个重要集散地。俗话说“七分门楼三分屋”,网店的门面对商品销售有着很大影响。不过,网店装修是个很大的话题,不是一个专题能讲清楚的,所以今天,我们主要针对网店装修中配色方案这一问题展开。
所谓配色方案,简单说就是如何将不同的颜色搭配到一起,起到一种和谐的或者有视觉冲击力的效果。生活中,许多MM们常常讨论,什么颜色的上衣搭配什么颜色的裙子,配什么颜色的包包,戴什么颜色的项链或手链,才会好看,这其实就是在讨论配色方案了。
配色方案主要有两种方式,一是通过色彩的色相、明度、纯度的对比来控制视觉刺激,达到配色的效果;另一种是通过心理层面感观传达,间接性地改变颜色,从而达到配色的效果。 虽然本专题是针对淘宝网店的,但实际上配色方法与原理有着一定的通用性,这些方法,你同样可以变通应用到其他网店,甚至演讲PPT、图书报告、电子图表,甚至家装、服装等实际工作与生活中。
==============第一页结束===============================
淘宝网店的整体配色方案
谁都可以开店,但是成功的肯定属于用心的人。一个网店的成功包含多方面的因素,网店的装修,色彩的应用,也是比较重要的一环。即使是个人的网店,如果装修华丽,同样能给人产生一个大店铺的感觉,让顾客看得舒心。
1.表里如一的网店风格
网店风格是指网店界面给访客的直观感受,说通俗一点就是个性。就像一个人,喜欢什么样的发型、装扮,喜欢穿什么款式的衣服,乃至说话、行为举止,都在向别人传递着复杂的信息,这些信息给人留下或好或坏的印象。关于网店网格的选择,这里给出一些经验供大家参考。
★统一的外观
不少人以为页面越花哨就越好看,这其实是一个误区,过于花哨的页页只能引起访客的混乱。所以,网店整体颜色,一定要给人统一谐调的感觉。当然统一的外观,并不是说只能用一种颜色,而是指主色调只有一种,在此基础上搭配一些其他颜色。如下面这个网店所示,主色调是绿色,物品图片及一些文字是红色,点缀其间,使得整个页面既统一又不古板。
图1:图一的外观
另外,统一的外观不仅仅指某一个页面,而是包括整个网店的所有页面。否则风格差异太大的话,顾客从一个页面进入另一个页面时,很容易产生进入了不同网店的错觉。当然,除了色彩的统一,其他元素,如店招、导航菜单等,也要统一才行。
★统一色彩搭配的具体方法
明白了统一外观的重要性,那么色彩统一具体要怎么做呢?色彩总的应用原则应该是“总体协调,局部对比”,也就是:页面的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。下面介绍一些常用方法:
单一色彩页面
选择单一色彩,并不表示就毫无变化,可以通过调整透明度或者饱和度,使得单一色彩也深浅有别。如下面的这个网店,主色调(即在页面中占据的面积最大具有主导作用的色彩)是紫色,边框及物品图片上则应用了浅紫色、紫红色等,使得整个页面看起来色彩统一又有层次感。
图2:单一色页面
两种色彩对比
先选定一种色彩,然后选择它的对比色,这个对比色就是第二种颜色。一般来说色彩的对比
强,看起来就有诱惑力,能够起到集中视线的作用。下面的这个网店页面,采用了绿色、红色和蓝色之间的对比,属于最强烈的色相对比,令人感受到一种极强烈的色彩冲突,产生深刻印象。
图3:对比色页面
如何才能找了对比最强列的颜色呢?可用色相环辅助完成,色相环中,180度对立的两种色彩,对比是最强烈的,这个角度范围内,角度越大的两种颜色,对比越强,反之就越弱。
图4:色相环
还有一种方法就是使用邻近色彩搭配。邻近色彩既不是同一色彩但是又非常接近的,在色相环上角度较小的一系列色彩,它的效果与单一色彩相似,但是要丰富得多。总之,在配色过程中,无论用几种颜色来组合,首先要考虑用什么颜色作为主色调,如果各种颜色面积平均
分配,色彩之间互相排斥,就会显得凌乱。
2.页面整体布局与创意分析
如何定出网店的主色调?如何设计配色?这些需要根据所卖产品的客户群体来定,也可以根据产品特点来定。
我们看看下面这家包包的店铺,它的装修风格唯美精致。由于店铺首页内容比较丰富,截图特别长,因此我们分为两张截图
图5:包包网店首页上部
图6:包包网店首页下部
整个店铺的划分比较有条理,这里先对店铺首页的上半部分作分析,这部分是店铺非常重要
绿色在黄色和蓝色(冷暖)之间,属于较中庸的颜色,这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春
绿色在黄色和蓝色(冷暖)之间,属于较中庸的颜色,这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。
绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息,有缓解眼部疲劳的作用。
它本身具有一定的与自然、健康相关的感觉,所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。
绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。
从上图的主色调、辅色调HSB模式的数值可看出,这两中颜色只是在明度上有区别,其显示的色相与饱和度是一样的。正绿色是120度,这两种颜色从RGB数值上看,都不同程度的混合了其他少许颜色,因此离正绿色稍有些偏差。由于绿色本身的特性,所以整个网页看起来很安稳舒适。
辅助色只在明度上降低,让页面多了些层次感、空间感。
白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。
点睛色恰到好处的体现出了”点睛”这一妙笔,极尽诱惑力,整个页面顿时生动提神起来,增强了页面主题的表达力。
主、辅色调是属于同类色绿色系,通过不同明度的变化,能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断,可能会有些朋友凭经验判断,容易误认为这两种颜色除了明度外有可能纯度会有所不同,这时候适当的使用数值模式会很容易得到正确的结论的。
整个页面配色很少:最大色块的翠绿,第二面积的白色,第三面积的深绿色,但得到的效果却是强烈的、显眼的,达到充分展现产品主题的目的。
深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受。
绿色在黄色和蓝色(冷暖)之间,属于较中庸的颜色,这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春
绿色系分析: (高纯度配色:绿色对比色组合)
HSB数值H显示60度为正黄色,该主、辅色调只向绿色倾斜了一丁点–H为75度。大面积明度稍低的黄绿色为主要色调,饱和度却非常高,达到了100%,辅助色使用了提高明度的嫩绿色和白色,这两种辅色除了增加页面的层次感的同时,还能让整个页面配色有透亮的感觉,增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。
该页面有两组小小的对比色,一组是黄绿与橙红色,一组是橙黄色与天蓝色,这两组配色严格的来说不算对比色,因为色彩多少有些偏差。虽然它们的饱和度降低,但在这个页面中足以构成了最响亮的色调,把整个页面烘托得非常活跃、鲜明。
主、辅色调黄绿色大面积使用并不刺目,反而使得页面看起来很有朝气、活力。
适当运用不同纯度的不是相当严格意义上的对比色系组合时,通常能起到的主要作用是主次关系明确。不”标准”的对比色系对比特性虽然减弱,页面色彩看起来容易协调、柔和,但一样能突出主题。→ 同类色浅
绿色系分析:(同类色浅绿色)
主色调绿色属性是明度很高的浅绿色,前面提到过,通常情况下明度高饱和度就降低,饱和度低页面色彩度就降低,除非颜色本身有自己的特性,加上大面积的辅助色白色,整个页面看起来很清淡、柔和、宁静,甚至有温馨的感觉。
页面中使用了渐变的浅绿色,使得整个页面视觉上更加柔和舒适。
尽管点睛色只在主要标志上出现,按钮也只有少许一点,但也给整个页面的色彩带来些亮笔。尤其是红色的HSB模式的H数值显示颜色接近于正红色,饱和度达到最高值。另一个点睛色中黄色,在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上,黄色正是在绿色和红色之间的过渡色。
结论:
浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。
渐变的效果更能加深这种印象。但页面配色上浅色过多时,整个页面容易呈现发”灰”的感受,这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块,适当的鲜艳的点睛都能很好的解决这一问题。
布局:
症状描述:在ie下(6或7,8没有试过)当出现中英文混排,都采用默认字体时,并使用 li 列表做float时,会出现如上图的症状,文字排列上下不对齐的情况。影响了布局的美观性,造成上图情况的原因是中英文的文字基线不同,arial字体的下边缘要比宋体(同为12号)低一个象素,上边缘比宋体矮两个象素,而且英文还有i,y这种上下基线不同的情况。所以当中英文混排对齐时,就会出现明显的高度差异,使排版不均。可见放大图。
采用中英文字均使用宋体的方案
可以解决文字排列不对齐的情况,但宋体英文字是衬线字体(Times New Roman即是英文中的衬线字),字型紧凑,细节较多,排列在一起很醒目,但在连续成文时,容易造成辨识困绕,看错行的情况。关于衬线字体的优缺点,请见这篇文章。相比之下,表示英文还是使用无衬线字体更美观大方。【淘宝主图配色】
解决方法一 “饺子”童鞋的发现。
英文采用tahoma字体–宋体,arial及tahoma字体比较–arial与tahoma的无衬线体比较精致【淘宝主图配色】
当中英文混排时,使用tahoma字体的情形
中英混排,纯中文组合的行高都一致了,但a在hover状态下下划线与中文粘联在一起。 缺陷:使用tahoma字体时,在ie6及ie6以下版本,会导致所有中文字体链接的下划线会出现与字体粘连现象。淘宝使用的也是这一解决方案。相信大型项目,不同的人来共同完成一个页面的模块时,在统一的规范下,使字体更规范,减少错位,而采用带有下划线会出现与字体粘连的tahoma字体,是值得的
以下是携同大米童鞋发现的:
英文采用arial字体,中文使用宋体。可在<a>标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。(不知道大范围中英文混排适不适用,有待后续校验。)
CSS混沌初开I:导航菜单素材的设计
现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个部分:第一讲主要是关于如何在PS中制作导航按钮素材;第二部分主要针对的内容是背景,接着是页面的整体布局以及顶部解析,最后一部分是如何整合CSS和XHTML。
有些人可能会疑惑为什么要从导航按钮图片的制作开始,事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理,这对最终的作品效果有很大的影响,至少在视觉上而言。首先看一下完成的效果:
玻璃质感导航图片的制作:
首先我们在Photoshop中建立一个178x22像素的RGB空白文档,添加一个新图层命名为“按钮”,并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”,在其上、左边缘各绘制1px的白色线条,你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段,在这里我使用的是大小20px透明度为50%的橡皮刷:【淘宝主图配色】
新建一个名为“网点”的图层,用1px的铅笔工具在适当的位置绘制几个小点,示例中的颜色是#727272,当然这里你可以自由发挥设计更有创意的小点组合,关键就是要让它们看起来精致有序:
上一篇:详情页制作的注意事项
下一篇:商品详情页制作中应该注意什么