网页设计中，banner应该是最耗时间的模块了，很多学员都比较头疼这一块，其实没有大家想象的那么难，看下面一幅图，你看到了什么？上图就是典型的网页banner，从图中，我们看到了产品（鞋子）、文案（勇攀高峰等）、背景（山、天、树、石等），其实百分之八九十的banner就包括这三个方面，我们简单概括为三步骤：搭背景、输文案、放产品。接下来，我们从这三个步骤分别分析其中的易错点。一、搭背景1、 搭背景-合成细节先来对比以下两款banner（只看背景部分）。问题1：图一搜索的素材有平视有仰视比较错乱，图二透视关系是对的；问题2：图一明度从左到右一致，图二明暗关系有层次；问题3：图一色系太多显得有点花，图二配色会比较舒服。综上，搭背景要注意合成细节，要看起来像是一整幅画那么和谐，而不是硬生生的拼凑到一起，要二次处理，主要体现在视角、明暗和色调。2、 搭背景-是否抢镜先来对比以下两款banner（只看背景部分）。问题1：图一素材占比重比较大，抢文案的镜，图二背景稍显利索；问题2：图一金币的种类比较杂乱，图二相对单一；问题3：图一素材铺的特别满，图二能够给画面留一些空隙，疏密合适。综上，搭背景要注意不要抢产品和文案的镜，banner的主角是文案和产品，背景只是陪衬，所以不能抢镜，主要体现在太花、太乱和太满。3、 搭背景-有无层次先来对比以下两款banner（只看背景部分）。问题1：图一只有宽度高度而没有厚度，图二有远近透视，让画面有了厚度；问题2：图一背景铺的微微的渐变，图二有虚实明暗大小远近的层次关系。综上，搭背景要注意有层次，让画面不止有宽度和高度，还要有厚度，主要体现在三维概念和明暗虚实。二、输文案1、 输文案-整体整齐先来对比以下两款banner（只看文案部分）。问题1：图一有水平、有倾斜有些许乱，图二整体左右对齐。综上，输文案要注意整体整齐，注意不是每一句话都对齐，只要整体整齐就足矣，这样才显得利索。这个最简单了，无非就是左对齐、右对齐、居中对齐、两端对齐。2、 输文案-紧凑清晰先来对比以下两款banner（只看文案部分）。0问题1：图一文案放的满画面都是，图二文案放的比较紧凑集中；问题2：图一文字有部分看不清，图二清晰明了。综上，输文案要注意紧凑清晰，在这个快节奏的社会里，文案要遵循扫描式阅读，让用户一眼就能抓取到信息，主要体现在不满屏放、文字识别度要高。3、 输文案-是否有主次先来对比以下两款banner（只看文案部分）。问题1：图一字号一致，没有主次，图二有明显的主次关系；问题2：图一文案普通，没有创意，图二有文案创意，比较新颖。综上，输文案要注意主次，只有体现出主次，才能有懒人阅读法的作用，如果让人印象深刻，主文案最好有文案创意，主要体现在字号、颜色、文案创意。三、放产品1、 放产品-是否精修先来对比以下两款banner（只看产品部分）。问题1：图一产品在画面中比较飘，图二产品在背景图上比较稳；问题2：图一产品色调有点暗淡不像新品，图二比较清亮吸引人。综上，产品要注意精修，不能止于抠图，要把拍出来的产品精修出高大上的感觉，让产品在画面中很协调，主要体现在立体性、光影的变化。2、 放产品-是否高清先来对比以下两款banner（只看产品部分）。问题1：图一模特图比较模糊，图二产品比较清晰。综上，产品一定要注意高清，想必不做设计的人员也不会喜欢模糊的图，所以这是最基本最简单的，主要体现在不模糊、不水印、不变形。3、 放产品-是否融入画面先来对比以下两款banner（只看产品部分）。问题1：图一产品与模特跟背景不融合，图二比较协调；问题2：图一产品识别度不高，图二产品清晰可见；问题3：图一产品大小比重比较低，不能够引起用户的注意，图二产品比例合理。综上，产品要注意与背景的融合度，不能各自为营，互不干涉，要融为一体，在一块合情合理，主要体现在色调、大小、比例和前后层次。通过以上的讲解，相信大家也会觉得banner其实并不难，跟套公式一样，每项注意就可以，我们来总结一下：第一：搭背景，注意合成细节、是否抢镜、层次感第二：输文案，注意整体整齐、紧凑清晰、有主次第三：放产品，注意是否精修、是否高清、融合度以上是上海非凡进修学院Web网页设计张老师的总结，希望能帮助大家设计出既有效率又有质量的网页banner。